Conviértete en experto con Elementor Pro Curso de MASTERIZACIÓN: Principiante a avanzado

1. Descripción de la clase: Hola, aspirantes a diseñadores web y freelancers. Soy Pre Meta. Su guía sobre el viaje definitivo y diseño web con Elementor Page Builder, donde desentrañará los secretos del diseño web sin necesidad de codificación En los próximos capítulos, obtendrás la libertad de trabajar desde cualquier lugar como diseñador web independiente. Imagínese dominar el arte de la elaboración de Elementor Pro, visualmente impresionantes y totalmente receptivos Sin código, solo puro poder creativo. Te estás sumergiendo profundamente en las habilidades que te diferencian de los fundamentos a las técnicas avanzadas Cobrarás más por tu trabajo. Crea sitios web optimizados para la velocidad y amados por los visitantes y los motores de búsqueda por igual. Aprende a construir localmente sin dominio y crea menús personalizados para una navegación perfecta. También exploraremos todos los elementos principales y aprovecharemos el poder del elemento, o IA, para acelerar el flujo de trabajo y diseñar sitios web visualmente impresionantes. Este curso es para cualquier persona apasionada por la creación de sitios web sin necesidad de codificación. Ya sea que sueñes con lanzar una agencia de diseño web, iniciar tu negocio, convertirte en freelancer, o si simplemente quieres aprender todo en un curso integral, esta es tu escapada al éxito. Pero eso no es todo. Prepárate para convertirte en un experto en pop up, bloquea docenas de widgets pro elementor y descubre cómo crear sitios impresionantes usando las funciones gratuitas de elementor Gracias por considerar mi curso de maestría elementor pro hay absolutamente ningún conocimiento de codificación necesario, solo una computadora y acceso a internet. Todas las herramientas y software utilizados en este curso son absolutamente gratuitos para comenzar listos para convertir tu pasión en una profesión. Vamos a sumergirnos en el apasionante mundo del diseño web con Elementor Pro 2. Instalación y configuración de WordPress: Uno, bienvenido a este nuevo curso. Estoy tan emocionada de que estés aquí. Este curso, literalmente tiene la capacidad de cambiar tu vida para siempre, como lo ha hecho para mí. Pero hay que completar este curso por completo para ganar su valor sin más preámbulos. Empecemos con esta conferencia. Primero y ante todo, necesitamos instalar Zap y presionar en nuestro sistema local Ahora hay otras formas también de comenzar con la prensa web. Principalmente para comprar un servicio de hosting, ya sea hostinger o sitio ahogarse Hay muchos proveedores de servicios de hosting diferentes, pero no recomiendo que de repente empieces a pagar por ello mientras estás aprendiendo. Sólo porque siempre puedes hacer uso de tu sistema local y hacer que actúe como un servidor web. Entonces eso es lo que vamos a aprender hoy para asegurarnos de que instalamos prensa web en nuestro sistema y practicamos alrededor en nuestro sistema local. Derecha. Como pueden ver, he abierto este Google Chrome y he estado el sitio web oficial de Zam y en la sección de descargas puedo ver diferentes versiones para descargar para el sistema operativo Ahora, dependiendo del tipo de sistema que estés usando actualmente, el proceso de instalación puede ser un poco diferente. Ya que estoy usando un sistema max, el proceso de instalación va a ser un poco complicado en comparación con el proceso de instalación y windows porque windows tiene un sistema de instalación muy aerodinámico y lineal y no se requieren otras cosas adicionales en términos de instalación de windows. Mientras que en el sistema es posible que necesite hacer algunos cambios aquí y allá en términos de permisos o cambiar algunos archivos aquí y allá, pero no se preocupe cuál sea el sistema que esté usando actualmente, no importa porque voy a estar pasando por los pasos mientras le estoy explicando este sistema, voy a estar pasando por los pasos para la instalación en el sistema Max. Pero también te estoy guiando a todos que cuáles son las cosas que necesitas hacer para Windows o de dónde exactamente puedes saltarte el video para comenzar con la próxima conferencia. Ya que estoy usando un Sistema Max, voy a seguir adelante y descargar la última versión del Zap Ahora mismo. Como ya instalé Zap, no lo voy a volver a instalar Ahora Zap, básicamente lo que es, tiene diferentes tipos de servidores y bases de datos como Apache, mi QL, y todos esos diferentes tipos de cosas Y esencialmente hace que su sistema local, su computadora portátil o su computadora personal actúen como un servidor web. Ahora bien, ¿qué es un servidor web? El servidor web no es más que un hardware de computadora. Con el software de computadora, es esencialmente la computadora misma. Pero la diferencia es que acepta TTP y sus variantes como solicitudes STP, como protocolo de transferencia de hipertexto y protocolo de transferencia hipertexto, capa segura, lo que sea que trabajemos con los sitios web y aplicaciones web, enviamos Debes haber visto que cada vez que intentas buscar cualquier sitio web en un navegador, en la sección de URL, en la sección de URL, aunque te estarás dando cuenta de que el nombre de dominio en sí, Pero una vez que haces clic en él, es posible que veas la S o ETP En algunos escenarios donde algunos sitios web no tienen ningún certificado SSL, entonces es posible que veas STP por ahí seguido de dos puntos y doble Entonces eso es lo que básicamente significa básicamente esta solicitud STP. Entonces vas a hacer que tu sistema sea un servidor web, así no significa que tu sistema sea inútil y solo actuará como un servidor web y no podrás hacer otras cosas que solías hacer. Básicamente es solo que te ayudará a resolver solicitudes de sitios web y aplicaciones web. ¿Correcto? Una vez que hayas instalado este Zamp, no tienes que hacer nada más, simplemente haz clic en Siguiente Si estás instalando para Mac, entonces todo lo que necesitas hacer es solo una gota de Dragon y el Zampill se instala en tu sistema Si estás usando Windows, entonces lo que necesitas hacer es que solo necesitas hacer clic en Siguiente, Siguiente, Siguiente, seguido de la ubicación del navegador donde deseas instalar los archivos. Yo recomendaría que instale su Zamp en la unidad C donde reside su sistema operativo Windows, ya que hará que el proceso sea más ágil De lo contrario, a lo que te enfrentarás es que una vez que instales presiona y estás tratando de iniciar sesión en tu sitio web de vestimenta y hacer cambios en tu sitio web, podrías encontrar algunas complicaciones por ahí. Esa es la única razón por la que te recomiendo instalar zap en tu disco Una vez que haya terminado de instalar el zamp, debe ir a las descargas de barra diagonal de Press.org Ahora hay dos sitios web de Wordpress. Oficial. El primero es Tress.org que es la organización Wordpress, y el segundo es WordPress.com Ahora les estoy diciendo a todos que vayan a Tress.org porque van a tener acceso al software acceso al que puedas Para que puedas descargar esto de forma totalmente gratuita, y puedas construir tu propio sitio web desde cero. Qué pasa si vas a WordPress.com Bueno, obtendrás acceso al mismo software de prensa Pero Press por otro lado, va a cobrar algo de dinero adelantado sobre una base de suscripción mensual Sólo para que puedan alojar el sitio web en su servidor. Entonces estás tratando de hacer cambios directamente en el servidor y no en tu sistema local. Entonces esa es la diferencia básica entre Dress.com y WordPress.org Una vez que hayas ido a la sección de descargas de barra diagonal de Dress.org, encontrarás este botón de descarga seguido de la última versión, sea cual sea la prensa que se te haya ocurrido Actualmente, la versión de Wordpress es 6.4 0.2 y eso es lo que he descargado en mi sistema como puedes ver por aquí. Ahora se descargará un archivo zip. Es su responsabilidad extraerlos porque el archivo zip es un archivo comprimido, y el archivo sin comprimir, que tiene todo este tipo de carpetas y archivos diferentes, es una versión sin comprimir y ocupa mucho más Esa es la única razón por la que al hacer clic en el botón de descarga inicialmente, se descarga el archivo zip. Ahora una vez que hayas extraído del archivo zip, te quedarás con esta carpeta y este archivo, y necesitas pegarlo realmente en la carpeta zamp Entonces lo que voy a hacer es simplemente ir a la parte de Aplicaciones. ¿Todo bien? Solo voy a ir a las Aplicaciones, Y como estamos usando Mac, este es el paso que estoy siguiendo. Si estás usando un sistema de ventanas, lo que necesitas hacer es simplemente ir a tu unidad C, navegar por tu carpeta Am, y una vez que encuentres la carpeta zam dentro de esa, definitivamente encontrarás la carpeta ST doc Dentro de la carpeta ST doc, necesitas mover tu carpeta de prensa por aquí. Tan simple como eso, nada más. Básicamente, lo que le estás diciendo al Zam que haga es que Zap tenga todo este tipo de servidores diferentes como ya hablábamos anteriormente, Apache, mi CQL, y todo ese Cuando enciendas esos servidores, reconocerá rápidamente tu sitio web Wordpress. Como vamos a trabajar alrededor de nuestro anfitrión local, nuestro sistema local, queremos que la prensa esté en la ubicación de Tdcs todos Ahora lo que hay que hacer es simplemente ir a la carpeta de prensa, buscar este archivo llamado hyphen config Guión muestra punto archivo Php. Ahora bien, este es un archivo HP. Es necesario hacer algunos cambios en el archivo HP. Ahora no necesitas conocer necesariamente la codificación y el lenguaje HP. Pero hay que hacer pocos cambios dentro este archivo para que se cree una base de datos para su sitio web Wordpress. Simplemente voy a hacer clic en esto y lo abriré con un editor de texto. Todo bien. Ahora, dependiendo del tipo de softwares de edición de texto que tengas en tu sistema, podría ser un código VS o cualquier otro Bloc de notas o cualquier otro software editor de texto Se puede abrir con él. Y luego hasta la parte donde puedes encontrar este nombre de base de datos, usuario de base de datos y contraseña de base de datos, ¿verdad? Db name es básicamente el nombre de tu base de datos, usuario de DB es el nombre de usuario de tu base de datos, y la contraseña de DB es la contraseña de tu base de datos, ¿verdad? Todos y cada uno de los sitios web necesitan algún tipo de datos, y esos datos se almacenarán en formato tabular Y esas tablas, una colección de tablas, formarán una base de datos. Ahora esa base de datos se almacenará en, se puede decir en un SQL o no. Ql base Q es básicamente un lenguaje de consulta estructurado, y ningún Qual es un lenguaje de consulta no estructurado como tu base de datos Mongo Y tenemos diferentes tipos de software de base de datos que utilizamos ya que utiliza una base de datos relacional QL Yo diría que usa mi bien, mi QL en Apache Tenemos que dar nombre para esta base de datos. Estamos utilizando un sitio web de prensa. Daremos este nombre como prensa. El nombre de la base de datos será de prensa y eso es lo que voy a introducir dentro de este solo comas invertidas Se ha dado el nombre para la base de datos, seguido por el usuario de la base de datos, que voy a ingresar como root. Ahora bien, ¿qué significa root? Root es básicamente cuenta en tu sistema local, ya sea que estés usando un sistema max o un sistema Windows o Linux. Raíz permanecerá ahí. Cuenta raíz permite acceder a todos los diferentes tipos de bases de datos. Cuando estás haciendo uso de tu sitio web de Tress, digamos que tienes diferentes tablas de base de datos, tienes pocas imágenes subidas a una base de datos para un sitio web de prensa separado, y tienes un sitio web de prensa separado, un segundo sitio web de Tress donde te gustaría acceder a esos archivos y esas carpetas del sitio web de prensa anterior Accede usando el nombre de usuario root, podrás obtener los datos de diferentes bases de datos Eso es lo que realmente quiere decir el usuario de DB y eso es lo realmente hace la cuenta raíz, seguido de la contraseña. Necesitas mantener la contraseña como vacía, así que no pongas nada dentro de esto. Cuando intentas ingresar la contraseña de DB. No quieres bloquear tu base de datos con contraseña. Desea que la base de datos sea accesible para todos y cada uno de los sitios web. ¿Correcto? Una vez que hayas terminado con esto, solo guarda esto usando el control S, o simplemente puedes ir por aquí y hacer clic en Guardar. ¿Correcto? Voy a cerrar este archivo. Lo que voy a hacer es simplemente hacer una copia de este archivo. Voy a hacer una copia por aquí. Lo que voy a hacer es hacer una copia y la pegaré justo dentro de esta carpeta como pueden ver. ha hecho una copia de este archivo de conflicto, pero voy a quitar la copia y las palabras de muestra de él. Todo lo que me quedaré es guión conflicto punto archivo Php. Eso es lo que queremos. Ahora una vez que hayamos hecho eso, lo que voy a hacer es abrir Amp y Manager SX. Ya que estamos usando este sistema Max, daría click en ManasX Si estás usando un sistema de ventanas, todo lo que necesitas hacer es hacer clic en Zam e iniciar los tres servidores que tienes Simplemente ingresaré la contraseña ya que requiere pocos permisos. Una vez que haya ingresado la contraseña, se abrirá la carpeta Sam. Espera un segundo. Parece que podría haber ingresado una contraseña incorrecta. Todo bien. Ahora esperemos un momento para abrir el Samp Sí. Ahora podemos ir a administrar servidores. Ahora, una vez que vayamos a administrar servidores, podremos ver Pro, Apache Web server y mis bases de datos. Ahora necesitas comenzar todos ellos. Simplemente haga clic en el botón Inicio, Iniciar todo y los tres servidores comenzarán. En algunas situaciones, su FTPD o Mis bases de datos se detienen incluso después de hacer clic en el botón Iniciar todo Sabes que lo que necesitas hacer es simplemente ir al monitor de actividad en tu sistema max, Buscar SCTPD, Q y pro FTPD, y detenerlos todos. ¿Todo bien? Sólo entonces podrás ejecutar todas estas cosas. Ahora vamos a minimizar esto por un momento, ¿de acuerdo? Seguirá corriendo en segundo plano. Lo que vamos a hacer es ir a nuestro Google Chrome. Y voy a hacer clic en una nueva pestaña y buscaré el host local hypun PHP, mi admin. Todo bien. Php, mi admin. Sólo puedo hacer clic en la gota. Bien. Caer básicamente significa que has eliminado esa base de datos y voy a hacer clic en Nueva Prensa y voy a hacer clic en Crear. Todo bien. El nombre de la base de datos llamado como Wordpress ha sido creado dentro de mi sistema host local. No es necesario agregar ningún nombre o número de columnas ni nada por el estilo. Solo necesitas regresar y en tu sección Ural en lugar de HV, mi guión de host local admin, Wordpress es lo que necesitas buscar Todo bien. Dale algo de tiempo. Abrirá esta página y simplemente haga clic en el idioma en el que se sienta cómodo trabajando con su sitio web Wordpress. Ahora, para la mayoría de nosotros sería inglés con la versión de Estados Unidos. Así que sólo voy a hacer clic en Continuar. Voy a establecer el título de mi sitio web Wordpress sea cualquier cosa. Podría ser el nombre de su empresa, el nombre de su cartera, lo que sea que pretenda mantener título de su sitio web ya que puede ingresarlo aquí. Pero por ahora sólo voy a mantener el título del sitio como prensa. Bien, nombre de usuario. Tiene que ser admin. Ahora bien, este nombre de usuario es diferente al nombre de usuario que damos para nuestra base de datos. Para la base de datos, le dimos el nombre de usuario como ruta, lo que significa que esa cuenta tiene acceso a todas las bases de datos diferentes, mientras que este nombre de usuario de administrador es para el acceso de su sitio web particular de Wordpress. Al igual que como tienes diferentes cuentas de Google, tus cuentas de Gmail, ¿verdad? Tienes diferentes nombres de usuario, diferentes ID de correo electrónico para él y diferente contraseña para No es el mismo caso con tu contraseña de teléfono y usuario de teléfono. Espero que entiendas el punto. Entonces aquí le das el nombre como admin. Admin no es necesariamente que necesites mantener tu nombre de usuario como admin, pero lo que básicamente significa es que cuando tienes múltiples nombres de usuario, tienes múltiples accesos a tu sitio web de prensa de trabajo Sí, es posible. En el futuro, digamos que estás entregando este sitio web a un cliente, estás actuando como freelancer, ¿verdad? Y quieres entregar este sitio web a un cliente que luego pueda administrar algunas páginas de publicaciones y subir pocos contenidos de medios de su parte. Entonces quieres darles el acceso del editor pero no el acceso de administrador. acceso de administrador le dará acceso a todos los diferentes enchufes, configuraciones adicionales y básicamente todo el acceso al sitio web. Razón por la que tenemos un nombre de usuario llamado como admin, que tiene el control de todo el sitio web, y luego tenemos diferentes nombres Entonces, si quieres continuar con tu nombre como nombre de usuario, solo recuerda que este es tu acceso de administrador. Eso significa que tienes todo el control del sitio web. Derecha, Seguido de una contraseña. Ahora bien, ¿por qué requerimos una contraseña? Dado que Wordpress es de código abierto, hay muchas posibilidades de que tu sitio web sea pirateado Ahora bien, eso no quiere decir que Wordpress sea inseguro y no se debe seguir adelante con el uso del CMS de Wordpress. No, es absolutamente falso. Pienso que alrededor del 43% de los sitios web de Internet se hacen usando prensa. Si hubiera habido una falla tan grande, entonces no creo que se hubieran construido tantos sitios web usando prensa Pero el único punto de tener una contraseña es que desde que hablé de apenas unos minutos atrás, se puede tener acceso múltiple a este sitio web de Wordpress. Tienes un nombre de usuario y una contraseña. Entonces, si quieres darle a alguien un acceso editorial y quieres conservar el acceso de administrador, necesitas tener un nombre de usuario y una contraseña. Entonces solo voy a dar alguna contraseña y voy a ocultar mi contraseña para que ni siquiera tú sabes, no puedas ver una contraseña que yo use para mi sitio web Wordpress. Simplemente voy a seguir adelante con la contraseña que tengo actualmente. No importa que entre todavía una contraseña de semana. Voy a seguir adelante con alguna contraseña difícil solo para darles a ustedes que esta es la práctica segura a seguir, bien. Bien, esta es mi contraseña segura y nunca marques esta casilla. Esto básicamente nos dice que un motor de búsqueda no verá su sitio web. Si marca esta casilla. Por lo que esto permite desalentar a los motores de búsqueda de indexar este sitio. Y no queremos que eso suceda. Queremos que nuestro sitio web sea reconocido por los motores de búsqueda. Pero no te preocupes. Incluso si haces clic, no hagas clic en esta opción. Los motores de búsqueda actualmente nunca podrán indexar su sitio web porque ese sitio web no está alojado en Internet. Está residiendo en su sistema local y su sistema local está actuando como un servidor web temporalmente mientras realiza cambios en su sitio web. Espero que entiendas el punto. Una vez que hayas hecho todas estas cosas, haré clic en la instalación, pero presionaré el botón. La única razón por la que sigo adelante con todos estos diferentes tipos de detalles particulares es porque no quiero saltarme ninguno de los detalles y no quiero mantenerlos en y no quiero mantenerlos en sombra oscura que solo comienzan con la parte de instalación. Y una vez que hayas hecho eso, sal adelante con el propósito principal del curso. No quiero que eso suceda. Si ustedes están ejecutando algo, asegúrese de aprender todas y cada una de las cosas, lo que sea. Es importante para ti, es importante aprender todos y cada uno de los pedacitos. Ahora están diciendo que debe proporcionar una dirección de correo electrónico. Debo haber faltado al ingresar el correo electrónico. Supongo que anteriormente la opción de correo electrónico era opcional, pero ahora supongo que es importante. Así que vamos a ingresar mi dirección de correo electrónico. Bien, voy a ingresar mi correo electrónico de negocios. Y voy a dar click en instalar, presionar. Bien, así que vamos a darle algo de tiempo. Muy bien, así que la prensa se ha instalado y voy a dar click en iniciar sesión. Ingresaré el nombre de usuario o puedo ingresar mi dirección de correo electrónico. ¿Correcto? Y luego ingresaré la contraseña. Puedo hacer clic en recordar B para que cada vez quiera acceder a este sitio web de prensa alojado en mi servidor local, no tenga que seguir iniciando sesión una y otra vez, y tenga el sitio web de Tress mostrado en su pantalla Ahora bien, esto no quiere decir que hayamos completado todo nuestro paso. No, esto es solo el comienzo. Sí. Para los usuarios de Windows, prácticamente has terminado. Simplemente puedes saltarte esta conferencia a partir de ahora, pero puedes pasar a la siguiente conferencia. Eso es a lo que me refería. Pero para los usuarios de Mac, todavía te quedan algunas cosas por hacer. La única razón por la que a los usuarios de Mac les quedan algunas cosas por hacer es porque Mac tiene diferentes tipos de capas de seguridad y diferentes permisos para todos y cada uno de los archivos de carpeta diferentes tipos de capas de seguridad y diferentes permisos para todos y cada uno de los archivos de carpeta y todo ese tipo de cosas. Esa es la única razón por la que tenemos que hacer algunos cambios. Por ahora solo cerraré este sitio web de vestidos. Lo que voy a hacer, iré a la carpeta Amp. Esta es la carpeta Amp, y tengo una carpeta EDC Dentro de esta carpeta EDC, encontraré el archivo httpd config ¿Bien? Encontraré este archivo de configuración. Ahora, necesito editar esto, necesito editar este archivo. Ahora estoy editando este archivo. ¿Cuál es el propósito de ello? Entonces, lo que sucede es que un sitio web de tres, solo un sitio web de tres en blanco no te llevará al punto en el que realmente quieras construir algo para comenzar con un creador de temas, ya sea element o elementor pro o DV, cualquiera de los creadores de temas que pretendes aprender y hacer uso de él Para instalar ese plug in, necesitas instalar algunos temas para tu sitio web o algunos complementos adicionales, ya sea para fines de SEO o para algunas otras funciones que quizás quieras agregar por esos motivos. Para instalar los enchufes, es necesario realizar cambios en el archivo de conflicto. Incluso si estás intentando subir, digamos imágenes o videos, Mac podría no permitirte hacer eso. O tal vez presionamos tal vez no obtengamos el acceso completo a esos elementos que intentas subir. Por esas razones, estamos tratando de hacer cambios en este archivo de conflicto en particular. Buscaremos hasta la parte donde encontremos al demonio usuario usando el control F o comando. Si puedes ver, puedes decir para sistema Mac, acabo de buscar usuario demonio. Todo bien. Entonces demonio usuario y demonio de grupo son dos cosas que particularmente tengo por aquí. Ahora, automáticamente ha reconocido estas cosas particulares. Bien, ¿por qué? Entonces porque Zap ya estaba instalado en mi sistema Como ya saben, ya he creado un sitio web Wordpress en el pasado, en realidad, muchos sitios web de Wordpress en el pasado en este propio sistema. Entonces inicialmente, en tu caso, es posible que no encuentres a este usuario seguido de mi nombre y este staff del grupo. Sólo verás a este usuario demonio y grupo demonio. Bien, necesitas comentar estas dos líneas. Ahora bien, ¿qué significa comentar? Comentario significa que las líneas que almacenará tu compilador, pero no lo reconocerá. No lo leerá y ejecutará. Estará ahí para su referencia, pero no para la referencia de los compiladores No profundice a menos que nunca se haya encontrado algunos cursos de codificación o cualquiera de mis cursos de lenguajes de programación, particularmente el curso de desarrollo web de Stag No te preocupes por ello. Solo ten en cuenta que comentario básicamente significa que tu software no va a entender esta línea de código. Pero lo vas a leer, no lo vas a ejecutar, solo lo vas a leer. Es solo para tu referencia, no estamos borrando estas líneas de código, solo lo estamos guardando. Muy bien, déjame encontrar aquí acabamos de agregar un símbolo de libra antes de esta frase y comentará la línea particular de código seguida de, necesitas escribir usuario con mayúscula seguido de esta cosa. Ahora en tu caso, ¿cómo sabrás cuál es el nombre de usuario de tu sistema? Simplemente abra la terminal presionando la tecla de comando y espacio al mismo tiempo y solo busque la terminal. Una vez que presionas Enter, solo busca ID e Enter. Una vez que busques ID, encontrarás U, ID es igual a 501 en mi caso, seguido de un paréntesis dentro del cual encontrarás el nombre de usuario. ¿Bien? Eso es lo que necesitas para copiarlo y pegarlo por aquí donde puedas ver, bien, esta línea en particular. En la siguiente línea necesitarás agregar grupo con el capital seguido del nombre del grupo que tengas. De nuevo, abre terminal y encontrarás grupo aquí mismo. Tenemos grupos iguales a veintinueve mi caso. Y en el soporte tengo personal. Eso es lo que copio y lo pego por aquí. Una vez que hayas hecho eso, simplemente guarda este archivo nuevamente por el comando S o simplemente puedes hacer clic en Guardar presionando el archivo y dando clic en Guardar. Bien, una vez que hayas hecho esto, solo cierra la terminal y cierra el archivo de configuración. Y lo siguiente que debes hacer es solo tienes que volver a tu carpeta de prensa. Tenemos este archivo de configuración, bien, no la muestra, ¿bien? Asegúrate de no hacer clic en el archivo de muestra. Estás haciendo clic en el guión config punto archivo Php, Abrir con editor de texto, búsqueda de software hasta la parte donde encuentras config Bien, en algún lugar alrededor. Bien, una vez que presionas es básicamente WP guión bajo debug cae donde encuentras esto, justo debajo de eso Añadir esta línea particular de código sólo voy a entrar y voy a escribir definir corchete, corchete abierto seguido de un solo espacio En S es el método de subrayado de flujo de archivos, bien, Método, sencillo inventado seguido de a. entonces tenemos que escribir nuevo en simples comas invertidas que es directo Lo que esto significa, básicamente permite que tu sistema acepte todos los diferentes tipos de temas, tus archivos zip, o tal vez imágenes o videos, o audios o archivos J, cualquiera de las cosas que intentes subir o hacer cambios alrededor de la base Estás dando los permisos del método de lectura y escritura, eso es lo que estás haciendo. Y simplemente haz clic en Guardar. Simplemente haré clic en Archivo, y haré clic en Guardar. Una vez que hayas hecho eso, cierra esto de nuevo. En el contenido, basta con hacer clic sobre el contenido y hacer clic derecho sobre el contenido. Ir a obtener información de Solo lectura. Hazlo leer, escribir, hacer esto también leer, escribir, que es todo el mundo. Tu nombre de usuario estará por aquí, cual será leído, escrito por defecto. Los otros dos serán de sólo lectura. Necesitas cambiar ese permiso para leer y escribir. Haz eso por creo que todas estas carpetas, que es el contenido WP, incluye admin, ¿bien? Dentro del contenido de WP también puede encontrar temas enchufables y subidas. Haz lo mismo con todas estas carpetas diferentes y cambia solo los permisos. Entonces podrás descargar diferentes temas, podrás acceder a diferentes temas, podrás eliminar estos diferentes temas y así sucesivamente. Bien, eso es lo que estoy haciendo por aquí. Una vez que hayas hecho eso, creo que estarás bastante bien para ir y comenzar con tu curso. 3. Instalación de temas y cómo empezar con Wordpress: ¿Qué pasa con todos? Bienvenidos de nuevo al video. Entonces en esta videoconferencia, les mostraré a todos cómo podemos instalar un nuevo tema en un sitio web de Wordpress. Justo aquí estoy en la página principal de mi sitio web. Y aquí puedes encontrar algunas de las cosas que ya están presentes. Ahora bien, estas son las cosas que no agregué manualmente. Es porque hay algún tema que se está utilizando actualmente. Justo en la parte superior, puedes encontrar esta barra negra donde tenemos el logo de Wordpress, la opción de Wordpress. Desde donde podemos navegar entre diferentes temas que tiene este sitio web, podemos volver a nuestro panel de Wordpress. Podemos erigir este sitio por nuestro editor de Wordpress y hacer uso de los blogs de Gutenberg Y entonces tienes la opción de agregar comentarios. Aquí mismo en el ícono más, puedes encontrar el usuario de la página post media. Con la ayuda de esto, puedes agregar un nuevo post. Podría ser una entrada de blog o tal vez una página de producto o una página de servicio. Puedes agregar medios e incluso puedes agregar una nueva página. Medios básicamente significa que si quieres subir una nueva imagen, archivo GIF o una página de archivo de video básicamente significa que estás tratando de crear una nueva página. Si podría ser una página de inicio sobre una página, página de contacto, página de servicio, etc. Sí, puedes agregar varios usuarios trabajando en el mismo sitio web de prensa. Aquí mismo, la parte más a la derecha de esta barra negra. Encontrarás tu propio perfil. Entonces, ¿cuál es el nombre de usuario de tu perfil? Se agregaron opciones de perfil y para cerrar sesión desde la opción, derecha, hay una barra de búsqueda para buscar entre los diferentes elementos que están ahí mismo. Volvamos al tablero aquí mismo. Como puedes ver en este panel, tenemos actualizaciones de inicio. Las actualizaciones mostrarán todas las actualizaciones que necesitan ser actualizadas. Básicamente sobre nuestros plug-ins, pero en estos momentos no tenemos ningún complemento instalado actualmente. Entonces tenemos la opción de publicar páginas de medios, comentarios que vimos aquí mismo en la barra negra superior. Entonces tenemos sección de apariencia. Ahora dentro de esta sección de apariencia, encontrarás temas. Vamos a entrar en eso y encontrarás tres temas ya instalados dentro de nuestra página web, que es 2024, 2020, 3.20, 22 Ahora, no los instalé manualmente. Ya estaba presente cuando instalé mi sitio web Wordpress. Bien, pero no los requerimos a los tres, ni siquiera. No requerimos de ninguno de ellos. Queremos un nuevo tema. Vamos a agregar un nuevo tema. Al hacer clic en esa opción, podemos buscar entre diferentes temas. Sólo voy a buscar un bloque. Ingresemos aquí, encontrarás esta opción. Vamos a hacer clic en Instalar. Ahora, mientras se está instalando, podrías estar bajo ese supuesto que una vez que hagamos clic en instalar, el tema estará listo para usar. No, obtendrás una opción más para activar el tema. Eso significa que tu sitio web de Tress podría tener varios temas instalados en tu sitio web, pero solo uno podría ser activado en este momento Activemos bloque en este momento y volveremos a nuestra sección de temas y desactivaremos y eliminaremos todos los demás. Vamos a Detalles del tema. Tenemos opción de eliminar, vamos a eliminarlos. Este también, para que podamos liberar el espacio para nuestro sitio web. Encontrarás que este es nuestro tema de bloque que hemos estado usando. Ahora, aparte del bloque, hay muchos más temas que la gente usa. Principalmente Astra. Pero solo voy a mostrar en este curso que por qué se requiere el bloqueo. Bien, aquí en apariencia de bloque, encontrarás a Bo apareciendo justo aquí después de instalar el tema. Al principio acabamos de tener temas y supongo que teníamos editor, ¿verdad? Sólo estas dos opciones estaban disponibles. Pero ahora mismo tenemos Widgets, menús Bloquear. Vayamos a Block y veamos cuáles son las opciones que obtenemos. Aquí mismo tenemos enchufes útiles para el hogar, registro de cambios. Pero a medida que nos desplazamos hacia abajo en esta opción de inicio en sí, encontrarás una opción para instalar el complemento de bloque complementario. También instalaremos este. Bien, ¿qué vamos a hacer? Volveremos a nuestra opción de menú. Todo bien. Ahora, ¿por qué requerimos un menú? Así que cada vez que alineas en un sitio web, siempre verás un encabezado superior o una barra de navegación desde la que podrás navegar entre diferentes páginas. ¿Verdad? Ya sea que estés accediendo desde un dispositivo móvil o una pantalla de escritorio, o una tableta, no importa. Siempre encontrarás la barra de navegación en la parte superior de tu sitio web. Bien, así que algo similar queremos para este sitio web también. Así que vamos a crear un nombre para este menú. Así podemos dar algo como navbar o menú principal. Sólo vamos a dar navbar y voy a seleccionar el menú de encabezado uno Bien, ahora navbar, el nombre de nuestro menú, será accesible solo para nosotros. Eso significa que el nombre no sería visible para los visitantes que aterrizarán en nuestro sitio web. Espero que entiendas el punto. Y vamos a crear un menú. Entonces, una vez que cree un menú, encontrarás que hay algunas páginas en la sección Viewll, página de inicio y página de muestra Pero vayamos a nuestra sección de página para ver qué otras páginas tenemos. Tenemos una página de muestra y una página de política de privacidad de las cuales solo se activa la muestra. Eso significa que actualmente se está utilizando. Y esta que es una página de política de privacidad, está en el borrador más, eso quiere decir que no se publica. No queremos ninguna de estas dos páginas, así que tomemos las dos. Y en la sección de acciones masivas, podemos seleccionar, mover a la papelera, para que se puedan eliminar múltiples elementos a la vez. Bien, así podrás encontrar que no se encontraron páginas. Entonces agreguemos algunas páginas haciendo clic en ese botón, podemos agregar un título a esta página. Entonces vamos a darle a esto algo así como una página de inicio. Una vez que hagamos esto, encontrarás en este panel de barra de cuchillo del lado derecho que tenemos una página y tienes un bloque. Esta página te dará algún resumen que discutiremos más adelante. Entonces tenemos bloque, tenemos un icono de tema de bloque aquí también, que te permitirá seleccionar entre diferentes estructuras de página y seleccionar diferentes estilos de diseño. Bien, pero no vamos a ir ahora mismo en detalle y cubrir y cada una de las cosas que tenemos aquí mismo, porque también hemos planeado para otras conferencias. Volvamos a hacer clic en Publicar. Bien. Agreguemos una nueva página aquí. Puedes ver una opción para agregar una nueva página. Simplemente haremos clic por aquí y agregaremos una página sobre, Acerca de la página. Voy a hacer clic en Publicar y Publicar, bien. Agreguemos una página más y le demos algo así como contacto. Agreguemos una página más haciendo clic en este botón, y puedo dar algo como la página de contacto. Bien, contáctanos. Publiquemos. Todo bien. Ahora una vez que se haya publicado, volveré a mi dashboard de Tress y aquí puedes encontrar casa sobre y contactarnos. Pasemos a los menús para que podamos añadir tres de estas páginas en nuestra barra de navegación. Bien, así que los menús de apariencia. Y aquí tenemos nuestro bar creado, ¿verdad? En la sección más reciente, encontrarás inicio sobre Contáctenos y Ver, encontrarás dos páginas de inicio. Ahora bien, ¿por qué es eso? Déjame mostrarte. Para involucrar a todos ellos, solo puedo seleccionar todos y agregar al menú en el año. Encontrarás un enlace personalizado para este hogar y una página para esta página de inicio es algo que creamos hace un momento. página involucrará todas las demás cosas que una página web requiere. Ya sea un título, el cuerpo de la página, imagen destacada, el extracto de una página y cosas así Pero para enlace personalizado, esto es algo que puedes agregar. Cualquier otra cosa, podría ser link a tu página de Facebook o página de Instagram y puedes cambiar la etiqueta a algo así como seguir mi Facebook, algo así. Pero ahora mismo no requerimos ningún enlace personalizado a nuestro menú. Simplemente podemos eliminar esto por ahora y tenemos sobre contacto y hogar. Pero este no es un orden correcto o una estructura a seguir para nuestra barra de navegación. Siempre, debemos mostrar nuestra página de inicio, luego acerca de la página, y luego la página de contacto. Déjame arrastrarlo y colocarlo aquí mismo. Digamos que también añades una página más. Podría ser una página de servicios o producto. Dentro de los servicios que estás ofreciendo, digamos tu empresa, una empresa de diseño web y SEO. Y estás ofreciendo servicios como diseño web, SEO y comercio electrónico. Bajo o mejor dicho debería decir bajo servicios, usted ofrece estos tres servicios. Digamos que debajo de permitir a tus usuarios hacer clic en el menú desplegable y ver Acerca de la página Acerca de se convertirá en subelemento de inicio. contacto también podría ser sub ítem de aproximadamente, no de casa porque se puede ver la estructura. Pero vamos a mantenerlo algo así como casa, Acerca de, y ponernos en contacto con las tres páginas individuales. Bien. Y podemos guardar el menú. Si vamos a nuestro sitio web de Wordpress y visitamos qué es exactamente lo que obtenemos, puedes encontrar que esto es, este es el título de nuestro sitio web de Wordpress. En la barra de navegación o encabezado aquí tenemos diferentes páginas que creamos, y está perfectamente alineada de una manera que queríamos que se mostrara. Bien. Ahora bien, ¿qué es un tema? De hecho instalamos el bloque C en nuestro sistema, pero ¿para qué lo necesitamos? ¿Qué es un tema de Wordpress? Cada sitio web que hagas usando Wordpress necesita un tema específico de Wordpress. Sin ponerme muy técnico, solo voy a tocar algunas cosas sobre el tema de Wordpress. Básicamente, es un estilo y diseño general de tu sitio web actual. Cada tema de Wordpress tiene diferentes opciones en el personalizador de temas, que discutiremos en un momento Y estas opciones pueden ir desde personalizar tu encabezado, que tenemos aquí mismo El hogar sobre nosotros contáctenos. Y el pie de página que tenemos en la parte inferior de nuestra página Construyendo diferentes publicaciones en bloque controlando el ancho de su sitio web como bloques o un ancho completo o características específicas de comercio electrónico como los diseños de sus productos o diferentes diseños de página de la tienda. Básicamente, todas esas cosas preconstruidas que obtenemos en un tema de Wordpress, puedes personalizar entre ellas. Entonces eso es básicamente sobre un tema de Wordpress. Entonces, en general, está controlando el diseño y el estilo de su sitio web actual de Wordpress. Y no construyen el sitio web, así que hazte muy claro. Un creador de páginas como Elementor o DV, es necesario para construir todo tu sitio web, todo tu sitio web Pero Theme, por otro lado, es más como un shell exterior para los creadores de páginas y un punto de partida para construir tu sitio web Wordpress. Entonces esperas que tengas el punto de usar e instalar tema de Wordpress en nuestro sistema aquí mismo en la barra superior. Anteriormente no encontramos una opción para personalizar. Teníamos la opción de erigir la página pero no personalizar. Actualmente tenemos la opción personalizada. Entonces, una vez que hacemos clic en este pincel en el personalizar, puedes encontrar que nuestro editor de temas de prensa omite un editor de temas que es Bloxy Puedes encontrar el tema actualmente activado es Blox. Incluso puedes cambiar entre diferentes temas dependiendo cuántos temas tengas instalados en tu sitio web de prensa. Pero por ahora, ya que solo tenemos uno y hemos eliminado otros temas a la basura, así que solo tenemos uno. Ahora bien, si quiero que la página principal sea el punto de partida actual, esta como la página por defecto, siempre que alguien aterrice en nuestro sitio web, entonces deberíamos hacer esto como página predeterminada. Entonces, ¿cómo vamos a hacerlo? Aquí mismo, en la parte inferior de nuestro editor de temas, encontrarás menús de identidad de signos , que agregan ajustes de página de inicio y CSS adicional Así que vamos a Configuración de la página principal. Y aquí por defecto se seleccionará, tu último post. Eso significa que cualquier publicación o páginas que se crearían, la última, que se mostrará como la pantalla predeterminada. Pero eso es algo que no queremos. Queremos una página estática. Eso significa que lo que has seleccionado se quedará en todo momento, el sitio web permanece vivo. Entonces seleccionaremos la página estática, seleccionaremos la página de inicio como home, y solo publicaremos. Bien, entonces aquí tenemos la página principal y la seleccionaremos. Regresaremos y es posible que encuentres otras opciones que discutiremos más adelante. Pero por ahora, vamos a cerrar esto. Y siempre que alguien actualice el sitio web, aquí tenemos el anfitrión local Wordpress y encontrarás Home Page como la página predeterminada De nuevo, volviendo a tu tablero, a veces es posible que no encuentres el acceso a la barra superior o al tablero. Podría ser posible porque es posible que no haya iniciado sesión en su sitio web Wordpress ahora para iniciar sesión o la URL específica de UR. Para que pueda comenzar e iniciar sesión en su acceso de administrador, debe escribir el host local hacia adelante barra diagonal el nombre de su sitio web En nuestro caso, ese es Wordpress. Entonces tenemos de nuevo una barra diagonal hacia adelante y luego escribes WP guión admin Básicamente significa que el acceso de administrador de Wordpress. Por lo que hay múltiples accesos a su sitio web Wordpress. Hay editores, hay suscriptores, y hay admin y así sucesivamente. Entonces queremos un acceso de administrador para que podamos comenzar con un sitio web Wordpress y hacer cambios a su alrededor. Ahora, antes de terminar esta conferencia, sólo me gustaría mostrar algunas cosas aquí y allá. Aquí mismo, en el panel, encontrarás ajustes en Configuración, encontrarás otras opciones, así como escritura general, lectura, medios de discusión por fusión y privacidad No es necesario que te preocupes por todas las demás cosas que tenemos ahora mismo. Vamos a centrarnos en general y en las otras cosas que tenemos. Justo aquí está Permelings que voy a cubrir actualmente. Otras cosas que cubriremos más adelante en este curso. Porque ahora mismo me siento solo para mostrar y discutir, todo va a sentirse muy abrumador. Solo voy a ir a la configuración general y aquí encontrarás el título del sitio, que hemos configurado en Wordpress. Ahora, mientras estábamos instalando nuestro sitio web de tres, establecemos el título en Wordpress más adelante. Si desea cambiarlo, simplemente puede volver a la configuración en Opciones generales, puede cambiar el título del sitio. Ahora mismo aquí, también encontrarás línea de etiqueta. Ahora lema es algo que es opcional. Entonces digamos que estás haciendo que el sitio web de una empresa algo así como Nike. Ahora Nike tiene un lema como Just Do It. Puedes escribir, Just Do it en la línea de etiqueta y título de Nike insite Entonces tienes la dirección del sitio URL de Wordpress, RL, de la cual no necesitas preocuparte por ella actualmente. También tienes dirección de correo electrónico admin. Ahora, sea cual sea el correo electrónico que establezca mientras está instalando su Wordpress, lo configura en una dirección de correo electrónico, que por alguna razón le gustaría cambiarlo para que pueda regresar aquí y cambiar la dirección de correo electrónico. Derecha. Otras cosas que tenemos actualmente en esta página, no necesitas preocuparte por ello. Una vez que nos desplazamos hacia abajo, encontrarás fecha, formato, hora, formato. Y esto es algo que sería importante en un caso en el que estás haciendo nuevas entradas de blog específicamente. Y tendría la fecha y hora en que se publicó. Simplemente puedes seguir un formato por tiempo y lo que sea que te sienta cómodo. Pero lo que sea que se haya establecido actualmente es algo que la mayoría de la gente usa. Ahora echando un vistazo a la sección Permel en la opción Configuración, encontrarás la estructura de permeling como nombre Dan plano, mes y nombre de publicación numérica Naban ¿Qué debemos elegir? Lo que sea que se seleccione ahora mismo. Por defecto, ¿es la buena opción ir con no? Por defecto se establecerá en el nombre de Dan. Eso significa que solo digamos que inventaste puedes subir una publicación de bloque o una publicación de producto. La estructura ural se vería algo así como el año, la fecha, y el mes seguido del nombre del puesto. Ahora bien esto es algo que debes evitar completamente a toda costa porque esto no va a ser bueno en términos de SEO. Ahora en términos de SEO, babosa ural también juega un papel muy importante en ella. Si pudieras hacer tu babosa ural lo más pequeña posible y solo agregar qué se trata toda la página o publicación, eso sería más que suficiente Seleccionar el nombre de la publicación es la mejor opción para elegir para la estructura de permeling y puedes guardar los cambios aquí mismo Bien, así que sea cual sea el nombre de la publicación o el nombre de la página, aparecería después de barra diagonal hacia adelante y se mostrará así es como debería ser aparecería después de barra diagonal hacia adelante y se mostrará así es tu estructura de permeling Espero que ustedes disfruten de esta conferencia. En la próxima conferencia, les mostraré a todos cómo podemos instalar y usar nuestro creador de páginas. 4. Instalación del creador de páginas de Elementor PRO: Chicos, en esta conferencia veremos cómo instalar el elemento o versión pro en nuestro sistema. Como dije en la conferencia anterior que vamos a seguir adelante y ver cómo construir y diseñar la página de inicio usando Elementor plug in, que es un creador de sitios web Eso dije, pero siento que quedan algunas cosas más por hacer antes de saltar directamente a esa cosa en particular. este momento, veremos como instalar este elementor plug in Y también veremos algunos ajustes básicos que ofrece elementor Seguido de entenderemos el contenedor y lo de la caja flexible. Bien, así como pueden ver en la pantalla de mi escritorio, tengo el archivo elementor pro zip Ahora elementor es un enchufe gratuito en el que tiene ciertas características que son de uso completamente gratuito No necesitas ingresar los datos de tu tarjeta ni pagar ni un solo centavo para acceder a todas esas funciones gratuitas. Pero tiene pocas características que se pagan. Y debes pagarlos con una cuota de suscripción mensual. Entonces se paga a Elementor Pro. Pero como estamos aprendiendo y no vamos a estar usando esto con fines comerciales, tengo el archivo zip que será accesible para todos ustedes. ¿Todo bien? Y ese archivo zip, puedes usarlo para explorar las características de elementor pro. ¿Todo bien? No recomiendo en absoluto usar ningún software pirateado o no promociono por eso, ningún sentido Esta es solo una versión de Elementor Pro en un formato de archivo zip que se usa ampliamente para fines de práctica, ¿de acuerdo? Entonces porque quiero que ustedes, ya saben, ustedes con un presupuesto muy ajustado para aprender cosas nuevas y todo ese tipo de cosas. Esa es la razón por la que estoy proporcionando estos archivos para que puedas aprender y explorar diferentes cosas. Una vez que realmente esté construyendo algunos sitios web con fines comerciales, tal vez más adelante, entonces puede pagar el plan de Suscripción Elementor Pro Por esa razón, voy a seguir adelante con este archivo y también voy a mostrar cómo usarlo. En la sección de tablero, verás que tenemos una opción de enchufes. Una vez que coloco el cursor alrededor de él, veo opciones de instalar enchufes, agregar nuevos enchufes y enchufar el editor de archivos Ahora instale los enchufes. Una vez que vayas allí, te mostrará una lista de los diferentes plug-ins que actualmente están instalados en nuestro sitio web de prensa. Ya que en nuestro caso nuestro sitio web es bastante fresco y nuevo, no tiene muchos enchufes instalados. Todo lo que tendrá es un plug anti spam y la hola dolly. Esto es solo un enchufe básico. Creo que se instaló porque teníamos supongo que 2024, 2023 constructores de temas. Derecha. Por eso tenemos este enchufe. Siempre podemos eliminarlos más adelante, pero ahora mismo vamos a mantenerlo tal como está. Y agregaremos un nuevo enchufe aquí mismo. Voy a hacer clic en esta opción y puedes ver que tenemos una opción de muchos enchufes diferentes. Esta sección está actuando como tu tienda de aplicaciones o playstore, igual que cómo en un iphone o un smartphone Android, tenemos la playstore o la tienda de aplicaciones desde donde puedes descargar diferentes Lo mismo ocurre con Wordpress, que puedes descargar muchos plug-ins diferentes. Solo buscaré Elementor, Elementor, y haré clic aquí Una vez que aparezca elementor, voy a instalar esto. Ahora elementor, como dije, tiene ciertas funciones gratuitas y tiene ciertas funciones de pago Para poder utilizar la versión pro, necesitamos tener el elementor en sí, la versión gratuita en sí, para que pro y el elementor puedan ir de la mano Después hacemos clic en Activar. Y esperaremos a que active este enchufe. Podemos saltarnos esto. ¿Bien? Podemos saltarnos todo el proceso. Una vez hecho esto, nuevamente, da clic en Omitir, que se encuentra en la esquina inferior derecha de su pantalla. Bien, ahora así es como se mostrará. Ahora la última característica de Elementor tiene las herramientas de IA también incrustadas en ella. Solo puedes describir algunas cosas aquí y allá y hará la mayor parte del trabajo. Ni siquiera tienes que hacer cosa de gota de dragón. Así ha avanzado elementor en los últimos tiempos. Pero vamos a saltarnos esto por ahora. Nuestro objetivo principal de este curso es explorar las características de Elementor y Elementor Reenviar sitios web de prensa. Ahora mismo volveremos a nuestro tablero. Lo que acabas de ver fue el tablero de Elementor. ¿Bien? Anteriormente, como puedes ver en la parte superior de la barra negra, tendrás la opción de personalizar, que es para la sección de edición, el panel de edición para el tema que estamos usando. Tenemos la página de edición y luego tenemos el elementor de ancho de edición Esta página de edición es la opción de página de edición de la palabra prensa. Esto es para el tema que estamos usando, que es bloque. Esto es para el elementor, que es un constructor de páginas que estamos usando actualmente Volveremos a nuestro tablero. Y ahora necesitamos instalar nuestro archivo pro, que es elementor pro Volveremos a los enchufes otra vez. Vamos a añadir un nuevo enchufe. En la parte superior encontrarás la opción Subir Plug In. Simplemente damos clic por aquí y podemos encontrar. Opción para elegir el archivo. Ahora no se puede dragonar soga el archivo por aquí. Solo necesitas navegar por el archivo y una vez que se encuentra puedes instalarlo y también necesitas activar el enchufe Pro. Ahora una vez que hayas hecho eso, creo que estás prácticamente instalado todo esto. Ahora como puedes ver, una vez instalado el elementor pro , te avisará que ya está disponible una nueva versión de elementor pro Por favor, nunca actualice esta característica elementor pro. Te meterás en un problema muy grande. La única razón por la que estoy diciendo esto es porque digamos que ha construido un sitio web que está alojado en su servidor local, lo que quiero decir que su sistema, pantalla de su portátil, ¿verdad? Así que has construido un sitio web usando Elementor Pro y de repente simplemente decidiste actualizar todos los complementos que has estado usando junto con Elementor Ahora lo que pasa es que el elementor pro presenta archivos que están ahí en las versiones más nuevas, bien, podría ser un archivo de depuración, podría ser nuevas características que hay que usar Esos obviamente se agregarán con su elemento o archivo existente. Ahora elemento o pro, como dije, es una versión paga. Requiere una clave de licencia. Es necesario pagar una cuota de suscripción mensual. ¿Correcto? Se vinculará a una cuenta. Una vez que encuentre que su Elementor Pro existente no tiene una clave de licencia, podría meterse en un gran problema, causándole problemas legales tal vez, o su sitio web podría romperse Así que nunca actualices tu Elementor Pro cuando estés aprendiendo cosas. Cuando hayas pagado la versión elementor pro, sigue adelante y actualízala. Bien, ahora mismo nos quedaremos con esta parte e iremos a la configuración del elementor Entonces, como pueden ver, una vez que vuelo el cursor alrededor de los ajustes de elementor, tengo toneladas y toneladas de opciones diferentes Por ahora, solo me enfocaré en la parte de herramientas, o debería decir la parte Configuración. Bien, me enfocaré en ambas opciones. Vamos a ir primero a Configuración y encontrarás integraciones generales avanzadas y Características Vamos a la parte Características. Una vez que me desplace hacia abajo, encontraré que tenemos una opción de iconos de fuente en línea, así que debes cambiarlo de predeterminado a activo. Ahora lo que esto significa esencialmente es que todos los íconos que tendrás en este sitio web, los íconos generalmente están en formato SG. Las imágenes son generalmente en formato P o PNG o en el formato de PEC. Bien, P es el más comprimido y ya sabes, se carga más rápido entre las otras opciones. Otras extensiones de archivo que acabo de decir ahora mismo, así como así, los íconos también tienen un archivo SG. Ahora este archivo SG renderizará sin cargar la fuente. Impresionante. Y la biblioteca de iconos y sus archivos CSS y fuentes relacionados. Eso es lo que básicamente significan estos iconos de fuentes en línea . Significa que su rendimiento del sitio web se incrementará significativamente. Wordpress tiene muy mala reputación en cuanto al rendimiento del sitio web, pero creo que depende de los desarrolladores cómo optimizan su sitio web hasta tu punto que básicamente no deja diferencia comparación con el sitio web reactivo o el sitio web Wordpress. Sí, depende del servidor que tengas alojado tu sitio web también, pero creo que aquí pocas optimizaciones Y también podría ayudarte a acelerar el rendimiento de tu sitio web. Entonces eso es lo que te ayudará a llegar a la parte del contenedor de rejilla. Ahora si has aprendido CSS, HTML y Javascript, olvídate de STL y Javascript. Además, solo concéntrate en la parte CSS. Si alguna vez has explorado CSS alguna vez en tu vida, debes haber escuchado o incluso aprendido sobre el concepto de contenedores, ¿verdad? Contenedores y cajas flexibles. Elementor en los últimos tiempos han agregado la característica de un contenedor de cuadrícula Si quieres usar esa característica de contenedor, haz clic en el activo y creará una opción de cuadrícula que podrás agregar. Opción de contenedor que puedes agregar en tu página de prensa. Bien, también tenemos la barra superior de edición. Tenemos esta opción en particular. Haremos clic en Activo. Podemos dar click en Activo. Esto es para la versión de IA, bien. Si desea utilizar la función de IA, debe hacer clic en el Activo. Ahora, ya que estás usando el elementor pro, probable es que no puedas usar la versión de IA del mismo Pero si solo vas a seguir adelante con el elemento o la versión gratuita y no estás instalando el archivo que te voy a proporcionar, prácticamente puedes activar la versión AI del mismo. Bien, entonces tenemos los landing pages listados elementos y todo tipo de cosas diferentes que necesitas activar. Y puedes simplemente mantenernos en las características estables por defecto. Bien, una vez que hayas hecho eso, simplemente puedes hacer clic en Guardar cambios. Y creo que estamos bastante bien para configurar todo el elemento o sitio web para la próxima conferencia. 5. Contenedor Flexbox vs sección interna - un poco confuso, pero no te preocupes: Todos, bienvenidos de nuevo a otro video. En esta videoconferencia en particular, analizaremos cuál es la diferencia entre el contenedor flex box y la intersección que solíamos tener en el elemento o versiones anteriores. He creado dos sitios web. Estos son dos sitios web ficticios. El primero de aquí, que podemos ver tiene el elementor versión antigua Creo que tiene la versión 3.5 creo. Y antes solíamos tener intersección. Y ahora mismo tenemos una opción de rejillas y contenedor. Puedes ver que tenemos grid y container como el layout de nuestro sitio web. Así que simplemente voy a demostrar rápidamente cuál es la diferencia entre estos dos para que podamos entender cómo podemos utilizar la función de contenedor en las próximas conferencias antes, lo que solía suceder es que como puedes ver por aquí, tenemos un editor de texto de encabezado y luego tenemos un botón. Ahora, los tres elementos de esta intersección en particular, en esta columna o sección en particular están alineados al centro. No hay problema con eso. Simplemente supongamos que nos gustaría agregar otro botón a esta sección en particular. Y queremos organizar este botón de tal manera que este nuevo botón y este botón existente estén ambos en la misma línea. Ambos pertenecen a una misma columna, ¿de acuerdo? Y tiene que haber algún tipo de espaciamiento entre estos dos elementos. ¿Es posible? Tratemos de averiguarlo. Así que sólo voy a arrastrar este botón e intentaré colocarlo. Entonces me da dos opciones. Puedo colocarlo encima este botón existente o debajo de ese. ¿Y si lo coloco encima de este botón? Puedo centrar esta línea, puedo dejar una línea, puedo escribir una línea, o puedo justificarla para que pueda ocupar todo el ancho. Pero eso no es exactamente lo que queremos, ¿verdad? Queremos que estos dos botones aparezcan en la misma columna. Entonces, ¿cómo podemos hacer que eso suceda? ¿Es posible dentro de la intersección? No, no lo es. Por eso tenemos concepto de contenedores y rejillas. Así que por aquí ahora mismo en esta nueva versión de elementor donde también tenemos la versión elementor pro Pero importa muy bien, la versión pro y la versión gratuita, ambas tienen el contenedor. Entonces, aunque quieras continuar con la versión gratuita, aún puedes acceder al contenedor por defecto elementos. versión más reciente ha eliminado el concepto de intersección y ha utilizado el contenedor como el diseño del estilo elementor predeterminado Entonces por aquí, si trato de agregar otro botón dentro de esto, todavía tengo sólo dos opciones. O puedo colocar el botón encima este botón o colocar el nuevo botón debajo del botón existente. Bien, pero ¿cómo colocarlo tal manera que aparezca en la misma columna? Bueno, ahí viene el concepto de contenedor. Sólo puedo colocarlo aquí mismo. Y se puede ver que tengo un contenedor. Actúa como una caja. Si has pasado por mi curso de desarrollo web full stack, donde tengo una sección separada sobre CSS y las unidades de estilo, y los diseños de estilo y todo ese tipo de cosas, entonces podrías familiarizarte con el concepto de aquí también. Pero si no has pasado por ese curso de desarrollo web o nunca has aprendido sobre CSS en el pasado, no hay preocupaciones. El contenedor es como una caja. En una caja, puedes organizar elementos o líneas centrales de artículos o cosas juntas encima de ella. Los puedes apilar, igual que ese contenedor actúa como una caja. Dentro de esta caja, puedo colocar mi botón existente y simplemente puedo duplicar este botón. Bien, para que veas que ambos botones están dentro de este contenedor. Si hago clic en este contenedor, se puede ver que ambos elementos están presentes dentro de este cuadro, que aparece en la línea del borde gris. Aunque trato de mostrarlo como estructura sabia, hay un contenedor dentro de ese contenedor. Tenemos estos dos botones. Tratemos de organizarlos de manera que ambos elementos aparezcan de la misma manera. Podemos centrarlas y podemos alinear la fila en dirección horizontal Así es como podemos conseguir esto. Ahora solo digamos que nos gustaría agregar un poco más espaciado entre estos dos botones. ¿Cómo podemos hacer eso? Una vez que me desplace hacia abajo, tengo la opción de huecos. Yo sólo puedo aumentar el valor de las brechas. Se puede ver que estos botones se están separando. Todo bien. Incluso puedo cambiarlo a algo así como al revés. Déjame que sea cero en lugar de centro. Se puede ver así es como se vería. Permítanme simplemente cambiar esto a porcentaje. Todo bien. Hay cierto espaciado predeterminado entre estos dos. Es así como se vería si la dirección de este contenedor se fija hacia la inversa. Si es horizontal, sería así. Vertical, algo así. Y horizontal. O podría decir reversa. Sólo cambiemos el nombre de esto. Digamos que este es el botón uno, el botón uno. Y lo mismo va para el siguiente botón. Si doy algo así como el botón dos, el botón dos, y si cambio el diseño del contenedor en lugar de reversa, si lo coloco vertical, entonces se puede ver que el botón dos está apilado hacia arriba. botón uno está en la parte inferior, así es como se establece todo el espaciado y la dirección del contenedor. Si quieres justificar el contenido, entonces incluso puedes hacerlo. Ahora eso no pasaría con la parte vertical. Si lo hago horizontal, puedo centrarlo, puedo tener cierto espaciado entre esto. De manera que un botón está en el lado izquierdo y el otro botón está en el lado más derecho. Así es como tenemos algo de espacio. Un espacio alrededor básicamente significa que el botón tendrá espaciado en el lado izquierdo y derecho, al igual que ese espacio uniformemente tendrá un espaciado uniforme alrededor de las cuatro direcciones. Así es como se puede ver algún margen o relleno que está ahí en la parte superior e inferior derecha. Entonces así es como realmente funciona este diseño de contenedor en particular . Aún así, si no tienes claro, déjame mostrarte con otro ejemplo. Justo debajo de esta sección, sección particular en la que acabamos de trabajar, tenemos otra sección de reseñas. Ahora bien, esta revisión es sólo por un ejemplo. No es como una sección exacta de reseñas o testimoniales que pueda tener un sitio web Pero solo para dar un ejemplo o demostrar el concepto de diseño de contenedores, he construido algo como esto. Entonces, en nuestro diseño de elementos más antiguos, tenemos este tipo de tres reseñas. Ahora solo supongamos que nos gustaría centrar alinear todos los elementos dentro de esta sección testimonial. Entonces, ¿cómo podré hacerlo? Así que solo puedo hacer clic en la columna misma y puedo alinearla verticalmente media y horizontal, alintizada Aunque alinee horizontalmente el centro, este elemento en particular no se está alineando al centro ni, ni esto, y no esto, todos ellos con respecto al eje y. Están siendo alineados al centro, pero no respecto al eje x. Si puedes entender la gráfica con claridad, este es mi eje y. Si quiero centrar los elementos con respecto al eje y, ideal sería que el elemento llegara a algún lugar por aquí. Pero si quiero, este es mi eje x. Si quiero alinear al centro el elemento con respecto al eje x, el elemento debería estar en algún lugar por aquí, ¿verdad? Así es como deberían funcionar idealmente las cosas, pero no está funcionando con el diseño de la intersección. Si vuelvo a la versión más reciente de elementor y puedo hacer clic en el contenedor, puedo cambiar el diseño del contenedor de una manera que se supone que la dirección es vertical Y tenemos centro alineado el contenido y justificado el centro de contenido y los elementos están alineados centro. Se puede ver con respecto al eje y y x, los elementos están exactamente en el centro. Así como esto. Así fue posible con la ayuda de nuestro diseño de contenedores. Una última cosa, El diseño del contenedor sería útil en un escenario. Digamos que en una versión anterior con la que estás trabajando, solo quieres reemplazar la imagen de una manera que la imagen que tenías en la primera columna vaya a la tercera columna. Y la imagen de la tercera columna debería volver al lugar de la imagen de la primera columna. Bien, si te gustaría hacer algo como esto, a veces lo que podría pasar en algunos errores, solo por error, podrías haber colocado la imagen en una columna equivocada o en una sección equivocada. Eso podría incluso romper tu sitio web si lo has diseñado correctamente. Si quieres hacer algo como esto, entonces esto es solo gota de dragón. Es muy sencillo, solo puedes arrastrar esto así. Pero a veces tu elemento particular que estás tratando de re, arreglar podría entrar en otra columna, esta intersección misma. Para evitar que eso suceda, lo que tiene la versión elementor que digamos que tengo todo este contenedor Tengo todo este contenedor. Si solo hago clic en la estructura, un contenedor tiene un contenedor. ¿Todo bien? Lo que básicamente estoy tratando de explicar es que tenemos un contenedor, ¿de acuerdo? Se trata de un contenedor entero. Este particular es un contenedor, y este es un contenedor particular. Y este también es otro contenedor separado. En lugar de tres columnas, tenemos tres contenedores. Una caja dentro de otra caja, es como una caja anidada. Supongamos que tenemos una caja grande de Amazon. Entonces tenemos algunas cajas diferentes, Tres cajas que vienen de Best Buy, Walmart, o qué otra plataforma de comercio electrónico se te ocurra. Asumamos cualquier otra caja de plataforma de comercio electrónico. Esas tres cajas están dentro de una caja grande. Nos gustaría hacer clic en el contenedor, la caja padre. Podemos reorganizar la dirección de los elementos de estos contenedores Se puede ver fácilmente los elementos o los elementos contenedores son básicamente estos contenedores en nuestro caso. Entonces lo que básicamente estoy tratando de explicar es que esta columna en particular, que podrías pensar que es una columna, pero es un contenedor. Este es un contenedor, este es un contenedor. Entonces aunque estos son contenedores, pero son parte de un contenedor grande, así que solo puedo llamarlo como elementos por ahora, ¿no? Entonces, básicamente he intentado revertir esos contenedores de una manera que pudiéramos reorganizar una manera que esperábamos que se comportara Así es como funcionaba realmente nuestro contenedor Flexbox. Sé que algunas personas que podrían estar viendo este video podrían encontrar muy confuso el concepto de contenedores. Pero no lo hagas muy complicado, solo piénsalo como una caja dentro de una caja. Una caja tiene una flexibilidad para colocar elementos en cualquier dirección dada con respecto al eje y y x cada vez que intentas construir alrededor de algo, Siempre que estés tratando de organizar elementos, coloca siempre una imagen de una gráfica que tenga gráfica bidimensional. Ejes X e Y. No te compliques mucho con el eje z. Además, no estamos trabajando con un sitio web de tres D, solo estamos trabajando alrededor de la versión dos D del mismo. Ahora mismo, solo tienes un eje Y y X. Si desea colocar pocos elementos al centro con respecto al eje X y con respecto al eje Y, cómo se comportaría. Entonces ese comportamiento, prácticamente replicaría lo que esperabas cuando aplicas el concepto de contenedores Ese no fue el mismo caso con el concepto de intersección. Los contenedores son muy prácticos. Y los contenedores solían existir incluso antes de que Elementor inventara esto en sus nuevas versiones Porque CSS por defecto tenía el concepto de contenedores que sumerge y justificación de contenido justificado y todo ese tipo de cosas Creo que si estás familiarizado con el CSS, entonces no sería un problema entender este concepto. Pero si eres nuevo en el mundo del desarrollo web, no te dejes abrumar por este concepto de contenedores Solo vuelve a ver este punto de video, no te resulta cómodo trabajar alrededor de él. Siempre digo que cada vez que estés siguiendo alguna conferencia, trata de hacerlo prácticamente por tu cuenta para que entiendas claramente cómo funcionó realmente. Bien, espero que este video les haya ayudado a entender el concepto de contenedores. En la siguiente conferencia en video, veremos cómo construir una página de inicio de un sitio web usando el constructor de páginas elementor 6. Aprende elementos de Elementor mientras construyes la página de inicio: Bien, espero que ustedes estén emocionados tanto como yo porque en este video estaremos construyendo una página de inicio completa desde cero usando el elemento o Page builder. Ahora antes cuando no teníamos este enchufe en la barra negra superior, no vimos esta opción para erigir con elemento o Page Builder Pero ahora podemos aquí mismo tengo una nueva página que se llama elemento o 58. En esta misma página, vamos a construir y diseñar una página de inicio completa desde cero. Ahora como esto tiene al escritor dentro de la página, nos gustaría hacer esta página desde cero. Vamos a erigir esta página yendo justo aquí. ¿Qué vamos a hacer? Eliminaremos el nombre de la página aquí mismo. Ver tenemos página una opción de bloque y este bloque de opción de aplicación de bloque es lo que voy a hacer clic. Voy a dar click en el título de la página. Justo aquí en el título de la página. Tengo una opción de heredar personalizado y deshabilitado. Simplemente voy a hacer clic en deshabilitado y voy a guardar esto. Una vez que haga clic en esto, publicaré esta página. Si veo mi página, veamos qué pasa. ¿Puedo ver el título de la página aquí mismo? Ningún título de página estará ahí en la sección ural, pero no estará presente dentro de nuestra página web. En la parte superior, lo que puedes ver es el encabezado que creamos anteriormente. Bien, comencemos construyendo la página usando el elementor. Simplemente voy a hacer clic aquí mismo y así es como se verá la interfaz del elemento o creador de páginas. En el panel izquierdo, verás los diferentes enchufes. Y no debería decir plug ins sino más bien debería decir elementos en lo básico. El diseño que puedes ver tenemos un diseño de contenedor, tenemos un diseño Pro, tenemos una opción de diseño. Entonces tenemos a Pro. Aquí tenemos todos los elementos pro que están disponibles desde que hemos instalado nuestro enchufe Pro. Pero creo que este video sería lo suficientemente bueno para aquellos que recién están comenzando y que no han comprado el plug in. Bien, ¿qué vamos a hacer? En primer lugar, todas y cada una de las páginas web requieren una sección de héroe. Primero, crearemos una sección de héroe haciendo clic aquí mismo, que es el ícono más. Y voy a llegar a elegir las diferentes opciones de flex box aquí. Tengo que elegir la estructura de mi flex box. Voy a seguir adelante con las secciones de dos columnas. ¿Y qué vamos a hacer? Mantendremos una superposición de fondo de color negro y agregaremos algunos elementos dentro de eso. Bien, aquí se puede ver el diseño rosa, que se forma aquí mismo, es todo el contenedor, todo el diseño Flexbox dentro del cual tenemos dos contenedores. Se puede ver aquí mismo. Bien, ahora en el panel izquierdo, encontrarás tres opciones diferentes, el diseño, el estilo y avanzado. En la pestaña de diseño, encontrarás diferentes opciones para elegir y erigir la dirección del ancho del contenedor en la que trabaja tu contenedor y los huecos que puedes dejar entre los elementos o los contenedores que tienes Bien, entonces espero que entiendas el punto sobre la parte de diseño. Después llegando a la opción de estilo, tenemos una opción para elegir entre los diferentes fondos que tenemos. Cómo debería verse el fondo, cuando normalmente aparece, y qué debería suceder cuando el cursor apunta hacia ese elemento. Ese es el efecto hover que ocurre. Es posible que desee agregar algunos detalles más o algunos elementos de estilo más. Cuando el usuario lleva su cursor hacia un elemento en particular, puede cambiar esos efectos y ajustes para el efecto hoor Al llegar al tipo de fondo, encontraremos diferentes opciones. Tenemos el clásico video degradado y la presentación de diapositivas. Clásico básicamente significa que se aplicará un color simple en el fondo. O un efecto de degradado es algo donde se pueden usar dos o más colores en diferentes formatos, como un lineal, radial y así sucesivamente. Si has pasado por mi curso Figma I, debes haber aprendido sobre diferentes tipos de gradientes de color y cómo podemos trabajar en torno a la construcción de diferentes diseños de fondo Algo similar se puede aplicar aquí mismo en página web de prensa tras fondo, tenemos una opción de superposición de fondo. Eso significa que si estás tratando de crear un efecto de superposición tu fondo, incluso puedes hacerlo. Entonces tienes una opción para agregar borde a los elementos. Se le puede dar un tipo de borde, se puede añadir sobre el radio, se puede añadir un divisor con forma. En la sección avanzada, encontrarás una opción para jugar con el margen y el relleno. Ahora vamos a tocar este tema más adelante sobre qué es el margen, ¿qué es el relleno? Pero esencialmente lo que básicamente significa es que en esta conferencia misma, por cierto, lo que esencialmente margin y padding permite hacer a los usuarios es que deje cierto espaciado entre tus elementos. Espero que entiendas el punto sobre el margen y el relleno. Entonces tienes una opción para alinear los elementos y en qué orden, particularmente quieres organizar tus artículos o elementos. Entonces tienes la opción de colocar el tallaje, jugar con la posición y, ya sabes, tal vez aumentar o disminuir el índice Z. Entonces cubriremos todos y cada uno de los temas. No te preocupes por ello, pero por ahora, ¿qué vamos a hacer dentro de esta particular caja flex? Vamos a añadir un color de fondo. Llegando a la opción de estilo, tenemos Fondo normal, Haremos clic en Clásico, y elegiremos el color por defecto. Se puede ver que ninguno de los colores ha sido aplicado. Es simplemente retomando el color por defecto que está ahí. Y el color del fondo para esta particular caja flex es transparente. Siempre que encuentres algo como esto, básicamente significa que es un fondo transparente. Muy bien, entonces no queremos un fondo transparente más bien queremos un fondo negro. Vamos a hacer clic en el color, y vamos a arrastrar si un control deslizante a la parte de abajo a la izquierda, o tal vez incluso abajo a la derecha. Se puede enfocar, abajo a la izquierda es de color negro. Incluso puedes mirar el código hexadecimal cuando el número es todo cero, básicamente significa que es negro. Cuando los números son todos, básicamente significa que es blanco. Simplemente podemos arrastrar ya sea hacia la izquierda o hacia la derecha y obtendremos un efecto de fondo negro. Todo bien. Incluso puedo elegir entre diferentes colores moviendo mi deslizador hacia la derecha y hacia un lado, los colores más cálidos Y hacia la izquierda, serán los colores más fríos. Bien, aquí puedes ver si juegas alrededor de este segundo slider, básicamente significa que estás jugando con la transparencia de tu color. Cuanto más te mueves hacia el deslizador hacia la izquierda, básicamente significa que tu color está siendo transparente. Y cuanto más te mueves hacia dentro, básicamente significa que el color está siendo opaco o no transparente. Espero llegar al punto. Vamos a hacerlo algo negro, pero no exactamente negro. Sólo voy a guardarlo algo sobre esta sombra. ¿Todo bien? A mí me gusta este color, así que lo mantendremos así. Ahora, llegando a esta parte de la imagen, no queremos agregar ninguna imagen a partir de ahora, pero lo veremos más adelante. Bien, ahora agreguemos algunos elementos dentro de esto. Lo que voy a hacer, sólo voy a hacer clic en este contenedor. Simplemente voy a hacer clic en este contenedor. Volveré a este botón en particular, que me permitirá navegar entre los diferentes elementos que tenemos. Y lo que voy a hacer es agregar un editor de texto. Editor de texto básicamente significa que estás agregando texto dentro de él. No tiene una etiqueta h1h2, más bien tiene una etiqueta de párrafo Si has pasado por un curso de desarrollo web full stack, o tienes alguna idea sobre HTML y CSS, debes haber aprendido sobre diferentes etiquetas en HTML. Hay muchas etiquetas como h1h6, entonces tienes una etiqueta de etiqueta o etiqueta párrafo esencialmente contiene todo el contenido, el contenido corporal de Mientras que de h1h6 contiene todas las etiquetas de encabezado, que básicamente representan de qué se trata el contenido de tu cuerpo Ahora mismo vamos a agregar algo como nombre comercial. momento se puede ver que el color de esta fuente es azul oscuro, diría yo. Pero no va bien con el color de fondo negro. Obviamente, queremos que aparezca efecto de contraste cuando el color del fondo es negro. Entonces obviamente, queremos que el color de la fuente esté contrastando con él. Eso significa que debería tener algún tono más claro, o un color más claro no sería mejor para darle un color blanco. Vamos a esto. Puedes ver Textedor aquí mismo. Voy a hacer clic en Estilo. Y luego en la sección de color del texto, voy a arrastrar mi cursor hacia la parte superior izquierda, y se puede ver que mi color ha cambiado a blanco. Todo bien. Incluso puedes jugar alrededor de las diferentes alineaciones de tu texto Actualmente, se deja una línea, pero no se selecciona. Por defecto, el texto se dejaría una línea. Entonces tienes una línea central, derecha una línea y el contenido justificado. Pero vamos a quedármela. Con los ajustes predeterminados, incluso podemos cambiar la tipografía. Tipografía, básicamente se le permite elegir entre diferentes familias de fuentes Aquí tienes algunas fuentes incorporadas e incluso está conectada con Google Fonts. Si busco algo como poppins, puedes ver que es una fuente de Google Y se puede aplicar aquí mismo. Pero si quieres agregar algunas fuentes personalizadas, verás más adelante en este curso cómo puedes agregarlas a tu sitio web. Ahora incluso puedes jugar con los diferentes tamaños de fuente. Actualmente, tiene algún tamaño predeterminado aplicado a la misma. Incluso puedes mover el control deslizante para ver cómo se vería con 15 píxeles. 15 pixeles de tu leor de texto. O simplemente me lo quedaría. 2020 se ve bien. Todo bien. Ahora incluso puedes encontrar diferentes unidades. Actualmente tiene en unidad de píxeles, encontrarás EM, Ram, ancho de ventana gráfica y así sucesivamente Entonces no voy a estar cubriendo todas las unidades que tenemos aquí mismo. Pero supongo que en mi curso de desarrollo web full stack, he cubierto todas estas diferentes unidades en la sección CSS completamente. Espero que si te gustaría involucrarte con estas cosas en detalle, definitivamente deberías revisar esos cursos. Bien, entonces tenemos el peso de la fuente. peso de la fuente esencialmente significa que si desea mantener su fuente con algo de negrita o mantener el peso de la fuente para que sea ligero. Si mantengo esto algo así como ligero, encontrarás que la fuente en sí se vuelve muy delgada. Si lo guardo algo audaz, entonces puedes encontrar que el texto es muy audaz y brillante. Solo mantengámoslo con negrita. Incluso podemos cambiarlo con semi negrita más o menos, pero solo me gustaría mantenerlo con negrita. Ahora tienes la opción de transformar tu texto. Ahora solo digamos para algún caso, agregué un texto que tiene una letra y todas las palabras en minúscula, pero me gustaría cambiarlo a mayúsculas. Entonces se puede ver que todas las letras de mi texto se ha transformado a mayúsculas. Si lo hago a minúsculas, entonces todas las letras se transformarán en minúsculas. Tengo la opción de capitalizar. Eso básicamente significa que después de todas y cada una de las palabras, la primera letra de la siguiente palabra se transformará en mayúscula. Mientras que la lista de las letras en esa misma palabra se transformará en minúsculas. Eso es lo que realmente significa la transformación capitalizada. Y entonces tienes una opción para normalizar, que básicamente significa que cualquier texto que hayas pegado, traerá esa configuración de nuevo a la predeterminada Entonces tienes una opción para darle estilo a tu elemento. Eso significa si quieres mantener tu estilo de fuente normal, cursiva u oblic Espero que entiendas el punto de trabajar alrededor de la transformación y el estilo. Si has trabajado alrededor de alguno de los programas de edición de texto como Microsoft Word o Google Docs, obviamente este tipo de configuraciones son muy sencillas de entender y solucionar. Bien, por último tenemos decoración, lo que básicamente significa que ¿te gustaría agregar un subrayado a tu texto ¿Te gustaría agregar un over line a tu texto? Te gustaría dar línea a través de un texto o puede ser ninguna de las opciones anteriores. Entonces, solo mantengámoslo con default lo que significa que ninguna de las opciones se aplicará para la decoración. Y entonces tienes una opción de altura de línea. Ahora como solo tenemos dos palabras apareciendo en la misma línea, no tenemos múltiples líneas, no tenemos mucho que cubrir múltiples líneas. La altura de línea básicamente significa que siempre que tengas varias palabras o un texto tan largo que cubra en varias líneas, entonces se incrementará el espaciado entre estas líneas. ¿Correcto? Tienes altura de línea, tienes espaciado entre letras. Eso significa espaciado entre todas y cada una de las letras. Si lo cambio a algo así como, digamos solo tres, se puede ver cómo se ha transformado el texto. Se ve diferente a como solía verse antes, ¿verdad? También tienes espaciado entre palabras. Eso significa que se jugará con el espaciado entre dos o más palabras . ¿Correcto? Entonces tienes la opción de agregar una sombra de texto, que no vamos a estar cubriendo en este momento. Pero esencialmente lo que puedes hacer es agregar un desenfoque o tal vez agregar alguna sombra a tu texto. Ese efecto sería genial en un caso en el que tengas un fondo más claro. Pero ahora mismo tenemos un fondo más oscuro. No me gustaría tocar esta área. Bien, agreguemos un nuevo elemento. Voy a hacer clic en este icono, y voy a arrastrar y soltar mi encabezado justo dentro de este propio contenedor. Si lo coloco justo en el interior izquierdo o en el interior derecho, algún caso es posible que no pueda agregar su nuevo elemento dentro del contenedor y podría agregarlo fuera de su contenedor. En ese caso, ¿cómo los reorganizarías de tal manera que aparezca justo dentro de ese contenedor? Sencillo. Al hacer clic en toda la sección del contenedor, tienes la opción de elegir entre Navigator o a veces incluso podrías encontrar Estructura. Simplemente puede hacer clic aquí mismo. Y aquí encontrarás diferentes opciones como esa. Cómo aparecería el encabezado, contener editor de texto y así sucesivamente. Todos los elementos que tengas en todo el sitio web aparecerán aquí mismo. Muy bien, puedo simplemente arrastrar mi rumbo justo dentro este contenedor donde tengo un editor de texto. Puedes encontrar editor de texto aparece encima de mi encabezado y el encabezado aparece debajo del editor de texto. Si desea reorganizar la configuración dentro del contenedor, simplemente puede arrastrar y soltar aquí mismo dentro del contenedor mismo Incluso puedes hacer eso dentro de esto. Bien, solo voy a cambiar el texto a algo así como hacer pagos o simplemente diría algo como opción de pago seguro o vamos a agregar algunas palabras más. Algo así como hacer pagos nunca ha sido fácil. Todo bien. Lo que voy a hacer, solo voy a cambiar el color de la fuente, Primero que nada yendo al estilo, cambiando el color del texto a blanco, cambiando la tipografía a poppins, porque nos gustaría mantener la consistencia a lo largo de toda Entonces vamos a agregar, o mejor dicho debería decir, vamos a transformar este texto en algo capitalizar Bien, ahora ¿qué vamos a hacer? Aumentaremos el tamaño de esta fuente. Nos gustaría hacer esto algo así como 70 pixeles. Eso se ve bien. ¿Qué vamos a hacer dentro de este contenedor mismo? Debajo de nuestro encabezado, agregaremos un editor de texto más. Básicamente, estamos creando un sitio web para una aplicación que funciona manera similar a Apple Pay o N More. Es como un sitio web promocional para una aplicación que permite a las personas realizar pagos. Esto es como una breve idea sobre lo que esencialmente explica el sitio web y qué estamos tratando de hacer exactamente. Bien, entonces aquí tenemos texto sencillo. Nuevamente, podemos simplemente cambiar alrededor del estilo de fuente y cambiar el color del texto. Pero la manera más fácil solucionar esto y pegar el estilo sería simplemente hacer clic en cualquiera de los otros elementos que le gustaría replicar Aquí mismo, sólo puedo dar click sobre este texto. Doy click derecho sobre este elemento. Puedo copiar, o tengo un atajo para elegir cual es el comando C. Solo puedo hacer eso aquí mismo en este elemento mismo. Puedo hacer clic derecho y pegar el estilo. Incluso se puede ver un atajo aquí mismo que es comando shift y V, puedo hacerlo aquí mismo. Puedes ver que ha aplicado el estilo para la etiqueta H one, que no queremos aplicar, simplemente desharemos manteniendo el comando y los patrones Z. Bien, vamos a ir a la etiqueta de estilo. Cambia el color a blanco. Podemos cambiar la familia de fuentes a poppins. Bien, y este es el texto que tenemos. Ahora bien, entre este nombre que tenemos aquí mismo, editor de texto, y nuestro encabezado, se puede ver que aquí hay alguna brecha. Sería mejor si pudiéramos hacer uso de pocos elementos dentro de nuestro elementor y hacer algunos cambios geniales a su alrededor Bien, así podemos simplemente agregar un divisor entre nuestro texteditor y Heading que tenemos algún tipo de división entre estos Aquí mismo tenemos estilo ahora cambiaremos el color a algo así como verde. Sólo voy a mover mi deslizador hacia algo así como el color verde. Me gustaría hacer uso de un color verde fresco en lugar de un verde muy brillante. Creo que este color verde quedaría bien. Déjame mover mi cursor a la parte superior, y este es el color de mi divisor Ahora, incluso puedo cambiar el peso de mi divisor. Eso significa lo gordo que quiero que esté mi divisor, actualmente está configurado en uno. Yo sólo puedo hacer esto a algo así como digamos tres. O tal vez hasta 2.5 quedaría bien. Bien, ahora puedes encontrar espacios entre ellos. Vamos a bajarlo a la menor brecha posible entre esto y esto. Ahora puedes encontrar que aunque el nombre del negocio, el editor de texto termina aquí mismo, pero nuestro divisor, ya sabes, ocupa todo el ancho, No queremos que eso suceda. En ese caso, ¿qué podemos hacer? Debemos asegurarnos de que nuestro divisor esté seleccionado en el elemento o panel de edición. Al ir a la parte de contenido, encontrarás si quieres jugar con el ancho de la misma o no. Actualmente se establece en 100% Eso significa ocupar el ancho máximo posible de acuerdo a su contenedor. Sea cual sea el ancho que haya de tu contenedor, solo ocupa todo el espacio. Eso es lo que en realidad significa 100%. Pero nos gustaría bajarlo a algo alrededor del 40% que se ve perfecto. Ahora, ¿qué vamos a hacer a continuación? Queremos agregar dos botones debajo de este texto, ¿verdad? Nos gustaría agregar dos botones debajo de este texto, que el usuario pueda conocer más sobre nuestra aplicación o incluso descargar la aplicación. Solo llevemos nuestro botón justo debajo de esto. Ahora nos gustaría hacer uso de dos botones y ambos de estos botones deberían aparecer en línea. Eso significa que ambos botones deberían estar apareciendo en la misma línea y no debería haber dos filas. Bien, ¿qué podemos hacer en ese caso? Primero y ante todo, intentemos ver qué otros elementos podemos jugar en el estilo de edición de botón. Siempre que tengas un botón, puedes cambiar el tipo de botón, ya sea que quieras que sea predeterminado. Eso significa que tendrá un color de fondo gris Botón Tener Información. Eso significa que por defecto tendrá algunos ajustes establecidos a su alrededor. Ajustes de estilo como el color de fondo azul. Si tienes éxito, será de color verde. Si es una advertencia, será de color naranja, y si es peligro, será de color rojo. Solo mantengámoslo por defecto, puedes cambiar el texto, algo así como aprender más. Bien, si quieres agregar algún enlace al texto, lo que sucederá es que cada vez que el usuario haga clic en este botón, el usuario será redirigido a una página o parte de una página dentro de esta misma página web Puedes hacer que las cosas funcionen a su alrededor. Tienes la opción de jugar con el tamaño del botón, ya sea que quieras que sea pequeño, mediano, grande, extra grande. Pero creo que este tamaño del botón es lo suficientemente bueno. Bien, yendo a la opción de estilo, cambiemos la familia de fuentes a poppins, que hemos aplicado para otras fuentes y otros elementos también Cambiaremos el color del botón para que sea verde, que es exactamente el mismo color de nuestro divisor. ¿Qué vamos a hacer aquí? Simplemente copiaremos el código hexadecimal de color para este divisor. Vamos a ir a este botón en el color del botón, voy a pegar aquí mismo. Puedes encontrar que el color de esto ha sido cambiado, pero me gustaría hacer esto un poco más oscuro. Creo que este color se ve bastante bien. Y este es el mismo color que voy a aplicar aquí mismo en sección divisoria también. Déjame pegar este color. Bien, esto se ve bien, creo, sí. Ahora, ¿qué vamos a hacer? También tenemos la opción de agregar un radio de borde. Verás para el botón, qué significa realmente el radio del borde. En este momento se puede ver que el botón tiene algún tipo de borde afilado en las cuatro esquinas. Arriba izquierda, arriba derecha, abajo, izquierda, abajo derecha, correcta. Pero digamos solo para un escenario donde nos gustaría agregar botones circulares o bordes redondeados para nuestro botón. Podemos simplemente jugar alrededor esto y podemos agregar a algo así como, digamos alrededor de 50. Entonces puedes encontrar que el botón parece ser circular, pero vamos a mantenerlo algo así como diez. Creo que diez quedarían bien. O tal vez hasta cinco en ese caso. Cinco se ve realmente genial. Bien, ahora ¿qué vamos a hacer? Simplemente vamos a duplicar esto. Ahora encontrarás ambos botones apareciendo en formato stack. Ambos son así, uno aparece en la parte superior, el otro aparece en la parte inferior. Pero queremos que ambos botones aparezcan en línea en ese caso. Si has repasado los videos anteriores donde hemos discutido en detalle sobre qué es flex box y lo que solía ser antes que es intersección, entonces obviamente sabrás que necesitamos agregar un contenedor. Alinea los ítems de tal manera que ambos botones aparezcan en la misma línea. Solo vamos a arrastrar y soltar los botones dentro del contenedor solo para asegurarnos de que ambos botones aparezcan en el mismo. Podemos simplemente hacer clic derecho sobre este contenedor, elegir Navigator. Aquí tenemos un contenedor dentro del cual tenemos dos botones. Todo bien. Ahora cambiaremos el color del botón y el texto a algo así como descargar ahora. Todo bien. Descárgalo ahora. Déjame simplemente eliminar ahora, solo lo mantendremos descargada. Bien. Lo que me gustaría es que solo hagamos que el color de este encontrado sea predeterminado, que es el gris. Bien, ahora déjame cambiar esta dirección del contenedor para que sea horizontal. Entonces ahora puedes ver que ambos botones aparecen algo así. Ahora bien, esto es exactamente lo que queríamos. Bien, ahora en el siguiente contenedor, ¿ qué queremos agregar? Queremos agregar una imagen de nuestra aplicación justo dentro de esta, vamos a arrastrar y soltar el elemento image. Todo bien. La primaria es muy fácil. Cualquier creador de páginas en Wordpress es muy fácil de entender y aprender. Bien, aquí solo podemos elegir Imagen. Ahora tienes la opción de subir los archivos desde tu carpeta, o puedes navegar entre diferentes elementos que ya hayas subido. Aquí mismo, encontrarás diferentes elementos e imágenes que ya he subido aquí mismo. O incluso podrías ingresar una URL de una imagen que encontraste en Google Images. Por ahora, sólo voy a navegar por diferentes imágenes que tengo aquí mismo. Simplemente elegiré esta imagen, y la seleccionaré aquí mismo. Ahora puedes ver esta es la imagen que tenemos aquí mismo. Ahora tengo una opción para jugar con los ajustes de la imagen como cambiar el ancho, peso máximo, la altura, y así sucesivamente. E incluso podrías encontrar esta opción llamada filtros CSS aquí mismo. Ahora bien, si hago clic en esto, puedo elegir entre diferentes opciones para jugar alrededor del desenfoque de la imagen Tal vez jugar alrededor del brillo de la imagen. Actualmente se establece 200. Si muevo mi deslizador hacia la izquierda, puedes ver que la imagen se vuelve más oscura. Si muevo mi deslizador hacia la derecha, cambia el brillo de la imagen para que sea más brillante. Eso significa que la imagen será más blanca. Incluso se puede jugar alrededor de la saturación de contraste. Básicamente significa que no tienes que necesariamente hacer uso de ninguna herramienta de edición de imágenes para poder realizar algunos cambios básicos alrededor de tu imagen. Todo bien. Espero que ustedes tengan alguna comprensión básica sobre cómo funcionan los elementos en el constructor de páginas elementales. Pero aún queda una cosa por hacer antes que nosotros, ya terminaste con nuestro edificio, nuestra sección de héroes, que es hacer clic en este contenedor y encontrarás que los elementos están apareciendo de tal manera que se van pegando hacia la parte superior y no van apareciendo en el centro. Al hacer clic en este contenedor, encontrará que la dirección del contenedor está establecida en vertical. Ahora así es exactamente como queremos, pero también queremos justificar el contenido para centrar para que los contenidos y la imagen aparezcan de tal manera que se justifique la altura de los contenedores. Espero que veas que toda la sección de héroes se llena correctamente. Bien, ahora incluso podrías encontrar que hay cierto espaciado entre tu encabezado y la sección de héroe, que veremos cómo podemos hacerlo con la ayuda de margin y padding. Bien, ahora antes de seguir adelante con otra sección, es posible que veas que ha habido algún cambio en el layout de nuestro elemento o creador de páginas. Puedes ver justo aquí en la parte superior, podemos ver el nombre de nuestra página. Después tenemos los diferentes íconos, el icono del escritorio, el icono de la tableta y el móvil. Entonces tienes la configuración de publicaciones aquí mismo. ¿Cómo ocurrió ese cambio? También en la sección de maquetación, se puede ver antes no teníamos la grilla, acabamos de tener contenedor para eso. Lo que hice, acabo de regresar a mi panel de Wordpress. Justo aquí. Acabo de ir a Elementor Settings. Dentro de Ajustes, tengo unas características en la lista de características. Lo que hice inicialmente, esta característica de contenedor de cuadrícula se configuró como predeterminada. Cambié eso a activo en la barra superior del editor. También cambié eso de default a active. Bien, también puedes ver una opción para construir con IA. También seleccioné de default a active e hice los cambios. Y lo guardé aquí mismo. Esa es la razón por la que vimos un diseño diferente para nuestro elementor Volvamos a las páginas, todas las páginas elementor 58 y editaremos Editar con elementor Bien, ahora antes crear una nueva sección dentro de la propia sección de héroes, agreguemos una nueva imagen en el fondo para que haya algún efecto. Me gustaría agregar una imagen aquí mismo en este contenedor. Al ir al estilo, encontrarás una imagen. Seleccionaré una imagen que se llama como línea para la imagen que tengo aquí mismo. Y se puede ver que hay una línea curva va por debajo de la sección de héroe. Ahora lo que voy a hacer es simplemente cambiar la posición de la imagen de tal manera que aparezca en el lado izquierdo. Bien, antes de eso me gustaría cambiar el tamaño de la pantalla. Puede ver los tamaños de pantalla establecidos por defecto actualmente. Pero podemos cambiarlo a algo así como contener. Si cambio esto para que contenga, se puede ver que aparecen las líneas. Antes acabamos de ver una sola línea, una sola línea curva yendo por debajo de la sección de héroe, y ahora podemos ver múltiples líneas. Ahora bien, ¿cómo sucedió exactamente ese cambio? La imagen en sí contenía muchas líneas curvas diferentes, en muchas líneas curvas diferentes. Pero solo vimos la línea única atravesando nuestra sección de héroes. Eso es porque el ancho y alto de nuestra sección de héroe es tal que solo cubrió esa parte de la imagen por donde pasaba la línea Al cambiar el tamaño de visualización de nuestra imagen para contener. Permite, se puede ver aquí mismo, he abierto la documentación para elemento o aquí mismo en los diferentes tamaños que tenemos. Puedes ver que la portada contiene, hemos establecido esto en, puedes ver contiene el tamaño está configurado para contener. Qué significa que toda la imagen encajará dentro del elemento. Obviamente, las dimensiones de la imagen y las dimensiones de tu sección de toda tu caja flex no serían las mismas cada vez. En ese caso, le gustaría que la imagen encaje en su diseño de caja flexible, tal manera que la imagen se agranda, tamaño de la imagen sea menor en comparación con la opción de caja flexible que tiene O comprimirá el tamaño de la imagen. Las dimensiones de la imagen se reducirán al tamaño y la combinarán con el tamaño de diseño de su caja flexible. Bien, puedes ver aquí mismo, toda la imagen quedará encajada dentro del elemento, manteniendo las mismas proporciones. Básicamente no va a caer. Las proporciones de la imagen a menudo conducen al letterboxing donde hay espacios en blanco alrededor de la En lugar de dejar espacios en blanco, realidad ha repetido la imagen en la sección de repetición. Podemos cambiar esto a no repetir, por lo que puede ver que la parte más derecha está configurada para no repetir. Muy bien, las imágenes aparecen algo así y así es exactamente como lo queremos. No hemos agregado la imagen en la sección de superposición de fondo, en el fondo mismo, teníamos clásico. Cambiamos el color y agregamos la imagen. Bien, entonces espero que entiendas el punto. Ahora, bajando a la siguiente sección, podemos elegir este ícono más aquí. Al hacer clic en el icono más, obtendremos una opción para elegir si queremos agregar una nueva caja flexible o un diseño de cuadrícula. Tienes la opción de agregar una plantilla. Ahora estas plantillas te permitirán navegar entre diferentes elementos o protemplates o plantillas que hayas guardado en tu sistema También veremos cómo podemos construir y guardar nuestras propias plantillas. Entonces tienes una opción para editar con IA usando el elemento o yo. Simplemente puedes escribir algunas de las cosas y elemento o simplemente harás el trabajo de crear toda tu sección o algunos de los elementos. Por ahora, solo agreguemos una nueva caja flexible y mantendremos la dirección para que sea vertical. Bien, ¿ahora qué queremos? Queremos agregar una nueva sección que contendrá tres tarjetas con un vaso. En efecto, habrá algún efecto de gradiente dando vueltas. Primero y ante todo, nos gustaría volver, usar este editor de texto, este encabezado, y este divisor. Voy a hacer un duplicado de esto. También haz un duplicado de este divisor. Ahora a veces es posible que no puedas hacer clic en este divisor simplemente porque el tamaño del divisor es demasiado pequeño. Se puede ver y no hay brecha entre el texturador y el Incluso si estás tratando colocar tu cursor en el divisor, a veces es posible que no puedas hacer clic en esto. En ese caso, lo que puedes hacer es simplemente dar click en cualquiera de los elementos. O en el propio contenedor, puede hacer clic derecho y dar clic en Estructura. Anteriormente vimos Navigator, pero ahora tenemos Estructura simplemente porque cambiamos algunas características en el elemento o sección, ¿de acuerdo? Pero más o menos el concepto sigue siendo el mismo. ¿Correcto? Ahora tenemos divisor. Eso es lo que queríamos duplicar. Hagamos un duplicado de ello. Y también el rubro. Hagamos un duplicado de ello. Bien, ahora lo que puedo hacer, simplemente puedo arrastrarlo y soltarlo aquí mismo. Con solo hacer esto, también puedo arrastrar y soltar el divisor justo debajo de esta parte. También arrástralo y subirlo abajo aquí. Ahora el color de este editor de texto en particular y el encabezado es color blanco y el fondo también es algo de color blanco. Se puede cambiar el color de la fuente a negro. Vamos a la parte de estilismo. Cambiaremos el color del texto a negro. También cambiará el color de esta fuente para que sea negra. Muy bien, ahora una vez que hayamos hecho esto, nos gustaría centrar alinear este, ambos de estos textos. Con solo hacer clic en toda esta sección, podemos justificar el centro de contenido y alinear el centro de elementos. Solo asegurémonos de que esto también tenga Align Center. Si no lo hace, lo que puedes hacer, solo podemos ir al contenido y podemos enviar mensajes de texto al centro. Bien. Ahora para esta parte, ¿qué vamos a hacer? Aligimos Centro, ¿qué queremos para esta parte? Esto no se ve bien. El objetivo del negocio en negro, el color no se ve bien. Simplemente podemos cambiar el color de esto a algo así como un gris más oscuro. Este color gris se ve bien. Muy bien, podemos simplemente bajar el texto a algo así como hacer pagos internacionales. Vamos a mantenerlo así, interno. Pagos. Todo bien. Podemos soltar el tamaño de fuente de esto o incluso podríamos bajar el texto de este. Digamos que los pagos internacionales. Todo bien. Todo bien. Pagos internacionales. ¿Qué vamos a hacer con esto? Puedes ver que no hay espacio entre la sección de héroe y la siguiente sección. Para agregar algo de espaciado entre estas dos secciones diferentes, podemos jugar con los ajustes de margin y padding. Si puedes ver aquí mismo, tengo una imagen aquí mismo que explica claramente qué significa realmente el relleno y el margen. Déjame explicarte. Todos y cada uno de los elementos son un contenido. Se puede ver que la caja más interna se llama como un contenido. Podría ser cualquier cosa, toda tu caja flexible. Podría ser tu botón, podría ser tu editor de texto, podría ser un divisor. Podría ser tu rumbo, ¿verdad? Todos y cada uno de los elementos son llamados como un contenido. Ahora, fuera del contenido, tenemos una frontera, ¿no? Todos y cada uno de los contenidos están rodeados por una frontera. Pero entre un borde y el contenido, hay algún espacio llamado relleno. ¿Todo bien? Hay cierto espaciado entre el borde y el contenido llamado relleno. Si aumenta el tamaño del relleno o disminuye el tamaño del relleno, lo que sucede es que si aumentas el tamaño del relleno, el borde y el contenido tendrán algún espaciado entre ellos. Cuando agregas borde, lo que sucede es que encontrarás cierto espaciado entre el contenido y el borde. Hay cierto espaciado entre el borde y el siguiente elemento que tienes, que se llama margen. Bien, si aumentas el margen o bajas el margen, lo que esencialmente sucede es que si aumentas el margen, el espaciado entre las dos secciones se separará. El espacio en blanco con el que te quedarás será el espaciado que por defecto tendrá tu sitio web Wordpress. Bien, si se disminuye el margen, lo que sucede es que dos secciones se superpondrán entre sí. Pero no va a pasar con el relleno, ¿verdad? Porque el relleno está ocurriendo dentro del elemento mismo. El relleno está ocurriendo entre el borde y el contenido. Espero que enconteste el punto. Vamos a agregar un relleno para esta sección en la pestaña avanzada. Voy a ir justo aquí. Y encontrarás que inicialmente t 7. Personalizador de temas Blocksy - confía en mí, ¡es muy fácil!: Muy bien, ahora que ustedes han aprendido a construir todo su sitio web usando el 11 o constructor de temas, veamos nuestro encabezado y pie de página aquí mismo para que podamos personalizar el encabezado y el pie de página usando el personalizador de temas, que pueden ver aquí mismo Este icono aquí mismo, el icono personalizado en la barra superior, nos permite usar el editor de temas. Este es el personalizador de temas y como saben, en realidad estamos usando el tema de bloque Puedes ver aquí mismo hemos activado el tema del bloque y dependiendo de tu caso de uso, también podrías usar algunos otros temas como Astra. general, más o menos del 80 al 90% de los elementos que encontrarás aquí mismo en el personalizador de temas seguirán siendo los mismos Pero solo algunas cosas aquí y allá pueden cambiar dependiendo del tipo de tema que estés usando realmente. Ahora solo por este video, he mantenido mi webcam apagada y sabrás la razón por qué en tan solo un momento. Pero vamos a ver, ¿qué otras opciones tenemos en el personalizador de temas? En las opciones generales, encontrarás barra general del sitio principal y otras cosas por el estilo donde también puedes trabajar alrededor tu color y tipografía de tu Entonces tienes la opción de hacer cambios alrededor de tu bloque, post, post único y categorías y cosas así. Entonces también tienes la opción de editar tus páginas. Luego, al final de todo este personalizador de temas, encontrarás una opción llamada Core Bajo el núcleo, tendrás menús de identidad del sitio, widgets, ajustes de página de inicio y CSS adicional. Bien, vamos a la cima. Y bajo general tenemos encabezado. Así que intentaremos personalizar este encabezado o barra de navegación para nuestro sitio web. Lo que voy a hacer, sólo voy a hacer clic en encabezado. Y una vez que haga clic, encontrarás que tengo elementos y tengo encabezados. Muy bien, Y aquí encontrarás tres filas. La fila superior, la fila principal y la fila inferior. Entonces, ¿qué significa y por qué tenemos tres filas para eso? Tengo este sitio web, y por aquí puedes ver esta es una barra de navegación aquí mismo. Entonces esto es como una fila principal. Y en la parte superior tienes la ubicación, las horas de trabajo y los íconos sociales aquí mismo. Entonces esto está actuando como una fila superior. Esto es como tu fila principal, y este sitio web no tiene una fila inferior. En su mayoría, la mayoría de los sitios web que se encuentran en Internet utilizan solo una fila principal. Si deseas agregar un top, puedes agregar elementos dentro de este. Entonces, ¿qué queremos? Queremos un logo, queremos menú, pero no queremos icono de búsqueda en nuestra barra de navegación. Ahora el ícono de búsqueda podría ser útil en caso de que tengas un sitio web de comercio electrónico donde te gustaría buscar productos o tal vez servicios o diferentes publicaciones de bloque. Pero por ahora, vamos a tacharlo. Muy bien, ¿y qué vamos a hacer? Podemos agregar un nuevo elemento dentro de esta fila misma. Ahora se puede ver que la fila se está dividiendo en dos columnas, la izquierda y la derecha. Y aquí en el medio tenemos pocas líneas punteadas. Entonces básicamente se trata de decir que esto se divide en dos secciones. Si deseas cambiar la configuración alrededor del encabezado, simplemente puedes hacer clic en la fila principal y encontrarás la estructura. Entonces antes vimos el encabezado. Eso significa que la configuración del encabezado será común para la fila superior, fila inferior y la fila principal. Una vez que haga clic en la fila principal, los ajustes se abrirán solo para esta fila principal. Muy bien, entonces aquí tienes la estructura. La estructura del contenedor es predeterminada. Incluso se pueden cambiar las dos cajas de ancho completo. Se puede ajustar la altura y anchura. Incluso se puede cambiar el diseño de la misma. Entonces aquí tienes los antecedentes. Tienes la opción de agregar algunos bordes. También puedes agregar borde en la parte inferior. E incluso puedes agregar algo de sombra a tu encabezado. Pero volvamos y tratemos de agregar algunos elementos dentro de nuestra fila principal. Entonces aquí puedes ver que tenemos una opción de cuenta. Eso significa que a algunas personas les gustaría dar la opción de iniciar sesión o cerrar sesión en su sitio web Cuando las personas tienen un sitio web de comercio electrónico, obviamente les gustaría dar una opción a los usuarios de iniciar sesión en su cuenta para que puedan hacer pedidos anteriores. O, ya sabes, pueden mirar su historial de compras. Pueden obtener descuentos o cupones adicionales. Para que puedas hacer uso del widget de cuenta. Entonces tienes el botón HTML. Así que de esa manera puedes incrustar algunos otros plug ins pegando el código HTML Entonces tienes el menú uno que ya se está utilizando. Entonces todas las páginas que tenemos y hemos construido un menú principal, ¿verdad? El menú se llamaba como Navar, si no me equivoco, así que eso se está mostrando aquí mismo Entonces tienes la búsqueda y los íconos sociales. Entonces aquí mismo, al igual que como tenemos diferentes íconos sociales, eso es algo similar. Tenemos widget aquí mismo. Entonces intentemos traer un botón. Y podemos colocar este botón a la izquierda del menú principal o a la derecha del menú principal. Muy bien, incluso podemos agregar esto en el medio. Muy bien, tenemos tres columnas. Simplemente no tenemos dos columnas. Es solo que cuando no agregamos ningún elemento en el medio, obviamente va a dejar algo de espacio. Entonces aquí tenemos el botón, y se puede ver que está ocupando algunos ajustes predeterminados en términos de diseño. Aquí el texto, cuando flotamos alrededor de él, convierte el color del texto a azul Y el color del botón también es azul por defecto. Y cuando flotamos alrededor de él, se vuelve azul oscuro o algo así como un tono azul muy oscuro Bien, así también podemos cambiar el color del botón. Simplemente podemos hacer clic en Botón. Y aquí encontrarás las opciones para elegir entre diferentes diseños de botones. Entonces aquí tienes un botón donde El botón en sí tendrá un color de fondo o el botón podría simplemente tener un color de borde y el fondo del botón será transparente. Todo bien. Incluso puedes cambiar el tamaño de los botones. Incluso puedes agregar etiqueta. Entonces, en lugar de descargar, si quieres dar algo como un contacto o reservar una llamada, incluso puedes agregar algo como esto. Ahora bien, si quieres agregar una URL que cada vez que alguien hace clic en este botón, debe ser redirigido a una página Puedes agregar la URL del enlace si quieres eso. Siempre que se haya pegado el enlace y cada vez que alguien haga clic en el botón, deben ser redirigidos a una nueva página en una nueva pestaña Entonces a veces lo que sucede es que cada vez que haces clic en el botón, la mayoría de las veces la redirección sucederá en la misma pestaña misma Pero si quieres darle la opción de abrir el nuevo enlace en una nueva pestaña, simplemente puedes activar este interruptor. Todo bien. Entonces tienes la opción de agregar tu propia clase CSS y otras cosas. Cuando vamos al diseño, puedes ver que puedes cambiar el color de la fuente. Incluso puedes cambiar el color del botón. Así que déjame hacerlo así. Y podemos cambiar el color del botón a verde. Aquí podemos seleccionar el color. Ahora aquí no encontrarás el color que guardamos como color global en nuestro Elementor, solo porque esta es una configuración de tema y esa fue tu página Elementor Builder Aquí podemos simplemente seleccionar el color verde manualmente colocando nuestro cursor y algo similar, pero no exactamente. No creo que encontraríamos exactamente el mismo color. Y esto es para inicial y esto es para hover. Así que podemos simplemente copiar el código hexadecimal y podemos pegar el mismo color para hover también Así que cada vez que pasamos el cursor, el color del botón no cambiará. Bien, así es como hemos mantenido la consistencia. Ahora llegando a la parte de color de fuente. El color de fuente inicialmente se establece en negro. ¿Todo bien? Bien. Entonces el color, esto no es para tu menú sino para tu botón. Bien, entonces aquí el color inicial del texto es blanco, y al flotar también es blanco Entonces no lo vamos a cambiar aquí. Puedes agregar radio de borde si quieres darle un borde circular, o ya sabes, redondeado a tu botón. Incluso puedes agregar algo de margen y otras cosas para evitar tu diseño. Volviendo a tu menú principal, aquí encontrarás tu menú principal. Y aquí tienes un logo ahora logo. Encontrarás que está ocupando el título del sitio, pero no está tomando el logotipo. Entonces aquí solo puedes seleccionar un logotipo, puedes elegir una imagen. Entonces aquí voy a seleccionar esta imagen como el logo de mi página web. Aquí encontrarás que esta imagen tiene un texto en color blanco. Porque puedes ver que el logo está apareciendo aquí mismo. Pero como el color de fondo de nuestro encabezado es blanco y el color del texto también es blanco, el logotipo no se muestra correctamente. Entonces en ese caso, tenemos dos opciones. O podemos Photoshop de nuestro logo de una manera que el color del texto se convierta en negro o algo así a una oscura ella. O podemos cambiar el color de fondo de nuestra fila principal, que es nuestra barra de navegación. Entonces lo mejor sería cambiar el color de fondo, ya sabes, encabezado. Entonces, lo que podemos hacer aquí mismo, solo podemos cambiar el color de fondo. Pero antes de hacer eso, no queremos que aparezca el título del sitio. Así que podemos simplemente desactivar esto y el título del sitio ya no se mostrará. Todo bien. Incluso puedes cambiar la alineación de tu contenido, lo que significa si quieres tu logotipo aparezca en la línea izquierda, línea central o la línea derecha. Incluso puedes hacer eso aquí tienes la opción de elegir entre diferentes dispositivos dependiendo de tu modo de respuesta Viniendo a la parte de diseño aquí, puedes cambiar el margen. ¿Qué vamos a hacer? Cambiaremos el color de fondo. Cuando haga clic en la fila principal aquí, encontrarás Diseño Y puedo cambiar el fondo aquí. Tengo la opción de hacer uso de un fondo clásico en el color. Tengo la opción de elegir el fondo clásico o incluso puedo hacer uso de un degradado. Gradiente. Como ya has aprendido anteriormente, es como si se estuvieran usando dos colores al mismo tiempo en un formato lineal o radial. Puedes ver que puedes elegir entre diferentes esquemas de color prefabricados que ofrece este tema Pero incluso puedes trabajar alrededor de tus propios colores personalizados. Incluso puedes agregar tu propia imagen en el fondo, pero eso se vería realmente horrible. Así que vamos a quedarnos con el color. Y aquí se puede jugar alrededor del color. Muy bien, Ahora, cuando agregas un color a este particular, ya sabes, color de fondo, esto es solo para tu fila principal y no para tu fila superior e inferior. Lo que quiero decir es, si quieres, ya sabes, colocar tu botón en la fila superior, entonces encontrarás que la fila superior tendrá algún color de fondo diferente. Entonces, los ajustes solo se aplican para la fila principal y no para su fila superior o inferior. Espero que entiendas el punto. Vamos a traer esto de vuelta porque no queremos varias filas, solo queremos una sola fila. Y aquí tenemos el color de fondo negro. Ahora cuando mantenemos el color de fondo negro, podemos ver que el texto es texto. O la fuente para nuestro menú uno, el color no es realmente tan atractivo. Tanto los tonos, el fondo el color P en sí son muy oscuros. Entonces tenemos que hacer algún tipo de efecto contrastante. Haremos clic en Menú Uno. Iremos a Diseño, y cambiaremos el color P a blanco. Vamos a traer este blanco aquí. Encontrarás tres opciones de color, Inicial, hover y active Ahora bien, ¿qué significa active? Activo básicamente significa que dondequiera que hayas hecho clic en la página, digamos que has hecho clic en casa Entonces estás en la propia página de inicio, ¿verdad? Entonces siempre que estés en la página de inicio, el color de este texto cambiará a un color que hayas establecido, lo que te indicará eso. Bien, estás en esta página. Todo bien. Hagamos blanco para todos los colores. Y aquí encontrarás que Hover también es blanco y Active también es blanco Incluso se puede cambiar la familia de fuentes. Incluso puedes cambiar el tamaño de la fuente. Incluso puedes cambiar el peso de la fuente. Bien, aquí tienes todas las diferentes opciones. Incluso puede agregar la opción desplegable aquí mismo en el personalizador de temas Bien, entonces aquí, la opción desplegable podría ser de dos opciones Ya sea que desee que el menú desplegable muestre de dónde se desplaza alrededor de ese elemento de página en particular, o le gusta hacer clic en ese Y luego debería mostrarse el menú desplegable. Eso es algo así. Incluso puedes cambiar los elementos sobre el efecto. Eso significa si quieres que sea simple, caja de color sólido. Incluso puede agregar un espacio entre los elementos en el menú desplegable. Incluso se puede cambiar el desplazamiento. Básicamente significa que el espaciamiento entre los elementos. Bien, entonces tienes el desplazamiento horizontal. Básicamente significa que el espaciamiento vertical y horizontal. Muy bien, volviendo a la parte donde tenemos tu color de fondo, tienes un fondo negro y tienes algún tono negro grisáceo oscuro de una sección de héroe Ahora bien, este encabezado y esta sección de héroes no se ven tan bien. ¿No podemos simplemente hacer de esta fila principal algo que parezca transparente? Obviamente, podemos hacer eso con sólo volver a tu encabezado. Podemos simplemente volver al encabezado, solo podemos ir a encabezados, seleccionar Global Header, y luego hacer uso de la funcionalidad transparente y alternar el interruptor. Ahora encontrarás que ahora todo el encabezado es transparente. Tomará el diseño de una sección de héroe. Ahora encontrarás que una vez que hagamos nuestro encabezado sea transparente, se ha caído la configuración de margen y relleno. Eso significa que nuestra sección de héroes está coincidiendo con nuestro encabezado Podemos agregar el margen y el relleno más adelante a nuestra sección de héroe volviendo a nuestro elemento o creador de páginas. Pero por ahora sólo voy a mantener esto como mi encabezado transparente. Ahora aquí también encontrarás un botón que es Editar condiciones. Ahora, ¿qué significa? Una vez que haga clic en él, encontrarás que si quiero que esta configuración de visualización de encabezado transparente se muestre para todo mi sitio web o quiero que se muestre en una página web en particular solo puedo elegir entre diferentes opciones. Muy bien, si hago esto algo así como digamos que incluyas solo a esta página. Permítanme seleccionar como su página, que es la que es solo esta página. Y excluir. Se puede agregar excluir. ¿Podemos excluir esto a qué página? Digamos que me gustaría excluir esto de mi página de bloqueo o algunas otras páginas como la página de bloque, ¿de acuerdo? Puedo excluir esto de la página de bloque. Incluso puedo excluir esto de otra página, tal vez una página de cuatro o cuatro. Bien, así que ya puedo guardar los ajustes. Veamos qué pasa si cierro esto. Y permítanme publicar esto para que se guarden todos los ajustes. Y una vez que cierre, iré a mi panel de prensa. Voy a abrir una página de bloque yendo a la sección de correos. Un post, voy a ver mi. Así que una vez que vaya aquí, bien. Nuevamente, encontraré este encabezado transparente. Pero idealmente no deberíamos. Vamos a las páginas y ¿qué vamos a hacer? Navegaremos hasta la página del bloque. Dónde tenemos nuestra página de registro para que podamos crear una página de bloque si queremos. Volvamos a nuestro sitio web. Personalizaremos nuestro encabezado yendo al encabezado global, configurando las condiciones, y queremos incluirlo solo en nuestra única página. Bien, Este blog es solo una página y no para post. Puedes ver esto es de, este blog es parte de nuestra página y post. Seleccionemos una sola publicación. Bien. Una vez que hagamos esta publicación única, guardaremos condiciones. Bien, cuando volvamos, cambiaremos el color de la fila principal a negro. Bien, tenemos color negro, o tal vez cambiemos esto a algo así como sombra azul. Voy a cambiar a un tono azulado. Muy bien, algo alrededor de esto. Publiquemos. Volvamos a nuestro encabezado, Condiciones de configuración de encabezado global. Y queremos incluir el encabezado transparente a una sola página, excluir esto en un solo post. Bien, digamos todos los archivos de correos. Bien, las condiciones que hemos utilizado en esto y una vez que vamos publicamos. No estoy muy seguro de por qué no se han aplicado los ajustes. A lo mejor intentemos refrescar nuestra página web. Déjame volver al encabezado, condiciones de configuración de encabezado global. Bien, intentemos haciendo uso de la página de política de privacidad. Voy a repasar esto, puedo guardar condiciones publicar. Yo los cerraré. Ir a páginas, todas las páginas aquí. Deberíamos encontrar nuestra página de política de privacidad. Creo que lo hemos destrozado. Vamos a restaurar esta página. Muy bien, volvamos a unas páginas. Aquí tenemos esto. Vamos a previsualizar esto ahora. Encontrarás que este encabezado tiene un fondo azul. Eso es exactamente lo que significó toda la parte de condiciones. Volvamos a nuestro sitio web principal. Iremos a esta página web. Seleccionaremos en Personalizado una vez que vayamos aquí, una vez que nos desplazemos hacia abajo, encontrarás debajo de los menús, encontrarás que actualmente estamos usando el menú de la barra de navegación. Ahora en el menú de la barra de navegación tenemos una página de inicio, tenemos la página acerca de, tenemos la página de contactos. Pero, ¿y si quisiéramos agregar algunas páginas más en el menú principal? Intentemos agregar elementos. Aquí encontrarás elementor 58, que es la página que construimos usando todo nuestro creador de páginas Intentemos agregar esto. Una vez que lo agreguemos, podremos arrastrar y colocar exactamente donde queramos. Podemos reordenarlos. Una vez que hayamos hecho esto, solo podremos guardar y publicar. Ahora una vez que hayamos hecho esto, lo que puedes hacer, en lugar de establecer esta página de inicio como la página predeterminada de tu sitio web, puedes configurarla como la página predeterminada con solo regresar. Puedes volver atrás y puedes seleccionar en Configuración de la página principal en Core. Así que vamos a la página de inicio Ajustes, e inicialmente podrías estar viendo tu última publicación como la predeterminada. Simplemente puede seleccionar una estática. En lugar de seleccionar la página de inicio como tu inicio, puedes seleccionar elemento de 58. Y esto es lo que encontrarás como página predeterminada. Bien, debajo de la página de correos encontrarás diferentes opciones. Incluso puedes agregar una nueva página de publicación. Bien, veremos cómo podemos agregar post de bloque a esta parte. Pero vamos a publicar esto por ahora. Volveremos y echemos un vistazo a algunos otros ajustes. Ahora aquí también encontrarás diferentes menús y diferentes widgets que tenemos. Todos estos son elementos de prensa de Gutenberg. Aquí tienes la configuración de la página de inicio, que hemos comentado llegando a la parte de identidad del sitio. Aquí encontrarás el título del sitio que hemos guardado como tress y también encontrarás el ícono del sitio ¿Qué significa el icono del sitio aquí en la parte superior de este sitio web? Encontrarás este ícono en particular aquí mismo. Y este icono, si quieres cambiar este ícono a algo como esto o tal vez alguna otra imagen propia, simplemente puedes seleccionar un ícono. Simplemente seleccionaremos esta imagen y nos está pidiendo recortar porque las dimensiones son 512 por 512 píxeles. Así que simplemente lo bajaremos a esta dimensión aquí, encontrarás que el título del sitio o el icono del sitio ha sido cambiado. Bien, solo guardemos esto y volveremos a nuestro personalizador de temas Aquí en el tema bajo encabezado, hemos realizado cambios en torno a esto. Una vez que vayamos a la general, encontrarás diferentes opciones. Bien, en general, también encontrarás una opción que es desplazarte hacia arriba. Ahora, ¿qué significa una vez que agrego el scroll a la parte superior? Una vez que me desplace hacia abajo, encontrarás un botón en la parte inferior derecha de tu sitio web. Ahora este botón te permite que cada vez que hagas clic en el botón, este se desplazará hacia arriba hasta la parte superior de nuestra página web Esa es una característica muy útil cuando tienes una larga lista de elementos o secciones en tu página web. Y ayuda a tus usuarios a navegar hasta la parte superior de tu página web Ahora una vez que hagamos clic en este icono de flecha de tu scroll hacia arriba, verás diferentes iconos de botón. Puedes ver que tienes un botón predeterminado, puedes cambiar a algo como esto, algo así. Incluso puedes cambiar la forma del botón, tanto si quieres que sea círculo cuadrado. Incluso puedes cambiar el diseño, ya sea que quieras que el color del icono tenga forma de blanco , el color de fondo, puedes cambiar, incluso puedes agregarle algo de sombra e incluso puedes alinear si quieres que se muestre al lado más derecho o al lado izquierdo dependiendo de tu caso de uso. Esa es la única razón por la que apagué mi webcam Solo para mostrar ese desplazamiento hacia arriba. La funcionalidad está disponible principalmente en la parte inferior derecha de su página web. Todo bien. Ahora en la parte inferior, encontrarás que hay algún icono de la luna. Básicamente cambia a un tema de modo oscuro para tu personalizador de temas Y una vez que hagas clic en el icono del sol, se encenderá al tema del modo de luz. Esa fue alguna información básica. Publiquemos esto y una vez que volvamos, simplemente alternaremos este tornillo de apagado hacia arriba. También encontrarás una opción para activar el marco del sitio web. Entonces esto, ya sabes, hace que tu sitio web tenga un borde, una especie de efecto de marco. Incluso puedes cambiar el tamaño del marco, puedes cambiar el color del marco y cosas así. Muy bien, Volviendo a las migas de pan y otras partes bajo el diseño general, ¿qué significa migas de pan? Entonces asume que estás en la página de Walmart. Déjame llevarte a Walmart para que te pueda explicar las cosas con bastante facilidad. Voy a ir a Walmart y si voy a Departamento, bien, déjame seleccionar cualquiera de las cosas. Digamos que voy a la electrónica. Debajo de la electrónica, tenemos, digamos solo iphone. Y si hago clic en iphone aquí, encontrarás celulares comprar por marca. iPhone de Apple. Entonces esto es como una miga de pan Está mostrando esa en qué página, dentro de qué página dentro qué página encontraste el producto. Así que algo similar se puede hacer incrustando la miga de pan dentro de tu fila principal y cosas así Muy bien, así que espero que entiendas el punto. Echemos un vistazo al pie de página. Entonces, una vez que me desplace hacia abajo, encontrarás esta parte en particular que está en la fila inferior. De nuevo en el pie de página también encontrarás tres filas. La fila superior, la fila inferior, o debería decir la fila del medio y luego la fila inferior. Bien, aquí puedes agregar múltiples widgets. Puedes encontrar menú, diferentes íconos sociales, y vegetaria de uno a tres, a seis Entonces agreguemos vegetaria uno, vegetaria dos, y vegetaria Si hago clic en vegetaria uno, encontrarás que inicialmente está en blanco Podemos agregar bloques Gutenberg. Se trata de tres bloques de Gutenberg. Aquí puedo agregar encabezado, puedo agregar un encabezado, algo así como digamos de nosotros. Todo bien. También podemos cambiar la etiqueta de este encabezamiento. En un principio, podría decirse a H dos. Puedes cambiar esto a H346 dependiendo de tu caso de uso. Y aquí encontrarás sobre nosotros. Bien, podemos agregar otra también, digamos solo etiqueta de párrafo. Y puedo añadir algún texto básico, algo así. Sólo puedo añadir el texto simple. Voy a colocar el texto aquí mismo. O simplemente podría pegar tal manera que el estilo no se pegue aquí mismo También puedes encontrar el sobre nosotros en la vegetaria. Puedo agregar la configuración de la página. La lista de páginas podría aparecer o el menú completo. Se mostrarán todas las páginas que forman parte de nuestro sitio web. Sólo puedo buscar lista de páginas. Puedo traerlo aquí abajo. Encontrarás toda la lista de páginas que tenemos y que forman parte de nuestro sitio web. Todo bien. Incluso podemos agregar un encabezado a la parte superior aquí. Puedo agregar algo como páginas, Muy bien. Puedes ver que las páginas aparecen debajo de tu lista de páginas. Así que solo puedes arrastrarlo y soltarlo. O simplemente puedes colocarlo con solo hacer clic en las páginas. Al hacer clic en la flecha hacia arriba, puedes simplemente colocarla. Permítanme seleccionar esta parte. Simplemente arrastraré esto o bajaré esto. Todo bien, Y ahora puedes ver que las páginas aparecen en la parte superior y la lista de páginas aparece en la parte inferior. Bien. Aquí, también puedes agregar otros elementos. Déjame agregar algo como digamos contáctanos bien. Podemos agregar otros bloques aquí. Encontrarás un montón de opciones diferentes para usar, puedes encontrar e incrustar tu video de Youtube, tu video de Vimeo, y muchas otras cosas que puedes agregar aquí mismo, que no voy a ir en detalle Entonces, ¿quién entiende el punto de hacer uso de diferentes elementos de Gutenberg? Bien, aquí encontrarás diferentes íconos sociales también, y otras cosas que tenemos aquí. Encontrarás diferentes opciones para trabajar en diferentes configuraciones sobre colores similares, tu tipografía, el rendimiento de tu Pero si estás hablando en general, si estás haciendo uso de un creador de páginas, ya sea elemento o, o DV, es mejor ir por ahí con el color, la configuración de tipografía en ese creador de páginas en lugar de hacer uso de tu personalizador de temas para que tu sitio web no se rompa Aquí tenemos todo, aquí hemos cubierto toda aquí hemos cubierto configuración del personalizador de temas Espero que los chicos hayan disfrutado de esta conferencia. En la siguiente conferencia veremos cómo podemos crear block post usando el personalizador de temas 8. Crea y edita publicaciones de blog: ¡confía en mí!: Bien, veamos cómo podemos hacer una publicación de bloque. Aquí en la parte superior, encontrarás el ícono más, el plus nuevo. Una vez que pase el cursor alrededor de él, se mostrará una lista de opciones, medios de publicación, página de revestimiento, plantilla y usuario. Entonces, ¿qué significa? Una vez que hagas clic en la publicación, se te permitirá crear una publicación en bloque. Si haces clic en medios, podrás subir imágenes, videos y archivos GIF Si haces clic en la página, se te permitirá crear una página web Si haces clic en la página de destino, podrás crear una página de destino. Entonces, la diferencia básica entre una página de destino y una página web simple es básicamente que una página de destino generalmente está optimizada para la conversión. Básicamente significa que quieres que los usuarios, cada vez que aterricen en tu landing page, deben ingresar algunos detalles sobre su información personal o realizar una transacción instantánea a cambio algún producto digital o un servicio o algún tipo de reserva a tu evento. Eso es acerca de la página de destino, una página web que muestra y muestra el contenido y la información, esa es tu página web En términos generales, la landing page es para aquellos que quieren realizar una transacción instantánea. Y el propósito de toda la página no es comunicarse sobre la empresa o el producto o el servicio, sino más bien hacer una transacción instantánea, ya sea simplemente recogiendo la dirección de correo electrónico o su dinero al ingresar los datos de la tarjeta esa es la página de destino Plantilla. Como hemos visto anteriormente en el Element o Page Builder que podemos crear plantillas. Aquí mismo tenemos usuarios, puedes agregar múltiples usuarios a tu página web de prensa web. Vamos a hacer clic en Publicar. Una vez que haga clic en él, se le mostrará este editor de prensa aquí. Puedes agregar título a tu entrada de blog. Aquí, puedes agregar el contenido para tu entrada de blog. Cuando trato de agregar contenido, permítanme darle a esto algo así como blog número uno. ¿Todo bien? Y podemos decir que este es un blog de prueba. Todo bien. Este es mi título. Ahora aquí en el panel derecho, encontrarás que la visibilidad está puesta a pública. Eso significa que cada vez se publique esta publicación en bloque en particular, estará disponible para público y podrá ser vista por cualquier persona. Bien, ahora la única diferencia entre una publicación en bloque y una página web es que aunque el contenido de la publicación en bloque podría ser reutilizado en la propia página web Pero la publicación en bloque esencialmente permite a tus usuarios que están leyendo tu blog dejar comentarios al final de tu publicación de bloque y compartir este blog en los perfiles de redes sociales. Entonces ese es el único beneficio de agregar una nueva publicación de bloque. Cuando estás creando bloques, puedes hacer uso de plantillas, puedes cambiar la URL. Incluso puedes establecer quién es el autor de esta publicación de bloque. Si eres varios usuarios, puedes elegir quién está publicando este blog. Puedes categorizar todos y cada uno de los blogs. Digamos que tienes tres blogs, tres categorías de blogs, diseño web, comercio electrónico y SEO. Para que los puedas categorizar agregando nuevas categorías. Puedes agregar nuevos hashtags para que cuando las personas busquen alrededor diferentes bloques que hayas publicado, solo puedan ingresar algunas palabras clave. Y dependiendo de las etiquetas y categorías que las hayas categorizado, éstas se mostrarán, luego encontrarás una imagen destacada. Ahora incluso si tu contenido del bloque no tiene una imagen, puedes agregar una imagen destacada para que cuando toda tu página web, que mostrará todas las tarjetas de bloque, entonces por ahí se mostrará tu imagen destacada. Extracto básicamente significa que se un simple resumen de lo que se trata todo tu bloque Ahora extracto es algo opcional. Puedes escribirlo aquí abajo. No detectará automáticamente tu contenido y formará un todo excepto por el suyo. Tendrás que ingresarlo manualmente. Bien, aquí en la parte inferior, ya verás si quieres permitir comentarios por los usuarios o quieres permitir retrocesos rosados y track backs? Eso significa que cualquiera puede vincular de nuevo a tu entrada de blog. Siempre es una buena práctica mantener esto como comprobado. Bien, podemos agregar algo de contenido de bloqueo aquí. Puedo agregar contenido de texto, algo así como, digamos esto, bien. Voy a copiar el contenido de esta página web. Puedo pegarlo aquí mismo. Incluso puedo cambiar si quiero que esto sea negrita, cursiva, si quiero que sea una etiqueta de encabezado. Puedo cambiar esto a la rúbrica H dos. Puedo hacer esto como H una etiqueta. Por defecto, todos y cada uno de los títulos de tu entrada de blog se establecerán en N H una etiqueta. Todo bien. Sólo podemos editarlos. Todo bien. O incluso podemos seleccionar todos y cada uno de los elementos que tenemos en nuestra página web. Bien, aquí puedes agregar algunas cosas extra. Incluso puedes agregar un enlace a tu palabra particular o a tus oraciones. Se pueden destacar algunas de las palabras. Puede agregar una imagen de código en línea. Se puede agregar un subíndice o superíndice. Hay un montón de opciones diferentes. Bien, si haces clic en el ícono más aquí mismo, déjame mostrarte. ¿Qué quiero decir con eso? Si hago clic en este ícono más, puedes navegar entre diferentes elementos de Gutenberg o bloques de Gutenberg Aquí puedo hacer uso de, digamos que me gustaría incrustar una imagen. Sólo puedo buscar imagen aquí tengo, incluso puedo hacer uso de la galería. Eso significa que se podrían mostrar múltiples imágenes aquí mismo. Incluso puedes hacer uso del logotipo del sitio. No tendrás que navegar manualmente por el logo que has configurado para este sitio web. Incluso puedes hacer uso de la imagen destacada. Cualquier imagen que esté establecida para la imagen destacada se mostrará aquí. Incluso puedes configurar la portada de esta entrada de blog. Bien, incluso puedes agregar medios y texto para que el contenido y la imagen se envuelvan alrededor. Todo bien. Se puede ver que básicamente dice que establecen medios y palabras lado a lado para un diseño más rico, se pueden trabajar algunas cosas Podemos subir la imagen o podríamos seleccionar la imagen de la mediateca. Eso es lo que preferiría hacer aquí. Puedo seleccionar a estos tipos. Bien, y esto es lo que tenemos para nuestra entrada de blog aquí. Incluso puedo publicar, o puedo agregar algo más de contenido. Permítanme intentar agregar algo más de contenido. Yo sólo puedo agregar algún contenido de párrafo aquí. Voy a copiar el siguiente texto. Bien, voy a pegarlo aquí mismo. Puedo asegurarme de que se trata de texto de párrafo. Se puede encontrar que se trata de un texto de párrafo. Bien, aquí tenemos todo el poste de la cuadra. Incluso puedo añadir un poco más de contenido. Solo puedo ir a la página acerca de aquí, encontraré la mayoría del contenido. Creo que sólo puedo copiar. Sólo puedo colocarlo aquí mismo. Bien, déjame hacerlo, lo pegaré. Bien, creo que podríamos no haber copiado todo el asunto, así que simplemente copiaremos y pegaremos todo el contenido. Ahora una vez que hayamos hecho esto, publique. Bien, podemos publicar y encontrarás que este blog está disponible para ver. Ahora una vez que veamos el post, veamos cómo se ve. Entonces aquí puedes encontrar que el encabezado en realidad está teniendo un fondo azul. Porque si recuerdas correctamente, cuando estábamos tratando de darle algunas condiciones a la configuración de visualización de tu encabezado, dijimos que solo para la propia página de inicio, que es elemento de 58, el encabezado debería tener un fondo transparente. Pero para las páginas de tu blog, el encabezado debe tener un fondo azul. Bien, así que aquí puedes encontrar la zona donde la gente puede dejar comentario. Aquí pueden publicar el comentario e incluso pueden volver a compartir tu contenido Bien, aquí lo encontrarás. ¿Quién publicó este blog? ¿Qué día exactamente? ¿Y está categorizado en alguna categoría o no? Si quieres reorganizarlos y conformarlos en una estructura adecuada, incluso puedes hacerlo yendo a la personalización Nuevamente, haremos clic en Personalizador de temas. Aquí en la sección de publicación de bloque, encontrarás publicaciones individuales aquí. Hay diferentes diseños para estructurar tu publicación. Por defecto se establece en ancho estrecho. Eso significa que primero aparecerá tu título, luego la imagen, y luego así será la estructura tras. Si cambio esto a ancho normal, puedes ver que no hay tal relleno o margen entre tus direcciones derecha e izquierda. Si cambio esto a barra lateral izquierda, entonces aquí encontrarás diferentes títulos de publicaciones aquí en el lado izquierdo. Y algo similar se puede mostrar en el lado derecho. Bien, aquí incluso puedes hacer uso de imagen destacada si publiqué esto. Espera un segundo, sólo un segundo aquí. No encontrarías una imagen destacada para esta publicación de bloque porque no hemos establecido nada. Entonces déjame cerrar. Voy a editar esta publicación haciendo clic en ese botón. Y aquí encontrarás que no hemos establecido ninguna imagen destacada. Así que permítanme seleccionar una imagen destacada. Lo que soy, seleccionaré a este tipo como la imagen destacada. Todo bien. Esto no forma parte de la publicación de bloque sino más bien es una imagen destacada. Entonces déjame actualizar mi blog y cuando vea mi página. Entonces para poder ver esto, sólo puedo hacer clic en este botón para ver el post. Y se abrirá en una nueva pestaña. Ahora aquí, aunque lo hemos dicho como imagen destacada, no la encontrarías en nuestra publicación de bloque. ¿Por qué? Entonces, si hacemos clic en el personalizador de temas, cuando repasamos la configuración de una sola publicación, y cuando nos desplazamos hacia abajo, encontrarás que la configuración de la imagen destacada está desactivada Una vez que alternemos, encontrarás que primero se mostrará la imagen destacada, luego el título, y luego quién publicó todo este bloque. Publica aquí, incluso puedes agregar etiquetas de publicación, por lo que se mostrarán todos los hashtags que estés usando. Incluso puedes agregar una caja para compartir en la parte inferior. La gente podrá compartir esta publicación en su página de Facebook, enlazada en perfil, Pinterest, o incluso Twitter. Incluso puedes agregar una caja de autor para que el autor que haya publicado este blog pueda agregar algunos comentarios más. Incluso puedes agregar navegación de publicaciones. Todo bien. Incluso puedes agregar navegación de publicaciones. E incluso puedes agregar publicaciones relacionadas, lo que básicamente significa que todas las publicaciones relacionadas con este título y relacionadas con esta categoría se mostrarán como una forma de sugerencia al final de la publicación de bloque. Espero que entiendas el punto sobre todo el edificio y la edición de tu publicación de bloque. Creo que esto fue más o menos sobre eso. 9. Diseñar nuestra página de inicio Mobile Responsive: Bien, veamos cómo podemos construir nuestro sitio web receptivo. Ahora mismo, lo que estás viendo aquí mismo en la pantalla, este tipo de layert de diseño se mostrará en las pantallas de escritorio ¿Qué sucede si vemos este mismo sitio web en una tableta o una pantalla móvil? Obviamente, los elementos pueden coincidir entre sí, porque el ancho de dimensionamiento y el margen de relleno cambiarán según el ancho del dispositivo. Así que tendremos que cambiar antes que realmente hagamos que nuestro sitio web sea receptivo. Hay algunas cosas que quedan por hacer con este sitio web, particularmente con nuestra sección de héroes. Primero, como puedes ver, esta imagen y el contenido aquí está coincidiendo con nuestro encabezado porque hemos mantenido nuestro encabezado como transparente Agreguemos un poco de relleno a la sección de héroes. Haremos clic en editiith Elementor. Y esperemos a que se cargue. Aquí mismo para esta sección, voy a dar clic aquí mismo. Se puede ver que estamos editando todo el contenedor. Vamos a ir a la configuración avanzada, y aquí mismo en el relleno, voy a añadir un poco de relleno desde arriba. Solo usaré mi tecla de flecha hacia arriba en el teclado para desplegar la sección de héroes. Así que nuestros 100 píxeles de relleno desde la parte superior se ven bien. Así que vamos a publicar esto. Bien, una vez que me desplace hacia abajo, tengo todas estas secciones que aparecen en pantalla de escritorio. Ahora hay una cosa que dejé por cubrir antes, que es el acordeón Cuando estábamos buscando pestañas, creo que deberíamos haber cubierto también sobre la sección de acordeón Permítanme agregar una nueva sección rápidamente. Voy a añadir una nueva sección aquí mismo. Voy a añadir una caja flex de dos columnas. Aquí tenemos nuestro acordeón. Primero vamos a agregar un título. Vamos a agregar un título debajo de este título, vamos a hacer uso de ¿qué dices nuestro acordeón Podemos agregar un acordeón en su lugar. Lo que podemos hacer, podemos simplemente hacer un duplicado de este divisor, que podemos simplemente traer este divisor aquí mismo. Una cosa, podrías cuestionarte, que el ancho para este divisor aquí mismo en este contenedor en particular era tanto. El ancho era muy grande de lo que podemos ver aquí mismo cuando duplicamos y colocamos aquí mismo dentro de este contenedor. Se puede ver que el ancho se ha ajustado en consecuencia. ¿Por qué es eso? Porque aquí mismo tenemos dos columnas. Tenemos dos contenedores. Se ha ajustado su altura. O mejor dicho debería decir con, en consecuencia, bien, solo dejemos una línea. Esto, aumentaremos el ancho hasta aproximadamente este punto. Vamos a añadir acordeón. Agreguemos acordeón. Ahora, el acordeón es algo así como una sección C. Puedes ver aquí tenemos acordeón. Podemos dar click sobre estos diferentes elementos y ellos colapsarán y colapsarán. En el acordeón, tendrás algún contenido, tienes un ícono Cuando ya esté abierto, encontrarás el contenido aquí mismo. Puedes cambiar el contenido, puedes cambiar el título. Es algo parecido a lo que hemos visto antes. Lo que podemos hacer, incluso podemos cambiar el icono. Ahora mismo tenemos la biblioteca de iconos. Podemos navegar entre los diferentes íconos que tenemos. Puedes ver los iconos recomendados para nuestro acordeón están aquí mismo Incluso se puede cambiar la alineación para el icono. En lugar de hacer la línea izquierda, podemos cambiarla a la línea derecha aquí mismo. Se ve bien, bien en el contenedor izquierdo. Lo que podemos hacer, podemos agregar un contenedor más. Lo que intento hacer es que estoy, solo estoy tratando de hacer uso de esto, este tipo de caja. Ahora esto se volverá muy difícil para los principiantes. Intentemos hacer una versión fácil de este diseño. Lo que voy a hacer, solo voy a agregar un nuevo contenedor dentro de este contenedor existente. Y vamos a asegurarnos de que este contenedor esté alineado vertical y que el ancho de esta altura de contenedor en particular sea en realidad 100. Bien, así que en realidad usa toda la altura. Bien. Hagámoslo de ancho completo. ¿Y qué vamos a hacer? Cambiaremos el ancho también más adelante, pero por ahora intentemos agregar pocas imágenes dentro de esta. Voy a agregar, vamos cambiar la imagen a algo así como, aquí tengo esta imagen, voy a hacer uso de esta imagen. También agregaré una imagen más. Entonces déjame hacer un duplicado de esto. Todo bien. La dirección del contenedor del contenedor se cambiará a horizontal. Bien. La dirección interna del contenedor se cambiará a horizontal. Voy a cambiar esta imagen a algo así como alrededor, digamos. Bien, se puede ver la dirección, o mejor dicho debería decir que los tamaños de estas imágenes son diferentes. Para hacerlos algo parecido, voy a duplicar esto. Voy a duplicar esto. Nos aseguraremos de que este contenedor esté bien. Sabes lo que debo hacer. Debería hacer un duplicado de este contenedor. Todo bien. Un contenedor tiene estas dos imágenes y el otro contenedor tiene estas dos imágenes. Bien, intentemos revertir el contenido. Bien, así es como aparece. Ahora el contenedor, el contenedor interior que tenemos aquí mismo, intentará cambiar su altura de tal manera que dentro del contenedor mismo, esto se vea bien. En mi opinión, podemos darle algún color de fondo a este contenedor. Déjame estilizar esto. Podemos seleccionar un color, podemos darle a esto algo así como negro o algo así como un tono más oscuro. Esto se ve bien. Así es exactamente como hemos hecho un diseño de diseño algo similar a esto, ¿verdad? La única diferencia es que la imagen tiene algún radio de borde. Todo bien. Espero que entiendas el punto sobre esta parte. Incluso podemos agregar algunos elementos más dentro de este acordeón. Al ir al contenido, podremos duplicar elementos duplicados que se harán. Podemos cambiar este cuatro, este 23 y así sucesivamente. Bien, publiquemos esto. Ahora veamos cómo podemos hacer que nuestro sitio web sea receptivo, que fue toda la intención detrás de construir todo este video. Justo aquí en la parte superior, encontrarás el escritorio encendido, la tableta y el ícono del teléfono inteligente. Ahora bien, si no encuentras esto en la parte superior, definitivamente lo encontrarías en la esquina inferior izquierda de tu elementor editando pino fino El sitio web se ve bien en las pantallas de escritorio, pero veamos cómo se ve en las pantallas de las tabletas. Simplemente voy a hacer clic en el modo retrato de mi tableta. Aquí puedes encontrar que nuestra sección de héroes en sí no se ve tan bien. El título en sí, podemos bajar el tamaño de la fuente. Pero las dos columnas aquí mismo, no se ve tan bien. Lo que podemos hacer es que tenemos dos opciones. O bien podemos desplegar el tamaño de fuente e intentar encajar todo el contenido de una manera que se ajuste dentro del ancho de la tableta. Pero yo sugeriría hacer uso de otra sección lo que podamos hacer. Simplemente podemos replicar esto haciendo clic derecho en nuestro contenedor Si no eres capaz de hacerlo, lo que puedes hacer, simplemente puedes hacer clic en Estructura. Asegúrate de que estás seleccionado la sección héroe de nuestro contenedor, y luego solo puedes hacer un duplicado de él. Bien, una vez que hayas hecho eso, justo debajo de esta sección de héroes, encontrarás la pantalla duplicada, Bien. Ahora, en la sección de duplicados, lo que voy a hacer, sólo voy a quitar este contenedor. Al tener esta imagen, no queremos eso, simplemente borraremos esto aquí. Nos quedaremos con este contenedor en particular teniendo un textor, el divisor, y el título, seguido de otro testador y dos botones Intentemos alinearlos una manera que aparezca en el centro. Para eso, sólo voy a hacer clic en este contenedor. Iré a la dirección. Obviamente queremos que esto sea horizontal. No hace diferencia aunque cambie esto a vertical. Pero lo que queremos es que queremos justificar el contenido para centrar. Hagamos eso. Ahora puedes encontrar que el contenedor tiene alineado en el centro, fino. Ahora todo eso es bueno, pero también intentemos cambiar todo el tamaño de fuente de este título en particular. Voy a ir a la pestaña Estilo, voy a dar click en Tipografía. Voy a bajar el tamaño a algo aproximadamente, digamos solo 50 pixeles. Así que solo me quedaré los 50 pixeles y eso quedaría bien, bien. Ahora puede que encuentres eso por aquí. Tenemos algunos acolchados desde arriba, pero no tenemos ningún relleno de abajo. Agreguemos también un relleno desde la parte inferior. Aquí lo que voy a hacer, sólo voy a hacer clic en este contenedor. Iré a la sección avanzada. Aquí mismo, encontrarás relleno de los cien píxeles superiores, pero vamos a desplegarlo y cambiaremos el relleno por abajo también. Simplemente desvincularé los valores. Una vez que hagas clic en Desvincular, encontrarás que los valores superiores también se han restablecido a cero La razón simple detrás de eso es como puedes ver, además de este relleno, encontrarás el ícono de la tableta. La configuración del relleno se ha restablecido para el dispositivo tablet. De nuevo, voy a tener que hacer esto como 100 para fondo. Voy a hacer esto algo así como 50. Eso nos dejaría con suficiente espacio para iniciar nuestra siguiente sección. Bien. Si quieres, puedes borrar un botón si quieres, pero yo solo lo mantendría como está. Y si quieres, puedes incluso centrar alinear este contenido aquí mismo. Sólo voy a ir a esta parte. Voy a ir a estilizar, y voy a cambiar la alineación al centro. Ahora, todos estos ajustes solo se aplican para pantallas de tabletas. Puedes ver aquí mismo tenemos el modo retrato de tableta. Podemos alinear este divisor en el centro. Incluso puedes nuestro título a centro. Vayamos al contenido Aquí, encontraremos alineación. Esto también alineará este centro. Asegurémonos de que este contenedor en particular tiene dos botones en línea también se justifique Centro de contenido. Todas estas cosas aparecen en el centro, bien. Ahora incluso si veo el modo escritorio, encontrarás que la otra sección aparece justo debajo de esta. No queremos que eso suceda. Esta parte de la sección héroe debe mostrarse solo en las pantallas de tabletas y películas y debe estar oculta en el escritorio. Mientras que la sección de héroe superior, que tenemos aquí mismo, debería mostrarse solo en las pantallas de escritorio y debería apagarse para dispositivos de tableta y teléfono inteligente. Así que vamos a hacer clic en este contenedor en particular. Editaremos este contenedor. Iremos a la pestaña Avanzadas, justo debajo del toque Avanzado. Cuando te desplazas hacia abajo, encontrarás la sección llamada como responsive. Simplemente haga clic en responsive. Y aquí encontrarás diferentes opciones a elegir. El modo de visibilidad, nos ocultaremos en el modo retrato de la tableta, nos ocultaremos en el modo retrato móvil. Y en la siguiente sección, vamos a ocultar esta en modo escritorio, obviamente, porque no queremos que esta parte se muestre en pantallas de escritorio. Si voy al modo escritorio, encontrarás esta sección de héroe apareciendo Y esta parte la cual se está mostrando pero solo en modo gris porque somos el advenimiento, somos el editor, por eso podemos ver esta parte. Bien, aquí, una vez que entremos en la pantalla de la tableta, encontrarás la sección Siguiente héroe. Esta parte de la sección de héroes. Bien. Vamos a desplazarnos hacia abajo y aquí encontrarás estas tres cartas. Ahora bien estas tres cartas efecto degradado, trabajamos tanto y hubo tantas complicaciones justo en contenedores anidados Y aprendimos y nuestra energía se desperdició porque no podemos simplemente caber las tres columnas en un solo ancho. Entonces, ¿cómo podemos trabajar de esta manera sencilla? Simplemente podemos hacer click sobre este contenedor. En lugar de hacer que la dirección de la caja flexible sea horizontal, no podemos hacer algo como vertical? Podemos lograr el mismo resultado. En este momento se puede ver el ancho según el ancho de nuestra pantalla de escritorio. Las tarjetas de degradado están siendo ajustadas correctamente aquí. Incluso puedes ajustar el icono, este texto, y esta línea central de texto si quieres, pero solo lo mantendré como está. Bien, y fíjate muy bien que esta dirección, que se establece en vertical, actualmente solo es aplicable para las pantallas de las tabletas, no para las pantallas de escritorio. Si solo vuelvo al modo escritorio, encontrarás que estas tres columnas, estos tres contenedores aparecerán en modo caja flexible horizontal. Bien. Volvamos a este modo tablet. Podemos desplegar este tamaño de fuente yendo a la tipografía, y podemos hacerlos aparecer de tal manera que aparezcan en una sola línea Aquí de nuevo, haremos estos 50 píxeles y aseguraremos de que este esté seleccionado en modo tablet, ¿verdad? Por lo que 50 píxeles de tamaño para este título se aplicarán únicamente en las pantallas de las tabletas. Espero que entiendas el punto. Una vez que nos desplazemos hacia abajo, encontraremos otra sección donde sólo podremos copiar y pegar el estilo. Así que simplemente, vamos a pegar el estilo aquí mismo. Bien, y aquí puedes ver que tenemos el título nuevamente en 50 pixeles. Ahora bien, la ficha uno y la pestaña dos, ambas están apareciendo muy bien. No necesariamente tenemos que cambiar, al menos para la pestaña no encuentro la necesidad cambiar realmente nada dentro de la pestaña uno. Pero para la tabulación dos, sí creo que podemos cambiar pocas cosas alrededor de tal manera que nuestro icono no aparezca tan pequeño y el texto también aparezca correctamente en una sola línea, el propio título. Entonces intentemos erigirlos. Eso lo que voy a hacer, sólo voy a publicar esto. Bien, voy a publicar esto. Volveré a mi modo de vista una vez que haga una vista previa de mis cambios aquí. Cuando flote alrededor de mi elementor editith, encontrarás la pestaña uno y tocarás Simplemente hagamos clic rápidamente en el tap dos para que sea cual sea el contenido que tengamos en el tap dos, podamos editarlo directamente aquí. Simplemente puedo hacer clic en modo responsivo, modo tablet. Aquí encontrarás el icono. Vamos a hacer clic en el cuadro de imagen. Aquí podemos ir a la parte de estilismo. Dentro del estilismo, tenemos la imagen. Vamos a hacer clic en Imagen. Aquí puedes ver que el ancho actualmente está establecido 15% Aumenta esto a algo así como, digamos solo 30. Bien. Podemos aplicar la misma configuración a esto también más adelante, pero intentemos solucionar esta parte aquí. El contenido en sí, donde tenemos el título y la descripción. También podemos reducir la tipografía de la misma. Vamos a bajar el tamaño a unos 20 píxeles. 20 pixeles quedarían bien en mi opinión ya que esto. También aplicaremos todos los mismos ajustes. Vamos a copiar y pegaremos los mismos ajustes aquí mismo. Peinado en pasta. Y aquí puedes encontrar que así como aparecerá toda nuestra caja de la pestaña dos. Bien, publiquemos todo esto. Vamos a previsualizar los cambios. Volveremos aquí. Actualicemos la página web. Cuando veamos más la tableta, encontrarás que los cambios que hicimos se reflejarán aquí mismo. Déjame simplemente desplazarme hacia abajo hasta la parte donde podamos ir a la pestaña dos. Una vez que seleccione el toque dos, encontrará que aparece un título en una sola línea. Además, la imagen parece ser más grande de lo que solía verse anteriormente. Una vez que te desplazas hacia abajo, también encontrarás tu acordeón, que no encuentro ninguna necesidad de hacer lomos alrededor del acordeón Pero para esta parte donde tenemos estas imágenes en particular y diferentes secciones que tenemos aquí mismo, podemos agregar alguna brecha entre ellas. Brecha entre este contenedor y este contenedor. Podemos agregar algo de espaciado entre ellos. Simplemente podemos hacer clic en el contenedor exterior. Podemos desplazarnos hacia abajo aquí. Sólo podemos aumentar la brecha entre ellos. Bien para que ocupe todo el espacio. 70 de columna y fila se ve bien, en mi opinión. O incluso podrías cambiar la dirección de la caja flexible de vertical a invertida. A usted le parece esto. Simplemente puedes cambiarlo como quieras. Una vez que te desplazas hacia abajo, encontrarás esta sección donde esta imagen debería superponerse con la siguiente sección, pero no sucede en modo tablet. ¿Por qué? Así que vamos a comprobarlo. Obviamente, hay algún problema con la configuración de relleno y margen. No tenemos que hacer necesariamente ningún cambio alrededor esta sección en particular donde tenemos la imagen de este tipo. Simplemente pasemos rápidamente a la siguiente sección. Aquí tenemos esta parte. Mantendremos los ajustes de relleno tal como están, pero lo que realmente queremos es que esta sección tenga margen desde arriba en valor menos. Vamos a avanzado. Aquí tenemos margen. Desvinculemos los valores para el margen desde arriba. Lo desplegaré para que parezca que la imagen parece superponerse con la siguiente sección. Bien, así es como se ve el contenido. Vamos a hacer clic en la imagen de tal manera que el texto y esta imagen no coincidan tanto entre sí. Vamos a ir a esta imagen Ajustes avanzados desde la derecha, encontrarás que hay margen, que es menos píxeles de estudio. Vamos a caer aquí abajo. Teníamos -30 Inicialmente aquí de abajo teníamos menos 220, ¿verdad? Bajar a algo así como -18 creo que -18 se vería bien, -18 se ve bien Y vamos a mantener esto tal como está. Bien, aquí tenemos cosas diferentes. Ahora bien, el contenido para este contenedor donde tenemos esta parte, está tocando toda nuestra húmeda. Puedes ver aquí mismo lo que podemos hacer. De hecho podemos dar algo de relleno de derecha e izquierda, derecha. Sólo vamos a este contenedor. Iremos a avanzado de arriba y abajo. Sí tenemos 20, pero también vamos a hacerlo de derecha e izquierda. Agreguemos de derecha e izquierda, 20 pixeles. Ahora el contenido parece agradable. Bien. También bajemos este título a lo que tenemos aquí mismo. Sólo voy a copiar. Voy a pegar el estilo que aparece aquí mismo, Pero puedes encontrar el color de la fuente fue cambiado aquí. Tendremos que cambiar el color de la fuente a blanco. Bien, fuente de color blanco. Aquí tenemos estas imágenes. Bien, todo está apareciendo muy bien. Vamos a desplazarnos hacia abajo. Y aquí tienes la sección de llamado a la acción. Bien, no tenemos que preocuparnos esto porque esto se ve realmente bien. Ahora, en cuestión de minutos, en realidad hicimos que nuestro sitio web respondiera al modo tablet. Veamos cómo se vería un sitio web en un dispositivo móvil. Simplemente haremos clic rápidamente en el icono del modo retrato móvil aquí mismo. Encontrarás que la sección de héroes se ve bien, en mi opinión. Bien, pero aún podemos agregar algunas brechas entre todos los elementos de tal manera que en realidad cubra todo el espacio para la sección de héroes Así que vamos a hacer clic en el contenedor exterior para la sección héroe. Nos desplazaremos hacia abajo en la propia pestaña de diseño . Encontrarás brechas. Entonces vamos a tratar de incrementar la brecha de tal manera que ya sabes, no tenemos mucho espaciado. Bien. También para toda esta sección, iremos a Avanzado y desplegaremos el relleno. Todo bajaremos el relleno y solo queremos que el relleno de arriba esté alrededor, digamos 50 de abajo también. Dejémoslo como 50. Bien, no estoy muy seguro de cómo se vería nuestro encabezado cuando coincide con nuestra sección de héroes Solo mantengamos esto como 100 por defecto. Creo que esto se ve bastante genial. Una vez que nos desplazamos hacia abajo, tienes todos los demás elementos. De nuevo, podemos bajar el estilo de fuente. El tamaño de la tipografía debe ser desplegable a unos 25 píxeles para esta Además, podemos bajarlo a algo así como, yo diría, diez píxeles, porque ahora mismo estamos viendo en un escritorio, ¿verdad? Podríamos encontrar que el contenido para nombre de la empresa es demasiado pequeño. Pero una vez que veamos el sitio web exacto en un dispositivo móvil, entonces encontraríamos que esto aparece muy bien. También vamos a bajar el ancho de esta cosa para algo alrededor de este divisor. El ancho también se ve bien. Nuevamente, para esta parte, se puede desplegar el estilo de la fuente y el tamaño de la fuente. Creo que se ve bien, así que no voy a perder el tiempo con esta parte. Sí, pero para el segundo contenedor donde tenemos la imagen en el fondo, podemos cambiar la posición de este tipo en el segundo contenedor. Déjame seleccionar estructura. Justo aquí en la estructura, tenemos el segundo contenedor. El tercer contenedor, Bien, el segundo contenedor, fondo, vamos a ir al estilo. Aquí tienes el fondo en el tamaño de la pantalla, Aquí tienes portada. La repetición es por defecto, no se puede cambiar la posición, creo que sí intentemos ver si podemos cambiar la posición o no. Si hago esto como costumbre, entonces veamos qué pasa. Bien, solo para dispositivo móvil, podemos cambiar esto por algo alrededor. Todo bien. Esto quedaría bien en mi opinión. Bien, Esto se ve muy bien. Apliquemos también los mismos ajustes que hemos hecho para esta parte para las otras secciones también. Bien. ¿Qué vamos a hacer? No creo que tengamos que bajar el tamaño de fuente para el título. Todo bien. Sólo voy a copiar. Me desplazaré hacia abajo y pegaré el estilo para este título. Haré lo mismo por esto y por el divisor también. Bien, ahora tenemos la tabulación uno y la pestaña dos. Vamos a hacer clic en Tapon para ver cómo se ve. Tab se ha ajustado muy bien. La dirección de la caja flexible se ha cambiado de horizontal a vertical automáticamente. Pero para la ficha dos, creo que todavía hay que hacer algunos trabajos. Puedes ver aquí mismo, no queremos que aparezca esta frontera. Todo bien. No queremos que aparezca esta frontera. Si queremos, podemos agregar esto aquí mismo. Cambiemos esa cosa. Simplemente publicaremos esto. Por ahora, vamos a previsualizar los cambios. Haremos clic en tth Elementor y la pestaña dos aquí, iré a la pantalla del móvil para este contenedor en la pestaña Estilo Ve a la frontera, voy a quitar esto. Nos aseguraremos de que no haya frontera, o incluso si hay algún borde queremos agregar al de abajo. Vamos a agregar al fondo. Así se vería el espaciado , pero eso no se ve bien. Déjame reiniciarlo. Voy a hacer esto como cero otra vez. Bien. ¿Qué más podemos hacer? Creo que esto se ve bien si quitamos el borde, y esto se ve bastante bien en mi opinión. Bien. Solo publiquemos esto. Bien, cuando volvamos, refrescaremos nuestra página. Encontrarás que se aplicarán los cambios. Vamos a hacer clic en el modo móvil. Nos desplazaremos hacia abajo hasta nuestra pestaña de dos partes. Bien, aquí tienes la ficha dos. Y así aparece en este contenedor para el acordeón O mejor dicho debería decir esa pestaña, encontrarás que la alineación es como, esta posición tiene que ser vertical. Veamos cómo funciona en vertical. No ayuda en vertical. Vamos a mantenerlo como horizontal y al centro aquí. Se puede elegir entre diferentes tipos. Lo que esencialmente estaba sucediendo antes era que en las pantallas de escritorio y tabletas, Tab y Tap To están apareciendo en la parte superior. Pero ahora en dispositivo móvil, lo que está pasando, es simplemente actuar como un acordeón Aquí tienes la opción Tab, y luego en la parte inferior tienes la opción Tap aquí. El siguiente apartado, el acordeón aquí. Vamos a agregar un poco de relleno si quieres, puedes, pero por ahora solo lo dejaré como está. Y aquí las cosas se ven bien. Vamos a desplazarnos hacia abajo hasta la parte donde tenemos esta parte aquí, la imagen, y esta parte. Ya que hemos dicho que el índice de imagen es uno, aparecerá al frente. Aquí tenemos el contenido del cuerpo, el título, la descripción, el divisor. Y aquí tienes la imagen. La imagen aparece delante del texto. Ahora mismo, no queremos que suceda esta cosa superpuesta. Lo que podemos hacer, en lugar de hacer que este margen sea menos 220, solo podemos mantenerlo así. Esto se ve mucho más limpio y mucho mejor. Y aquí creo que estamos bastante bien para ir. El único cambio que tenemos que hacer es alrededor del nombre de la empresa, el título, y así sucesivamente. Así que copiemos y peguemos el estilo muy rápidamente. Bien, también alineemos este centro aquí. Puedo ir a la parte de estilo para el editor de texto. Puedo alinear este centro. Puedo alinear este centro para la parte. Bien, para todo el asunto de la prueba. Podemos justificar el centro de contenido. Asegurémonos de que el cuadro de imagen que tenemos aquí mismo, todos ellos aparecen en alineación central, necesita ser centro para todos ellos. Sólo podemos copiar. Podemos pegar el estilismo para esta multa aquí. También podemos cambiar la configuración. Bien. Puedes encontrar que todas las imágenes de los socios, los logotipos de los socios están apareciendo muy bien en un formato vertical, pero necesitamos agregar algunas brechas entre ellas. Vamos a hacer clic en el contenedor más interno. Nos desplazaremos hacia abajo y agregaremos algunos huecos. Muy bien, la brecha de unos 45 píxeles se vería bien. En mi opinión, 45 píxeles se ve bien. Solo mantengámoslo tal como está. Podemos cambiar esto otra vez, pero no voy a ir a hacerlo una y otra vez. Aquí puedes bajar el tamaño de fuente si quieres, incluso para el botón. Además, puedes hacer que este botón sea un poco más pequeño solo para la pantalla del móvil. No se puede cambiar el estilo del botón solo para la pantalla del móvil. Si cambia esto demasiado pequeño, el mismo tamaño de botón se reflejará también en los otros dispositivos. Solo mantengámoslo tal como está. Y creo que estamos prácticamente hechos para el modo responsive del sitio web también. 10. Crea encabezado / barra de navegación personalizado: Veamos cómo podemos construir nuestra propia barra de navegación personalizada usando el elemento o enchufarlo. Aquí mismo puedes ver que tenemos una lista de todas las páginas que tenemos. El elemento o página 58 es la portada de nuestro sitio web. Eso significa que cada vez que escribimos URL, host local para prensa, esta página se abrirá. Lo que me gustaría hacer es que podamos simplemente cambiar el hogar aquí mismo. Podemos darle a esto algo así como blog, el que tenemos como nuestro elemento, o 58. Podemos cambiar eso a a. déjame editar esto rápidamente y podemos cambiar esto a casa. Bien, cambiemos esto también a casa. Este es el slug de URL, y este es el título de su página web Actualicemos. Volvamos a nuestro menú. Aquí mismo en la sección de apariencia, encontrarás menús en menús laterales Primero, obviamente nos gustaría mostrar la página de inicio, luego la acerca, y luego la página de bloqueo, y la página de contactos. Bien, ahora vamos a guardar el menú. En primer lugar, guardaremos el menú. Este menú es solo para el arreglo de todos los periodos que tenemos en nuestra página web. Al igual que usamos personalizador de temas de bloques para personalizar nuestro encabezado y barra de navegación para cambiar el color de fondo y alinear nuestro logotipo, los botones Y vimos muchas cosas diferentes. Algo similar se puede hacer con Element o Pro plug in aquí dentro de las páginas. Voy a añadir algunas páginas más y vamos a dar esto como un título de bloque. Vamos a darle a esto algo así como el bloque número dos. Todo bien. En primer lugar, esto no es en realidad una página. Más bien debería ser un post. Demos esto como post y agregaremos un post más. O más bien lo que ya tenemos. Dos post, Hello World y blog uno. Editemos el título. Bien, podemos editar esto algo así como el blog dos. Bien, voy a actualizar esto. Volveremos a nuestro tablero aquí. Se puede ver que tenemos el bloque dos. Bien. También podemos cambiar la babosa de los Urales. Cambiemos esto al blog dos. Bien, actualicemos esto. ¿Qué vamos a hacer? Déjame editar esto rápidamente. Bien, esto se ve bien. Actualicemos incluso en la babosa ural. Sólo voy a mantener esto como blog uno. Bien, actualicemos ahora lo que voy a hacer, solo voy a volver a mis menús, menús apariencia, aquí mismo en la sección ver todos. También podría publicar páginas interiores. No encontrarás la entrada del blog, tendrás que ir a la sección de publicaciones. Aquí, encontrarás el bloque 1.2 Vamos a agregarlos y hacerlo parte de tu blog. Podemos tener un menú desplegable. Siempre que alguien se cierne alrededor de la cuadra, encontrará el bloque uno y el bloque dos Bien, vamos a guardar el menú. ¿Qué vamos a hacer? Volveremos a nuestro sitio web de direcciones para ver si los cambios son visibles o no. Aquí puedes ver que tenemos blog uno, bloque dos. Pero nos gustaría personalizar este encabezado usando elementor Volveremos, iremos a plantilla, ¿no? En las plantillas tendrás Guardar Plantillas, Theme Builder, y muchas otras cosas. Vamos a hacer clic en Theme Builder. Aquí mismo, en el Creador de Temas, encontrarás una opción para editar tu encabezado. Vamos a hacer clic en Edd. Una vez que hagas clic en eso primero te pedirá que elijas entre diferentes plantillas pre met hechas por limit o plugin. Pero nos gustaría construirlo desde cero. Vamos a tachar esto aquí, encontrarás un área en blanco para trabajar. Agreguemos aquí una caja flex con dos columnas. Tendremos un contenedor y el otro. Ahora agreguemos un logo aquí. Al hacer clic en Agregar elemento, encontrarás pocos elementos que forman parte de tu encabezado. Se recomienda hacer uso de estos como su elemento o encabezado. Aquí tienes el logotipo del sitio, título del sitio, título página, menú de prensa, formulario de búsqueda, mapa del sitio. Primero hagamos uso del logotipo de nuestro sitio. Ahora, el logo del sitio es visible aquí como puedes ver. Pero como el color de fondo no es oscuro, el texto no es visible para el logotipo. Simplemente haremos clic en nuestro contenedor, toda la caja flexible. Iremos a la pestaña de estilo. Cambiaremos el color de fondo a negro. Vamos a cambiar el color a negro. Una vez que hayamos hecho esto, encontrarás que nuestra imagen parece demasiado grande. Simplemente haremos click sobre esta imagen. Iremos a Style. Y cambiaremos el ancho. Pero déjame quedarme con esto como 40% y vamos a alinear esto a la izquierda. Bien, ahora dentro de este contenedor, también agregaremos un menú de navegación. Agreguemos nuestro menú de trress cuando busque menú. En primer lugar, permítame explicarle eso. Presiona menú. Tenemos ancla de menú y todo ese tipo de cosas diferentes. Pero también podríamos ver algo así como, vamos a hacer uso del menú de prensa. Voy a colocarlo justo dentro de este contenedor. Bien, por defecto, la dirección del contenedor se ha establecido en vertical. Cambiemos esto a horizontal. Así es como aparece, pero esto no es exactamente lo que queremos. Se puede ver que estos elementos están apareciendo. En formato apilado. Pero si queremos que ese logo y nuestro menú aparezca en línea, entonces ¿qué debemos hacer en ese caso? Obviamente, deberían ser parte de un contenedor. La dirección del contenedor debe establecerse en horizontal. Lo que necesitamos para trabajar en esto es esta parte de aquí, la resolución de la imagen está ajustada a plena. Podemos cambiar esto a otro o de lo contrario podemos ir al estilo. Podemos cambiar el ancho de la misma. Y podemos cambiar el ancho de esta cosa. El propio logotipo del sitio. El logo del sitio, que tenemos aquí primero, permítanme simplemente bajarlo sobre esta parte. Puedo cambiar el ancho del otro contenedor que tenemos aquí mismo. Yo solo puedo hacer uso de este 56% Déjame hacer esto ya que 57 sería lo suficientemente bueno para el otro contenedor. Aquí mismo tenemos dos elementos pero el logo del sitio parece demasiado pequeño. ¿Qué vamos a hacer en ese caso? Iremos a Avanzado. Ya veremos, bien aquí este ancho es para el tamaño del logotipo del sitio. Queremos que esto aparezca en aproximadamente 22% pero cuando entramos en la imagen para la imagen del logotipo del sitio, podemos aumentar el ancho a más del 100% También bien. Una vez que hayamos hecho esto, puedes alinear este centro. Bien, entonces no está funcionando. A pesar de que haga clic en el centro, no lo ajustará porque el tamaño de, el tamaño del logotipo del sitio es máximo. Está ocupando el ancho máximo según el ancho de los logotipos del sitio aquí, lo que podemos hacer en este caso es que solo puedes ir al estilo. Podemos dar click en el contenedor y aquí podemos Justificar centro de contenido y un centro de líneas de artículos. Así es exactamente como van a aparecer. Espero que entiendas el punto y ahora entiendas cómo funciona realmente Flex Box. Bien, aquí tenemos el logo del sitio. Aquí tenemos nuestro menú y menú. Encontrarás que el texto aparece en color azul. Cambiemos esto a blanco yendo al estilo. Tendrás hover normal, y activo. Cambiaremos el color a blanco para los tres estados. ¿Bien? También, Bien. Por defecto, hover no tiene ningún estado E incluso para activo, no tiene ningún estado. Así que solo mantengámoslo tal como está. Y dentro del otro contenedor, ¿qué queremos? Queremos que siempre que el usuario. Entonces ahora mismo estamos haciendo este encabezado usando elemento o creador de páginas. Correcto. Y estamos tratando de construir el encabezado responsivo a medida que avanzamos. Bien. Esta parte del contenedor se mostrará en pantallas de escritorio, mientras que la otra parte del contenedor se mostrará en dispositivos móviles y tabletas. Muy bien, específicamente yo diría móvil porque en los dispositivos móviles verás un icono de hamburguesa Y una vez que alguien haga clic en él, el ícono de la hamburguesa se expandirá para mostrar todo el menú Bien, agregaremos algo similar. Hagamos un duplicado de esto. Después de hacer duplicado de nuevo, simplemente arrástralo y suéltalo aquí mismo. Bien, ahora lo hemos hecho, pero me gustaría colocar el menú hacia el final. Eso significa que el contacto debe tocar hacia la derecha, y el hogar debe estar en algún lugar aquí mismo. Simplemente podemos hacer clic en el menú Tres aquí mismo. Tendrás diseño para el menú desplegable. Aquí tienes vertical, horizontal, desplegable. Veamos qué pasa si tenemos desplegable inicialmente. Además, incluso en modo escritorio, verás el hamburgeron cuando alguien haga clic en él, encontrarás esta una opción Ahora bien, esto por defecto ya sea que estés usando el menú desplegable o no, siempre que estés usando tu pantalla móvil, verás una hamburgeronina. Volvamos aquí. Haremos uso de la horizontal y haremos esta alineación a la derecha. Alinee todo su menú de árboles a la derecha. Bien. Si te estiras a lo largo, entonces esto ocupará espacio que tiene acolchado de derecha e izquierda también, pero solo mantengámoslo hacia la derecha. Bien. Ahora bien, lo que queremos exactamente dentro de este contenedor. Bien, dentro de este contenedor, queremos algunas cosas más. Primero y ante todo, puedes ver que tenemos un título de página, tienes el título del sitio, tienes formulario de búsqueda, tienes mapa del sitio, tienes título de página y todo ese tipo de cosas diferentes. También puedes trabajar alrededor de diferentes partes que tengas. Para ello, podemos buscarte cuadro, encontrarás lista, encontrarás un icono. Vamos a hacer uso del icono puede listar. Pero también hay una cosa que me gustaría hacer uso de la cual es el formulario de búsqueda. Primero, hagamos uso del formulario de búsqueda. Simplemente arrastraré y soltaré esto aquí mismo y me aseguraré de que esto sea parte del contenedor. Bien, agreguemos un nuevo elemento. Podemos darle a esto algo así como cuadro de iconos justo encima de la búsqueda. Y simplemente voy a mostrar rápidamente la razón por la que estamos haciendo uso de la caja de iconos aquí mismo. Encontrarás que tenemos este texto horario de trabajo Lunes a Viernes, 08:00 A.M. a 06:00 P.M. Derecha. Podemos hacer uso de algo así. Podemos eliminar el icono. No queremos el icono sino que nos gustaría hacer uso del título y la descripción. Podemos decir horas de trabajo o podríamos escribir algo como el lunes. Al viernes, así que fríe. Todo bien. Por debajo de eso podemos mantener AM a 06:00 P.M. Multa. Puedes ver aquí mismo podemos agregar algún espaciado entre las 08:00 A.M. y las 06:00 P.M. guión. Aquí tenemos el espaciado correcto. Vamos al estilo y cambiemos color del texto del contenido a blanco. El color del título se ha cambiado a blanco y también debe hacerse para su descripción. Bien, ahora la tipografía, ambos necesitan ser puestos en poppins, porque queremos mantener la consistencia a toda nuestra Bien, para esto también, nos gustaría mantener esto como Poppins Busquemos a Poppins. Bien. Para ambos de estos título y descripción, se ha aplicado Poppins Intentemos bajar el tamaño de fuente a unos 25 píxeles. Creo que 25 pixeles quedarían bien. Podríamos bajarlo más a unos 20 píxeles. 20 píxeles se ve bien. Aquí podemos hacer uso de 15 píxeles. Creo que 15 píxeles se verían más que suficientes. Bien, el espaciado. También se puede jugar con el espaciado entre letras, espaciado entre palabras, altura de línea, pero yo no voy a hacerlo. Aquí tenemos la caja y podemos cambiar la alineación de la misma también. Podemos cambiar esto a línea derecha para que aparezca y toque hacia la esquina derecha llegando a este desplegable por el espaciado. Inicialmente tenía sobre este espaciado, pero lo hemos bajado a cero. Bien, ahora hemos hecho esta parte. ¿Qué es lo que nos queda? También queremos agregar un icono. Vamos a añadir un icono. Hay un elemento en elemento o versión gratuita que se llama icono. Ahora bien, este icono se puede utilizar para hacer uso de la barra de cuchillos del sitio, que veremos más adelante. Cuando hacemos clic en el icono del kebab, lo que estoy tratando de hacer es intentar importar el icono del kebab o el icono de los tres puntos En su mayoría encontrarás en, encontrarás dentro de aplicaciones donde tienes los tres puntos en formato vertical llamados como menú. También se le llama como kebab o también se le llama como elipses Busquemos el icono de puntos suspensivos. Aquí tienes la versión vertical y horizontal. Sólo voy a hacer uso de la horizontal. Y puedo cambiar el color de este color primario tiene que ser blanco. Puedo cambiar el tamaño de esto. Además, pienso que unos 30 píxeles se verían más que suficientes. Bien, si has usado elipsis verticales, incluso puedes jugar alrededor de la rotación para establecer esto como horizontal simplemente cambiando el grado de rotación a 180 y lo cambiará correctamente a, o tal vez 90 Creo que si es vertical cambias a 90, entonces se volverá horizontal. Bien, aquí tienes todas estas cosas diferentes. También alineemos esto hacia, ¿verdad? Queremos que los tres elementos estén en línea. Lo que quiero decir con en línea, en línea básicamente significa que todos esos contenidos, cada vez que cambiamos entre diferentes dispositivos, deberían aparecer en una sola línea. Bien, ¿qué vamos a hacer? Iremos a Avanzado aquí mismo. En Avanzado, encontrarás la posición para ser absoluta fija, que no vamos a tocar sino más bien el ancho. Estableceremos esto en auto en línea para este elemento. Haremos eso ancho avanzado en línea auto para el último elemento también iremos a width y en line auto. Ahora que hemos hecho toda esta parte, lo único que siento que hay que cambiar es para este menú. Y este menú aquí mismo, tenemos el estilo de fuente por defecto. Cambiemos esto a pop ins que nuestro aparece. Bien, también podemos cambiar el tamaño de la misma. Si cambio el tamaño a, déjame simplemente bajarlo a 15 píxeles se vería bien. Mantengamos esto como 15 pixeles. Incluso puedo cambiar esto a negrita. Negrita no funciona. Veamos cómo se ve como un médium. El medio se ve bien. Poppins 15 pixeles y peso medio es lo que vamos a aplicar aquí mismo En cambio, solo puedo copiar Puedo pegar el estilo aquí mismo. El cambio que necesito hacer es que necesito escribir una línea. Esto, con sólo ir a esto, puedo escribir una línea. Ahora tengo todas las fuentes aquí mismo en mi encabezado o barra de navegación como poppins, con el mismo tamaño de fuente y el mismo peso de fuente. Todo bien. Ahora una cosa que viene a la barra de búsqueda, puedo, hemos comentado anteriormente en esa búsqueda es realmente utilizada para navegar entre diferentes productos, diferente bloque, post, todas esas cosas que tienes. Ahora cuando hacemos clic en la barra de búsqueda, el formulario de búsqueda, encontrarás diferentes skins que tienes. Este es el formato clásico donde hay una barra de búsqueda y fuera de la barra de búsqueda tienes el botón separado para tu icono de búsqueda. Si mantienes esto como mínimo, entonces el ícono de búsqueda estará dentro de tu barra de búsqueda. Bien, si mantienes esto como pantalla completa, solo podrás ver el icono de búsqueda. Y una vez que alguien haga clic en el icono de búsqueda, la totalidad con toda la pantalla será tomada para buscar. Diferentes bloques, correos, diferentes servicios y diferentes productos que vendes en tu sitio web. Bien, entonces tienes diferentes tipos de cosas. Puedes jugar alrededor de la alineación, puedes cambiar el tamaño de tu icono. Déjame cerrar esto por ahora. Aquí verás el botón de alternar. Si juego alrededor del tamaño, verás que el tamaño del icono cambia. Puedo hacer esto como algo. ¿Cuál es el tamaño de esto? El tamaño de la se establece en aproximadamente 30 píxeles, por lo que podemos hacer algo similar. 30, 30 parece demasiado pequeño. Sólo hagamos que se fortalezca. Bien, alineemos esto hacia la derecha, cambiemos el color a blanco Aquí. También encontrarás entrada y encontrarás otra entrada de toggle. Cuando trabajas alrededor de la entrada, ¿qué sucede cuando haces clic en el botón? Esta es la parte cada vez que cambias el color de esto, tal vez solo digamos rojo. Puedes ver los cambios de color de fondo de pantalla completa. Ahora mismo, nos gustaría mantener esto por defecto. Podemos cambiar la tipografía a poppins para mantener la consistencia a lo largo de todo Podemos cambiar el color del texto si quieres. ¿Qué pasa si cambias el color del texto? Puedes ver el texto de búsqueda que está escrito aquí mismo. Cambia. Incluso puedes cambiar el color del borde aquí mismo. Si cambio el color del borde, encontrarás que el divisor de aquí va a cambiar bien. Queremos cambiar el color del icono. Vamos a tachar esto. En lugar de tener este gris, mantendremos el color del botón de alternar en blanco. Podemos cambiar esto a blanco. Todo bien. Incluso podemos agregar algo de frontera a esto. Podemos agregar. Bien, vamos a darle algo a esto aquí. Lo que en realidad estaba tratando de explicar el tamaño, que puedes ver aquí mismo. Este tamaño parece ser el tamaño completo de su formulario de búsqueda. Si particularmente solo quieres trabajar alrededor del tamaño de tu toggle, puedes hacerlo yendo al estilo, yendo al toggle y luego cambiando el ícono. Bien, el tamaño aquí mismo, puedes jugar con él. Bien, sólo puedo hacer que sea algo así como 50 pixeles. Puedo agregar ancho de borde inicialmente. Siempre que juegues alrededor del deslizador para ancho de borde, verás que rodeando tu icono está en formato de caja, puedes cambiar esto a radio de borde para que aparezca en formato circular. Solo mantengamos el ancho del borde para que sea un dos. Creo que dos se verían bien, radio fronterizo para ser, una vez que vas más allá de 24, aparece en circular. A pesar de que vas 83605000, no hace la diferencia. Podemos simplemente mantener esto como 35 solo para asegurarnos de que tenemos un círculo redondo. Y desplegaremos el icono de tamaño. Mira lo que pasa aquí mismo. Si cambio de tamaño, el radio del borde en sí, el borde que rodea el on, en realidad no se comprime. Es porque el contenido en sí, el tamaño es 45. Si lo dejo caer a unos 35 algo, lo que hemos hecho para esta elipsis, También podemos jugar con él al estilo, tamaño del icono se incrementará a unos 50 Esto se ve bastante bien. Bien, ahora tenemos todas estas cosas solo para asegurarnos de que las tres cosas que tenemos aquí deben aparecer en un solo contenedor. Agreguemos también un contenedor más. Dentro del contenedor exterior, voy a agregar un contenedor, que tenemos aquí mismo. Vamos a colocarlo. E intentaré colocar todos los artículos dentro de este contenedor, bien. Dentro de este contenedor, tenemos dos elementos. Vamos también al tercer elemento. Bien, iremos al contenedor, cambiaremos la dirección a horizontal. Aquí encontrarás que los tres aparecen en una sola línea. Es un formato inline, pero queremos que los tres elementos aparezcan al final. Podemos justificar el contenido. Puedes encontrar espacio entre el espacio alrededor y el espacio incluso. Simplemente cambiaremos esto para terminar. Podemos alinear los artículos aquí. Encontrarás que este icono aparece en la parte superior. Esto también en la parte superior, pero como este tiene título y descripción, ocupa toda la altura de su contenedor. Simplemente podemos cambiar la alineación de esto al centro para que aparezca así. O incluso puedes cambiar esto para terminar para que aparezca en la parte más baja Pero mantengamos esto como centro. Y esto quedaría bien en mi opinión. Bien. Así es como has trabajado alrededor de diferentes cosas, pero quedan pocas cosas más por hacer. En primer lugar, este menú que tenemos aquí mismo irá a Avanzado. Seleccionaremos la capacidad de respuesta. Ocultaremos esto en el móvil. Veamos cómo se ve en la tableta y el escritorio. Así es como se ve en el escritorio. Para esto particularmente, nos gustaría ocultarlo en escritorio y móvil. Vayamos a responsive. Ocultaremos esto en modo tablet y escritorio, bien, pero debería ser visible en el móvil. Bien, vamos a la vista móvil. Y aquí no encontrarás esto. Aunque esto es visible porque somos los administradores, en realidad estamos construyendo nuestro sitio web para que podamos ver todos los elementos. Pero cuando en realidad estamos previsualizando, entonces no encontrarías este elemento en particular, el icono de la hamburguesa Encontrarás sólo éste. Una vez que hagas clic en esto, encontrarás este tipo de opción desplegable y aparecerán todo ese tipo de cosas. menú desplegable aquí mismo para dispositivo móvil será un clic aquí No puedes pasar el cursor porque estás usando un dispositivo con pantalla táctil No se puede flotar alrededor de los elementos. Tienes que hacer click sobre él para que aparezca un menú desplegable Bien. Vamos a tacharlo. Puedes cambiar el ícono de la hamburguesa también solo yendo al estilo aquí Encontrarás botón de alternar y podrás cambiar el color de estos dos blancos finos para que sea visible. Incluso puedes cambiar la posición de la misma aquí mismo. Incluso puedes hacer esto como alineación correcta con solo ir. La alineación se establece a la derecha fina. No necesitamos preocuparnos por ello. Pero para esta parte donde tenemos esto para nuestro dispositivo móvil particularmente, podemos ir a maquetación. Podemos ir al estilo. Aquí, encontraremos el ancho de la imagen. Incluso puedes cambiar el ancho de tu caja de iconos, logotipo del sitio. El elemento se llama logotipo de sitio. Eso se puede hacer. Incluso puedes cambiar el ancho máximo en todos esos diferentes tipos de cosas, pero solo lo mantendremos tal como está. Vea cómo se ve en la tableta y cómo se ve en el escritorio. En escritorio, se ve muy bien. Espero que hayan disfrutado de esta conferencia. Una vez que publique el encabezado, se le pedirá que agregue la condición para este encabezado. Eso significa si desea aplicar la configuración de estilo para su menú de encabezado en todo su sitio web o en páginas particulares. Solo mantengamos esto como sitio completo y ahorraremos cerca. Bien, creo que eso fue todo de mi parte para esta conferencia. 11. Crea un pie de página personalizado y una página de error 404: Bien, ahora que has visto y entendido cómo construir el encabezado usando element o pro, veamos también cómo podemos hacer uso del plug in para construir nuestro pie de página y la página de error 44. Volveremos a nuestras plantillas Theme Builder en el panel de Tres y obtendremos una opción para elegir el pie de página. Ahora el fondo de esto, el elemento o podría cambiar de blanco a negro dependiendo de la hora en que estés usando en consecuencia, lo cambiará a modo oscuro o modo de luz. este momento no hemos construido ningún pie de página, así que nos está mostrando tablón pero en la parte superior derecha encontrarás agregar nuevo botón Podemos simplemente dar clic por allí y nos va a incitar diferentes plantillas que tenemos. Ahora podemos construirlo desde cero, no importa, pero creo que nos llevaría mucho tiempo construirlo desde cero. Ya has visto cómo construir encabezado desde cero. También se aplican prácticamente las mismas cosas para el pie de página. Vamos a traer esta plantilla para pie de página. Solo te voy a mostrar alrededor que las cosas son bastante iguales, ninguna diferencia como tal, incluso puedes cambiar los elementos, Tienes otros elementos que puedes agregar. Aquí mismo tienes algunos elementos pro que no tiene sentido agregar en el encabezado y pie de página como tu look grid, loop, Carousol, lo que sea que haya en el sitio y la parte de diseño solo eso tiene sentido para ser agregado aquí mismo en el pie de página o incluso O tal vez solo digamos básico para el caso. Si deseas agregar algunos Google Maps al pie de página, esa es una buena práctica. Yo recomendaría siempre que si estás tratando de atraer clientes locales y clientes locales y quieres mostrar tu espacio de oficina o tu espacio de negocios. Simplemente puede enumerar la ubicación con la ayuda de este elemento de Google Maps dentro de su pie de página. Ese sería un gran, gran ejemplo para mostrar. Se puede cambiar de nuevo el fondo, el diseño de estilo, contenedor, sección avanzada. Todas estas cosas son bastante iguales que ya hemos visto en la conferencia anterior. Espero que entiendas el punto de usar el pie de página. Incluso puedes cambiar los íconos sociales aquí. Se pueden agregar diferentes iconos y diferentes enlaces sociales. En este momento nos está dando qué prensa puedes cambiar el icono. Digamos de qué prensa a tal vez digamos Instagram. Simplemente puedes cambiarlo a Instagram. Puedes insertar el icono, puedes pegar el enlace o URL de tu página de perfil de Instagram, y también puedes ajustar el ancho de ellos. El espaciamiento entre Facebook y Twitter se debe a que aquí hay un ícono social indefinido. Simplemente puedes eliminar y encontrarás que el espaciado entre todos estos iconos se distribuye de manera uniforme. Si deseas agregar algo más de brecha entre ellos, solo puedes ir a la sección de estilismo. Se puede agregar entre ellos. Se puede agregar algún borde de brecha y todos esos diferentes tipos de funcionalidades disponibles. Bien, entonces espero que entiendas el punto. Yo sólo voy a publicar por ahora. Voy a agregar con la condición de que este tipo de pie de página se aplique a todo el sitio web. Solo guarda y cierra. Ahora veamos nuevamente la página de errores 44, iremos al Creador de temas. Ese fue un atajo rápido para volver nuevamente al Creador de Temas. En lugar de ir al dashboard de prensamos. ¿Qué significa 44 error page? Entonces cada vez que alguien, digamos que has terminado de construir todo tu sitio web en tu sistema host local y ahora te gustaría poner tu sitio web de tu sistema a un servicio de hosting, ¿verdad? Entonces, básicamente, estás tratando de hacer que tu sitio web viva en público en Internet, así que cada vez que alguien teclea tu URL haciendo seguido de una diagonal hacia adelante y luego la página Ahora bien, si alguien comete error tipográfico en la URL, entonces qué debería pasar a donde se deba redirigir al usuario , permitirá, o le darás ese tipo de experiencia a tu usuario que simplemente muestra un simple error de Chrome cuatro o cuatro, que la página, algo así no se encontró No va a ser una buena experiencia, ¿verdad? Es mejor simplemente construir una página personalizada que muestre que hey usuario tuvo algún error tipográfico en tu error O tal vez solo asegúrate de que estás haciendo clic en la URL correcta y reaccionará a la página donde pretendes ir allí. Sólo podemos ir al botón addnew. A lo mejor no es solo error tipográfico siempre, También se trata a veces de los enlaces rotos Digamos que actualizaste un sitio web hace un mes y hay una página, digamos una página de bloque. Cambiaste la URL de la página de bloque. Usted como administrador cambió la URL del blog y su página de inicio tenía algunos botones que estaba reaccionando a la URL de esa página de bloqueo con la URL anterior que tenía que está haciendo un enlace roto en su sitio web. En ese escenario, 44 páginas de error pueden ser útiles. Y también en términos de SEO, Google, Bing, y otros motores de búsqueda apoyan y recomiendan a los propietarios de sitios web que hagan uso de las 44 páginas de error para dar una experiencia auténtica a tus usuarios. Puedes hacer uso de algunas plantillas preconstruidas. Se pueden hacer incluso cambios a su alrededor. O tenemos alguna plantilla aquí mismo. Yo sólo puedo insertar esta. Incluso echarle un vistazo. Simplemente puedo hacer clic en el icono de aumento más. Solo para obtener una visión general de cómo vería esta página de 44 errores, simplemente puedo hacer clic en el icono de la carpeta. Puedo hacer uso de este Insertar. Veamos cómo se ve. Así es exactamente como queremos que se muestren nuestros usuarios. 44, la página que estamos buscando no existe. Y de vuelta a casa, aquí mismo, te gustaría vincularlos de nuevo a tu sitio web. Así que solo puedes hacer uso de tu página de inicio. Así que sólo puedo hacer uso de la página de inicio. Así que cada vez que alguien haga clic en este botón, será redirigido a tu página de inicio Bien en el fondo, puedes agregar una imagen. Quizás incluso puedas agregar algunas animaciones, que cubrirán más adelante en este curso, ¿verdad? Así que las animaciones, el color de fondo puede estar cambiando el estilo de fuente y ya sabes que el color de las fuentes puede estar cambiando el borde de los botones. Todas estas cosas están sujetas a tu diseño y tu consistencia del tema que estás siguiendo. Entonces depende de ti todo lo que puedas hacer. Solo les estoy mostrando a todos que cuáles son las características que proporciona ese constructor de elementos o temas. Entonces espero que entiendas el punto. En la próxima conferencia veremos cómo podemos hacer uso de los precargadores en Elementor 12. Precargador y transiciones de página: ¡animaciones por fin!: Veamos cómo podemos hacer uso de cargadores de páginas y transiciones Aquí mismo en el elemento o pro, encontrarás una característica. En primer lugar, tendremos que ir al tablero. Una vez que vaya al panel de prensa justo en el elemento o configuración, deberá ir a la pestaña de funciones y desplazarse hacia abajo hasta la parte donde encontraría, donde encontraría algo llamado espera por segundo. ¿Dónde está? Estaba justo aquí. Transiciones de página aquí mismo. Por defecto estaría configurado activo, pero por alguna razón, si no puedes ver este punto verde aquí mismo, simplemente puedes hacer clic en Activo y desplazarte hacia abajo y guardar los cambios. Ahora lo que esencialmente te permitirá hacer es siempre que vayas de una página a otra, habrá alguna pantalla de carga que se mostrará en tu pantalla. Eso sucederá porque estás usando cargadores de páginas y transiciones que son características de elementor pro Intentemos editar nuestro sitio web con elemento. O aquí podemos ver este icono, ¿verdad? Esto se llama Configuración del sitio. Podemos pinchar aquí. Ahora, una vez que te desplazas hacia abajo, encontrarás una opción llamada As Page Transitions. Vamos a darle un click sobre él. Y aquí encontrarías diferentes opciones. Aquí puedes elegir el fondo clásico o fondo degradado para la carga de tu página. Siempre que hagas clic en otra página, habrá alguna superposición de fondo dando vueltas y podría ser una clásica o degradada, vamos a darle un degradado, usaremos el color blanco y el otro como color verde, haremos uso del color verde que tenemos aquí mismo. Podemos hacer uso de este sampler de color. Se puede ver que el cuentagotas acaba de subir y el gotero podría colocarse donde nos gustaría buscar el Bien, a veces puede que no funcione, pero a veces sí. Aquí puedes ver este color verde que aparece. Bien, este es el segundo color. El color para el primer color que tenemos, blanco es la ubicación se establece cero y el segundo se establece 200. Ahora debes estar conociendo cómo funciona el efecto degradado porque también lo hemos cubierto antes. Justo aquí tenemos diferentes ángulos. También, podemos hacerlo lineal o radial, pero vamos a mantenerlo como lineal. Ahora tenemos animación de entrada. Cómo queremos mostrar la animación, ya sea que quieras que se desvanezca o quieras que se desvanezca. Se desvanecen, a la derecha. Se desvanecen. Pero creo que desvanecerse quedaría muy bien. Mantengamos esto como desvaneciéndose. Incluso puedes elegir la animación de salida, como fade out down, así. Para la animación de salida, podemos simplemente mantener esto como ninguno porque la animación no durará para siempre. Si tu página apenas se está cargando, tardará alrededor de un segundo o dos. Hay algo de duración de animación. Puedes mantener esto tan corto como , Bien, vamos a quedarte con esto. 1,500 o 15 50. Ahora bien, este valor está en milisegundos, no en segundos. Aquí tienes esto. Puedes previsualizar tu transición de ritmo haciendo clic en este icono. Una vez que tengas una vista previa de esto, verás que así es como funciona la animación. Incluso puedes bajarlo. Veamos cómo funciona. Podría haber algún retraso dando vueltas. Incluso podemos trabajar en ello. Podemos dar click en Preloader Preloader sería de muchos tipos. Eso significa que si quieres mostrar alguna animación en el centro, puedes ver que hay algún spinner dando vueltas. Déjame simplemente aumentar el tamaño del spinner para que sea visible para ti. Todo lo que puedes ver hay alguna spinner. Podrías cambiar el tipo de animación a círculo discontinuo así, como puntos rebotantes Incluso podrías cambiar esto a pulso, incluso podrías cambiar esto a hilanderos como este, dependiendo de tu caso de uso Vamos a mantener este círculo círculo discontinuo. Creo que el círculo se vería muy bien. Podemos hacer que el tamaño sea de unos 150. Creo que 150 quedarían bien. Solo mantengamos esto como 150. Todo bien. También puedes cambiar el color de tu spinner yendo a esta parte. Se puede cambiar el color de la hilandera. Bien, pero me gustaría mantener esto como blanco. Puedes agregar delay si quieres, pero no tiene sentido agregar delay. Honestamente, incluso puedes hacer la duración y para que no dure para siempre. Aquí tienes diferentes opciones para elegir. Preloader, tanto si quieres alguna animación como si quieres mostrar un icono ¿Qué pasa si hago uso de un icono? Digamos que he subido mis propios íconos o voy a hacer uso de mis propias bibliotecas. El icono debe ser de formato SVG. En primer lugar, incluso podrías hacer uso de la fuente. Iconos impresionantes. Esos son realmente geniales. Se puede ver que hay algún spinner. También hay otras opciones. ¿Qué pasa si elegimos el spinner que es el, por defecto uno? Vamos a insertarlos aquí. Puede agregar animación a este icono. Si también tienes tu icono personalizado, puedes girarlo. Incluso podrías rebotarlo, incluso podrías flashearlo. Hay tantas opciones diferentes con las que puedes jugar y ver qué funciona para ti. Pero por ahora, solo mantendría esto como animación si quieres, incluso puedes hacer uso de una imagen. Veamos qué pasa si hago uso de este icono. Bien, tengo este icono, puedo elegir diferentes animaciones en lugar de hacer uso de un SVG. Si solo tienes un formato de imagen PNG o Web o JP, puedes hacer uso de él como precargador Aquí puedes rebotar, puedes ver aquí mismo, así es como puede aparecer. Aquí puede colocar el logotipo de su sitio o el icono del sitio que ha utilizado. Solo mantengamos esto como ninguno. Bien, vamos a guardar los cambios. No voy a hacer uso de esta imagen, más bien haría uso de la animación que tenemos aquí mismo. Guarde esto, volveremos. Veamos si podemos previsualizar los cambios. Como viste cuando el sitio web estaba cargando el preloader y la transición también mostraba el green, un efecto era transición de página pero la animación estaba precargada Espero que entendieras sobre esos dos conceptos y te hayas mentado donde sentiste que estas dos opciones están disponibles solo para el elemento o pro login. Eso no estará disponible para la versión gratuita. 13. Mega menú: ¡Es diferente!: La siguiente característica que voy a discutir con todos ustedes es el Mega Menu Builder. Volvamos a nuestra sección de plantillas en el Wordpress Dashboard Theme Builder. Es importante para nosotros tener un encabezado personalizado en nuestro sitio web Wordpress. Simplemente iremos por aquí, que construimos anteriormente. Editaremos esta parte. Aquí mismo estábamos usando el menú de Wordpress como elemento. Ahora solo para demostrar cómo funciona el mega menú Builder, tendremos que eliminar esto por ahora. Voy a borrar esto. Voy a añadir un nuevo elemento llamado como solo un menú. Bien, una cosa más. Yo no vería el menú aquí mismo. Sólo porque tendremos que volver a nuestro dashboard. Presiona el tablero aquí mismo. Voy a tener que volver a Element, o Settings. En los Ajustes. En las características puñalada Me desplazaré hacia abajo hasta la parte donde puedo encontrar el menú. Ahora por defecto no se activará. Tendremos que activar esto. Ahora volveremos a nuestras plantillas Theme Builder. Seleccionaremos nuestro encabezado y lo ritaremos. Ahora cuando naveguemos por diferentes elementos que tenemos, los diferentes bloques que tenemos, encontraremos menú, puedes ver aquí mismo. Simplemente eliminemos esta. Esto no se guardó antes, por eso se mostraba el menú de Wordpress aquí mismo. Simplemente colocaremos dentro de nuestro contenedor además de este logotipo. En este momento el texto está en color negro. Tendremos que cambiar el color de la fuente a blanco y también la tipografía a Poppins Poppins es lo que vamos a salvar. Bien. Volviendo al contenido de aquí, tendremos la página de inicio que enlazará a nuestro elementor página 25 Tendremos la siguiente sección que será una página sobre. Se enlazará a la página acerca de, obviamente. Busquemos el sobre nosotros. El tercer ítem que tenemos es la página de contacto. Página de contacto. Vinculemos nuestra página de contacto aquí mismo. Por último, solo para demostrar el funcionamiento de Mega Menu, crearemos un nuevo título. Vamos a darle a esto algo como algo así como equipo. Bien, entonces puedes ver que hay una palanca, un interruptor aquí mismo que dice contenido desplegable. Alternaremos esto, puedes encontrar que se muestra un menú desplegable además del equipo. Ahora bien, una cosa que puedo notar aquí mismo es que cada vez que traemos el cursor alrededor de cualquiera de los elementos del menú de la página, podemos ver que al pasar el cursor, el color del texto cambia a un grado algo ligero No queremos que eso suceda porque entonces la fuente no sería visible. Iremos a ho, cambiaremos el color de la fuente a activa. Nuevamente, cómo volver a color blanco para los activos. Vamos a poner esto en blanco. Para los tres estados tenemos color blanco fino. Ahora intentemos ajustar el ancho de esto de tal manera que todos los cuatro contenidos se alineen en un mismo espacio. Bien, en la tipografía misma, intentemos que las cosas funcionen alrededor del tamaño de la fuente Cerca de 14 píxeles nos está ayudando aquí mismo, solo lo mantendremos 14 píxeles. A medida que hacemos clic en el vapor, lo puedes encontrar, podemos crear un nuevo menú desplegable. Este es un mega menú, ¿verdad? Puedo hacer clic en el icono más. Puede traer cuatro columnas, cuatro contenedores diferentes En cada contenedor, podemos poner elemento, vamos a poner solo un elemento de, digamos solo una imagen, una caja de imagen. Yo sólo buscaré cuadro de imagen. Lo colocaré justo aquí. Voy a quitar la parte de descripción. Eso no queremos. Simplemente haremos uso del título y la imagen aquí mismo en la biblioteca. Tengo cuatro imágenes. Son aproximadamente del mismo tamaño. O lo que más podemos hacer es en lugar de usar el cuadro de imagen, porque el buzón de correo tendría sentido, donde queremos incluir un icono o un logotipo y seguido de algún texto que represente por qué ese icono está ahí en nuestra página web. En nuestro caso aquí, ahora mismo, estamos mostrando a todos los miembros del equipo que forman parte de este negocio por aquí. Incluir un elemento de imagen y un elemento de título separado tendría mucho sentido. Simplemente borraré esto por ahora y voy a ir a la imagen básica. Voy a elegir la imagen aquí mismo. También voy a insertar una etiqueta de encabezado justo debajo de esta parte. ¿Todo bien? Puedo dar un nombre algo así como, hola John aquí. Todo bien. Marca de examen. Eso es más o menos sobre eso. Así es como lo hago yo. Y solo duplicaré esto para otros cuatro artículos. Todo bien. Cuatro contenedores. Y los demás contenedores, solo los eliminaré para que el espaciado sea tal que se pueda encontrar que inicialmente teníamos cuatro contenedores. Duplicamos de ellos y cualquiera que sean los contenedores vacíos en blanco que estuvieran ahí, los borramos aquí mismo en la imagen. Cambiaremos la imagen rápidamente. Aquí mismo otra vez, necesitamos cambiar la imagen aquí mismo. Cambiaremos la imagen al cielo. Todo bien. Podemos cambiar el texto también o tal vez. Bien. Creo que el color de la fuente es lo suficientemente bueno. Creo que el negro le vendría bien con un fondo blanco. Pero si quieres cambiar el fondo para esto, incluso puedes hacerlo. Para eso voy a necesitar simplemente hacer clic en todo el contenedor con. Todo bien. Solo tendré que hacer clic en el ancho del contenedor y asegurarme de que estoy dentro del equipo. Si hago clic en el equipo, puedes encontrar que este es el menú y también puedo cambiar el color de fondo. Espero que entiendas el punto. Algo similar se puede hacer para todos los diferentes contenedores que tenemos. Incluso puedes cambiar la configuración de la caja flexible y agregar algunas de las cosas que te gustaría, ya sea que quieras incrustar una imagen de video o un archivo Ju, lo que quieras incluir aquí mismo. Creo que esta funcionalidad podría ser útil cuando tienes muchos elementos a los que quieres que naveguen tus usuarios, pero simplemente no puedes enumerarlos todos en una sola fila principal de tu encabezado. Al usar la funcionalidad de Mega Menu, puedes hacer uso de este tipo de diseño para ayudarte a lograr lo que realmente pretendiste hacer. 14. Cuadrícula en bucle para publicaciones de blog y productos - Introducción a contenido dinámico: Derecha, vamos a ver en una característica más que se llama como Loop Builder. Simplemente haremos clic en Editar con Elementor. Tan pronto como hagamos clic aquí, encontrarás diferentes piezas con las que podrás navegar. Pero lo que tenemos que volver a Theme Builder, haremos clic en el Theme Builder. Encontrarías diferentes opciones aquí mismo. Vamos a hacer clic en Loop Item. Ahora, cuando exactamente el elemento de bucle sea útil, digamos que estás construyendo un sitio web de comercio electrónico o tienes varios blogs, o tienes múltiples productos servicios y quieres mostrar parte del contenido dinámico en formato de tarjeta en la página principal de tu sitio web. Entonces, en ese caso, el artículo de bucle podría ser útil. Aquí tienes algunas plantillas preconstruidas que puedes usar, pero vamos a construirla desde cero. Vamos a cerrar esto. Dado que esta es una característica profesional, necesitará un elemento o un enchufe profesional. Bien, aquí tienes una sección para agregar tu cuadrícula de bucle. Vamos a hacer clic en el elemento más. Y te dará la opción de elegir Caja Flex o rejilla. Así que vamos a elegir Flexbox. Haremos uso de la dirección vertical. Tan pronto como hagamos clic en el elemento Agregar, verás algunas opciones recomendadas que son el título de la publicación, el contenido de la publicación, la imagen destacada y la información de la publicación. Primero, déjame mostrarte qué otras características tenemos y cuántas publicaciones de blog diferentes hemos creado hasta ahora. Lo que voy a hacer, sólo voy a volver a la página principal. Si hago clic en Blog Uno, así es como se ve el blog uno. Puedes ver que tenemos el título. Este es el contenido del extracto. Bien, esta es la imagen. Ahora bien, esta no es una imagen destacada. Esto es sólo una imagen. Aquí tenemos el, el cuerpo en la parte inferior. He añadido una etiqueta a este blog. Aquí encontrarás iconos sociales que la gente puede compartir y comentar área de sección. Incluso se puede ver así como se ve mi bloque dos. Aquí tienes bloque al contenido de la imagen. Aquí tienes otra vez hashtag y un comentario dejado por ¿qué? Comentarista de prensa. Bien, entonces tenemos estas dos cosas. Volvamos ahora a nuestra grilla de Lue. Solo puedo colocar primero mi imagen característica. Ya sea que estés trabajando página de tu producto o quieras mostrar y exhibir diferentes productos que vendes o diferentes publicaciones de bloque que tengas. Es necesario tener algunas tarjetas en la página de inicio para que los usuarios puedan navegar a. Derecha, la imagen destacada mostrará la imagen que has configurado para esa publicación de bloque en particular. Bien, debajo de eso, podemos agregar un título para nuestro post de bloque. Esto es como un contenido dinámico. Toda la sección, toda la caja flexible contenedor que hemos hecho hasta ahora es dinámica. Básicamente significa que autopoblará la imagen destacada, el título, dependiendo de cuántos bloques, cuántos productos, cuántas páginas tengas Y automáticamente llenará los datos en él. este momento, solo tienes que diseñarlo una vez y se replicará para múltiples post block, post, múltiples páginas de productos y así sucesivamente Entonces aquí tienes el título del bloque. Debajo de esto, podemos agregar nuestro blog o extracto de post. Básicamente significa que de qué se trata el contenido. Entonces agreguemos otro elemento que es el contenido del post. Esto mostrará todo el contenido que no queremos. Entonces tenemos la información del puesto. Vamos a desplazarnos hacia abajo hasta la parte donde podemos colocar la información. Ahora, una vez que hagas uso de esta información de publicación, encontrarás diferentes opciones, autor, fecha, hora y comentarios diferentes. Ahora el tiempo no tiene sentido, solo lo eliminaremos. Simplemente mantendremos fecha para que demuestre que, bien, este blog es el último, el contenido es fresco, y hay tantos comentarios. En este momento, no tiene ningún comentario. Por lo que no verás comentarios. Pero encontrarás eso donde exactamente se publicó esto. Y por quién? Ahora mismo el nombre de usuario con el que estoy trabajando es admin. Pero puedes cambiar esto a lo que tengas. Otras cosas que requerimos en esto es un botón. Agreguemos un botón también. Tengo un botón, lo colocaré justo aquí. Me gustaría colocar la información de la publicación justo debajo del título. Aquí puedes ver quién publicó esto, cuándo exactamente se publicó, y cuántos comentarios se han dejado para esta publicación de bloque. Bien, podemos centrar la línea del contenido y llegando a esta parte. En primer lugar, vamos a trabajar primero en torno a la imagen. La imagen que tenemos aquí mismo, vamos a alinear su centro. Puedes ver la imagen destacada aquí mismo. Es un contenido dinámico. Iremos al estilo. Cambiaremos el ancho de la imagen a aproximadamente el 50% Solo el 50% del área debe cubrirse con nuestra imagen. Sea cual sea el ancho que tengamos para todo nuestro contenedor. Esto es como un elemento de imagen. Dentro del elemento imagen, tenemos la imagen misma. ¿Correcto? 50% del ancho de la imagen. Bien. Una vez que vayamos a esta pestaña avanzada, encontrarás diferentes opciones para trabajar, pero no tenemos que hacerlo. Aquí tenemos el título del bloque. Aquí, puedes alinear este centro. Se puede cambiar la tipografía a poppins. Escojamos poppins Para esto también, podemos centrar alinear Podemos cambiar el tamaño y el color. Además, en lugar de elegir el color del texto a azul, podemos hacer esto como negro y cambiar la tipografía a poppins Déjeme hacer eso. Poppins es lo que voy a seleccionar Bien. Ahora, llegando a esta excepto parte, ahora se puede ver que la excepción este poste de bloque en particular es demasiado grande. Ahora bien, puede que no sea el mismo caso para todos los demás postes de bloque. Lo que podemos hacer aquí mismo para el extracto podemos ir al estilo Tienes diferentes opciones. Primero, intentemos centrar la línea, Encontrarás En Contenido. Una vez que hagamos clic en esto, encontrarás la opción Configuración. Una vez que hagas clic en esta herramienta en el ícono de moza, puedes ver que encontrarás para elegir la longitud del extracto Si mantienes esto como diez, no se mostrarán ni las primeras diez palabras. Incluso puedes bajarlo a algo así como cinco o cinco no mostraría toda la información. Solo mantengamos esto como 15. 15 sería lo suficientemente bueno. Hemos seleccionado 15 palabras. Sólo tienes que mostrar las primeras 15 palabras. Bien, ahora tenemos el botón. Vamos a centrar el botón. También podemos cambiar el texto, algo así como leer más. Todo bien. Leer más. Podemos hacer esto. Como puedes ver, existen diferentes tipos de botones. El botón predeterminado es de color gris El botón de información suele ser de color azul o T de color azul claro. Entonces tienes éxito, que es el color verde. Entonces tienes advertencia, que es color amarillo y amarillo o naranja, y el peligro está en color rojo. Pero mantengámoslo por defecto y cambiaremos el color a aproximadamente verde, que hemos guardado como nuestro color global. Aquí tienes el color del texto que mantendrá este como blanco. Cambiaremos el color de nuestro fondo de botón. Esto lo hemos guardado como verde. Eso es lo que estamos usando ahora mismo. Sí, eso es más o menos sobre eso. Incluso puedes cambiar el tamaño de este y puedes vincularlo. Ahora cada vez que alguien hace clic en este botón, queremos que el usuario sea redirigido al blockpost en particular o a una página de producto en particular Si en realidad estamos ingresando manualmente al enlace, entonces ¿qué pasará? No importa cuántos blockpost tengas, no importa cuántos productos tengas, esos artículos se mostrarán en un formato lubrid Pero cada vez que alguien haga clic en el botón, será redirigido al mismo enlace porque estás codificando duro el enlace No queremos que eso suceda. Queremos que el enlace sea dinámico también. Podemos simplemente dar click sobre este icono aquí mismo, que son etiquetas dinámicas. Y puedes seleccionar la URL del post. Simplemente seleccione la URL de la publicación. Y cada vez que alguien hace clic en él, publicación de bloque se abriría. Bien, aquí mismo, podemos seleccionar todo el contenedor. Podemos agregar algo de frontera a esto. Lo que se puede ver el espaciado alrededor no es tan grande lo que podemos hacer. Primero, intentemos agregar algo de frontera a esto. Voy a ir a maquetación. Veré con estilo, en realidad encontraremos frontera en frontera, encontraríamos uno sólido. Mantengamos el ancho del borde de todas las direcciones para que sea uno. Solo mantengamos esto como uno solo. Mira cómo se vería. Así es como se ve. Cambiemos el color de este borde a verde. Voy a ir, voy a cambiar el color a verde. Voy a dar click en el globconl Verde. Así es como se ve, pero también vamos a aumentar el ancho de, queremos que el borde sea un poco gordo. Haga clic en borde hará que estos dos. A ver, dos funcionan muy bien en nuestro caso. Incluso se puede agregar radio de borde para hacer los bordes redondeados, pero yo lo mantendría tal como está. Seleccionemos toda la sección. En esta sección, lo que quiero es que queramos un cierto espaciamiento entre ellos. Vamos a Container Advanced. Aquí encontrarías el diseño. Podemos cambiar el, incluso podemos cambiar la altura. Cambiemos la altura de esto a alrededor de las 06:55 Muy bien, 655 se ve bien, pero 655 sería realmente grande Vamos a bajarlo a alrededor de las 16:16. Se ve bien, aquí mismo en 610, podemos justificar el centro de contenido y podemos alinear los elementos al centro. Bien, podemos agregar alguna brecha entre ellos. Agreguemos cierta brecha entre los elementos a aproximadamente 30. Así es como se ve. Creo que esto se ve bastante bien. Publiquemos esto. Volviendo a la página principal, podemos volver a la página principal aquí mismo. Simplemente puede seleccionar aquí mismo en la página de inicio. Puedo simplemente desplazarme hacia abajo hasta la parte donde quiera que quiera hacer uso de esta cuadrícula de bucle en particular, solo puedo agregar mi cuadrícula de bucle aquí mismo. Simplemente puedo hacer clic en, solo voy a hacer clic en la plantilla de Anuncio. O sabes qué, no necesito navegar entre diferentes plantillas, solo necesito hacer click en caja más flex, Dirección horizontal. Eso significa alinear todas las tarjetas en dirección horizontal. Y agreguemos el elemento que será la rejilla Loop. Bien, vamos a arrastrar y soltar nuestra cuadrícula de bucle aquí mismo. Ahora tenemos que darle un nombre a este Loukrid, pero no le dimos nombre al Vayamos al Creador de Temas. Una vez que vaya al Creador de temas, encontrará elementos de bucle aquí mismo, encontrará elemento de bucle. Ahora tenemos que cambiar el nombre de esto. Editemos esto haciendo clic en el botón de vista previa. Encontrarás una opción para editar esto. Aquí puedes dar click en los tres puntos y dar click en Cambiar nombre. Aquí puedes darle a esto algo así como una tarjeta postal de blog. Todo bien. Simplemente haga clic en Cambiar. Puede ver que el nombre del elemento del bucle ha sido cambiado. Vamos a cerrar esto. Aquí podemos comenzar a escribir plantilla de postal de blog. Encontrarás que así es como aparece nuestra cuadrícula de bucle. Puedes ver esto es para el blog uno, esto es para el bloque dos. Vamos a publicarlos y veamos cómo aparece. Bien, una vez que prevea los cambios, veamos cómo se ve. Si me desplazo hacia abajo, puedes simplemente dar click sobre esto. blog uno aparecerá, pero no aparece en la página siguiente. Esto es sobre el blog uno. Si hago clic en este botón, se puede ver que aparece el bloque dos. Bien, espero que entiendas el punto sobre el uso cuadrícula de bucle y los elementos de bucle en su sitio web de Adress 15. CSS personalizado para funcionalidad añadida: ¡estrictamente para profesionales!: Chicos, estoy muy emocionada por esta conferencia porque vamos a explorar una característica realmente genial en Elementor Como pueden ver, estoy en la página principal de mi sitio web. Aquí tenemos la sección héroe usando la funcionalidad CSS personalizada. Vamos a agregar una animación genial dando vueltas en el fondo de nuestra sección de héroes, y encontrarás que algunos de los íconos estarán en un movimiento flotante. Volvamos a nuestra configuración elementor. Aquí tengo la sección de héroes. Ahora todas y cada una de las secciones, o cada elemento, cada vez que hagas clic en ella, encontrarás una pestaña avanzada. Ahora debajo de la pestaña avanzada, encontrarás una opción CSS personalizada. Aquí puedes escribir tu propio código CSS personalizado y personalizado. Incluso se puede escribir con la ayuda de la IA, que elemento o proporciona dentro del elemento mismo. Aquí puedes agregar el CSS. Ahora bien, si has pasado por mi curso de desarrollo web full stack, donde tenemos una sección dedicada para toda la parte CSS, debes haber aprendido sobre ello. Pero a pesar de que aún no sabes nada sobre CSS, puedes buscar en Google y encontrar pocas animaciones que estén escritas en CSS. Agreguemos algunas imágenes. Voy a agregar una imagen a este contenedor. Permítanme cambiar la imagen a este bloque, el icono del globo. Bien, aquí tengo el ícono del globo. Voy a ir al estilo y voy cambiar el ancho de esta imagen. Ahora mismo, el tamaño de la imagen es demasiado grande. Sólo voy a bajarlo a unos 18. Sí, creo que 18 sería suficiente. Ahora, de nuevo, iremos a la sección avanzada. Iremos a la parte donde tenemos posición. Ahora encontrarás tres opciones, por defecto, absoluta y fija. Ahora, ¿qué significa? Por defecto básicamente significa que dondequiera que pongas tu elemento en un contenedor particular de una caja flexible o tal vez incluso en una cuadrícula, el elemento permanecerá dentro de ese contenedor en sí. No importa cuánto scroll hagas en la parte superior o en la parte inferior, la posición del elemento no cambiaría. Pero si cambio esto a algo así como un absoluto, lo que pasa es que tengo la flexibilidad de controlar dónde se puede colocar la imagen en la sección central. Eso es lo que puedo hacer con absoluto. ¿Y si lo he arreglado? Déjame también mostrarte lo que pasa si tengo algo así como arreglado. Sólo puedo seleccionar esta imagen como posición fija. En la pestaña avanzada, puedo seleccionar la posición a fijar. ¿Y qué pasa si me desplazo hacia abajo? Se puede ver que la imagen permanece en la posición fija. Eso es lo que realmente quiere decir aquí tu posición fija, solo podemos cambiarla de nuevo a la predeterminada. También voy a añadir una imagen más aquí mismo en este contenedor. Voy a elegir la imagen para que sea este icono. Iremos al estilo, cambiaremos esto a unos 18. Ancho para ser alrededor de 18. Eso sería lo suficientemente bueno. Cambiaremos el absoluto una vez que lo hagamos, creo que la posición de estos dos elementos es buena. Ahora aquí tengo este elemento en particular en la parte CSS personalizada. Voy a pegar este código. Solo para explicar brevemente de qué se trata esta animación, puedes encontrar que creamos una animación llamada como float usando la etiqueta key frames. Dentro de esto, hemos colocado eso al 0% Eso significa que al inicio de la animación, hay que traducir a la posición a cero píxeles, cuando es del 50% cuando está a la mitad de la animación, hay que traducir con respecto a la posición Debes haber aprendido sobre traducciones y transformaciones en matemáticas. Ese mismo concepto se aplica aquí mismo en la animación CSS. Entonces básicamente estás transformando tu imagen, y estás moviendo la posición con respecto al eje X a 20 píxeles. Entonces, a mitad de camino de la animación, la imagen se está moviendo hacia los 20 píxeles con respecto al eje X. Y también se está moviendo a 50 píxeles con respecto al eje Y. Y está rotando en el eje Z. Entonces aquí tenemos el eje Y, aquí tenemos el eje X, y también hay un eje Z, que está apuntando justo hacia la cámara. Entonces este es el eje z. Bien, aquí tenemos el eje z. También está rotando, y hay una escala, eso significa escala, eso significa reducir o agrandar. Si tengo 0.7 eso significa bajar el tamaño y asegúrate de que estás escalando la imagen. 2.7 Aquí tenemos las titulaciones, 13 grados. Cuando la transformación esté completa, traduzca la y a, vuelva a traducir con respecto al eje y, nuevamente a los píxeles cero. Bien, espero que encontremos el punto aquí. Seleccionamos el flotador de animación, que creamos aquí mismo. Queremos que toda la duración de la animación se ejecute durante unos 20 segundos. Aquí tenemos diferentes efectos de movimiento que podrían ser lineales o facilitar la facilidad de salida. Eso significa que el inicio de la animación y el final de la animación deben ser suaves. Queremos que esta animación se ejecute infinitamente en un bucle. Eso es lo que básicamente significa. Vamos a aplicar la misma configuración, el mismo CSS personalizado a este elemento en particular también. Y una vez que guarde esto, déjeme mostrarle cómo se vería. Podemos dar click en Ver cambios de vista previa, Encontrarás que esta animación está dando vueltas en nuestra sección Héroe. ¿Eso no se ve tan bien? Si incluso nos desplazamos hacia abajo, puedes encontrar que la animación va a estar sucediendo en segundo plano. Como la duración de la animación es de unos 20 segundos, verás que la animación está sucediendo muy suavemente, muy lentamente. Pero se ve tan genial y tan calmante. Espero que hayan disfrutado de esta conferencia. Puedes ir creazy con CSS y hacer algunos efectos de animación O tal vez incluso agregue algunos colores de degradado personalizados o cambie alrededor de la configuración de sus elementos existentes en su sitio web. 16. Formularios emergentes para recopilar la dirección de correo electrónico de los usuarios: ¡Muy importante!: Bien chicos, veamos cómo podemos hacer uso del formulario emergente usando nuestro generador de páginas elementor para incrustarlos en nuestro sitio web de prensa Ahora incrustar y hacer uso de un formulario emergente es realmente útil en los casos en los que esté recopilando las direcciones de correo electrónico de sus visitantes a cambio de una suscripción a su boletín gratuito u ofreciendo algunos obsequios Podría ser un ebook, un archivo descargable, lo que sea que estés tratando de compartirlos con tu audiencia Idealmente, te gustaría agregar ese formulario emergente a tu publicación de blog. Pero si vas a la sección de post aquí mismo, encontrarás que no tenemos una opción para editar con elementor Tendremos que crear un plockpost usando nuestro elemento o plugin solo entonces podrás editarlos Bien, por ahora, voy a incrustar el formulario pop up en nuestra propia página de inicio. Pero antes incluso de hacer eso, tendremos que volver a nuestro tablero de Tress aquí mismo Encontrarás una opción para ir a las plantillas, y en Plantillas encontrarás una opción de pop ups. Vamos a hacer clic por allí. Y aquí puedes agregar un nuevo pop up. Vamos a darle un nombre a algo aquí. Puedes elegir entre los diferentes artículos que te gustaría crear. Vamos a darle algo así como newsletter. Puedo decir algo como newsletter y puedo crear una plantilla. Ahora obviamente todos ustedes saben que cada vez que hablamos de alguna de plantillas o ventanas emergentes o cualquier cosa relacionada con el constructor de elementos o temas, definitivamente va a mostrar algunas plantillas pre hechas hechas por element o pro. Tendrás que conectar tu cuenta con elementor para poder hacer uso de estas plantillas pro Lo construiremos desde cero. Vamos a cerrarlo a partir de ahora. Usar cualquiera de las plantillas no es una mala práctica. No estoy diciendo que no vamos a hacer esto, no vamos a hacer eso simplemente porque quiero que todos aprendan todo desde cero. Aquí, solo puedo hacer clic en el icono más y puedo elegir el diseño de Flexbox Ahora mismo aquí, en el diseño de Flexbox, encontrarás diferentes opciones de diseño aquí O puedo elegir estas opciones donde tengo cuatro contenedores, o podría agregarlos manualmente de tal manera que se apilen manera que aparezcan en una sección de cuatro columnas. Vamos a usar esto. Ya que lo tenemos, eliminaremos este contenedor por ahora. ¿Qué vamos a hacer? Simplemente aumentaremos el ancho de este contenedor en particular de tal manera que se ajuste al tamaño. El ancho de esta encaja dentro de esta parte. Bien, para eso, ¿qué vamos a hacer? Simplemente seleccionemos toda esta parte. Asegurémonos de que esté configurado en horizontal, particularmente esta caja flexible. Queremos aumentar el ancho a aproximadamente este tanto, que es 98% Incluso podríamos hacer esto 200, no importa. Pero puedes ver que el tamaño desde aquí y tu sobre cambian. Si cambiamos este 200% solo mantengámoslo al 100% Por ahora, agregaré una imagen Obviamente, nos gustaría mostrar de qué se trata este boletín. Quizá podamos compartir la portada del boletín, pero por ahora, sólo me gustaría dar alguna imagen que ya tengo en mi mediateca. Voy a seleccionar esta imagen. Después de seleccionar esto, puedo agregar un título aquí mismo. ¿Qué es exactamente lo que queremos que nuestros usuarios tomen medidas y por qué deberían suscribirse realmente a nuestro boletín? Podemos decir algo como suscribirse a nuestro boletín. Ahora, puedes reemplazar esto con descargar el libro gratis u obtener acceso a nuestro webinar gratuito o cualquier cosa por el estilo Aquí mismo. En el siguiente contenedor, puedo agregar un formulario. Busquemos la forma. Aquí tenemos la forma que es un elemento pro. Si solo puedo cerrar y te voy a mostrar bajo pro, también encontrarás diferentes opciones. Aquí encontrarás un profesional aquí, solo lo arrastraremos y soltaremos aquí mismo. Encontrarás diferentes campos, nombre, mensaje de correo electrónico. Ahora no queremos todos los campos, solo estamos buscando obtener la dirección de correo electrónico o tal vez incluso nombrar instancias. Pero por ahora solo queremos recoger la dirección de correo electrónico de nuestros visitantes. Iremos al formulario aquí mismo. Puedes ver el panel de edición del elemento o encontrarás que actualmente estamos editando los campos del formulario. Podemos cambiar el nombre del formulario si lo desea o podría incluso o eliminar o puede duplicar los valores de los campos. Cerremos nombre y mensaje. Y solo queremos correo electrónico. Ahora puedes ver dentro del campo de entrada, tienes el marcador de posición como correo electrónico Por encima de eso, también tienes una etiqueta como correo electrónico. Ahora bien, no tiene sentido agregar lo mismo una y otra vez. Podemos simplemente desactivar la etiqueta para que solo el marcador de posición muestre claramente lo que se supone que debe ingresar exactamente el usuario . Justo aquí. Bien. Incluso podemos cambiar el color del botón yendo a los botones de sección. Se puede cambiar el nombre del botón en lugar de hacer uso del texto Enviar. Podemos decir Suscribirse. Muy bien, Suscríbete. En esta parte, en este botón mismo, vamos a botones de estilo, podemos cambiar el color. Este botón, el botón Enviar aquí mismo. Podemos cambiar el color de fondo a verde. El color global que hemos guardado. Bien, esta es la maquetación de nuestra forma. Ahora donde exactamente queremos que se envíe nuestra dirección de correo electrónico, requeriríamos algún tipo de software de integración de marketing por correo electrónico. Hay un montón de opciones diferentes como tu chimpancé de correo, Tendrás kit de conversión, que personalmente uso y también te mostraré a todos como podemos incrustarlos en nuestro sitio web Aquí mismo, bajo este contenido de diseño, recopilarás envíos. Aquí los envíos se guardarán en elemento o envíos. Hay una parte dentro tu panel de Wortress debajo del elemento, o encontrarás envíos desde donde puedes ver en el panel de Wortress quién ha Pero si realmente lo estás integrando con tu software de marketing por correo electrónico, puedes simplemente ir por aquí, lo encontrarás. ¿Qué tipo de acciones quieres? ¿Qué tipo de una colecta de envíos y correo electrónico? Y una vez que hagas clic en este ícono más, encontrarás un montón de opciones diferentes para integrar con tu campaña. Digamos que tienes campaña en mailchimp o en kit de conversión, o estás usando Mail Alight Slack, Discord o algo así Así que mantengámoslo como convertkit. Y una vez que agrego este kit de conversión, encontrarás una opción aquí mismo. Ahora el procedimiento para el chimpancé de correo podría ser un poco diferente Pero la única razón por la que voy con kit de conversión es porque cualquiera puede comenzar con el kit de conversión. Es completamente gratuito a partir de ahora para al menos 1,000 suscripciones. Eso significa que hasta y a menos que llegue 1,000 listas de correo electrónico en su cuenta, no se le cobrará ni un solo centavo. Pero en caso de chimpancé de correo, creo que se requiere que empieces con $20 la suscripción Justo aquí debajo del kit de conversión, encontrarás una opción para ingresar tu ApiK'll Elija personalizado en lugar de predeterminado. Y debajo de esto tendremos que ingresar a nuestra APIK. ¿Cómo vamos a buscar nuestro APIK? Primero, tendremos que ir a la página Convertir kit una vez que inicie sesión en nuestro kit de conversión, o si ha creado una nueva cuenta, simplemente puede ir a su perfil en la sección superior derecha, haga clic en Configuración. Una vez que hagas clic en Configuración, encontrarás una opción avanzada aquí y aquí. Una vez que te desplazas hacia abajo, encontrarás una APIK. Simplemente copia esto. Volveremos a nuestra página web. Pegaremos esto aquí mismo y te dará un montón de opciones diferentes para elegir qué es exactamente lo que está tratando de decirnos. Vamos a darle un tiempo para cargarlo e integrarlo con un kit de conversión. Aquí encontrarás un montón de diferentes imanes de plomo y páginas de destino que he creado hasta ahora. Estas son mis landing pages. Ahora, el kit de conversión tiene dos opciones para crear y hacer crecer tu lista de suscriptores. Primero, ya sea para crear un nuevo formulario o una landing page. Las páginas de destino son aquellas en las que creas tu dirección de correo electrónico y es una página web independiente alojada por Convert Kit y está usando tu propio dominio o su dominio de kits de conversión. Dependiendo de tu caso de uso, puedes crear una landing page o un formulario si quieres crear un formulario, básicamente es parte incrustada. La única diferencia, la principal diferencia entre la página de destino y la forma es que el formulario es parte de una página web, mientras que la página de destino es una página web independiente en sí misma. La funcionalidad de ambas cosas es la misma. Están tratando de recopilar la dirección de correo electrónico a cambio de una suscripción a un boletín o a un evento, u ofrecerles un imán de plomo. Pero solo podemos hacer uso de la forma. A partir de ahora, voy a crear un formulario y solo puedo mantener esto como modal porque queremos que sea algo pop up. Puedo elegir un sencillo como este, Charlotte. Ahora sé que este curso no se trata solo de convertir kit, sino solo de crear, solo con el propósito de construir una lista de correo electrónico y mostrarles cómo podemos integrar nuestro Convertkit con elemento, o estoy creando esta forma ficticio. Bien, aquí puedo dar clic en Publicar. Ahora una vez que haga clic en Publicar, veré múltiples opciones diferentes. Javascript, HTML, Compartir, presionar Rebotar, y así sucesivamente. Pero por ahora no seguiría adelante con ninguno de ellos. Bien, solo voy a ahorrar en esto, a lo mejor pueda cambiar esto a algo así como, digamos elementor pro Bien, elementor pro, eso es todo. Voy a guardar esto. Voy a hacer clic en Publicar. Y ahora mismo lo voy a mantener bajo pestaña HTML una vez que vuelva aquí, y si selecciono, normalmente debería encontrarla aquí, justo aquí, que es mi formulario elementor pro Pero por ahora, permítanme seleccionar el imán de plomo de desarrollo web. Una vez que seleccione esto, lo esencialmente sucederá es que cualesquiera que sean las acciones se supone que debe tomar esa landing page, eso significa enviar algún tipo de lead magnet o involucrarlos en una suscripción de carta suelta que se llevará a cabo a partir de esta forma emergente en particular. Aquí recojo la dirección de correo electrónico de este campo de correo electrónico, y la página de destino en sí requiere el nombre también. Pero nuestro formulario emergente no tiene un campo de nombre. Puedes saltarte esto por ahora. E incluso puedes agregar etiquetas. Las etiquetas pueden ayudarte a categorizar toda la lista de correo electrónico de donde viene exactamente el tráfico más adelante Si solo deseas enviar el correo, el correo electrónico transmitido a un grupo de personas en toda tu lista, puedes dirigirlos agregando a tu lista de etiquetas. No voy a ir en detalle sobre convertir kit y cómo funciona todo el software de marketing por correo electrónico, pero espero que entiendas el punto de trabajar en torno a estos diferentes softwares de campaña de correo electrónico Bien, aquí mismo, he construido esto y voy a publicar. Ahora una vez que haga clic en Publicar, encontrarás diferentes condiciones y disparadores. Básicamente significa que ¿dónde exactamente quieres mostrar tu plantilla? ¿La forma pop up que creamos? En qué página quieres exhibir esto? Eso podemos agregar. Solo queremos mostrar esto en una página singular. ¿Qué página particularmente? Queremos mostrar esto en nuestra portada, que es la página web principal. Bien, ya puedo ir a los disparadores. Trigger básicamente significa que en qué momento particular, qué evento exacto cuando toma el usuario, queremos mostrarnos. Esta forma pop up. Hay una carga de página, una vez que me muevo, encontrarás que después de cuántos segundos se carga la página, quieres que aparezca. Esta forma pop up. Si quieres scroll, eso significa que después de que una página haya sido tapada, digamos que el usuario ha leído alrededor del 50% de todo el contenido de la página web, entonces se debe renunciar. Esta forma pop up. Eso se puede hacer. Puedes desplazarte sobre un elemento particular. Digamos que has agregado alguna clase a tu sección. Luego, después de que esa sección de clase haya sido deslizada hacia arriba, se mostrará el formulario emergente Un clic también se activa, lo que significa que cada vez que alguien hace clic en cualquier lugar de la página web, se le pedirá con el formulario emergente. Tienes un after inactividad que una vez que el usuario está leyendo, digamos que tienes una publicación de bloque muy larga El contenido en sí va a tardar alrededor de uno o dos minutos para que el usuario lea. Después de unos 15 a 20 segundos. Una vez que el usuario solo esté leyendo sin siquiera desplazarse o realizar ninguna actividad, estarán apareciendo. Esta forma pop up. Todo bien. Tienes en la página intención exacta, eso significa que cada vez que alguien cierra tu página web, se mostrarán. Esta forma pop up. Bien, ahora solo puedo mantener esto como en carga de página después de unos 10 segundos. Y también tengo reglas avanzadas. Así que aquí tienes show after page views. Digamos que te gustaría mostrar esta particular forma pop up. Después de que unos diez o 15 usuarios hayan visto realmente solo tu página web, entonces debería aparecer primero, estás obteniendo todo el tráfico orgánico de diez a 15. Ahora, una vez que hayas conseguido algo de tráfico, te gustaría mostrar este formulario emergente después de X sesiones. Eso significa que las páginas vistas y las sesiones de página difieren en términos de, digamos que soy usuario, estoy viendo esta página web. El recuento de páginas vistas. ¿Bien? Voy a volver, voy a volver a visitar este sitio web Entonces eso va a contar como páginas vistas, pero la sesión es básicamente esa cuántas veces estoy viendo tu página web. Bien, entonces hay show hasta x veces. Eso significa que solo muestra esta forma popper una vez por cada usuario único Incluso puedes activar alrededor esa regla al llegar desde una URL específica. Digamos que tienes todas y cada una de las páginas web, o todas y cada una de las publicaciones de bloque tienen una URL. Ahora quieres mostrar esta forma popper solo a aquellos traficos que son redirigidos desde tus cuentas de redes sociales Digamos que has pegado el enlace de tu página web, URL, en tu página de Facebook o tu biografía de Instagram por un tiempo limitado que estás corriendo como un evento que por favor suscríbete a mi newsletter Entonces tendrás acceso a algún descuento exclusivo para el próximo lanzamiento del producto. Ese enlace se comparte exclusivamente en las historias de Facebook e Instagram. Siempre que alguien haga clic esas historias a través de esos enlaces biográficos, estará mostrando este formulario emergente. De lo contrario el tráfico orgánico o que viene a su sitio web desde búsqueda de Google o simplemente escribiendo su URL en el navegador, no se les mostrará su formulario emergente. Después hay algún espectáculo al llegar de donde. Exactamente. Digamos que quieres categorizar eso desde donde Enlaces internos, enlaces externos. Incluso quieres marcar esta página emergente. Página emergente para ser mostrada a los usuarios que vienen de Chrome Search Engine o Google Search Engine en lugar de Bing u otras plataformas. Ocultar para usuarios bloqueados. Digamos que estás ejecutando un descuento para nuevos usuarios. No van a aparecer los que ya se han encerrado. Este pop up, incluso puedes alternar entre dispositivos. Digamos que este es un descuento exclusivo que se ejecuta para tus dispositivos móviles. Solo tú incluso puedes hacer eso, navegadores particulares como Chrome, tienes edge, tienes valiente y otros navegadores, incluso puedes programar fecha y hora. Digamos que está ejecutando una luz de seminario web de tiempo limitado, que se llevará a cabo durante los fines de semana, durante todos los días de la semana de lunes a viernes. Te gustaría promocionar tu página web con este formulario emergente para que las personas puedan suscribirse a tu newsletter o a tu correo electrónico, tu webinar aquí mismo. Simplemente puedes alternar y elegir la fecha. Y sólo entonces se mostrará ese pop up en particular. Pero por ahora solo guardaré y cerraré una vez que vea esto, veamos qué pasa. Bien, entonces lo que voy a hacer es simplemente ir a la página principal, vamos a contar hasta 101, 234-567-8910, 234-567-8910 Se puede ver aquí mismo tenemos esta forma pop up. Bien, espero que entiendas el punto ahora, también tienes una opción más. Este es el formulario que creaste dentro de tu sitio web de prensa. Y si realmente has creado un formulario en convertir Et sí mismo, Y ahora te gustaría reutilizar ese mismo diseño exacto en tu sitio web de Weress. ¿Cómo puedes hacerlo? Vamos a ir a cualquiera de la otra página. Para eso, voy a tener que ir a Dashboard. Voy a crear una nueva página. ¿Bien? Voy a crear una nueva página y voy a llamar a esto algo así como, digamos, solo digamos que vamos a erigir esto con elemento o más adelante, vamos a mantener esto como convertir pop up, form edit con elementor Vamos a ir justo aquí. La forma de chalota que creamos usando la plantilla preconstruida aquí bajo X Vamos a copiar todo el código X tamal bien aquí dentro de nuestro Esta cosa va a crear una caja flexible con esta dirección, caja flex con dirección de partículas en el interior agregar elemento. Buscaremos HTML si estás confundido si este HTML es parte de la versión pro o gratuita. También encontrarás HTML en versión gratuita. Además, podemos simplemente arrastrarlo y colocarlo aquí dentro de este código HTML. Solo necesitas pegarlo. Una vez que lo pegues, necesitas publicarlo. Una vez que publiques y veas tu página, veamos si podemos ver la página emergente. No podemos ver esta página emergente. No estoy muy seguro de por qué no sucedió. Idealmente debería. Vayamos a la configuración. Veamos otros ajustes que tenemos en nuestro formulario. ¿Bien? Entonces esto debería ser visible para todos los dispositivos. Bien, el tiempo es de 5 segundos, ¿de acuerdo? La única razón por la que no pudimos ver porque el tiempo se fijó en 5 segundos, solo vamos a bajarlo a tal vez hasta tres. Bien, vamos a guardar esto otra vez. Voy a hacer clic en Publicar. Voy a copiar el código tamil. Ahora puedes ver que el pop up es visible porque tardó unos 5 segundos en aparecer. El pop up, bien, espero que entiendas el punto de crear pop up y recopilar direcciones de correo electrónico de tus visitantes. 17. Menú emergente de la barra de navegación lateral - ¡No quieres perderte!: Chicos, ahora que hemos aprendido sobre pop ups, van a usar el mismo concepto para construir una barra de navegación lateral. Justo aquí en nuestra página de inicio, tenemos este icono de puntos suspensivos en la cabecera Una vez que el usuario hace clic en él, advertimos que se le debe preguntar al usuario con una barra de navegación lateral que viene de la dirección correcta y en un formato de animación con alguna galería de imágenes y menú de la página de inicio. Bien, para eso tendremos que volver a presionar Dashboard. Una vez que vayamos por allá en la sección de plantillas, tenemos pop ups. Vamos ahí. Añadiremos una nueva plantilla y le daremos el nombre como barra lateral de navegación. Bien, vamos a crear una plantilla. Una vez que hagamos esto obviamente nos avisará con algunas plantillas que no vamos a usar. Lo construiremos desde cero. Ahora la capa blanca que ves aquí mismo en medio de nuestra página web, aquí es donde aparecerá tu pop up. Pero aquí no es donde queremos. Queremos que nuestra barra de navegación venga de la dirección correcta, desde el lado derecho de la pantalla aquí mismo. Cuando se seleccione todo esto, simplemente haremos clic en este ícono de engranaje que es la configuración emergente. Y cambiaremos la posición de ésta, que aparezca en la dirección horizontal. Con respecto a la dirección vertical, debe aparecer en la parte más alta Bien, Y el ancho tiene que bajarse a algo así como, digamos 420. Creo que el 425 sería lo suficientemente bueno. Creo que 425 es más que suficiente Ahora, una vez que hayamos hecho esto también hará que la altura se ajuste a toda la pantalla para que ocupe toda la altura. Y podemos ajustar nuestro contenido y elementos dentro esta barra de navegación del sitio sit en particular tal manera que aparezca en el centro. Y hay algo de espacio suficiente entre los elementos. Bien. Ahora aquí tenemos la animación. También cuando la animación de entrada debe ser esa, ya sabes, deslizar hacia la derecha, deslizar hacia adentro desde derecha y salir la animación debe deslizarse hacia la derecha. Bien. Como queremos que esta animación sea un poco más rápida, moveremos el control deslizante hacia el lado izquierdo y haremos la animación unos 0.6 segundos. Bien, vamos a hacer clic en el anuncio. Haremos la caja flexible en dirección descendente. Solo un contenedor es lo que se nos requiere. Y añadiremos un elemento. Ahora dentro de esto, lo primero que vamos a agregar sería nuestro logo. Busquemos el logotipo del sitio. Eso es lo que vamos a agregar aquí dentro. Bien. Por cierto, el fondo para esto, toda nuestra barra de navegación de este sitio debe ser de color negro en el estilo. Primero hago clic en este ícono de engranaje que es configuración emergente en la sección de estilo, iré al tipo de fondo, seleccionaré Clásico. Voy a cambiar el color a algo a un tono más oscuro. Todo bien. Sí, creo que esto sería lo suficientemente bueno Ahora, una vez que hayamos hecho esto, tenemos el logotipo de nuestro sitio. Queremos cambiar el logotipo de nuestro sitio de tal manera que aparezca en el centro y el ancho del mismo sea algo alrededor del 45% estaría bien. Bien. Ahora después de esto nos gustaría mostrar nuestra galería de imágenes. Antes de eso sería bueno si podemos agregar algunos un editor de texto. Agreguemos un editor de texto justo en este contenedor. Y aquí tenemos el texto. Vamos a cambiar el estilo de fuente a poppins, familia de fuentes. Busquemos que los poppins y el color del texto sea blanco Alineación fina, nuevamente para ser centro. Ahora por debajo de esto, vamos a agregar un enlace social. Vamos a agregar un enlace social. Queremos listar una lista de iconos que tenemos un logotipo de Instagram y tenemos la URL de nuestro perfil de Instagram. Bien. Ya tenemos la lista otra vez. Sólo queremos una lista. Ahora mismo, este icono debería ser Instagram. Seleccionaremos Instagram en, insertaremos esto. Una vez que tengamos esto, el texto sería un. voy a colocar la URL de mi página de Instagram. Esta es la URL, o debería decir solo el nombre de usuario. E incluso puedo agregar la URL por aquí. Si quiero que se pueda hacer clic en el icono, bien. Quiero que esto esté en la fila, ¿verdad? Aparece dentro de la misma línea y podemos aplicar el estilo entre ellos. Hagámoslo alineado al centro. Podemos cambiar el color del icono para que sea blanco. También podemos cambiar el color del texto para que sea blanco. Cambiemos el color del texto para que sea blanco. Y también podemos aumentar la tipografía y el tamaño de ésta. Creo que unos 25 pixeles serían lo suficientemente buenos. Cambiemos el estilo de fuente a poppins para asegurarnos que haya consistencia seguida en todo el sitio web Nuevamente, el tamaño del icono debe aumentarse a 25 píxeles. Bien, esto es lo suficientemente bueno. lo que no necesito agregar A lo que no necesito agregar porque es obvio que estamos hablando de nuestro nombre de usuario. Bien, esto es lo suficientemente bueno. Ahora debajo de esto, vamos a agregar una galería, galería de imágenes. Entonces busquemos galería básicamente, galería y grousl Bien, agreguemos una galería justo debajo de esta parte. Bien, tenemos que seleccionar un montón de imágenes. Agreguemos algunas imágenes. Este, estoy manteniendo presionada la tecla de comando. Sistemas Windows, necesitas mantener tu llave de control. Bien. Estas dos imágenes creo. Agreguemos también estos dos. Bien, tenemos seis imágenes y las vamos a insertar en esta galería. Bien. Ahora podemos ordenarlos al azar o se podría aplicar alguna lesyload carga perezosa básicamente significa que cada vez que intentas cargar tu sitio web, se cargarán pocas imágenes. Entonces se cargará el siguiente conjunto de imágenes si quieres que rendimiento de tu sitio web obtenga una puntuación más alta. Ahora el diseño debería estar en formato de cuadrícula. Se puede cambiar el número de columnas. En este momento tenemos cuatro columnas. Se puede ver que la primera columna tiene dos imágenes, segunda columna tiene dos imágenes, columna solo tiene una imagen, y la cuarta columna también tiene una imagen. Desmontemos las columnas a tres para que pueda ajustar y ajustar las seis imágenes en dos filas y tres columnas. Bien. Cambiemos también el espaciado entre estas imágenes. Pienso que cerca de las 18:18 serían suficientemente buenas. Bien. También podemos cambiar el estilo de la misma de tal manera que la relación se puede cambiar de tres S a cuatro a cuatro S. Tres, el tamaño de la imagen cambiaría 16 S a nueve es también lo que podemos hacer. Pero por ahora solo mantengámoslo cuatro S a tres. Eso estaría bien, creo. O inicialmente eran las tres S a las 02:00 A.M. yo, ¿correcto? Sí. Resolución de imagen. Tenemos miniatura mediana. Creo que para este tamaño particular de barra de navegación, este es el tamaño perfecto para nuestra galería. Bien. Ahora, debajo de esto, podemos agregar nuestro menú. Podemos agregar nuestro menú Tres aquí mismo. Debajo de esto, podemos agregar nuestro menú Tres. Nuevamente, podemos centrar el contenido. Podemos cambiar el color del texto a blanco, Fino en la tipografía Podría cambiar esto a la familia Poppins Fun, ¿verdad? Esta es nuestra navegación lado derecho o barra de navegación lateral Junto con esto, qué otras cosas podrían agregarse. Hay un montón de cosas diferentes que puedes agregar. También puedes agregar algunos enlaces sociales más. Vamos a tratar de hacerlo. Puede boxear o puede enumerar justo debajo de nuestro menú de prensa. Permítanme simplemente eliminar otros artículos. O tal vez podría agregar algunos artículos más y darles algo como Facebook y Twitter. O tal vez incluso vinculado en para el caso. Bien, puedo hacer lo mismo. Así que sólo puedo copiar el estilo. Puedo pegarlo aquí mismo. Pasta para peinar bien. Para ello, puedo cambiar esto al logo de Facebook. Aplica la configuración de Facebook aquí mismo. Podemos agregar el nombre de mi página de Facebook debajo de esto. Puedo cambiar esto a algo así como, digamos Linton. Bien, Linton otra vez, cambia el texto a esto y finalmente hemos terminado de construir nuestra barra derecha Ahora para nuestra barra de navegación, queremos asegurarnos de que el contenido de todo este contenedor esté ocupando toda la altura. Bien. La altura principal debe ser de 100 V H. Eso significa que ocupa la altura del contenedor, es toda la altura de la ventana gráfica fina Junto con eso, la dirección es vertical y queremos centrar, alinear el contenido, Alinear elementos al centro, y asegurarnos de que haya algunos espacios entre ellos. Entonces incluso podemos agregar algo de boquiabierto, aumentar el tamaño de la brecha Aparece muy bien. Pienso que 35 sería suficiente, ¿verdad? Esto es exactamente lo que queremos cuando publicamos esto. Ahora nos impulsará con diferentes condiciones, disparadores y reglas que nos gustaría configurar para nuestra barra de cuchillos del lado derecho emergente. Pero la intención detrás de usar esta barra de navegación es que cada vez que el usuario haga clic en sus puntos suspensivos en el encabezado, esta barra de navegación debería aparecer. Eso significa que no importa cuántas páginas de publicación crees, quieres que aparezca esta barra de cuchillo lateral. Derecha. Por ahora, solo guardaremos y cerraremos. No aplicaremos ninguna condición o disparador, o reglas. Volveremos a nuestro sitio web de prensa en la barra de navegación. Déjame ir a la página principal. Haré clic en Editar con Elementor. Una vez que vaya allí, editaré mi encabezado que creamos. Bien, déjeme darle un momento. Justo aquí en el encabezado, voy a editar mi encabezado. Justo aquí en la cabecera, tengo los tres íconos. Puedo hacer clic en Enlace. En la opción de etiqueta dinámica, tengo la opción de elegir un pop up. Se puede ver en las acciones que tengo pop up. Puedo seleccionar el pop up de nuevo. Necesito hacer clic en la configuración del pop up y ahora aparecerá. Ya sea que quiera elegir todas las pop ups o solo una pop up específica, obviamente solo queremos una barra de cuchillo lateral específica. Así que solo buscaremos lateral si plantilla de barra y eso es lo que vamos a guardar. Publiquemos esto y veremos nuestra página web cuando vea esto y cuando haga clic en esto, pueden ver que aparece una barra de cuchillo lateral. Si hago clic en algún lugar fuera de la barra de navegación, desaparece. Espero que ustedes estén disfrutando de este curso hasta el momento. Si ustedes tienen alguna duda me pueden hacer en la sección En y haré todo lo posible para responder a todas y cada una de sus preguntas. 18. Publicar un elemento para diseñar un blog / publicaciones de productos: Veamos otro elemento o elemento pro, que será elemento post. Pero antes de entrar a la derecha en ello, solo me gustaría destacar que he agregado algunas publicaciones de bloque más aquí mismo. Como puedes ver que hicimos una mirada. Correcto. Por aquí puedes ver que se están poblando otras publicaciones. Ahora bien, la imagen para el bloque uno no está siendo proporcionada en comparación con los demás porque la relación de imagen y las dimensiones de la imagen son diferentes a lo que tenemos para las otras tarjetas. Además, puedes encontrar que la altura de todas y cada una de las cartas es un poco diferente simplemente porque tenemos un título diferente. Podemos ajustar la altura. Podemos hacer la altura fija. Eso significa que no debe ir más allá de esta altura en particular. El tamaño del título podría bajarse a tal vez unos 35, 40 píxeles en los que podamos trabajar. Una cosa que podrías notar es que también teníamos el bloque dos, pero no se está poblando por aquí. Ahora, ¿por qué es eso? Solo editemos esto con elementor Simplemente voy a dar click aquí mismo, por cierto, en mi menú también, déjame mostrarte lo que quiero decir. Sólo puedo previsualizar los cambios aquí mismo. Siempre que ho alrededor de la cuadra, encontrarás el bloque uno, el bloque dos en todos los demás bloques que agregué. Ahora bien esto no se pobló automáticamente, tuve que volver a mi panel de tres, menús de apariencia. Fui a posts, agregué todas las cosas que se suponía que debían agregarse en mi menú. Y luego lo arrastré y solté, él debajo de la página del blog Se convirtió en sub ítem de la página de mi blog. Y guardé el menú. Correcto. También podemos ver el pop up que creamos antes. Vayamos a nuestro elemento o ajustes. Justo aquí. Seleccionaremos tu plantilla para la cuadrícula de bucle. Vamos a hacer clic en, antes que nada, déjame guardar de nuevo. Bien, tenemos esta cuadrícula de bucle, déjame seleccionar en cualquiera de esas tarjetas, solo podemos seleccionar cualquiera de esas tarjetas. Bien, aquí mismo en este espacio, el espacio en blanco entre estas dos tarjetas. Y se puede ver que hemos seleccionado la rejilla de bucle. Bien, ahora encontrarás que hay tres columnas, Por eso podemos ver aparecer seis bloques. Pero puedes encontrar que solo se pueden poblar seis elementos por página, lo que puedes aumentarlos o tal vez incluso disminuirlos. Si bajo esto a solo tres tarjetas deberían mostrarse en esta página de inicio en particular, entonces también puedes agregar paginación La paginación básicamente significa que puedes agregar números. En la parte inferior derecha aquí, tienes de una a tres opciones en lugar de números. Incluso puedes cambiar esto a anterior o siguiente. Así, incluso podrías agregar números más anterior, siguiente, anterior, 123, Siguiente, así, y hay un límite de página. Además, puedes aumentar el límite de página si quieres. Se puede cambiar el texto de la etiqueta anterior y la siguiente etiqueta. Además, algo así como atrás y adelante, puedes cargar al hacer clic, lo que básicamente significa que puedes obtener un botón, puedes personalizar el botón, y cada vez que alguien haga clic en el botón, cargará el spinner y poblará las otras tarjetas del blog O podrías tener un pergamino infraite. El desplazamiento infraite sería mejor escenario de usar scroll infinito sería cuando tienes una página de producto separada Esa página del producto muestra todos los productos relacionados con el artículo de electrónica. Y solo supongamos que tienes 15, 20 artículos electrónicos que se mostrarán en esa página. Por ahí puedes hacer uso de tu crewel de inferencia pero no en la página de inicio Esa no es una buena práctica en estos momentos. Solo mantengamos este botón As para que podamos hacer uso de la carga más. Incluso puedes cambiar el icono si quieres. En este momento no vamos a hacer uso de ninguno de los artículos. Puedes cambiar el espaciado, puedes alinear esto, puedes darle estilo al botón, y hay un montón de cosas diferentes con las que también puedes jugar. Como aquí tienes igual altura. Entonces, una vez que cambie esto, encontrarás que toda la altura las cartas se establece para ser igual correcta. Entonces también tienes consulta Básicamente significa que qué fuente quieres que sea esta, ya sea que quieras mostrar todas las páginas de correos, páginas de forro, lo que quieras seleccionar, puedes hacer eso. ¿Cómo exactamente quieres ordenar alfabéticamente? ¿Quieres que ordene por título, el recuento de comentarios, el blog que se publicó más reciente? Puedes configurarlo, hacer un montón de cosas diferentes. Bien, entonces sólo voy a publicar esto. Y la única razón por la que volví a tocar el tema de la cuadrícula de bucle porque la sección de publicaciones que, que vamos a cubrir en esta conferencia es similar a la cuadrícula de bucle. Loop Grid es un elemento adicional. ¿Qué elemento? O añadido recientemente, pero anteriormente teníamos elemento post. Cuando haga clic en Agregar elemento, encontrarás en la sección pro que tendrás Post. ¿Qué pasa si agrego Post? Déjame simplemente dar click sobre esto. Haré clic en Flex Box y elegiré esta dirección horizontal. Ahora si arrastre y suelte el elemento post justo dentro de este contenedor. Veamos qué pasa. Una vez que haga esto. Encontrarás que todas las publicaciones están siendo autopobladas. Ahora, el diseño de diseño es un poco diferente a lo que establecemos en la cuadrícula de bucle. Porque la rejilla de bucle que hicimos desde cero, ¿verdad? Fue completamente diseñado a medida para la cuadrícula de bucle. Pero para estos elementos de la parte Post, puedes ver aquí mismo que está, usando algunos ajustes predeterminados, puedes cambiar de redondeo. No es que tengas que quedarte con los ajustes de diseño predeterminados como aquí para el título. Puedes ver que también puedes cambiar el color del título Al ir a la cinta de estilo, encontrarás contenido en contenido, puedes cambiar el color del título en lugar del azul, puedes hacer esto a tu verde blanco. Se puede cambiar la tipografía a, digamos simplemente poppins, La familia de fuentes se aplicará a todas y cada una de las tarjetas, ¿de acuerdo? Incluso puedes cambiar el trazo de texto si quieres. Puedes agregar algunos metadatos. Ahora bien, ¿qué significan los metadatos aquí? La fecha, los comentarios, todos estos son metadatos. Bien, entonces tienes extracto, que básicamente significa que tienes que configurarlo manualmente mientras estás creando post Básicamente comparte de qué se trata exactamente tu publicación. Entonces es como una breve descripción de tu publicación, eso es contenido de extracto, y luego has leído más Este leer más es como un enlace, no más de un botón aquí. Puedes cambiar el color, puedes volver a cambiar la tipografía, puedo ponerle esto a Bien, intentemos hacer poppins para todos y cada uno de los elementos de texto para que se mantenga la consistencia a lo se mantenga la consistencia todo el sitio web Aquí también, voy a hacer bien a estos poppins. Entonces aquí hemos cambiado el contenido. Viniendo a la parte de la imagen. Puede agregar radio de borde si lo desea. Puedes dar algo de espaciado si quieres, puedes agregar algunos filtros CSS. He discutido esto muy temprano en el curso que los filtros CSS le permiten ajustar manualmente el brillo de desenfoque, contraste y otros efectos para editar su imagen en lugar de usar otro software de erting de imágenes Bien, llegando a la parte de la caja, eso significa que todas y cada una de las tarjetas puedes agregar borde. Si trato de agregar ancho de borde, encontrarás que se está formando como un borde. Puedo hacer esto un poco más oscuro así que va a ser un poco más gordo. Incluso puedo agregar algún radio fronterizo, algo así. Puedo añadir un poco de relleno. Obviamente, el contenido se está pegando, por lo que podemos agregar algo de radio de borde y relleno para la caja aquí. Puedo agregar tal vez sobre, digamos solo diez. Así es como encontrarás desde todas y cada una de las direcciones. Bien. Pero si no quieres relleno para toda la parte y solo te gustaría darle relleno al contenido, incluso puedes hacerlo. Veamos cómo funciona. Si agrego diez, entonces encontrarás que la imagen se queda como está. Pero el contenido, que es tu título, tu extracto, tus meta datos, y tu leer más, y tu leer más, tiene algo de relleno alrededor de las cuatro direcciones También tienes diferentes efectos que sucederán sobre Hoover y en modo normal También tienes sombra de caja. Si hago clic en la casilla Sombra, encontrarás que hay alguna sombra detrás de las cartas que se vería bien. Entonces también puedes cambiar el color de fondo de este. Si cambio este color de fondo, encontrarás que el color de fondo del contenido cambia. Simplemente claro esto porque no quiero, incluso puedes darle algún color de borde a esto. Puedo establecer el color verde global. Esto quedaría bien en mi opinión, pero no es tan genial. Vamos a traer esto de nuevo a los valores predeterminados. Sólo puedo hacer clic en el color y voy a hacer clic en el icono de actualización. Bien, así es como se ve. Ahora volviendo a la parte de diseño aquí, encontrarás huecos entre las columnas. Actualmente está configurado en 30 píxeles. Si aumento esto, encontrarás que cuanto más aumente la brecha entre mis tarjetas, más se reduce mi contenido Solo mantengamos esto como 30. Ahora también hay cierta brecha de fila. Entonces aquí tenemos tres columnas y dos filas, ¿correcto? Entonces aquí puedes incluso aumentar la brecha de fila si quieres. Así que mantengamos esto como 50 píxeles. Incluso puedes alinear el contenido que tienes aquí mismo. Así que puedes ya sea una línea central, dejar una línea, o incluso a la derecha una línea. Pero creo que la línea central quedaría bien. Bien, viniendo a la parte de contenido aquí, tienes diferentes diseños de skin. Formato clásico de tarjeta. Si cambio esto al formato de tarjeta, puede ver que esto se ve muy, muy bien. Aquí tienes diferentes categorías. Ahora, categorías es algo que he establecido mientras estaba creando Post. Déjame llevarte de vuelta al tablero de Tress, justo aquí dentro de la sección Post Iré a todas las publicaciones, y aquí mismo encontrarás categorías. Entonces aquí he hecho pocos bloques que forman parte de las categorías de cursos y dos bloques que forman parte de esta categoría. ¿Todo bien? Y he dado pocos hashtags para que cuando la gente esté buscando alrededor de diferentes bloques, puedan buscar el contenido y puedan encontrar esa pieza de bloque en particular. Bien. Para categorizarlas, simplemente necesitas dar click en cualquiera de las publicaciones de bloque, clic en Ert, aquí mismo en el panel de edición Puedes dar una etiqueta e incluso puedes categorizarlas agregando una nueva categoría Espero que entiendas el punto sobre categorías y etiquetas. Puedes agregar múltiples etiquetas o incluso varias categorías. Pero lo que esencialmente las categorías y etiquetas te permiten hacer es que más adelante, digamos que has hecho algún tipo de tarjetas de bloque que puedes ver aquí mismo en la página web. Y en la parte superior encontrarás categorías. Entonces básicamente este bloque pertenece a la categoría de cursos, pero esta categoría de cursos tiene múltiples cursos diferentes como que van desde sistema operativo hasta desarrollo web, a UI UX, a secciones de datos y algoritmos y cosas así. Por lo que todos estos cursos individuales tendrán algún tipo de hashtag relacionado relacionado con el contenido y el título que conlleva para que sea más fácil en términos de buscador encontrar tu pieza de contenido para que visitantes puedan aterrizar en tu página web. Espero que enconteste el punto. Ahora, también tenemos algo diferente llamado como contenido completo. Eso significa que serán visibles todos los postes de bloque, que obviamente no queremos. Solo mantengamos esto como tarjetas porque la tarjeta se ve única. Es diferente a Classic porque Classic se ve muy similar a lo que hemos creado en la Loop Grid. Bien, aquí incluso se puede establecer número de columnas. Ahora cualesquiera que sean las columnas que vayas a configurar, se aplicará al modo escritorio solo si deseas mantener solo una columna para dispositivo tablet móvil. Incluso puedes cambiar con solo hacer clic en este modo de tableta y puedes configurarlo en uno. Si me desplazo hacia abajo, encontrarás que solo se presenta una columna. Si cambio estos dos, digamos tres, entonces esto no se ve realmente tan genial. A ver si funciona en dos. En modo escritorio, se ve bien si tenemos dos columnas. Veamos qué pasa si tenemos modo móvil. Obviamente, nos gustaría tener una sola tarjeta porque no hay mucho ancho para caber todo el contenido. Entonces también tienes la opción dos para mostrar todos los posts por página. Esto es lo que hemos comentado anteriormente. Puedes mostrar la imagen si quieres . Incluso puedes alternar esto. Veamos qué pasa si seleccionas maquinaria. Si hago clic en esto, puedes ver qué pasa. Lo que esencialmente sucede es que también aparece todo el borde de la imagen. Si alterno esto, encontrarás que la imagen primero que nada, déjame llevar esto de vuelta al modo escritorio. Volveré a hacer clic en la maquinaria, y veamos qué pasa. Encontrarás que aparece toda la imagen y la altura no se está ajustando por igual. Eso es lo que realmente significa maquinaria. Puede establecer el tamaño de la imagen, le gustaría establecer esto en tamaño de miniatura, puede hacerlo que le gustaría establecer como completo, luego se establecería toda la imagen completa Pero solo mantengámoslo como medio, que estaba ahí inicialmente. Creo que era medianamente grande. Si no me equivoco, creo que medio o mediano grande era algo que se aplicaba anteriormente. Entonces, mantengámonos medianos. También hay relación de imagen. Al mover el control deslizante, verás que la imagen se está acercando o alejando dependiendo de dónde estés colocando tu cursor o Bien para mi, pienso que un 0.56 quedaría bien. Bien, esto es 0.56 aquí. Incluso puedes alternar entre el título si quieres mostrar el título, puedes. Pero obviamente es una buena práctica incluir título. Si estás tratando de mostrar qué se trata tu publicación de bloque, entonces puedes cambiar el título. Puedes cambiar la etiqueta estimable para tu título. Ahora idealmente, es una buena práctica hacer uso de dos etiquetas para el título de tu publicación en bloque. Así que sólo lo mantendremos como dos. Si quieres incluir extracto, puedes. También tienes longitud de extracto. Y obviamente esto representa el número de palabras y no el número de caracteres. En lugar de 100 palabras, podríamos simplemente mantener esto como algo así como digamos 25 palabras. Sólo se mostrarían las primeras 25 palabras. Bien. Entonces también has aplicado a extracto personalizado Entonces, si has inventado todo tu extracto personalizado mientras creas una publicación en bloque, entonces eso será lo mismo Los ajustes también se aplicarán allí. Bien, y aquí tienes metadatos. Ahora dentro de los meta datos, encontrarás que inicialmente se está representando la fecha y los comentarios. ¿Correcto? Si deseas agregar más datos como quién publicó este artículo en particular, ¿ en qué momento y cuándo exactamente se modificó esto? ¿Estaba esto incluso actualizado o no? Incluso puedes agregar esas cosas. Incluso podrías agregar separador entre estos meta datos eligiendo el icono, colocando punto o tal vez incluso el separado. Puedes agregar esto, entonces tienes la opción de leer más. Puedes alternarlos, has leído más texto, o podrías cambiar esto a otra cosa. También tienes botones. Si haces esto, entonces mira qué pasa. Alinea automáticamente los botones si tienes luego abiertos en una nueva ventana. Entonces, cada vez que alguien hace clic en el enlace, ¿quieres que la publicación de bloqueo se abra en una nueva pestaña? Obviamente, queremos que eso suceda. De lo contrario, ¿qué pasará? Ese Google o cualquier otro motor de búsqueda, reconoceremos que cada vez que alguien visita aterriza en tu página de inicio, está saltando rápidamente a una nueva página. De modo que eso aumentará tu tasa de rebote y bajará tu indexación en términos de rankings de búsqueda Entonces aquí también tienes categorías. En este distintivo aquí, puedes encontrar categorías en lugar de categorías, ¿quieres que sean hashtags? Entonces aquí incluso puedes hacer uso de hashtags o podrías hacer uso de categorías. Aquí tienes una opción de avatar. Si tienes haces uso de alguno de tus Aviatar. lo que me refiero aquí mismo, encontrarás que este es mi perfil, este es Aviatar Puedes editar el perfil. Y solo puedes elegir cualquiera de tus avatar si quieres mostrarlo aquí mismo. Y solo puedes mostrar seleccionando esta Viniendo a la parte de consulta, tienes diferentes opciones para simplemente organizarlas tal como vimos anteriormente en la cuadrícula de Luke. Puedes agregar paginación si quieres. Esencialmente, post element es muy similar a lo que hemos visto en Luke grid. No es muy diferente pero la única diferencia está aquí es que en realidad no necesitas crear nada desde cero. Hay muchas cosas que están preconstruidas y puedes jugar con esas configuraciones para comenzar con esas configuraciones para comenzar con tu sección de tarjetas postales para incluirlas en tu página de inicio. 19. Elemento de portafolio para mostrar tus productos / Blogs: Bien, veamos cómo podemos hacer uso del elemento portfolio que forma parte del elemento o pro plug in. Aquí mismo se puede ver la cartera. ¿Qué significa? Tengo este sitio web aquí mismo. Se puede ver que esto está utilizando el elemento portfolio. Si hago clic en moda, encontrarás que solo aparece esta. Si hago clic en joyería, aparece este tipo de imagen. Hay cierto radio fronterizo. Cuando nos movemos por ahí, encontrarás que el texto con algún fondo verde y estos dos iconos aparecen con algún efecto de hover Aquí, sí tenemos filtros, intentemos construir algo así. Voy a crear una nueva sección. Mantendremos la dirección de la caja flexible para que sea vertical. Agreguemos el elemento portfolio. En cuanto agrego elemento portfolio, lo que está haciendo es simplemente sacar a colación las imágenes de mis posts aquí mismo en la consulta. Encontrarás que está ordenando por fecha. Lo que se publicó más reciente se mostraba aquí mismo, Ordenar por descendente En la parte de maquetación, ¿ encontrarías qué tipo de resolución de imagen quieres hacer uso? ¿Cuántas publicaciones por página quieres ver? Solo mantengamos esto como tres. Queremos tres columnas, eso estaría bien. La relación de imagen también se puede ajustar. Si hober, puedes encontrar que el título de la publicación de bloque aparece ahora en la parte de consulta, encontrarás la fuente ¿Quieres mostrar todo el post? ¿Quieres mostrar todas las páginas? ¿Quieres mostrar landing pages, selección manual, consulta actual o cualquier cosa relacionada con ella? ¿Qué sucede cuando agregas la consulta actual o algo así? Tendrás que añadir el DNI. Vamos a tocar la identificación y las clases más adelante. Pero por ahora solo mantengamos esto como post. Toda la publicación que tenemos, todas las imágenes destacadas para esa publicación aparecerán aquí mismo podemos y tal vez incluso excluir si nos gustaría mostrar solo algunas de las publicaciones en lugar de sacar todo el contenido del post. Bien, aquí puedes comprarlos o excluirlos. Incluso evitar duplicados si queremos. Aquí mismo, puedes ir a la barra de filtros, y si quieres mostrar los filtros, incluso puedes mostrarlos aquí. Al hacer clic en Mostrar, le darán dos opciones, ya sea para elegir entre categorías o etiquetas. A ver si tenemos categorías, encontrarás cursos. Obviamente deberíamos ver una opción más que es net mafia. Pero vamos a quedarnos con esto ya que encontrarás diferentes etiquetas. Ahora, la opción aparece sólo porque hemos guardado que sólo se deben mostrar tres posts por página. Lo mismo va, tenemos categorías. Idealmente, sabemos que hemos creado dos categorías, ¿verdad? Si voy a Layout y muestro todos los posts por página, digamos que acabo crear tantos posts como tengo actualmente. He hecho esto a 15, pero sólo tenemos siete puestos aquí. Encontrarás dos categorías. Solo mantén esto como número máximo, cuántas páginas tienes. Solo mantén esto así aquí. Puedes cambiar el título, lo que sea que tengas, quieras exhibir o no. Incluso puedes establecer la relación de artículos aquí. Puede ajustar el ancho de la imagen solo colocar el cursor y mover el control deslizante O simplemente podrías hacer clic en las teclas de flecha arriba y abajo de tu teclado. Puedes elegir la etiqueta H dos si quieres. Si eliges la etiqueta H dos, entonces encontrarás que el título aparece mejor más gordo Y si, vamos al estilo. Podemos agregar algún hueco de columna entre ellos que quedaría bien. También algo de brecha de fila. Bien, 25 o tal vez hasta 35 quedarían bien tanto para los escenarios como para tu fila y columna. Agreguemos algo de radio de borde. Si solo mantengo esto como radio de borde, encontrarás que después de un punto gira con bordes redondeados o con las esquinas, tienes una superposición de elemento. ¿Qué sucede si eliges la superposición del artículo? Seleccionemos el verde, que es nuestro color global. Aquí, puedes elegir el color verde. Y encontrarás que aparece el texto y hay algunos antecedentes. Pero me gustaría hacer algunos cambios en torno a esto. Podríamos hacer que este color sea un poco transparente. Veamos que pasa ahora, hagámoslo un poco opaco. Creo que esto funcionaría simplemente perfecto, pienso en esto mucho. Sí, esto se ve fantástico. Mantengamos esto tal como está, ¿de acuerdo? También puedes elegir entre diferentes colores de tu texto y tipografía Vamos a poner la tipografía a Poppins. Voy a seleccionar Poppins. Si espero encuentres que Poppins Fun Family se ha aplicado al texto barra de filtros Fclicon Encontrarás que incluso podemos cambiar el color de la barra de filtro. Incluso puedes agregar color activo, lo que sea que se esté seleccionando que se mostrará. Incluso podrías cambiar la tipografía de esto. Escojamos los poppins. Hemos elegido las poppins, podemos agregar espaciado entre ellas Se puede agregar espaciado entre todas estas cosas. Incluso puedes ir al color. Veamos qué pasa si elegimos el color. Encontrarás que el color de la fuente cambia. Si elegimos activo, entonces actualmente verás que todos están seleccionados bien aquí. La diferencia entre el espacio entre y el espaciado es que si muevo mi deslizador por espacio entre, encontrarás que el espaciado entre mi barra de filtro. Cambios. Si cambio el espaciado entre esta barra de filtro y los ítems que tengo para mi cartera aumentarán o disminuirán. Solo mantengamos esto como 35. Esa consistencia se mantiene a lo largo de esta página. Aquí tienes la sección. En lugar de elegir caja, incluso puedes hacer esto como ancho completo para que aparezca de punta a punta. Si quieres darle algo de relleno a esto , incluso puedes hacerlo. Intentemos agregar algo de relleno de izquierda y derecha. Si agrego algo de relleno desde la izquierda, encontrarás que aparece el contenido, pero hay algo de espacio. Agreguemos también 30 desde aquí mismo, encontrarás algo de espaciado. Bien, esto es lo que hemos hecho hasta ahora. Ahora, incluso podrías agregar algo de color de fondo a toda esta sección con solo hacer clic en esta sección. ir al tipo de estilo, podríamos ir a superposición de fondo. Ahora vamos a centrarnos en la superposición de fondo, que no hemos cubierto hasta ahora aquí. Si elijo el tipo de fondo como clásico para la superposición de fondo, puedo elegir una imagen. Asumamos que estoy eligiendo esta imagen en particular. Todo bien. Ahora tengo esta imagen en mi fondo. Ahora, inicialmente se puede ver que no se está seleccionando el color. Pero aún así aparece la imagen, la imagen aparece una especie de cosa muy transparente. Ahora bien, ¿cómo sucedió eso? Con solo ir a los filtros CSS, encuentra que el desenfoque se establece en cero. El brillo son todas estas cosas. Pero si dejas caer las saturaciones, encontrarás que toda la imagen que está trabajando en el fondo es en blanco y negro Una cosa, algo similar que se logra aquí mismo. Se puede ver que la imagen en el fondo tiene algún tono negro, blanco. Puedes hacerlo haciendo clic en los filtros CSS, bajando la saturación a cero. ¿Todo bien? Y esto sólo sucederá si estás seleccionado superposición de fondo. ¿Todo bien? No sucederá si has seleccionado tu fondo, fondo simple. También encontrarás que está siendo transparente. Si eliges que esto sea 100% opaco, entonces esto es lo que encontrarás. Bien, vamos a dejar esto abajo. 2.6 0.6 se vería bien. Bien, tienes el modo blend. Diferentes tipos de modo de mezcla. No toquemos eso aquí. Dentro de su posición, encontraría diferentes posiciones que hemos cubierto. El apego es algo que no hemos tocado. Bilifolt se configuraría para scroll o default. Veamos qué pasa si elegimos arreglado. Si elijo, si me desplazo, se puede ver que la imagen también cambia. La dirección de la imagen con respecto al eje Y cambia. Esencialmente estamos desplazando la imagen también en el fondo Eso es lo que sucede aquí mismo para nuestra, para nuestra cartera. Voy a ir a la barra de filtros. Voy a hacer que la tipografía sea un poco más gorda. Hagamos esto audaz para que sea visible aquí mismo. Incluso podríamos cambiar el color si quieres, pero no lo voy a tocar. Item overlay, puedes encontrar que aquí tenemos diferentes cosas que hemos cubierto y diferentes artículos. Además, espero que ustedes tengan el punto de hacer uso del elemento portafolio y cómo podemos hacer uso de la superposición de fondo agregando algunos filtros CSS, cambiando la opacidad, y también cambiando el apego de la superposición de fondo 20. Lista de precios Element - Muestra los cargos por servicio: Déjame mostrarte otro elemento que es la lista de precios. Voy a añadir una nueva sección aquí mismo. Podría seleccionar la caja flexible con dirección vertical. Posteriormente podremos agregar más contenedores. Voy a añadir elemento aquí dentro de la lista de precios. Una vez que deje caer esto, encontrarás que tenemos un título, tenemos descripción, luego tienes algunos puntos y luego tienes el precio. ¿Cuándo podría ser útil este elemento exacto? Digamos que estás construyendo una página de servicio o tal vez incluso como sitio web para un restaurante o cafetería donde solo estás mostrando la lista de precios para todos y cada uno de los alimentos. Así que puedes simplemente dar click sobre el fondo aquí. Tengo el fondo de todo el contenedor, la caja flex. Iré al estilo. Y lo que puedo hacer por el fondo, puedo seleccionar una imagen, así que simplemente voy a hacer clic en Imagen Clásica. He subido una imagen de café. Lo que exactamente estamos tratando de construir es una sección por el precio de todos los diferentes cafés que sirve esta cafetería. Aquí tienes la imagen. Pero también nos gustaría dar algún tipo de superposición de fondo. Bien, aquí en la superposición de fondo, podemos seleccionar un tipo de efecto degradado aunque tengas una imagen en el fondo. Incluso puedes agregar efecto de color degradado con complemento a tu imagen. Aquí tienes un color, el color primario y el color secundario. Mantengamos el color primario para que sea algo así como un tono rojo oscuro. Así que vamos a mantenerlo un poco como un tono parduzco oscuro ¿Todo bien? Y el segundo color mantendrá esto como negro, fino. Y cambiaremos la ubicación del primer color a unos 75. Bien, De arriba a abajo, encontrarás que el color está apareciendo un poco más oscuro, fino. También cambiarás la opacidad del fondo. Si muevo mi cursor o mi deslizador hacia la derecha, encontrarás que la imagen se vuelve cada vez más borrosa. O hay más oscuridad de degradado, una especie de sombra de color que va alrededor de la imagen. El texto se hace visible bien. Ahora puedo dar click en esta lista de precios en particular. Puedo dar click en Estilo. Puedo ir a Color de mi texto, y puedo cambiar esto a Blanco. Ahora encontrarás que tenemos título, el precio aquí mismo. Puedo cambiar esto a blanco, tengo descripción, que hasta yo puedo cambiar esto a blanco. Ahora encontrarás diferentes tipos de separadores entre el título y la lista de precios Para todos y cada uno de los artículos que tenemos ahí está punteado. Podemos cambiar esto a, podemos cambiar esto a doble, entonces hay líneas dobles dando vueltas. E incluso puedes hacer que esto no esté bien, pero nos gustaría mantener esto como punteado. Incluso puedes mantener esto como sólido, pero sólido no se vería tan bien. También tienes peso para esos puntos. Puedes mover el control deslizante para ver qué funciona para ti. Incluso puedes agregar espaciado, así podrás encontrar que cuanto más muevas tu slider hacia, ahí mismo el espaciado queda del título y del precio Bien, aquí, mantengamos el espaciado 20. Incluso puedes cambiar el color de tus puntos que tienes el separador, luego tienes la imagen. Ahora puedes agregar una imagen a esto. Para eso, ¿qué vamos a hacer? Iremos al contenido aquí mismo en el contenido. Puede ampliar la lista de todos y cada uno de los elementos. Se puede fijar el precio. Se puede cambiar el nombre del título. Demos esto como espresso. Sólo nos quedaremos con la descripción. Sea lo que sea, podemos cambiar la imagen a este icono en particular. Bien, entonces puedo traer la misma imagen para los otros artículos también. Puedo hacer como Fracino. Bien, entonces tenemos chocolate caliente. Solo mantengamos esto como chocolate caliente. Bien, vamos a ampliar el espaciado para nuestro separador. Creo que unos 15 píxeles quedarían bien. Bien. Aquí tienes imagen ahora para todas y cada una de las imágenes. Bien, antes que nada, tendremos que agregar imagen para el chocolate caliente también. Vamos a dar esta imagen. Bien, y así quedaría bien nuestro menú. Puedes cambiar la etiqueta si quieres mantener esto como H tres. Encontrarás que el título parece ser gordo y aparece en gran tamaño. Puedes cambiar el color de esta etiqueta H dos si lo deseas simplemente seleccionando la etiqueta que te gustaría. Para la etiqueta span, se establecerá en blanco. Si quieres una H dos o H tres u otras etiquetas, tendrás que cambiar la configuración de eso aquí mismo. También tienes una descripción que está establecida para etiquetar. Así que solo mantengámoslo tal como está. Vamos a ir al estilo, hemos cubierto esta parte. Pero yendo a la imagen, puedes cambiar el tamaño de la imagen. Actualmente está configurado en miniatura. Se puede cambiar alrededor. Incluso puedes agregar algún radio de borde si lo deseas, el espaciado alrededor de la imagen y el título y descripción que también puedes trabajar alrededor de los diferentes elementos. ¿Cómo quieres alinear estos diferentes artículos? ¿Quieres alinearlos verticalmente? ¿Quieres alinear el contenido que tienes con respecto a la imagen en el centro, a la parte superior o al final? Creo que el centro funcionaría bien. Sólo mantengámoslo así. Podemos agregar un hueco. Solo mantengamos esto ya que 2020 se vería bien. Nuevamente, aquí en avanzado, puedes agregar un margin padding y otras cosas. Podemos hacer un duplicado de esto si queremos. Si hago un duplicado de esto, puedes ver qué pasa. Aparece justo debajo de esto, simplemente porque hemos establecido toda la sección del contenedor, toda la dirección Flexbox a vertical Si cambio el diseño dos horizontales, encontrarás que así es como se ve en la parte superior de esto, incluso podemos agregar un divisor. Déjame traer un divisor aquí mismo en la parte superior en su mayor parte. O sabes qué, hasta podría agregar un contenedor. Busquemos contener. Bien, puedo agregar un contenedor en la parte superior. Ahora bien, esta dirección de contenedores. En primer lugar, permítanme editar la configuración del contenedor. Cambiaremos esto a vertical. Bien, en este contenedor pondremos nuestra lista de precios y esta lista de precios, bien. Ahora nos gustaría agregar un contenedor más en la parte superior. Bien, así que agreguemos un contenedor en la parte superior aquí. Dentro de este contenedor, agregaremos nuestro divisor. Este divisor, vamos a tener nuestro título, podemos agregar, Vamos a mantener esto una línea central. Bueno, algo así como un menú. Bien, aquí puedes cambiar entre las diferentes etiquetas que quieras. Voy a mantener esto como etiqueta de pan. Voy a hacer esto tan sólido. El ancho es fino. Iremos al color del divisor y pondremos esto en blanco. Entonces para nuestro texto también, podemos cambiar, puedo ir a la tipografía, puedo cambiar esto a poppins puedo cambiar esto a Incluso puedo aumentar el tamaño de mi texto. Para el menú de aquí mismo, esto se vería 50 píxeles se vería simplemente genial, bien. Ahora para los otros contenedores que tenemos, donde tenemos estos dos lista de precios, podemos erigir la configuración del contenedor a horizontal, y este es nuestro menú se vería como, de nuevo, la lista de precios Podemos ir a la tipografía y cambiar la tipografía a poppins Aquí puedo seleccionar poppins por título, poppins por el precio, y poppins para y poppins También puedo guardar los mismos ajustes para el otro simplemente copiando y pegando el estilo Puedes ver así es como aparecería nuestro menú si usamos el elemento de lista de precios. 21. Elemento de cuenta regresiva: ejecuta una venta / evento por tiempo limitado: Bien, vamos a ver. Otro elemento, por cierto, en esta misma mina, teníamos la imagen del café, pero acabo de quitar el fondo yendo a eliminar el sitio web de G. Y por ahí acabo de subir mi imagen. Y utilizo esa imagen tanto para los elementos de la lista de precios. Entonces voy a agregar una nueva sección justo debajo de esta spart. Mantengamos la caja flexible, quinta dirección vertical. Ahora voy a hacer uso de nuestro elemento de cuenta regresiva de cuenta regresiva. Ahora, ¿cuándo puede ser útil esto? Obviamente, cuando estamos tratando de ejecutar una página de ventas de promoción por tiempo limitado. O estás tratando de organizar un seminario web que se llevará a cabo en aproximadamente una semana más o menos. O estás ejecutando una venta en realidad ahí puedes usar este elemento de cuenta regresiva primero Vamos a darle a este contenedor algún tipo de imagen de fondo aquí mismo en superposición de fondo. Seleccionaré la imagen Classic Select como esta. Tan pronto como hagamos clic en esto, encontraremos que la opacidad se establece 2.5 aumentará este 2.9 más o menos Esta imagen para todo este contenedor en realidad vamos a tomar el ancho como 100 H. Vamos a hacer esto como 100 H encontrar, también encontrarías que la imagen se está repitiendo. Vayamos al fondo. Haremos esto como no repetido. Si hacemos esto como no repetido, encontrarás que la imagen termina aquí mismo. En su lugar, haremos que el tamaño de visualización tal como aparece contenido, y se agranda con respecto al ancho aumentado de nuestro contenedor Bien, ahora dentro de esto, colocaremos otra imagen. Intentemos agregar una imagen que sería esta gran venta justo debajo de esta. También nos gustaría agregar nuestro elemento de cuenta regresiva. Vamos a arrastrar y soltar nuestro elemento de cuenta regresiva aquí mismo. Lo colocaré, pero primero déjame ver que donde exactamente para esta imagen colocada aquí mismo en la estructura, en este contenedor, tenemos la imagen. Idealmente, el contenedor también debería permitir agregar cuenta regresiva Sí, ahora podemos sumar nuestra cuenta regresiva. Aquí, puedes encontrar que la cuenta regresiva aparece algo así Ahora en la parte de contenido, encontrarás el temporizador Fecha de vencimiento o Evergreen, lo que básicamente significa que el temporizador se actualizará automáticamente después de cierto período de tiempo Si desea una fecha de vencimiento, eso significa que la venta debe terminar después de un período de tiempo determinado. Puedes establecer la fecha simplemente yendo a esta pestaña y haciendo clic en Cuándo la venta debería terminar realmente. Ahora mismo, sólo voy a seleccionar Hoy. Hoy, la venta terminaría en tan solo unas horas. Puedo fijar la hora. También, aquí mismo tenemos el calendario para que podamos fijar la fecha, el mes y el año. Por aquí puedo fijar el tiempo en su lugar, solo puedo hacer esto a unos 10 minutos. Actualmente, el horario es 44 18:00 P.M. Así que haremos esto como 04:28 P.M. Bien. Aquí encontrarás, por cierto, bien, el tiempo está configurado actualmente en UTC. Verás que la hora está establecida en UTC. Actualmente, si quieres que el tiempo se muestre de acuerdo a tu zona horaria, solo podemos volver a tu dashboard, pero presionar Dashboard. Vamos a hacer clic aquí mismo. Iremos a la Parte Configuración. Aquí mismo en Ajustes, puedes encontrar la parte de Zona Horaria aquí mismo. Simplemente seleccione cualquier zona horaria en la que se encuentre. Estoy en la India. Mi zona horaria sería la primera, déjame buscar mi lugar aquí mismo en Asia. Yo encontraría mi lugar donde? India. Calcuta es una ciudad en India. Simplemente puedo seleccionar esto y esta será mi zona horaria. Permítanme guardar esto desplazándome hacia abajo y haciendo clic en el botón Seguro Editaré esto con Elementor, y una vez que me desplace hacia abajo, encontrarás que el temporizador en realidad está funcionando solo por 8 minutos Bien, entonces así es como puedes ejecutar el temporizador. Ahora, de nuevo, volviendo a esta parte, hay diferentes opciones de vista. Si quieres que esto esté en un bloque más, así es como aparecerá. Incluso puedes descuidar los días si es solo cuestión de pocas horas, entonces puedes simplemente alternar los días. Aquí tienes etiqueta personalizada si quieres, incluso puedes ocultar la etiqueta, pero eso no tendría sentido. Es importante incluir etiqueta. También hay una etiqueta personalizada si desea cambiar horas, minutos o segundos. Entonces, pero solo lo mantendremos tal como está. ¿Y qué otras acciones debe realizar una vez que expire el tiempo? Eso significa que ¿qué pasaría después de siete a 8 minutos? Entonces tenemos pocas opciones. O podemos redirigir a nuestros usuarios a una página diferente, o podemos ocultar este temporizador. O podemos mostrar un mensaje, así podemos mostrar un mensaje. Algo así como el periodo de venta ha caducado. Bien, una vez finalizado el periodo de tiempo, se mostrará este mensaje, seguido de signo de exclamación Al ir a la parte de estilo, encontrarás diferentes opciones. Aquí tienes el ancho del contenedor. Puedes encontrar que el ancho del contenedor es aproximadamente entero, 100% Puedes cambiar el color de fondo de este, actualmente está configurado en ninguno. Puedes cambiar esto a algo así. Todos y cada uno de los bloques tendrán algún tipo de diseño de bloques por horas, minutos, segundos. Todos y cada uno tendrán su bloqueo. Cuando tengas la vista como bloque, ese texto, que es horas, minutos o segundos aparecerá en la parte inferior. Si estás en línea, entonces aparecerá justo debajo de tu tiempo y justo debajo de él. Todo bien. Y aparecerán cerca y compactas entre sí. Si haces esto como bloque, es como aparecerá bien. Incluso puedes cambiar el estilo de la misma. Si quieres agregar algún tipo de borde puedes agregar actualmente está configurado como predeterminado, eso significa que no hay borde. Puede cambiar esto a surco sólido de puntos dobles. Veamos cómo se ve el groove porque no lo has visto antes. Es muy similar a sólido, pero puede haber algunas diferencias aquí y allá. Veamos qué pasa si selecciono este borde y aumento el ancho del borde a aproximadamente, digamos 20. Así es como se ve, Es como un tipo de borde de surco con efecto de marco. Si cambio esto a sólido, mi ancho de borde sería algo así. Pero permítanme simplemente traerlo de vuelta a dos porque eso sería suficiente, en mi opinión, podemos incrementar el radio fronterizo para hacerlo circular, fino. Para hacer esta circular, primero tendremos que hacer esto como en línea. Después de hacer esto en línea, este es nuestro contenido se vería así. Bien, ahora también tienes algún espaciado entre los tres bloques o méritos y segundos. Bien, aquí puedes agregar un poco de relleno. Al aumentar el acolchado, ¿qué pasará? El espaciado alrededor del contenido aumentará. Obviamente, ya sabes de esta parte. Podemos aumentar el acolchado. Puedes desplegar el espaciado si quieres, dentro del contenido. Se puede cambiar el color del contenido. Se puede cambiar la topografía a poppins, digamos ¿Qué sucede en la etiqueta? Incluso podemos cambiar el color de la etiqueta también. Vamos a establecer esto por defecto, que es blanco. Nuevamente, cambia la tipografía a pops. Si quieres que esto sea tan audaz, incluso puedes hacerlo. Puede agregar un trazo de texto. Puedes agregar un mensaje si quieres. Se puede cambiar la tipografía del mensaje. Texto. El color del mensaje que aparecerá después termine la cuenta regresiva aparecerá en el centro con color blanco, fuente pops Y queremos tener algún peso de fuente que sería negrita, 700 negrita, ¿verdad? También aumentemos el tamaño a algo alrededor de 35, 30 quedaría bien, creo. Sí. Ahora bien, dentro de todo este asunto mismo, ¿qué pasa si vamos a avanzado aquí? De nuevo encontrarás todas las opciones predeterminadas que podemos ver para todos los demás elementos. Espero que entiendas el punto sobre uso de diferentes tipos de cosas. Déjame simplemente bajar el tiempo a aproximadamente un minuto más o menos. Apenas unos segundos. Y solo puedo publicar esto para ver que qué mensaje se mostrará. Si me desplazo hacia abajo, encontrarás que el periodo de venta ha caducado. Bien, pero ahora tenemos algo de espaciado aquí mismo. Ahora bien, ¿por qué aparece eso? Déjame regresar. Justo aquí, tenemos todo el contenedor. Este contenedor, vamos a ir al estilo. Vamos a establecer el fondo. Bien, contenedor. Tendremos nuestra superposición de fondo. Queremos esto, no se repita. Hagamos de esto una tapadera. Bien. La cubierta ocupará la totalidad con multa. Una vez que publiquemos, actualicemos la página aquí mismo. Si me desplazo hacia abajo, puedes encontrar que todo el ancho se toma bien. Se puede ver que el periodo de venta ha caducado. Bien, así que eso se trataba usar el elemento de cuenta regresiva. 22. Elemento de Blockquote - Incluye citas / Tweets en tu página de blog: Bien, veamos otro elemento aquí. Voy a crear una caja flexible. Voy a añadir un nuevo elemento. Este elemento es código de bloque. En lugar de buscar aquí tenemos código de bloque. Incluso puedo escribir abajo por elemento de búsqueda. Y aquí tenemos el código de bloque. Ahora bien, ¿cómo puede ayudarnos el código de bloqueo y qué hace exactamente? ¿Aquí? Como puedes ver, básicamente comparte dado por alguien y vinculado al tuit. Asumamos que estás escribiendo tu publicación de bloque. Y tú como autor, hiciste un tweet en tu plataforma de Twitter. Puedes incluirlo aquí mismo. Hay diferentes pieles para todos y cada uno, ¿qué opinas? Este código de bloque. Puedes cambiar el contenido. Se puede cambiar el nombre del autor. Puedes agregar o quitar el botón Tweet si quieres. Si incluyes el botón de tweet, tienes diferentes opciones para incluir ya sea un icono o solo texto, o tanto icono como texto. Se puede cambiar el color de Twitter, pero creo que me gustaría mantener esto como color del logo de Twitter aquí. Puedes cambiar esto a burbuja. Burbuja es básicamente como cosa de la caja de chat. Déjame publicar esto y mostrarte cómo se vería aquí en mi página. Una vez que me desplace hacia abajo, encontrarías esta burbuja Aquí puedes ver un poco la flecha. Eso es lo que es una burbuja. Incluso puedes cambiar esto para enlazar. Eso significa que cada vez que alguien haga clic en él, será redirigido a tu tweet Vamos a mantener esto como clásico aquí. Tienes la etiqueta que puedes usar. Puedes agregar tu nombre de usuario algo así como, digamos que este es un nombre de usuario que me voy a quedar. Siempre que alguien haga clic en él, será redirigido a tu página Déjame ver si se reflejan los cambios. Espera un segundo. Apenas un segundo. Sólo voy a cambiar esta parte. Me desplazaré hacia abajo donde simplemente pueda hacer clic en el tweet. Si hago clic en él aquí, encontrarías este tweet desde esta plataforma de Twitter o usuario de Twitter. Bien, vamos a cruzar esto. Y aquí tengo diferentes opciones para elegir donde exactamente quiero apuntar a esta página actual, no personalizada. Y puedes configurarlo solo una opción que tengas en el contenido que es código de bloque. Al ir a la sección de estilo, puedes cambiar el color del texto. Se puede cambiar la tipografía. Se puede cambiar la brecha entre el nombre del autor y el tweet que han realizado. Se puede cambiar el color de la tipografía. Puedes meterse con el tamaño del botón, palabra, radio, color, agregar algo de color personalizado, O podrías quedarte con el color oficial de Twitter. Aquí se puede jugar con la frontera de la cosa del centro. Podría agregar un ancho de borde. Se podría agregar algo, una brecha. Incluso podrías agregar algo de relleno vertical y esas cosas. Déjeme simplemente devolverlo al default. Aquí tienes borde como la piel. Incluso puedes cambiar esto a cotización. Una vez que lo haga cita, usted lo haría, generalmente vería el icono de comillas dobles, pero no es visible. Entonces tendremos que ir al estilo. Vamos a tener que ir a abrigo aquí mismo. Podemos seleccionar como negro. Si hago esto negro aquí, lo encontrarás. Este icono aparece. Se puede aumentar o disminuir el tamaño de este. Puedes agregar un hueco si quieres. Se puede mear alrededor del botón que hemos visto antes. Podemos tener otra opción así como código en caja. Podemos tener manera limpia donde creo que me gustaría usar cotización. Hay un montón de opciones diferentes con las que puedes jugar. Puedes centrar la línea, puedes escribir una línea, puedes dejar una línea. Y hay muchas otras cosas. Creo que esto podría ser útil cuando estás agregando testimonios, intentas agregar comentarios, abrigo exacto que tu cliente o tus clientes dejaron para tu producto o servicio que les ofrecías. O simplemente podrías dejar un tweet del autor de la publicación de bloque. 23. Elemento de carrusel con testimonio: crea confianza agregando comentarios de clientes: Déjame mostrarte otro elemento que es carrusal testimonial. Déjame solo buscar carrousal testimonial. Esto es lo que vamos a ver aquí mismo. Voy a añadir una nueva sección, Flexbox, dirección vertical. Ahora cuando vayamos a la parte de estilo, encontrarás una opción más que es el divisor con forma, que no hemos usado antes. Intentemos usarlo aquí. Tienes arriba e abajo desde arriba, me gustaría tener algunos un divisor en forma. Aquí tienes libro de flechas divididas y muchos tipos diferentes de opciones para elegir. Intentemos hacer uso de split. Puedo elegir el color al verde. Veamos cómo se ve. Para que puedas ver que se divide. Si quiero que sea de abajo de abajo, se divide. Puedo cambiar el ancho. A medida que aumento el ancho, también se puede ver que la altura y todas esas cosas aumentan. Puedo cambiar, digamos inclinación. ¿Qué pasa si cambio esto a tilt? Se puede ver que la altura podría ser algo así. Bien, también déjame simplemente aumentar el tamaño de todo el contenedor. Ancho completo y alto para ser toda la altura. 100 es lo que vamos a elegir, tomar toda la altura. Volviendo al estilo tenemos nuestro divisor de formas, haríamos que esta altura sea de unos 500. Sobre esto mucho. Bien, vamos a bajar. O podríamos incrementar esto. No quiere decir que se detenga en 500. Si el deslizador, cuando te mueves hacia el lado más derecho y ves el valor cinco, no significa que se detenga en 500. Si agrego algo como 800, se puede ver que todavía va. No importa. Simplemente puedes aumentar, o tal vez aumentar esto a 65650 no es lo suficientemente bueno Golpeemos un 75750 es exactamente lo que deberíamos estar buscando Bien, puedes ver exactamente que todo nuestro contenedor ha sido dividido en dos partes. Este triángulo izquierdo inferior izquierdo, que es de color blanco. Y luego tenemos el triángulo superior derecho, que es de color verde. Bien, intentemos agregar aquí nuestra carousal testimonial Voy a colocarlo aquí mismo en el centro. Ahora intentemos arreglar el centro de artículos, aparece aquí mismo. Lo que voy a hacer en cambio, en vez de esta cosa aparecen, bien, el divisor de formas aquí mismo. Puedo cambiar el ángulo de esto. Puedo darle la vuelta a esto, así puede aparecer aquí mismo. Incluso podría disminuir la altura. Hagamos que sea un 400 más o menos. Creo que 380 quedaría bien. Mantengamos esto como 380, Bien. Ahora para esta carousal testimonial, obviamente queremos mostrar las críticas, las críticas positivas de nuestros clientes o clientes que han comprado nuestros servicios o nuestros productos Nos gustaría mostrar esos comentarios felices a nuestros nuevos prospectos. Aquí puedes ver diferentes diapositivas. Se desliza automáticamente. Puedes cambiar el momento de la misma, y te mostraré todas y cada una de ellas. Aquí tienes el ítem uno. Puedes cambiar el contenido. Incluso puedes agregar imágenes a todos y cada uno. Permítanme agregar algunas imágenes. Tenemos pocos. Podemos agregarlos en el círculo avatar. Démosle a este tipo llamado John Doe. El segundo, nos quedaremos con esta señora, se ve muy feliz, así que le daremos su nombre. Emily. Emily Blunt Es CMO de una empresa. Vamos a darle a esto un CMO. Agreguemos una imagen más. Voy a quedarme con este tipo, y le daré el nombre, Will, Will Smith. Bien, se parece a Will Smith. Entonces me voy a quedar con esto como Will Smith. Es director general de una empresa. Ceo, CTO. Y CMO son los tres títulos que tenemos. O incluso podrías cambiar esto a algo así como Fundador. Todo bien. Incluso puedes agregar artículos, puedes hacer un duplicado de ellos. No tengo que enseñar al respecto. Nuevamente, puedes cambiar el tipo de piel, el texto que tienes, la reseña que tienes en el texto de Lorimpsu Puedes cambiar eso de default a bubble. Si cambias esto a burbuja, encontrarás que esto aparecerá como en un formato de chat box. Bien. Pero no encontrarías esa una pequeña flecha, simplemente porque el color de fondo, que tenemos no es gris. Vamos a poner esto en algo así como un gris más oscuro. Acerca de este color quedaría bien. Ahora puedes ver el icono del cuadro de chat apareciendo bien. Volvamos a nuestro testimonio. Tienes un diseño diferente. O puedes configurar tu imagen en línea con el texto de la persona y su posición, o bien puedes apilarlas de tal manera que la imagen aparezca en la parte superior y el nombre y la posición de esa persona bajen. O bien puedes mantener esto como imagen arriba, lo que básicamente significa que toda la información sobre la persona aparecerá en la parte superior y revisar los comentarios aparecerán en la parte inferior. Si hago esto como imagen izquierda, así es como se verá. Si hago esto como imagen correcta, así es como se verá. Mantengamos esto como imagen a la izquierda porque se ve bien. Aquí, puedes cambiar la alineación. Si hago esto como dejó una línea, encontrarás que la retroalimentación se convierte en una línea dejada. Si la línea central o la derecha una línea. El libro de texto cambia, vamos a mantener como línea central. También tenemos diapositivas por vista. Si puedo agregar tres diapositivas por vista, así es como aparecerá. Podemos hacer dos, incluso podemos sumar diez, y así sucesivamente. Vamos a mantener una retroalimentación por diapositiva. Tenemos diapositivas para desplazarse. ¿Cuántas diapositivas queremos mostrar? Dependiendo de eso se puede mostrar. Ahora incluso se puede cambiar el ancho de esto. Puede hacer que el texto sea compacto bajando el ancho de retroalimentación. O incluso podrías establecer esto por defecto. Al ir en las secciones adicionales, sección de opciones adicionales, encontrarás flechas. Si solo cierro esto, encontrarás que la flecha desapareció. Si cambio esto, aquí encontrarás una pequeña flecha. También tienes paginación en la parte inferior, tienes tres puntos Puedes cambiar esto a fracción, lo que básicamente significa que hay tres en total y actualmente estás en la primera. Si quieres hacer esto como un progreso, encontrarás que la barra de progreso aparece en la multa. Aquí tienes la parte más alta. Si hago clic en siguiente, verás que barra de progreso llega hasta este punto. Si voy a la última barra de progreso, toca el final. Mantengamos esto como puntos. Puedes cambiar la duración de la transición e incluso puedes cambiar la velocidad de reproducción automática Me gustaría mantener esto como reproducción automática. Si no quieres, puedes simplemente desactivar esto. También tienes bucle infinito. Puedes hacer una pausa cada vez que estés pasando el cursor alrededor de cualquiera de los comentarios, la reproducción automática no sucedería También tienes pausa en la interacción. Eso significa que cada vez que alguien hace clic en él o cuando alguien se arrastra, entonces esta diapositiva automáticamente Aquí tienes la resolución de la imagen que se debe establecer en completa. También tienes camino perezoso, pero no toquemos esta parte. Bien. Llegando a la parte de estilo, encontrarás diferentes espacios entre ellos. Encontrarás el color del borde, ancho del borde, el radio del borde, el contenido. Llegando a la parte de contenido, obviamente puedes cambiar la tipografía a la parte de imagen de poppins, puedes Si aumento el tamaño, así es como se verá encontrar. Si cambio la brecha entre el nombre y la imagen, así es como aparecerá el cambio. Puedo cambiar el radio del borde para la imagen. Si quiero que esto tenga bordes redondeados, puedo mover mi deslizador hacia la derecha. O si quisiera dar esto como bordes afilados, puedo mover mi diapositiva hacia la izquierda. Pero mantengamos esto por defecto, que es circular. Aquí en la parte de navegación, encontrarás dos botones izquierdo y derecho. También puedes aumentar o disminuir el tamaño de los botones. Podrías cambiar el color de ellos. Podrías agregar tamaño de paginación. Además, si quieres que los puntos aparezcan en la parte inferior para que sean un poco más grandes o más pequeños cambiando la burbuja, lo que puedes hacer, solo puedes darle a la burbuja. Puedes agregar algo de relleno si quieres. Puedes agregar un borde si quieres, y así sucesivamente. Bien, espero que entiendas el punto de todo el asunto. Llegando al contenido. Aquí mismo, encontrarás el texto que está ahí, aquí mismo. Podemos cambiar esto a Poppins. Vamos a tratar de hacer esto. encontrar que Pops se aplica aquí mismo. Bien. Espero que ustedes entiendas el punto. Como una cosa más que podemos agregar a esto, podemos simplemente volver aquí mismo dentro del contenido, podemos agregar algún borde a la burbuja. Si agrego algún borde, permítame darle un color a este borde. Puedo dar esto como verde. Este es un color de fondo. Este no es un color de borde, sino un color de fondo. Déjame simplemente hacer los ajustes predeterminados aquí. Tienes borde, simplemente alternaremos este borde aquí, verás que se ha aplicado el borde negro, pero no queremos color negro. En cambio queremos el color verde. Esta frontera podría aumentarse o disminuirse dependiendo de nuestro escenario de caso de uso. Desseleccionaremos esta parte. Iremos a avanzado aquí mismo. En la parte avanzada, encontrarás frontera aquí mismo. Incluso se puede agregar frontera a toda la carousalre testimonial. Si agrego un sólido, ¿qué pasa? La frontera alrededor de toda la cosa aparecería. Yo quisiera darle frontera a una dirección específica solamente. Eso también lo puedo hacer con solo agregar sobre esto mucho. Puedo cambiar el color del borde a verde. Así se verá. Puedo agregar una frontera Nosotros si quiero, pero no va a tener sentido. Incluso puedo agregar una sombra de caja. Se puede ver sombra de caja. Pero déjame reiniciarlo. Volver al valor por defecto. Así es exactamente como funciona nuestra sección de carousal testimonial 24. Elemento de tabla de precios: precios de servicios de visualización en formato de niveles: Empecemos con otro elemento. Voy a crear una nueva sección. Queremos que la dirección de la caja flexible sea horizontal. Aquí, voy a añadir un contenedor. Haré duplicado de estos contenedores incluso antes de agregar otro contenedor. Primero vamos a ajustar la altura de este contenedor para que sea de aproximadamente 100 H, bien. Ocupa toda la altura. Ahora agreguemos un poco de fondo a esta imagen clásica y esto es lo que seleccionaré. Queremos que no se repita y el tamaño de la pantalla se cubra. Agrandar la imagen completa para que se ajuste ya al ancho y alto de nuestro contenedor. Ahora agreguemos contenedor y haremos duplicado de estos de tal manera que tengamos tres columnas aquí mismo. Esencialmente, lo que estamos tratando de construir es que estamos tratando de crear una tabla de precios para un sitio web, página de servicio, un producto de cualquier tamaño que podrías haber buscado. Ofrecen una página de servicio, ¿ verdad? Una página de precios. En esa página de precios, tienen tres niveles diferentes de sus precios. Uno sería el nivel básico avanzado y el nivel pro. Aquí vamos a lograr algo similar. Encontrarás título, encontrarás descripción, encontrarás un color de fondo. Tienes una etiqueta, tienes tu precio, ya sea suscripción mensual o anual. Tienes diferentes características enumeradas. Tienes tu patrón y algo de texto que puedes colocar justo debajo tu patrón. Intentemos editar esto. Simplemente haré clic en esto y aparecerá la opción de edición de tabla de precios. Ahora en vez de Ingresa tu título, podemos cambiar esto a algo. Déjame hacer esto como un paquete de diamantes. Esto es como un paquete de diamantes. Entonces podemos cambiar la descripción. Podemos simplemente mantener esto como nuestra descripción. Podemos cambiar la etiqueta del título a H dos o cualquier otra cosa, pero vamos a quedarnos con tres. Llegando a la parte de precios, podemos cambiar el símbolo a dólar, euro, cualquier moneda que esté utilizando. Entonces incluso podemos cambiar esto a Rupia, pero me gustaría mantener esto como dólar ahora. Puedo cambiar el precio. En lugar de 39.99 puedo cambiarlo a 59 99 si quiero. Bien, aquí puedo cambiar el formato de la moneda. Ahora, ¿cuál es la diferencia entre este formato y este formato? Si cambio esto, encontrarás que la parte de centavos aparece después ese punto decimal o podrías hacer uso de la predeterminada. Bien, así que esto quedaría bien. Aquí tienes la venta también, ¿qué pasa si me alterno entre la venta? Entonces, si alterno con venta, precio original se reducirá y el nuevo precio se mostrará aquí mismo Puedo mantener el precio original para estar alrededor de 99. Todo bien. Puedo cambiar el periodo, ya sea que quiera que sea un plan de suscripción mensual o anual. Puedo mantener esto como anual o mensual. Déjame hacer esto como mensual. Incluso puedes hacer esto trimestralmente. Aquí tienes una lista de características. Incluso puede cambiar el icono en lugar de usar una verificación circular. Sólo puedo hacer uso de esta casilla de garrapata o simplemente una simple garrapata. Sólo puedo buscar T o consultar aquí tengo este cheque. Puedo seleccionar esto, puedo cambiar el color del icono a verde. Y aquí, en vez de elemento de lista como uno, puedo hacer esto como un solo dominio. Puedo hacer una réplica de esto. Así que sólo puedo copiarlo y pegarlo varias veces. En lugar de un dominio, puedo enumerar las otras características como 100 B, 100 GB de ancho de banda de ancho de banda. Bien, y la última característica, podemos decir algo así como 100 alojamiento de sitios web. Esto es como una tabla de precios para cualquier tipo de proveedor de servicios de alojamiento. Podría estar hospedando terreno lateral. Solo estoy tratando de, ya sabes, enumerar las características que ofrecen. Aquí tienes 100 GB de Pan con cien alojamiento de sitios web y el icono que es check. Todo bien. Incluso puedes reorganizarlos si quieres. Puedo simplemente colocar esto aquí mismo. Un dominio puede aparecer en la parte inferior. Incluso puedes agregar algo como certificado SSL, certificado SSL. Primero, permítanme hacer un duplicado de esto. Voy a tachar esto. Ssl cert destino Bien, ¿cuáles son las características? ¿Hospedaje o proporciona? Vamos a averiguarlo aquí. Iré a hospedaje web. Una vez que me desplace hacia abajo, puedes encontrar que hay opciones ilimitadas para enumerar hacia abajo en términos de características que tenemos CDN y cosas así Podemos añadir otro elemento. Tratemos de hacer un duplicado de esto. Puedo agregar algo como CDN CDN gratis en lugar de llamar cruz, o simplemente puedo decir cancelar ¿Tenemos cancelación? No, nosotros no. ¿Tenemos la cruz? La cancelación? Eso no lo encuentro. Busquemos mal. Bien, no podemos encontrar eso también. ¿Cuál sería el icono de la cruz? Tratemos de encontrar para cruzar. Bien, no encuentro el icono de la cruz, así que lo dejaré como está. Bien, aquí tenemos estas diferentes características. Tenemos un pie de página también aquí mismo en pie de página tenemos el botón en lugar de hacer clic aquí, podemos decir a estas alturas, estas alturas ya podemos proporcionar enlace. Dynamic link también podría ser proveedor en términos de información adicional. Podemos decir algo como 30, la garantía de devolución de dinero. Todo bien aquí, este es el texto que también podemos agregar en información adicional. Al llegar a la parte de la cinta, incluso puedes cambiar el texto de la cinta si quieres mostrar, puedes mostrar o de lo contrario puedes apagarlo. También se puede cambiar la posición, pero me gustaría conservarla ya que está bien. Llegando a la parte de estilismo, puedes cambiar el color del fondo aquí en lugar del negro. Podemos cambiar algo como el verde. Aquí, tenemos verde. Puedo cambiar el color del título a algo así como negro aquí. Se podría aplicar el negro, pero vamos a hacer esto como blanco para la tipografía Cambiemos esto a poppins. Bien, para el tamaño también, también podríamos aumentar o disminuir el tamaño de nuestro título. Aquí mismo, pienso que unos 35 píxeles se verían bien, Bien. Al volver a la parte del subtítulo, podemos jugar con esto cambiando esto a Poppins Simplemente usaremos la predeterminada, o incluso podríamos eliminar la descripción si no la queremos. Parte de precios, podemos cambiar el color a negro. Este es el trasfondo, por cierto. Podemos aclarar esto, podemos agregar relleno. Si podemos cambiar el color de la fuente a negro, está oscuro, entonces vuelve a tener tipografía, cambiemos esto a Bien, entonces así es como aparecerá. Ahora llegando al símbolo de moneda, incluso puedes reducir o aumentar el tamaño de este símbolo. Creo que 50 píxeles se ve muy bien. Ahora bien, ¿cuál debería ser la posición del dólar, si quieres que se deje una línea o derecha una línea? Creo que dejar una línea quedaría bien. ¿Cómo quieres que esté la posición vertical? El signo de dólar debe aparecer en la parte superior media o en la parte inferior. Creo que en el fondo medio. Los tres se ven bien. En mi opinión, solo usaría la posición superior llegando a la parte fraccionaria Si aumento esto, encontrarás que la parte 99 también aumenta o disminuye. Todo bien. Así que sólo puedo hacer esto alrededor de 40. Incluso puedo cambiar la posición del mismo, 59, 99. Creo que esto se ve bien. O abajo el fondo, se ve bien. Solo mantengamos esto como top. Bien, aquí tenemos precio original. Podemos hacer esto como rojo, mantengamos esto como rojo oscuro. Cambiaremos la fuente a pines. También podemos aumentar el tamaño de esto. Todo ligero 99. Estaba la tipografía de precio original fijada a poppins, Bien, entonces esto es por periodo. ¿Bien? El periodo mensual que tenemos, incluso podemos fijar la posición de nuestro precio original. Está ajustado al fondo. Podemos cambiar esto a medio o superior. Bottom es la mejor manera de representar el precio original. Podemos cambiar el color del periodo, que voy a hacer, el color gris que tiene. Cambiaremos el color, mantendremos esto como color de fuente, pero cambiaremos el estilo de fuente a poppins Busquemos los pines que hemos usado y podemos colocarlos abajo o además. Creo que además, se ven bien. Lo colocaré justo aquí. Al volver a la parte de características aquí, puede cambiar el color de fondo para todas y cada una de las características aquí. Puedes hacer algo como esto, pero me gustaría hacer uso de la predeterminada. Puedo agregar relleno, puedo cambiar el color del texto. Incluso puedo cambiar la tipografía. Puedo cambiar esto a algo así como poppins. Puedo cambiar la línea de alineación, derecha, una línea central aline izquierda. Se ve bien. Puedo aumentar el ancho de la misma si quiero, pero vamos a hacer uso de la predeterminada. Puedo agregar divisor entre ellos. Bien, Aquí tuve la opción de agregar divisor. Puedo elegir entre diferentes divisores, sólidos, dobles, ya sea punteados punteados, y hacer uso de cualquiera de ellos Incluso puedo elegir el color del divisor. Puedo aumentar el peso de la misma, pero dos es perfecta, disminuir el ancho de la misma. Puedo cambiar la brecha entre las características. Aquí en el pie aparte, encontrarías esta parte, el botón y este texto. Podemos jugar con el color de fondo, el relleno, podemos aumentar o disminuir el tamaño del botón. Si hago esto pequeño, creo que esto sería lo mejor. Si tengo el botón tan pequeño puedo cambiar el efecto clic si coloco el cursor alrededor de este botón en particular Si cambio este color del texto, o más bien el color de fondo del botón a verde. Veamos qué pasa si traigo mi cursor. Idealmente, debería suceder. Intentemos guardar esto ahora, color del texto, queremos que este sea blanco. Intentemos ver los cambios aquí si me desplazo hacia abajo. A esta parte. Bien, ¿por qué no aparece en el hover Tenemos este color, el tipo de fondo fino debe ser el color de borde clásico. No queremos dar color de texto a ningún color de borde. Queremos que esto sea blanco, obviamente. Pero, ¿por qué no aparece bien? Incluso podemos cambiar la animación de la misma en hover si quieres No voy a tocar en esta parte. Aquí tenemos alguna información adicional que podemos darle un estilo diferente. Aquí podemos cambiar la tipografía a poppins. Puedo aumentar o disminuir el margen para la parte de cinta, que es esta parte popular. Puedo cambiar el color de la etiqueta, Muy bien. Incluso puedo establecer la distancia desde donde exactamente le gustaría colocar esta etiqueta en particular. Simplemente voy a hacer esto por defecto. Puedo elegir el color del texto dentro de este. Incluso puedo cambiar la tipografía de la misma a poppins. Incluso puedo agregar alguna sombra de caja a esta etiqueta. Esto se ve bien, bien. Ahora, una vez que hayamos hecho todo, ¿qué podemos hacer al respecto? Podemos duplicar esto. Hagamos un duplicado de ello. Y por cierto, en la pestaña avanzada, encontrarás todas las demás opciones que hay para otros elementos. Además, aquí mismo para todo el contenedor, voy a hacer un duplicado de este contenedor. Nuevamente, haz un duplicado de la misma y eliminaré los demás contenedores. Bien, eliminemos ahora otros contenedores para esta parte, para este paquete de diamantes en particular, no me gustaría exhibir la cinta. Sólo voy a quitar esta cinta para la primera y la última. Yo sólo me gustaría quedarme con esto para el medio aquí. Puedo cambiar el título del paquete a algo así como digamos titanio aquí en lugar de diamante. Puedo colocarlo como platino. Incluso podemos cambiar el precio de esto. Para el de titanio, podemos ir a precios, en vez de 59, 99, podemos hacer esto como 299. Esto es como el más caro. También podemos cambiar el precio original. En lugar de hacer el precio original S 98, podemos hacer esto como 599. Para el platino, podemos hacer esto como 129 y el original para ser 200. Todos. No voy a entrar en detalle sobre el cambio de la lista de características. Puedes hacerlo por tu cuenta, pero lo que me gustaría hacer es que me gustaría arreglar los artículos en el centro. Vamos a ir y hacer clic en todo el contenedor. Iremos a Layout y justificaremos contenido y alinearemos los elementos al centro, bien. Al alinear el centro de los artículos, lo que esencialmente sucedió es que el contenedor, cualquiera que sea el elemento contenedor que tuviera, ajustaba su altura en consecuencia. Y que ajustó su posición al centro con respecto al eje y de nuestro contenedor más exterior de esta sección particular de Flexbox Espero que ustedes tengan el punto de crear diferentes tablas de precios. 25. Elemento de título animado: mejora tu apariencia de Title con animaciones geniales: Intentemos agregar titular animado a esta sección de la tabla de precios. Ahora bien, esta parte se va a poner un poco complicada, no por el elemento que vamos a usar, sino por la forma en que vamos a organizar los elementos en esta sección. Preste atención a esta conferencia con mucho cuidado. Como saben que esta caja flex tiene una dirección horizontal. Hemos puesto este elemento de tabla de precios dentro de cada contenedor, tenemos tres contenedores, contenedor uno, contenedor dos y contenedor tres. Ahora nos gustaría dar, o mejor dicho debería decir, nos gustaría agregar otro contenedor para que podamos caber nuestro titular animado en la parte superior. Bien, otro contenedor dentro del cual tendremos estos tres contenedores. Para eso, permítanme cambiar el diseño de la caja flexible a vertical. Por ahora, solo presta atención a esto con mucho, mucho cuidado. Voy a hacer clic en Ad Element. Traeré mi contenedor afuera. Sólo nos aseguraremos de que este contenedor que tenemos aquí mismo, no sea parte de esto. Sólo puedo hacer clic en Estructura. Se puede encontrar que el contenedor vacío que tenemos, es parte de un contenedor anidado que tiene tabla de precios también, que no queremos Podemos simplemente arrastrarlo y colocarlo justo debajo. Podemos simplemente y colocarlo justo encima de este contenedor existente con tabla de precios. Bien. Ahora tenemos éste. Ahora nos gustaría agregar también un contenedor más. Intentemos duplicar esto simplemente duplicando esto. Podemos arrastrar y colocar este contenedor dentro de este. Aquí tenemos dos contenedores en esta caja flexible, el contenedor más externo uno y el contenedor más exterior Bien. Supongamos que se trata de una caja flexible. Dentro de flex box tenemos dos cajas Amazon. Amazon caja uno, Amazon caja dos. Ahora dentro de esta caja de Amazon, tenemos una caja de Walmart, la otra caja de Best Pi, y la otra caja de algún otro proveedor. Bien. Déjame arrastrarlo y colocarlo justo dentro de esto de aquí. Déjame abrir aquí una estructura. Tenemos el contenedor dentro del cual tenemos un contenedor con tabla de precios. Y aquí tenemos otro contenedor con tabla de precios. No están anidadas, son individuales. Se puede ver la estructura aquí mismo, Justo aquí. Tenemos el tercer contenedor que no forma parte de él. Se puede ver que la alineación es un poco diferente. Intentemos colocarlo aquí mismo para ser parte de esto. Yo solo puedo arreglarlo así, y puedes encontrar que los tres aparecen en un solo contenedor. Ahora bien, esta caja, este contenedor se pondrá en horizontal. Así es como aparecerás. Pero encontrarás que el diamante debería aparecer primero, Platino debería aparecer en el último y el titanio debería aparecer en el centro. Intentemos reorganizarlos. Podemos establecer aquí mismo. Lo que voy a hacer, sólo voy a hacer clic en Estructura. Al hacer clic derecho sobre esto, Titanio debería aparecer en medio, que es el último. Juguemos Set justo arriba, Titanium aparecerá aquí. El último, que es diamante, debería aparecer primero. Nosotros haremos esto. Platino irá en último lugar. Platino irá en último lugar. Bien, ¿qué pasó? Primero tenemos que asegurarnos de que todas las estructuras estén bien colapsadas. Diamante, entonces debería aparecer titanio. El titanio está justo aquí. Lo colocaremos aquí y encontrarás que este es nuestro arreglo está bien. Ahora agregaremos nuestro titular animado. Busquemos titular animado. Lo arrastraré y lo colocaré aquí mismo. Encontrarás que este es nuestro texto con la última palabra. Había alguna animación circular dando vueltas. Vamos a cambiar primero el texto que esta página tiene tabla de precios. Bien, ¿cuál debería ser el texto resaltado? Vamos a quitar esta. Y hagamos uso de la tabla de precios. Bien, Aquí tienes, esta página tiene tabla de precios. Incluso puedes agregar después del texto. Eso significa que después de resaltar esto, ¿qué debería exhibir? Incluso puedes agregarlo. ¿Quieres que vaya con un bucle infinito? Puedes marcar esta casilla. ¿Cuánto tiempo quieres que dure esta animación? ¿Quieres algún tipo de retraso? Puedes agregar todos esos valores en milisegundos. Incluso puedes agregar algún enlace si quieres. No voy a hacerlo, puedo cambiar la etiqueta del título a dos. Voy a ir a estilizar. Voy a cambiar el color de esta forma. El punto culminante es una opción de animación. Al ir a la parte de contenido, puedo cambiar entre diferentes animaciones que tengo. En lugar de resaltar, puedo cambiar esto a rotar. Se va a escribir el texto, algo así. Lo encontrarás así en vez de estilo. Como rotación, podemos cambiar el tipo de animación. ¿Quieres estar escribiendo? ¿Quieres que esto sea clip? ¿Qué pasa si tenemos clip? Vamos a averiguarlo, así es como mostrará el texto. También tienes flip, nosotros voltearemos el texto. Veamos, Flip, pasa verticalmente. Tienes remolino, se voltea así. Entonces tienes pantalla de persianas así. Entonces tienes caída en ola, tienes deslizarte hacia abajo. Creo que mecanografiar se vería mejor. Hagamos de esto una mecanografía. Aquí tienes diferentes textos rotativos que podemos. Esta tabla de páginas, bien. Esta página tiene tabla de precios, bien. Aquí tienes después del texto también, que vamos a mantener esto como vacío. Después de ir a la pestaña de estilo, elegiremos el color del titular. Hagamos esto como blanco llegando a la tipografía. Vamos a ponerle esto a Poppins. Podemos agregar texto. Si incluso podemos cambiar el color del texto animado. El texto animado podría ser algo así como, agreguemos tono gris claro. Podemos agregar una melodía gris claro aquí mismo. Podríamos cambiar la forma de familia de esto a Poppins. Podemos cambiar el color de selección. También aquí tienes diferente selección de color, que no vamos a volver a tocar. Llegar a la pestaña avanzada es igual que la otra. Publiquemos. Podemos ver los cambios desplazándonos hacia abajo a nuestra página web Actualicemos esto, y una vez que te desplázes hacia abajo aquí, encontrarás tu página que esta página tiene tabla de precios. Bien, así es como aparece. Ahora puede encontrar que selecciona todo el texto y el color de fondo cambia a negro. Es porque no tenemos un post texto. Intentemos cambiar después del texto. Al igual que algo como esta página tiene tabla de precios o algo así como elementor pro element Lo que pasa es que en el medio quieres se cambie algún texto, puedes hacerlo. Incluso puede cambiar el texto giratorio en lugar de la tabla de precios. Puedes hacer este elementor pro. ¿Qué pasa ahora? Veamos aquí. Esta página tiene tabla de precios. Permitamos que lo escriba. Aquí, puedes encontrar todo el asunto. Aquí podemos ir al estilismo. Podemos elegir el texto seleccionado. El texto que se está seleccionando, que se mostrará actualmente, se establece en algunos ajustes predeterminados, que es de color negro. Si cambio esto a algo alrededor del blanco, veamos qué pasa. Se puede ver que todo el texto fue seleccionado a blanco. Puedes agregar algunos otros tipos de color si quieres. Se puede cambiar el color del texto y así sucesivamente y así sucesivamente. Bien, espero tener el punto de agregar titular animado a tu sección. 26. Elemento FlipBox - ¡Esto es único!: Bien, intentemos hacer uso de otro elemento que será flip box. Voy a añadir una nueva sección. Mantendremos este diseño. Aumentemos la altura a aproximadamente 05:50 píxeles. Bien. Cambiaremos el color de fondo. Vamos a darle una imagen aquí. Voy a seleccionar esta imagen. Encuentra que incluso puedo hacer esta portada y no la repitas. No repitas. Y aquí tenemos la imagen. Ahora dentro de esto, antes que nada, espera un segundo. En lugar de hacer uso de esto aquí mismo, esta imagen podría usarse en superposición de fondo. Aquí mismo, iremos en superposición de fondo. Clásico Seleccione la misma imagen, se aplicarían los mismos ajustes. Eso significa que queremos que la pantalla esté cubierta, repita, repita. La opacidad sería un poco más a unos 18. Ahora esto es lo que queremos. Vamos a añadir un elemento que se llama flip box. Voy a arrastrarlo y colocarlo aquí mismo. Ahora una vez que lo coloco, primero puedo centrar alinear esto justificando el contenido y alineando los elementos al centro Ahora encontrarás que este tiene una descripción de encabezado y un botón y se voltea, derecho, Entonces tiene dos lados Ahora bien, esto podría ser útil cuando intentas ofrecer algún servicio y simplemente no quieres que quepa todo el contenido de toda la tarjeta en sí. Puedes agregar algún tipo de efecto flip aquí. Se pueden exhibir algunas cosas. Ahora bien, esto no necesariamente sería algo similar a lo que hemos hecho en la tabla de precios, porque la tabla de precios ha enumerado abajo todas las características. Pero esto sería solo un breve resumen sobre de qué se trata el servicio, ¿verdad? Puedes encontrar el caso de uso, lo que sea que funcione mejor para ti. Y este volteo sólo ocurrirá al flotar. Siempre que muevas tu cursor hacia este elemento, el volteo ocurrirá. Y cuando vuelvas a traer tu cursor fuera de este elemento, el flip tomará bien la posición original del paquete. Dentro de esta particular caja abatible, tienes contenido. Aquí tienes el contenido, y aquí tienes los antecedentes. Aquí podemos cambiar el fondo a clásico o degradado. Puedo elegir la imagen, así que déjame seleccionar esta imagen como fondo. Ahora una vez que he hecho esto, puedo seleccionar la superposición de fondo. También aquí puedo elegir diferentes colores si quiero. Y lo que me gustaría añadir es una imagen en lugar del icono estrella. Puedo ir al contenido. Y en lugar de hacer uso del icono, que está aquí mismo, permítanme primero buscar el icono elemental. ¿Tenemos? Sí, lo hacemos. Insertemos aquí mismo el icono elemental. O bien podría simplemente hacer clic en Imagen y traer de vuelta la imagen elemental, que tengo aquí mismo. Se puede ver. Pero el tamaño de la imagen es demasiado grande y tengo que ajustarlo. En lugar de hacerlo, puedo mantener esto como realmente pequeño sobre mediano. Trabajar en torno a la configuración de la misma no sería factible. Así que vamos a hacer uso de este icono elemental. Bien, una vez que hayamos hecho esto, podemos verlo en un formato apilado. Esta es la vista de apilados, así que eso significa que tendrá algún círculo. O también podrías tener una opción enmarcada. Tienes distintas opciones ahora, ¿quieres que el marco sea círculo? ¿Quieres que sea cuadrado? ¿Quieres que la pila esté en formato cuadrado o en formato de círculo? Se puede elegir entre diferentes opciones. Bien, voy a seguir adelante con esta opción ahora. Aquí tienes el rubro. Puedo cambiar esto a Elementor pro, bien. Puedo dar descripción algo así como cinco estrellas a este curso solo por el propósito descriptivo. Cinco estrellas a este curso. Y estoy disfrutando viendo este curso. Bien, aquí tenemos alguna descripción. Aquí tienes de vuelta también en el contenido. Entonces eso significa que una vez volteas lo que el contenido debe mostrar aquí, podemos elegir entre diferentes fondos. Se puede jugar alrededor de diferentes escenarios. Aquí puedes cambiar las diferentes etiquetas de título que tengas. Por título, se puede colocar H uno y H23. Ahora eso ayudará en propósitos de SEO. Aquí tienes tu título de descripción que puedes configurar para span tag o puedes ajustar la altura y en consecuencia, déjame hacerlo por defecto. Puede agregar radio de borde más. Traigo esto hacia la derecha, encontrarás que todo el flip box gira en un formato captual Puedo cambiar esto de nuevo a algo diez o 12. 12 es demasiado pequeño. Sólo podemos llegar a ser alrededor de 16. Veamos cómo se ve en 2020. Se ve bien. Voy a hacer esto como 20. Ahora bien, ¿qué efecto quiero para flip? ¿Quiero que esto sea volteado así? ¿Quiero que sea slide? ¿Qué sucede cuando muevo el cursor? Se puede ver que aparece así. Ese es el efecto de deslizamiento que tienes. Empuje si yo Mi cursor. Empuja el contenido original a subir. Eso es efecto. Tienes zoom in. Se acerca, tienes zoom out así. También tienes fade. Efecto muy sencillo. Solo mantengamos esta diapositiva. ¿Qué pasa si tenemos flip? Tienes indicaciones también para todas y cada una de las direcciones. Quieres que sea un flip vertical a la parte superior. ¿Quieres que sea fondo? ¿Esto es una voltereta? ¿Quieres que sea del lado derecho así o a la izquierda así? Incluso se puede cambiar eso. Voy a elegir esto como correcto. Incluso podemos dar esto como tres D de profundidad. Veamos qué pasa cuando elijo como profundidad tres D. Si traigo mi cursor, verás que está teniendo una especie de cosa de byte. Déjame sacar aquí cualquiera de los objetos que tengo cerca de mí. Tengo este mando a distancia, puedo darle la vuelta a esto. Así es como funcionará realmente el flip. Bien. Esta es la profundidad de tres D, nuevamente para los efectos y animación para la tabla de precios. También, si vuelves, no por tabla de precios, pero yo diría titular animado aquí. Discutimos que en rotación, tenemos diferentes opciones para animaciones, pero sí hemos resaltado también aquí tienes círculo. También tienes rizado. Puede que no encuentres muy atractivo el color del rizado porque es rojo y el color del degradado de fondo también es rojo. Déjame simplemente cambiar el color de la forma para que sea sobre el blanco para que sea visible. Aquí encontrarías rizado, encontrarías subrayado estaría en la parte superior e inferior Ambos lados, tienes doble subrayado, zigzag, tienes diagonal, será una cruz Ahora puedes traer esto al frente también, en lugar de aparecer, haciendo que esto aparezca de nuevo el texto, también puedes hacer que esto aparezca al frente simplemente yendo al estilo seleccionando esta opción de alternar. Trae al frente y verás que este texto está recortado. Puedes tener bordes redondeados. También tienes otros como strike through. Tienes X también , cruzará tu texto. Bien, pero vamos a mantener esto como efecto de rotación y mecanografía para el titular animado. Estas fueron solo algunas cosas que me perdí en el video anterior. Ahora en esta parte donde tengo este efecto flip para el flip box, ¿qué otras opciones tengo en la etiqueta de estilo, en la pestaña de estilo? Puedo elegir entre diferentes colores de mi texto. En el titular, tengo el color del texto establecido en tipografía blanca Puedo cambiar esto a poppins. Puedo engrasar el tamaño de la fuente a algo sobre 35. Incluso puedo cambiar el trazo de texto. Puedo cambiar el texto animado también a blanco. Veamos qué pasa. Puedo cambiar de nuevo la tipografía a poppins. Tengo trazo de texto, tengo seleccionado. Bien. Todas esas cosas estaban pasando para el texto animado. Mi mal. Todas esas cosas suceden para titular animado. Pero estamos trabajando alrededor de la caja abatible. Vayamos al estilo. Y aquí encontrarías diferentes alineaciones para tu flip box. Puedo hacerlo a la izquierda, a la derecha, a la línea central. Puedo cambiar la posición para estar centro a la parte superior o en el medio. Hagamos esto como medio. Incluso puedo establecer el tipo de borde. ¿Quiero que sea sólido? ¿Quiero que sea doble? ¿Quiero que esté punteado punteado y así sucesivamente? Pero por ahora, mantengamos esto como ahora mismo, no encontrarías borde punteado porque no hemos agregado ancho de borde. Si agrego ancho de borde, encontrarás que hay algún borde. Puedo cambiar el color a blanco, y ahora encontrarás bordes punteados en toda la caja abatible. ¿Correcto? Podemos simplemente hacer este default aquí. Encontrarías algo de espacio alrededor de tu icono. También podrías cambiar el color del texto. puede cambiar el color primario del icono y también se puede cambiar el color del icono secundario. Pero vamos a traer esto de vuelta al default. Tienes el tamaño del icono que puedes ajustar en consecuencia. Déjeme simplemente devolverlo al default. Puedes agregar relleno a esto. Puede rotar este icono. Puede agregar radio, radio borde alrededor de su icono. Puedes agregar un espacio entre tu título y tu ícono. Puedes cambiar el color de tu título a blanco para que sea visible. Ahora, llegando a la parte de descripción, puedes cambiar esta a esta parte blanca. De nuevo, puedes establecer la tipografía tanto para tu título como para tu descripción Aquí mismo tenemos color de texto, puedes encontrar texto color a blanco. Además, cada vez que muevo el cursor a cualquier parte del color, esto está cambiando el color de mi botón. Usted puede encontrar aquí mismo. Bien, esto está pasando cuando estamos bajo la espalda, tenemos dos opciones en estilo, la parte delantera y la trasera. En la parte posterior, una vez que te desplazas hacia abajo, encontrarás el color del botón. Puedes restablecerlo. Se puede cambiar el color del borde en lugar del blanco. Puedes cambiar esto a cualquier otro color que te gustaría dar. Puede agregar radio de borde ya que podría agregar algo de ancho de borde para que el borde parezca un poco gordo. Y podrías cambiar el color del texto de descripción. Incluso podrías cambiar el color del texto del encabezado a blanco. Todo bien. Puedes cambiar la tipografía a poppins para todos los textos que viste, ya sea por delante y atrás, para Aquí tienes el título. Se puede cambiar esto a blanco. Así es como se ve. Bien, espero que entiendas el punto de trabajar alrededor. Caja abatible en elemento o pro. 27. Diapositivas, carrusel multimedia y elementos de galería: ¡video lleno de contenido!: Chicos, ahora me gustaría hacer avanzar las cosas muy rápido. En este video, cubriremos tres elementos proporcionados por element o pro, plug in. Primero veremos el elemento slides, luego veremos la galería, y luego la carousal mediática Agreguemos una nueva caja flexible. No importa qué dirección hayas establecido, pero solo queremos un contenedor. Podemos hacer esto como horizontal Aquí, voy a añadir el elemento slides. Sólo puedo arrastrarlo y soltarlo aquí mismo. Ahora encontrarías que hay algún texto de título, el texto de descripción, un botón en el medio. Ahora en la parte inferior, encontrarías tres elipses, tres puntos, lo que representa cuántas diapositivas hay para este elemento En las direcciones izquierda y derecha, encontrarías flechas que te ayudarán a navegar entre diferentes diapositivas que tiene todo tu elemento. Ahora bien, ¿cuándo podría ser útil esto? Digamos que estás tratando de construir una sección de héroes para tu banda de comercio electrónico, donde estás mostrando diferentes productos que vendes o tal vez diferentes servicios que ofreces que podrían ser útiles cuando estás construyendo una página de producto Y esa página de producto necesita tener una sección de héroe. La sección Hero podría ser esta, un formato de diapositiva. Ahora bien, si trato de publicar esto, veamos cómo se ve esto. Si me desplazo hacia abajo hasta esta parte, posible que encuentre que el ancho no se está ocupando correctamente. El ancho no está establecido 200% ¿Cómo podemos cambiar esto? Sólo podemos cerrar este pop up. Regrese a nuestra configuración de Elementor, seleccione su diseño Flexbox, seleccione la pestaña Diseño Y en el ancho del contenido, tendremos que hacer clic en Ancho Completo. Ahora si guardo esto, fíjalo muy bien, no he cambiado esto en la configuración de diapositivas. He cambiado esto en la configuración del contenedor, ¿verdad? Si me desplazo hacia abajo hasta la parte donde tengo mi deslizador, verás que se está retomando todo el ancho. ¿Correcto? Volvamos ahora. Puedo cambiar el contenido si quiero. Si hago clic en la siguiente flecha, encontrarás que hay alguna animación dando vueltas. Hay algo de color de fondo, y la animación de texto también aparece muy bien de abajo hacia arriba. Bien, hay algunas cosas que aquí podemos cambiar. Si desea agregar más diapositivas, simplemente puede hacer clic en el elemento de agregar. Si quieres hacer un duplicado de ellos, puedes seleccionar el icono del documento. Si deseas eliminarlos, simplemente puedes hacer clic en el icono de la cruz. Intentemos expandirnos y ver qué ofrecen todas y cada una de las diapositivas en términos de diseño de diseño. Si hago clic en él, puedes cambiar el color de fondo o puedes agregar una imagen. Permítame agregar una imagen aquí. Tengo tres imágenes de producto diferentes. Primero, voy a añadir esta imagen. Una vez que agrego esto, se aplican los ajustes para la primera diapositiva. Se puede ver aquí mismo, inicialmente estuvimos en la segunda diapositiva. Solo necesitas navegar entre diferentes diapositivas. Ahora, la opción de visualización de tamaño se configuraría para cubrir. ¿Qué pasa si cambio esto para que contenga? Conoces la diferencia entre contener y cubrir. Obviamente, se puede ver que como ocupa el ancho. Si hago esto como auto, ajustará automáticamente el tamaño para que se acerque Pero no queremos que eso suceda, así que podemos simplemente volver a cubrirlo. Podemos jugar con diferentes efectos. Aquí tenemos el efecto Ken Burns. Intentemos alternar y ver qué pasa. Lo que sucede en el efecto Ken Burns es que puedes ver que hay algún ligero efecto de zoom dando vueltas cada vez que la diapositiva está activa. Hay alguna dirección de zoom que puede establecer si desea que esto se amplíe Alejado, puedes elegir entre las diferentes opciones que te gustaría, pero creo que acercar se vería bien Si desea agregar alguna superposición de fondo, incluso puede hacer eso. Esta imagen está ahí en el fondo, pero la imagen tiene sombra dando vueltas para que el texto se haga visible. De lo contrario no lo era antes. Se puede ver el texto blanco y la imagen de fondo de color brillante con plena saturación, total transparencia y todo ese tipo de cosas no funcionaba con el texto que teníamos. Vamos a agregar superposición de fondo. Ahora puedes cambiar entre diferentes modos de mezcla. Ahora bien, ¿qué es el modo de mezcla? Si has trabajado alrededor de diferentes programas de edición de fotos como Photoshop o incluso si has pasado por un curso de UX en Figma, debes haber aprendido sobre el modo blend ¿Qué pasa si elijo multiplicar? ¿Si cambio esto a pantalla? Si vuelvo a la primera diapositiva, veamos qué pasa. Hay múltiples opciones diferentes. Puedes oscurecer, puedes hacer esta luz, puedes jugar alrededor los niveles de saturación de la misma y cosas así. Si juego alrededor de la saturación para la primera imagen de superposición de fondo, encuentra esa transparencia. Y la saturación se establece de tal manera que el fondo aparece algo así. No es tan brillante, no es muy oscuro, pero en algún punto intermedio, está dando como una foto vieja un efecto, ¿verdad? Pero mantengamos esto como normal. También puedes jugar entre diferentes opciones que tengas. ¿Bien? Tienes color, tienes exclusión, tienes luminosidad Se puede jugar entre diferentes opciones. Puedo elegir normal, porque creo que esto funciona fantástico. En nuestro caso, puedo elegir diferentes ajustes para mi primera diapositiva. Aquí tengo antecedentes, que seleccionamos. Pasando a la parte de contenido, puede cambiar el título de esta diapositiva. Hagamos esto como Jabones. Puedo cambiar la descripción si quiero. Puedo cambiar el texto de mi botón. Permítanme hacer esto como a estas alturas. Ya puedes ver el botón aparece aquí mismo. Puedes agregar algún enlace, o podrías agregar una etiqueta dinámica al enlace para que se vincule automáticamente a una nueva publicación o a una nueva página a la que hayas vinculado. Ahora, también se podrían aplicar las mismas cosas para otras diapositivas. Si voy a la parte de estilo de la primera diapositiva, encontrarás que hay un toggle que es personalizado. Veamos qué pasa aquí mismo. Aquí tienes la opción reorganizar el contenido que tienes Tenemos posición horizontal. Ahora, ¿qué significa? Todas las cosas que tenemos en cuanto a contenido con respecto al eje X, se pueden cambiar. Creo que todos ustedes pueden estar de acuerdo ahora mismo en que el eje X, que es horizontal, el eje Y es vertical, ¿verdad? En este momento, alinea al centro con respecto a la horizontal. Eso significa que el contenido aparece aquí mismo. Si hago esta línea izquierda , aparecerá aquí mismo. Si lo hago bien aline , aparecerá aquí mismo. Bien. Si elijo esto o esto, el contenido funcionará en consecuencia. Hagamos este aline izquierdo o aline derecho en el primer estuche deslizante, porque se puede ver que el producto aparece del lado izquierdo. Obviamente, tiene sentido mover nuestro texto hacia el lado derecho. También puedo cambiar la posición vertical. Puedo hacer esta parte superior media o hacia el final. Incluso puedo alinear mi texto. Si quiero que esté alineado a la derecha, quiero que esté alineado al centro y así sucesivamente. Pero creo, correcto, Aline funciona bien, porque queremos que el texto se muestre solo al área en blanco de nuestra página de producto. La imagen del producto de fondo. Bien. Puedes cambiar el color de tu contenido. Puedes agregar alguna sombra de texto si quieres. Se puede jugar alrededor de la tipografía de la misma con sólo hacer clic sobre Puedes jugar con desenfoque, horizontal, vertical y todo. O podrías restablecerlo de nuevo a la configuración predeterminada. Bien si te desplazas hacia abajo en la parte de contenido en sí. Aquí estábamos trabajando alrededor de la parte de diapositivas. Ahora ¿qué otra opción tenemos? Tenemos opciones de slider, una que puedes ver en la parte inferior. Tenemos opción de elipsis, ¿verdad? O los puntos, que podemos ver flechas y puntos. Aquí tienes la opción de reproducción automática. Eso significa que automáticamente seguirá cambiando. O podrías tener algo de esta pausa al flotar. Eso significa que cada vez que mi cursor se cierne alrededor de esa diapositiva en particular, la diapositiva no cambiaría Si hago clic en él o si hago algún tipo de actividad de teclado, entonces la interacción se pausaría Aquí también tienes velocidad de reproducción automática. En milisegundos, 5,000 son milisegundos. Aquí tienes un bucle infinito. Eso significa que seguirá desplazándose incluso después que haya pasado por la diapositiva número tres Volverá a comenzar de cero, que es de la diapositiva número uno. Aquí tienes transición, tanto si quieres que se deslice como si quieres que se desvanezca. ¿Qué pasa si tenemos desvanecimientos? Vamos a ver aquí. Encontrarías que mostrará una animación fade. Se puede ver aquí mismo. E incluso se puede cambiar la velocidad de esta transición en particular. Ahora bien, ¿cómo quieres que la animación de contenido sea arriba, abajo, izquierda, derecha, Ampliada? Se puede jugar entre diferentes tipos de animación. Aquí puedes ver la animación del texto baja. Esto fue por la parte de contenido. Bien, aquí inicialmente tuvimos el up, así que podemos hacer eso. Además, podemos jugar en torno a diferentes tipos de navegación. Lo que discutimos ahora mismo era para flechas y puntos. Veamos si solo tenemos flechas, entonces no encontraríamos puntos en la parte inferior. ¿Y si solo tenemos puntos? No encontraría flechas en las direcciones izquierda y derecha. Pero si no tenemos ninguno de los anteriores, entonces tendríamos que deslizarnos manualmente. Si muevo mi cursor de derecha a izquierda, entonces obviamente cambiaría a la siguiente diapositiva. Si muevo el cursor, si mantengo pulsado el botón del ratón y muevo el cursor de izquierda a derecha, entonces seleccionará la diapositiva anterior así. Espero que entiendas el punto. Ahora vamos a hacer uso de flechas o simplemente hacer lo que funcione para usted. Incluso si quisieras mantener esto como flechas y puntos, puedes hacerlo. Al ir a la pestaña de estilo, encontrarás diferentes opciones. Si quieres jugar alrededor del contenido con, si quieres agregar relleno a su alrededor. Si desea alinear la posición de este. Si hago esto como posición horizontal centro, derecha, se pueden encontrar cosas diferentes. ¿Qué pasa con la diapositiva? Puedes ver aquí mismo, puedes ver que la posición del contenido cambia. Aquí tienes posición vertical. También puedes alinear el texto y así sucesivamente. Aquí en la parte del título, puedes cambiar el color tipográfico del texto, jugar alrededor La descripción del espaciado podría ser la misma para el botón que tenemos aquí mismo Aquí puedes cambiar entre diferentes tamaños de botón. Nuevamente, agrega algo de tipografía a tu botón. Se puede jugar alrededor del ancho del borde. Si quieres que el borde sea un poco más gordo, puedes mover el cursor hacia la derecha Si quieres que el borde sea delgado, entonces puedes mover el cursor hacia el cursor izquierdo, o debería decir deslizador si quieres agregar botones redondeados. Se puede aumentar el radio del borde. Puedes cambiar los efectos en la normalidad y cómo puedes jugar entre diferentes navegaciones. ¿Quieres que las flechas estén dentro de esto o fuera de esto? Si mantienes esto afuera, entonces puedes cambiar la flecha de los colores. Dado que el fondo del contenedor es blanco, podemos hacer las flechas como negras. Yo solo reinicié esto y colocaré mis flechas dentro. Aquí mismo también puedes ver la paginación que son los tres puntos aquí mismo ¿Quieres que esto sea dentro o fuera? Juega alrededor de ellos. Se puede cambiar el tamaño de la misma. Puedes elegir el color de tu paginación. Los puntos en la parte inferior, puedes jugar alrededor de los diferentes colores que puedes establecer para activo. Las dos primeras diapositivas que no aparecen en nuestra pantalla no están en estado activo. Son como en un tono gris. El que está siendo activo, que es la diapositiva número tres, está en un punto negro oscuro. Eso es lo que tenemos aquí mismo en la pestaña de estilo. Volviendo a la pestaña avanzada, encontrarías las mismas cosas que has visto antes. Todo lo que no voy a ir en diapositivas de profundidad también, no voy a perder el tiempo haciendo las mismas cosas que hemos hecho para la diapositiva uno. Para la diapositiva 2.3 también, espero que entienda el punto. Todo bien. Ahora bien, ¿qué más necesitamos cubrir? Bien, esto fue por el elemento slides. Vamos a añadir un elemento más que es el elemento de galería. Voy a añadir otra caja flexible con dirección hacia abajo. Voy a añadir galería. Déjame buscar aquí. Tienes galería básica y una galería sencilla. Creo que ambas funcionalidades son bastante similares. No hay mucha diferencia en ello ahora. Básicamente el elemento galería te permite exhibir toda tu obra. Ahora, esto podría ser útil si estás construyendo un sitio web de cartera, un sitio web de portafolio personal o simplemente tratando de mostrar todo el trabajo de tu cliente. Los proyectos funcionan lo que hayas hecho hasta ahora o solo estás tratando de mostrar todas las imágenes. Digamos que eres fotógrafo y estás mostrando todas las imágenes. Imágenes de fotografía de vida silvestre o imágenes de hermosos paisajes, simplemente puede seleccionar varias imágenes de la mediateca o podría subirlas o insertar la imagen desde una URL diferente. O podrías agregar y crear una reproducción de video y una lista de reproducción de audio y otras cosas así. Aquí solo puedo sostener mi tecla de comando, sistemas de formulario y tecla de control para sistemas de ventanas. Y puedo seleccionar varias imágenes y encontrarías varias imágenes las cuales están seleccionadas aquí mismo en la parte inferior para que pueda crear una nueva galería. Incluso puedo revertir el orden. Si quiero, puedo reorganizarlos, puedo agregar subtítulo a todas y cada una de las imágenes Si quiero, puedo insertarlos como galería. Aquí encontrarías que tenemos cuatro columnas en una sola fila. Bien, puedo jugar con eso aquí. Encontrarás que el tipo es único múltiple. ¿Qué pasa si elijo este múltiplo? Entonces obviamente no vamos a ver todas las imágenes aquí mismo. Solo veamos primero todos los ajustes que tenemos para el tipo único aquí. Puedes ordenarlos por defecto o al azar aquí, puedes habilitar o deshabilitar la carga. carga perezosa básicamente significa que las imágenes no se cargarán desde el primer intento. Eso significa que cada vez que hagas clic en tu sitio web, las imágenes no se cargarán primero. Una vez que te desplazas hacia abajo y una vez llegues a la parte donde se deben mostrar las imágenes, entonces se producirá la carga. De esa manera, el rendimiento del sitio web podría aumentar en cierta medida. Eso es lo que tienes en carga perezosa. Puedes jugar con los diferentes ajustes de diseño. Aquí se establece en cuadrícula. ¿Qué pasa en justificado? Aquí verás el formato justificado, eso significa que el tamaño de la imagen se muestra perfectamente lo que sucede en la maquinaria. En maquinaria, también encontrarás lo mismo porque las dimensiones de todas las imágenes son bastante iguales. Pero si tienes pocas imágenes que están teniendo algunas otras dimensiones de altura y anchura, entonces ajustará la altura y anchura de filas y columnas apropiadamente. Aquí puedes establecer el número de columnas. Puedo bajarlo a dos para que amplíe las fotos de manera apropiada. Aquí puedes agregar algo de espaciado entre diferentes elementos. Si muevo mi diapositiva hacia la derecha, encontrarás que el espaciado aumenta. Sucede un poco más lento, pero solo puedes jugar con él. Puedes agregar algún enlace a esto. Podrías agregar una caja de luz. ¿Qué pasa si voy a añadir lightbox? Permítanme seleccionar esto. Sí. Si hago clic o vuelvo el cursor alrededor de alguna de las imágenes, puedes encontrar que la imagen se vuelve un poco más oscura Si hago clic en él, la imagen se expandirá y podrás ver toda la imagen correctamente. Eso es lo que realmente significa caja de luz. Permítanme simplemente dar click en el Elemento para que podamos ver diferentes configuraciones. Puedes jugar alrededor de la diferente resolución de imagen que tengas. Aquí tienes una superposición. ¿Qué superposición quieres tener? Algunos antecedentes. ¿Quieres agregar algún título a todas y cada una de las imágenes? Si vuelo el cursor, ¿ ve algún título? No. Si hago esto como título, podemos agregar aquí, encontrarás el título de la imagen en sí. Esto es retomar el nombre que hemos puesto a nuestra imagen. Agrega una descripción, el título o el texto alt también bien. Vamos a hacer esto como no yendo al tipo de estilo que encontrarás normal. Y obviamente se puede agregar un ancho de borde. Puede agregar radio de borde. Se puede cambiar el color del borde. Se puede agregar animación. Si coloco el cursor alrededor de mi cursor hacia la imagen, se acercará Podría alejar el zoom. Se puede mover a la izquierda, se puede mover a la derecha. Se puede mover hacia arriba, o podría moverse hacia abajo. Espero que entiendas el punto. Incluso puedes cambiar la duración de la animación. Puedes cambiar los mosaicos superpuestos si quieres agregar algún modo de fusión, que ya hemos comentado justo ahora mismo en el elemento slides, algo similar se podría hacer aquí mismo. Se puede cambiar entre diferentes, cómo las animaciones bien. Puede establecer la duración de la superposición de animación. Puedes elegir el estilo de contenido, si quieres que el texto aparezca en el centro izquierdo. Una línea, ¿verdad? Una línea en el centro o en la parte superior o inferior. ¿Quieres un poco de relleno para tu contenido? ¿Quieres agregar algo de animación para tu texto? Quieres dar una animación de secuencia más o menos Estas son las cosas que tienes para tu elemento de galería. Ahora qué pasa si elijo aquí arriba, puedo agregar múltiples galerías. La galería que creamos ahora mismo para esas cuatro personas justo dentro de esta galería, tengo este título para la galería. Déjame darle a esto algo así como gente detrás de la compañía. Todo bien. Puedo seleccionar diferentes imágenes. Ahora bien, esta galería, la galería que usamos antes para el tipo sencillo era diferente. Se guardó solo para el tipo único. Para múltiples, necesitarás crear otra galería aquí mismo. Tendrás que seleccionar de nuevo, un montón de imágenes diferentes. Voy a crear una galería. Puedo insertar eso aquí mismo, y aquí encontrarás a toda la gente. Puedo agregar múltiples galerías aquí mismo. Aquí tengo el filtro para hacer clic, y solo esa galería se mostraría arriba. Digamos que eres fotógrafo. Tienes fotos de modelos, haces clic en fotos de vida silvestre y animales salvajes. Haz clic en fotos de autos y productos. Aquí puedes y crear diferentes galerías. Puede agregar filtros usando el tipo múltiple. Todo bien. Puedes ordenarlos como quieras. Creo que todas las cosas después de eso son bastante iguales que hemos discutido para el tipo único. También, espero que lleguemos al punto sobre el uso del elemento gallery. Veamos qué podemos hacer con la carousal mediática. Agreguemos caja flexible horizontal. Vamos a añadir un elemento llamado causal mediática. Si lo arrastro y lo suelto aquí mismo, está funcionando de manera similar a las diapositivas. La única diferencia es que aquí está trabajando con nuestra galería de imágenes. Para todos y cada uno de los artículos que elijas, una imagen o un video. Aquí puedo agregar tres imágenes de producto para todas y cada una de las diapositivas. Para la primera diapositiva, esta imagen del producto se mostraría para la segunda. Aquí puedo ir a la segunda. Yo puedo elegir esta. Para el tercero, puedo seleccionar esta opción, simplemente cancelaré los otros dos artículos que tenía. Ahora puedo cambiar la piel de esto, si quiero que sea carousal, si quiero tener un show un efecto slide show básicamente mostrará todas las fotos o elementos de galería que tengo en la parte inferior Y el principal, que se está enfocando en este momento se mostrará en todo el ancho. Entonces tienes flujo de cobertura, que será así, un formato de tres D, lo cual es bastante genial en mi opinión. Aquí puede establecer cuántas diapositivas se deben mostrar por vista, cuántas diapositivas desplazarse, cuál debería ser la altura y el ancho de esta. Pero si haces clic en las opciones adicionales aquí mismo en la parte de contenido, encontrarás flechas que tienes aquí mismo. Se puede cambiar alrededor de los diferentes elementos de paginación. Puedes hacer esto como Reproducción automática y un montón de cosas diferentes que hemos visto anteriormente en el elemento slides o slides También, yendo a la pestaña de estilo, puedo dar click en la navegación. Y puedo cambiar el color de las flechas para que sean negras para la navegación. Aquí encontrarás flechas. El tamaño de esto es de 20 píxeles. Puedo cambiar el color a negro para que sea visible, bien, cambiar la paginación, Ya sea que quiera que sea por dentro o por fuera Puedo jugar en torno a diferentes cosas que ya hemos discutido antes. Espero que entiendas el punto y tengas una gran comprensión y fundamento sobre los tres elementos. 28. Reseñas Element - ¡Mejora tu sitio web de negocios con esto!: Derecha. Ahora, veamos cómo podemos hacer uso del elemento reviews. Ahora bien, el elemento reviews es un poco similar a lo que hemos visto para el elemento testimonial. La única diferencia que tendría el elemento reviews es que incluirá calificaciones. El elemento estrellas que puedes ver aquí mismo. Tendrá un enlace a diferentes íconos sociales aquí mismo, justo debajo de este producto, Carrousal media Carousal. Voy a añadir una nueva sección. Voy a dar el diseño de Flexbox para que sea horizontal justo dentro de este contenedor Me gustaría agregar reseñas. Vamos a arrastrarlo y soltarlo aquí mismo. Ahora encontrarías que aparece esta reseña. Ahora lo que podemos hacer, simplemente seleccione su contenedor y asegúrese de que el contenido esté justificado. Los elementos centrales también están alineados en el centro. Volviendo a la parte donde tenemos las reseñas aquí, encontrarás que las reseñas, déjame cambiar esto a ancho completo. También, me gustaría aumentar la altura. Voy a aumentar la altura a unos 50 para que veas que esto tiene alineado el centro aquí. Aquí tenemos tres elipses, tienes la reseña y hay iconos de flecha en el lado izquierdo y derecho Ahora bien, puede que no lo encuentres muy claramente a primera vista simplemente porque el color de fondo es gris. Intentemos cambiar el color del fondo. Puedo agregar una superposición de fondo con algún degradado. Intentemos ver cómo se ve. Si hago uso de este color, creo que solo haría su trabajo. Bien, para el segundo color. Sí, mantengamos esto como rojo o tal vez bajémoslo para cambiemos el color a algo así como púrpura. Bien. Esta es la combinación de colores con la que seguiremos adelante. Bien, aquí encontrarás dos en esta y esta. Ahora bien, si hago clic en las Reseñas, encontrarás que tenemos tres reseñas actualmente. Todas y cada una de las reseñas muestran el avatar, su nombre, el nombre de usuario y el nombre de usuario del perfil de las redes sociales, junto con el ícono del perfil de redes sociales al que está conectado. Ahora bien, ¿cuándo puede ser útil esto en comparación con el elemento testimonial que hemos visto antes? Esta opinión parece muy gimmick o falsa. Si incluyes este tipo de elemento dentro de tu sitio web para mostrar que tienes confianza en torno a tus clientes, entonces puedes vincular perfiles de redes sociales a sus perfiles. Esencialmente, va a dar una vibra de que todas estas reseñas son genuinas y estas no son reseñas falsas. Si hago clic en alguno de los artículos, hagamos clic en el ítem uno aquí. Seleccionemos la imagen de esta persona. Esto se mostrará aquí mismo. Y el nombre de esta persona es John Doe. Puedo cambiar el título. Este título representará su nombre de usuario de cualquiera de los perfiles de redes sociales al que lo estés vinculando. Aquí, justo debajo de la imagen, encontrarás el ícono. Eso significa que si quieres vincularte a Instagram o Facebook o Linked in, depende de en qué tipo de perfil de redes sociales sean muy activos. Deberías dejar su enlace. Puedes dejar el enlace de su perfil aquí mismo. Aquí tienes el título. Ahora bien este título podría ser diferente, podría ser CEO de la compañía, el nombre de la compañía y diferentes tipos de cosas, puedes agregar calificación. Si agrego algo así como digamos solo cuatro, entonces verás automáticamente aparece un total de cinco estrellas de las cuales te han dado cuatro estrellas. Si doy algo así como seis, no va a mostrar porque el valor máximo que tiene son cinco. Ahora incluso puedes sumar en valores decimales, básicamente, si dices algo así como 2.12 0.22 0.3 no va a cubrir toda la estrella Una vez que alcances la marca 2.5, cubrirá la mitad de la estrella. Puedes ver aquí mismo tenemos 2.5 estrellas. Yo solo mantendría esto como 4.5 Tenemos 4.5 Puedo cambiar el texto de revisión también ahora mismo. Sólo me quedaré con lo que sea. Puedo cambiar el nombre, la imagen para revisión dos y revisión tres. También, puedo cambiar el nombre a Emily Plant. Justo aquí. Podemos cambiar esto a Instagram, porque creo que la mayoría de la población femenina está activa en Instagram. Ahora aquí encontrarías que el color del icono es negro. Es sólido, no es azul, a diferencia de lo que vimos con Twitter. ¿Qué podemos hacer al respecto? Encontrarás que este ícono en particular, Instagram, está siguiendo uno, una tendencia. Sólo está mostrando este icono donde está todo el icono de la peluca está teniendo borde negro y las líneas negras, no se puede cambiar el color. Si desea cargar manualmente alguno de los iconos, entonces puede hacer clic en esta carga y puede navegar por el archivo donde se encuentra en su sistema. Bien volviendo a esta parte, punto tres. Puedo cambiar esto a Will Smith. Voy a cambiar la imagen al cielo. Ahora voy a vincular Facebook. Bien, aquí estamos. Hizo uso de tres perfiles de redes sociales, Facebook, Twitter e Instagram. Bien. No voy a cambiar la reseña, solo la voy a quedar, lo que diga. Puedo hacer más artículos. También, puedo agregar más artículos. Si quiero, puedo hacer duplicado de ello. Podría quitar algunos de ellos. Aquí tengo una opción para elegir cuántas diapositivas se deben mostrar para su visualización. Entonces, ¿y si tengo múltiples reseñas? Digamos que en vez de tres, tengo como seis de ellos. Bien. Solo se deben mostrar dos reseñas. Para la primera diapositiva aquí puedes ver que tenemos dos reseñas. Si me desplazo por aquí, encontrarás otro conjunto de dos, luego otros dos. Este también estaba ahí en la segunda diapositiva. Se repite para la tercera diapositiva. Sigamos haciendo ese tipo de cosas. Aquí mismo tienes las diapositivas por vista. Aquí tienes diapositivas para desplazarte. ¿Cuántas diapositivas puedes ver? 12,345.6 Así que aquí lo puedes bajar a tal vez, digamos tres ¿Qué pasará en ese caso? Solo se mostrarán unas pocas reseñas correctamente. Estas reseñas de dinero se mostrarán si juegas alrededor de las diapositivas para desplazarte. Hagámoslo por defecto aquí. Puedes establecer el ancho de todas y cada una de las reseñas si quieres dar esta pequeña sección de revisión, entonces puedes establecer el ancho 80% Aquí también tienes opciones adicionales, que también hemos visto en la carousal de medios, que es habilitar o deshabilitar el icono de flecha aquí mismo en el lado izquierdo y derecho Para la nación Pg, puedes usar puntos o fracción o barra de progreso. La barra de progreso aparecerá en la parte superior. Bien, para esta revisión, usaré la paginación Puedo establecer la duración de la transición. puede ver que se mueve bastante rápido con unos 500 milisegundos. Aquí tienes la opción de jugar automáticamente. Puede establecer la velocidad de reproducción automática. Puedes hacer este bucle infinito o simplemente desconectarlo para que no siga cambiando las reseñas una y otra vez. Si muevo el cursor sobre alguna de las reseñas, encontrarás que hace una pausa Si hago clic, entonces hará la misma acción. Eso significa que hará una pausa aquí. Se puede configurar la imagen. La imagen de la que estamos hablando es el avatar o la imagen de la persona. Aquí tienes carga perezosa que hemos discutido. No voy a volver a ir, llegando a la sección de estilo. Puedes cambiar el espaciado entre los elementos aquí mismo, si solo tienes una reseña en una diapositiva, entonces esto no tendrá sentido mover el control deslizante. Aquí mismo, tienes espaciado entre diferentes reseñas. Puedes cambiar el color de fondo para todas y cada una de las reseñas. ¿Qué pasa? Déjame mostrarte. Si cambio el color, verás que aplica los ajustes de fondo de color a la propia revisión. Bien, aquí puedes agregar borde si quieres. ¿Qué pasa si agrego algo así como, digamos 2345 Incluso si agrego cinco, no lo verías porque el color es muy similar al que tenemos como color de fondo predeterminado. Pero si cambio el color del borde a algo así como digamos negro, entonces ahora se puede ver que el borde parece estar muy gordo. Si lo bajamos a tal vez, digamos solo dos, esto quedaría bien. O tal vez hasta tres. Puedo agregar radio de borde si quiero que los testimonios o reseñas aparezcan en formato de bordes redondeados y puedo hacerlo, puedo agregar padding para que mi contenido no se quede con el borde. ¿Qué pasa si solo aumento el tamaño del relleno? Esto es lo que obtendrás. Bien, puedes deshacer simplemente agregando cero a todos los elementos. Pero si haces esto, ¿qué pasará? Solo verás que el contenido toca el borde de tus reseñas. Podríamos aumentar el a tal vez, digamos unos 15 más o menos. 15 quedarían bien aquí. Puede establecer el color de fondo solo para el encabezado. Si configuro el color, verás que el color de fondo se aplicará solo a esa parte, donde tienes el nombre de la persona, su posición, o la URL del perfil, el ícono de las redes sociales y su avatar. Bien, bien. Si agrego gap, encontrarás que la brecha entre el contenido y el encabezado aumenta. Vamos a deshacer esto para que vuelva a restablecerse a la configuración predeterminada nuevo a la configuración predeterminada para el color de fondo también, voy a restablecer esto. Tenemos un separador. Puedes ver aquí mismo tienes el separador. Puedes cambiar el color del separador si quieres, pero nosotros mantendremos el predeterminado. E incluso podrías cambiar el tamaño del separador. Si quieres que esto sea gordo, puedes engordarlo. Si quieres ser estrecho, puedes hacerlo estrecho. Encuentra ahora esta parte, el John Doe y el Emily Blunt Encontrarás que el contenido aparece un poco más abajo que el encabezado. Eso significa que existe cierta brecha entre el encabezado y el contenido en comparación con esta revisión. Particularmente porque esta reseña tiene las calificaciones correctas, ha dado algunas estrellas, pero no para esta revisión. Si agregas calificaciones para todas las reseñas, encontrarás que el contenido se ajustará automáticamente, ¿verdad? Si vamos en la parte de texto de la sección de estilo, puedes cambiar la tipografía, puedes cambiar el color del nombre, el nombre de la persona, el título The Review Review, aquí mismo está lo que está escrito en el texto de Laura Epsom Entonces tienes imagen. Ahora para la imagen, puedes aumentar o tal vez disminuir el tamaño de la persona aquí. Si hago esto alrededor del 70, así es como se vería. Luz. O tal vez creo que 40 a 50 funcionarán bien. Aquí tienes brecha entre el nombre y la foto. Aquí tienes el radio fronterizo. Si haces que este radio de borde sea cero, tienes bordes puntiagudos en comparación con bordes redondeados Si quieres hacer esto como bordes redondeados círculo o bordes redondeados forma cuadrada, entonces puedes jugar con el borde D apenas para ajustar esta configuración que tiene diez píxeles de radio de borde. Si voy a, puedo hacer esto oficial o personalizado si hago clic en personalizado. Ahora para esto puedo cambiar el color. Se puede ver para Twitter, también el color del icono cambia a rojo. Para Instagram cambia a rojo, Lo ideal es que el color de Instagram esté configurado en, supongo, morado o así, el morado o violeta. Aquí encontrarías esa configuración aplicada para Facebook. Además, si reinicio esto, encontrarás que se está escogiendo ese color oficial. Se puede aumentar o disminuir el tamaño de los iconos sociales. Aquí mismo tienes la calificación. ¿Qué calificación quieres? Fuente impresionante, o Unicode. ¿Qué pasa con Unicode? Se puede ver que hay diferentes tipos de diseño de estrellas. Si hago esto como sin marcar, como ajustes sólidos. Si hago este esquema, encontrarás un escenario diferente, ¿verdad? Elijo fontosum y contorno. Habría alguna diferencia menor entre la calificación que verás. Bien, aquí tienes sólido y tienes contorno. Puedes jugar alrededor del dimensionamiento de estas calificaciones. Incluso podrías agregar algo de espaciado, si quieres, entre todas y cada una de las estrellas individuales. Podrías cambiar el color de las estrellas de amarillo a rojo, naranja, cualquier cosa que quieras, incluso podrías cambiar el color de las estrellas sin marcar Bien. Por último, tenemos navegación. Ahora bien esta navegación se refiere a las flechas que tenemos en las direcciones izquierda y derecha y los puntos de paginación inferiores que tenemos Tal vez podría jugar con el dimensionamiento de las flechas, cambiar el color de la misma para que fuera visible. Se puede ver aquí mismo, el blanco es el más visible. En lugar de tener un color gris claro, podría jugar con diferentes tamaños de paginación Incluso puedo cambiar el color de la misma, solo el color de las diapositivas activas. Todas esas cosas se podrían hacer aquí mismo yendo a la sección avanzada. Puedes jugar con el margen y el relleno, puedes alinear el contenido y así sucesivamente y así sucesivamente. Espero que ustedes tengan el punto sobre cuándo y cómo hacer uso del elemento reviews. Del elemento o enchufe pro. 29. Tabla de contenidos para las publicaciones de tu blog: Chicos, esta conferencia va a ser muy útil para aquellos que van a facturar block post en su página web. Como puedes ver aquí mismo en mi página de Wikipedia. Y he buscado artículo de prensa web en Wikipedia para cualquiera de las búsquedas que haces, ya sea elemento de prensa web o cualquier cosa que busques, definitivamente encontrarás tabla de contenido en el lado izquierdo. Eso es lo que vamos a utilizar en nuestro sitio web de prensa web. Tabla de contenido es un elemento ofrecido por el elemento o pro plug in. Lo que permitirá a los usuarios que visiten tu publicación de bloqueo saltar entre diferentes encabezados y diferentes partes de tu publicación de bloqueo para saltarse el contenido que encuentren que es innecesario para su investigación o simplemente para su propósito de recolección de información Si solo hago clic aquí en Plugins, lo encontrarás automáticamente, el contenido salta directo a la parte donde me gustaría leer. Aquí tengo el nombre del tema, o debería decir subtema, y el contenido en sí La forma en que se configura toda esta página, que el título es tres, se establece en H, Una etiqueta aquí tienes el contenido, que está idealmente en la etiqueta P o span. Entonces tienes la división de visión general. Descripción general, debajo del cual tienes un separador. Básicamente, esto significa que es una etiqueta H two que define los subtemas Ahora dentro de los subtemas, es posible que tengas aún más subtemas como temas , complementos y aplicaciones móviles, accesibilidad, etc. Estas son tus etiquetas H tres. Todo bien. Esta es la jerarquía que sigue cualquiera de los postes de bloque , replicada igual He copiado todo el contenido de esta página y he creado una nueva publicación de bloque aquí mismo. Encontrarás que tengo título como dirección. Aquí tengo algo de contenido. ver que esta es tu etiqueta de título. Esto es dos. Puedes ver que puedes simplemente cambiar entre diferentes etiquetas si quieres dar y si quieres dar alguna de las palabras párrafo, puedes simplemente resaltarlas y hacer clic en este botón aquí mismo. Esta es la etiqueta H tres, ¿verdad? No he agregado ningún separador entre la etiqueta H dos y el contenido. Si quieres dar, entonces puedes hacerlo. Aquí tienes de nuevo esto como H tres. Si te desplazas hacia abajo, encontrarás que otras etiquetas H dos también están ahí. Este es el tipo de post que tenemos y vamos a trabajar en torno a esto. Volvamos a nuestro panel de direcciones. Ahora dentro de esto, vamos a ir bajo Plantillas y Creador de Temas. Ahora, una vez que hagamos clic aquí, iremos a la publicación única e importaremos algunas de las plantillas prefabricadas para el diseño de una sola publicación. Aquí encontrarás un montón de opciones diferentes. Quisiera continuar con esta parte. Yo sólo voy a insertar esto, bien, aunque se puede ver que está apareciendo algún post de bloque de receta de salsa pesto Pero por defecto, no va a sacar a colación ningún contenido predeterminado. Básicamente va a aplicar los ajustes de estilo para tu publicación de bloque existente. Espero que entiendas el punto. Vamos a insertarlos dentro de nuestra página. Aquí encontrarías la última publicación de bloque fue prensa, así que eso es lo que ha seleccionado aquí mismo en este contenedor en particular. Lo ideal sería tener alguna imagen destacada para tu publicación de bloque que aparecería como imagen de fondo para este contenedor. Aquí tienes dos contenedores para esta caja flexible. Aquí tienes el título, Alguna descripción o yo diría alguna información de post que ¿cuándo exactamente se publicó este post? Debajo de eso, encontrarías los detalles o extracto. Actualmente, no he dado ninguna excepto por esta publicación de bloque, no encontrarías nada aquí mismo. Entonces tienes el contenido en sí. Se puede ver que hay múltiples cosas diferentes. 23 etiquetas. Una vez que te desplazas hacia abajo, encontrarás una opción para compartir esto y agregar comentarios si quieres dar. Justo en la parte inferior de esta página de bloque, encontrarás publicación de bloque relacionada o publicación de bloque publicada por el mismo autor. Correcto. Estas son las cosas que idealmente encontrarás por ahora. No voy a cambiar o tal vez editar los ajustes de estilo del título y publicar información y todo porque ese no es el propósito de crear esta conferencia. Simplemente agregaré rápidamente un nuevo elemento y buscaré tabla de contenido, que simplemente lo arrastraré y soltaré aquí mismo en este contenedor. Ahora en cuanto me caiga, encontrarás que tenemos esta descripción general de la etiqueta H two. Tenemos estas muchas etiquetas. Ahora también está retomando lo siguiente, esta parte donde esto en realidad es parte de nuestra página de bloque, pero no es parte de nuestro contenido, ¿verdad? ¿Cómo podemos eliminarlos de nuestra tabla de contenido? Porque esto no forma parte del contenido del título de Wordpress. Estas son las cosas que forman parte del contenido, bien, desde la visión general hasta la historia. Estas son la parte de nuestro contenido. Dentro de Descripción general general, tendrás temas, enchufes, aplicaciones móviles. Se puede ver que hay algunos, una jerarquía ya formándose aquí arriba. Vamos a hacer clic en el Elemento Tabla de Contenidos aquí mismo en la sección Edición de Pintura bajo Pestaña Contenido, Puedes cambiar el título a algo como ir al contenido, puedes cambiar. Lo que quiera darle a este título. Como aquí, la etiqueta de tamal H para este encabezado se establece en H cuatro Ahora obviamente, si cambias esto a H tres, se asumirá que esto es parte del contenido de tu publicación en bloque, pero no es ese caso. Básicamente, la tabla de contenidos está ayudando a los usuarios a navegar entre diferentes temas o subtemas que realmente tiene tu contenido de publicación en bloque Bien, nos quedaremos la etiqueta H tamal para que esto sea H cuatro Ahora debajo de esto, encontrarás incluir y excluir. Debajo de eso encontrarás anclas por etiquetas. Ahora bien, ¿qué significa? Aquí encontrarás 234h6 y todos los diferentes tipos de etiquetas Ahora, hay múltiples, múltiples etiquetas. Como discutimos anteriormente, etiquetas H 2.3 simplemente muestran de qué se trata todo este subtema Bajo el sub, ¿cuáles son los subapartados? Yo diría que las subsecciones son como H tres, y los subtemas son H dos Y el título en sí es tu etiqueta H one. Bien, llegando al H456 generalmente se usan para aquellos que no son tan importantes, pero solo te gustaría agregar estilo para que se vea así también es parte de tu publicación de bloque En mi opinión, no se debe incluir esta etiqueta H four. Sólo podemos eliminar esto. Incluso podemos eliminar Hi porque no forma parte del contenido de las publicaciones en bloque. Sólo nos quedaremos con h dos y h tres. También tienes excluir. Eso significa que incluye H dos y S tres contenidos de etiquetas dentro del elemento table of contents. Se excluyen algunas de las cosas. Ahora una vez que vaya aquí, debajo de esto, encontrarás selectores CSS en una lista separada por comas. Ahora, ¿qué significa? Ahora bien, si has trabajado alrededor de hojas de estilo en cascada, o tienes alguna idea sobre desarrollo web general usando código personalizado como HTML, CSS, Javascript, entonces debes haber aprendido sobre CSS y selectores de ID Hay un montón de selectores diferentes. He cubierto todo este concepto en mi curso de desarrollo web. Puedes checar si quieres. El propósito detrás del uso selectores CSS es que, como dije, no queremos incluir esta sección dentro nuestra tabla de contenidos porque esto no es parte de nuestro post de bloque Podemos simplemente dar click en esta parte. Podemos ir a la sección Avanzada aquí mismo. Podemos darle clase CSS a esta clase CSS clases solo para simplificar. ¿Qué significa class and ID? Un elemento podría tener una clase, clase podría ser utilizada para múltiples clases de elementos. Digamos que eres un estudiante de ingeniería, bien, Y estás persiguiendo la informática. Ahora, tu universidad tiene alrededor de tres lotes para ciencias de la computación. Estudiantes de informática, de ingeniería, esas son tres clases. Cuando la gente dice informática, entonces existe la posibilidad de que los alumnos de las tres clases puedan levantar la mano y decir que, sí, somos parte de la informática. Pero si digo particularmente ese número de rol, digamos cuatro levanta la mano, entonces solo habría un alumno que levantará la mano, ¿ correcto? Esa es la identificación. Id es único. Solo se asociará a un elemento, a una sección, a un contenedor. Así, las clases podrían ser utilizadas para múltiples elementos. Siempre que llame a esa clase, cuando le aplique algunos ajustes de estilo, los ajustes se aplicarán para todos los elementos que están asociados con esa clase. Si le doy un ID a un elemento, cuando llamo a ese ID en CSS y le doy algún estilo, solo se aplicarán esos ajustes de estilo a ese elemento, que se asociará con ese ID. Porque ID solo se asocia con un elemento porque todos y cada uno de los elementos tendrán un ID único. En tanto que no es el mismo caso con las clases. Espero que encontremos el punto aquí. Vamos a agregar clase algo así como post relacionado. Déjenme dar esto como post relacionado. Bien, podría dar esto como un caso de camello también, pero solo me voy a quedar con esto como publicaciones relacionadas. Bien, voy a copiar esta publicación relacionada. Voy a copiar esto. Voy a volver a esta parte, la tabla de contenidos y dentro de excluir, voy a poner un punto primero. Siempre que estés usando tu selector de clase, siempre pones punto primero cada vez que estás dando el nombre, cada vez que estás asociando o cuando primero estás definiendo un elemento con un nombre de clase No tienes que poner punto. Pero cuando estás llamando a esa clase, cuando quieres aplicar algunos ajustes a ese elemento de clase, pones punto primero y luego pegas el nombre de la clase. Ahora puedes ver que esta parte ya no está incluida. Bien. Aunque todavía puedo ver las puntuaciones del sistema operativo y el poste de bloque de dominio C plus aquí mismo Veamos también qué podemos hacer al respecto, porque estas dos son secciones diferentes. Aquí puedes ver si hago clic en Estructura, Espera un segundo. Aquí tenemos recetas relacionadas. Bien, esta es una sección que necesitamos para asociar la clase. Tenemos que dar el post relacionado con la clase a este contenedor. Lo que hice, acabo de dar la clase al rubro. Lo cual no es algo que tuviera que hacer. Lo que voy a hacer, iré a Encabezado, esto es lo que he seleccionado. Me desplazaré hacia abajo en la sección avanzada. Si me desplazo hacia abajo, tengo clases CSS. Yo solo voy a hacer el comando X o control X dependiendo del sistema operativo que estés usando. Haré clic en la sección Recetas Relacionadas. Voy a hacer clic en Avanzado. Voy a pegar la clase aquí mismo. Volveré a mi tabla de contenido excluir lo mismo. Y esto ahora se puede ver que esta parte no está apareciendo. Espero que entiendas el punto de excluir parte del contenido de tu elemento de tabla de contenidos. Bien, volvamos a incluir ahora también tienes un contenedor. Eso significa que este control limita la tabla de contenido a elementos de encabezado bajo un contenedor específico ¿Qué significa? Analizaremos esto más adelante, pero también tenemos una vista de marcador. ¿Qué significa? Actualmente se puede ver todos los subtemas se dan números bajo estos números, como esta etiqueta dos es Descripción general Ahora dentro de visión general, tenemos sub viñetas 1.11 2131 punto 4.1 Si tuviera algunas otras subsecciones para el segundo el segundo subtema también habría sido 2.12 0.22 punto 3.1 puedo hacer uso de números o viñetas si tengo viñetas Esto es lo que voy a ver. Ahora puedo cambiar el icono si quiero o si me gustaría hacer uso de ningún icono. Sólo puedo hacer click sobre ninguno. Si quiero cambiar el icono, sólo puedo hacer clic en el icono y se mostrará la biblioteca de iconos. Sólo puedo buscar flechas. Bien, solo busquemos flechas, o podría ir a todos los íconos y podría buscar una bala. Bien, bala no es algo que tengamos, busquemos adelante. Lo que básicamente estoy buscando estos dos iconos triangulares, o cómo puedes decir estos se llaman como tus corchetes triangulares, ¿verdad? Estamos buscando soportes triangulares. ¿Cuáles son las viñetas recomendadas? Se puede ver un círculo con un contorno, un círculo de contorno con un punto o punto cuadrado, viñeta derecha o cuadrada, debería decir. Si te desplazas en diferentes iconos, encontrarás muchas opciones diferentes. Voy a buscar ángulo, esto es exactamente lo que buscaba. Déjame hacer uso de esto aquí. Encontrarás que este tipo de icono se aplica a toda la lista de la tabla de contenido. Bien. Si voy a las opciones adicionales, ¿qué podemos ver? ¿Quieres agregar wordrapow? Ninguna de mis dos o tres etiquetas tiene un texto muy largo, ¿verdad? Aunque trate de añadir algo, permítanme intentar hacerlo. Pero no creo que pueda, porque aquí no tenemos opción para editar el texto. Tenemos opción de jugar alrededor del estilo y sección avanzada de la misma. Pero si me gustaría cambiar el contenido, tendré que volver a mi tema Personalizar editor de prensa. Lo que básicamente significa el ajuste de palabras es que si el nombre de tu subtema es realmente largo, el límite de caracteres o el límite de palabras es muy grande Idealmente, se ajustará para que toda la longitud del texto aparezca en dos o tres líneas. Pero si alternas la palabra wrap, entonces significará que solo ocupará toda la línea. Y luego las palabras que se cortarán, se darán con puntos suspensivos Eso es lo que básicamente significa envolver. Tienes opción de caja minimizada, ¿qué dice? Básicamente, si has activado esto, puedes colapsar y puedes expandirte Esta es la característica que puede obtener con la opción de caja minimizada. Ahora incluso se puede cambiar el icono de esta opción de colapso y expansión. Se puede elegir entre diferentes iconos haciendo clic en la biblioteca de iconos. O si quieres subir tu propio SG personalizado. Puedes hacerlo para expandir, puedes elegir entre diferentes iconos. Pero por ahora sólo voy a seguir con lo que se está mostrando aquí. También demostrará que esta versión minimizada debe ser visible en el retrato de la tableta. Entonces, ¿qué significa si tengo modo escritorio? Puedo ver este colapso y expandirme. Si voy a la pantalla de la tablet, volveré a ver esto. Pero si voy al dispositivo móvil, también voy a ver esta parte. Veamos qué pasa si tengo escritorio o menor. Eso significa que esta parte ya estará cerrada Si estoy en mi dispositivo móvil. Si estoy en mi tablet también, se cerrará. Pero si vuelvo a mi modo escritorio, se abrirá. Eso es lo que básicamente esto minimizado en es. Bien, espero que entiendas el punto aquí. Simplemente lo enviaré de vuelta a la predeterminada, que es retrato de tableta. Ahora aquí tengo la visión jerárquica. ¿Qué significa? Muy sencillo. Bajo visión general, tenemos temas, plug ins y aplicaciones móviles, ¿verdad? Estos son parte de este tema general. Si desactivo esto, parecerá que son secciones separadas, no forman parte de ella. Voy a tener que hacer clic en esto para que la gente pueda entender eso. Bien, en las aplicaciones móviles forman parte de la sección de visión general. También tienes colapso de artículos. Si hago esto, puedo dar click en este resumen. Y cuando alguien haga clic en la descripción general, se le darán opciones para elegir, temas, complementos, etc. Además, mantén bien esta parte, llegando a la parte de estilo. Bien, ¿qué más tenemos para el contenido? Primero, permítame asegurarme de que no lo estamos. No saltarse ninguna de las cosas. Si voy en la exclusión, de nuevo, tienes lo mismo marcador de cosa y el icono que te gustaría dar. Si voy a la parte de estilo, lo que puedo hacer, puedo cambiar el color de fondo de la caja o agregar color de borde a toda la caja. Puedo agregar el color del cargador. ¿Qué pasa si agrego el color del cargador? Eso significa que cada vez que expandes, digamos que tienes un montón de subsecciones diferentes, La publicación de bloque es realmente larga y hay múltiples tablas de contenido aquí mismo en este elemento por ahí, podría tomar algún tiempo cargar los contenidos Por ahí puedes agregar un color si te gustaría dar. Puedo agregarle un borde, puedo agregar radio de borde. Pero intentemos hacerlo. Intenta hacerlo sólo entonces llegaremos a saber si incluso se ve bien o no. Por ahora, voy a añadir color de borde. Bien. Este es el color de fondo. Queremos un color de fondo más claro. Voy a mantener esto como algo así como un tono gris oscuro. Creo que esto quedaría bien. Bien. También cambiaremos el color del texto. Hecho muy aquí. Puedo añadir color de borde a algo así como, digamos negro. Todo bien. Tengo color lodo. Vamos a darle esto a algo así como amarillo brillante. O voy a seleccionar un color amarillo brillante. Bien. Voy a copiar el código de texto. Bien, puedo agregar borde con. Si agrego borde con, se puede ver que el borde alrededor de mi índice entero aumenta y se vuelve más gordo Puedo agregar radio de borde para hacer que los bordes sean redondeados. Bien, pienso que unos 25 pixeles se ve bien. En este caso, puedo agregar relleno alrededor del contenido. Puedo ajustar la altura de la misma. Puedo dar sombra de caja que quiera, pero no voy a dar ninguna sombra de caja. Voy a restablecerlo de nuevo. También podemos darle estilo a un encabezado. Tratemos de darle el mismo color amarillo a este rubro. Bien, puedo cambiar alrededor de esto a algo así como este color. Creo que esto quedaría bien. Bien. Ahora para el color del texto, qué voy a hacer, seleccionaré el blanco como mi texto, pero no está apareciendo tan bonito. Tendremos que bajar nuestro color amarillo a un poco más oscuro. Sólo entonces sería visible. Y tiene sentido aquí mismo. Sólo puedo jugar alrededor de la parte donde consigo el color exacto que iría bien con esto. Todo bien. Entonces creo que este color se ve bien, bien. Ahora, para la tipografía, puedo poner esto Sólo puedo buscar poppins. Incluso puedo cambiar el tamaño de fuente si quiero, pero sólo voy a mantenerlo como está. Puedo cambiar el color del icono aquí para todos y cada uno de los colores de icono que tenemos. Podemos cambiar esto a blanco, Este icono que tenemos para colapsar y expandirnos. Podemos cambiar esto a blanco. Además, podemos agregar ancho separador. Eso significa lo gordos que queremos que sea nuestro separador. Sólo voy a mantener esto como tres pixeles. Ahora, llegando a la parte de la lista y a una sección de estilo, encontrarás que aquí trabajaremos alrededor de estas cosas. Se puede ajustar la altura, esa tipografía, podemos establecer esto Aquí, puedes cambiar el color del texto. Se puede añadir sangría. La sangría es el espacio entre esta parte. Encontrarás esto aquí mismo. Siempre que estás agregando algunos temas que forman parte de un gran tema, definitivamente dejas algo de espacio al principio. Eso se llama sangría. Puedes ajustar la sangría, encontrarás que la unidad está ajustada a EM, puedes cambiar esto a píxeles que sería mejor entender, ¿verdad? Se puede ajustar. Si llevas esto a cero, entonces obviamente es como si no estuvieras incluyendo este tipo de cosas, que se llama una visión jerárquica, ¿verdad Simplemente puedes volver atrás, aumentar la sangría o tal vez incluso establecer esto en default fine Pero por ahora solo me gustaría mantener esto como 15 pixeles porque eso me queda bien. Ahora para el color del texto, voy a cambiar esto a blanco para que sea visible. Incluso puedo añadir subrayado para todos y cada uno. Si quiero, puedo cambiar el efecto hover. Si flojo alrededor de alguno de estos, puedo cambiar el color del vuelo estacionario Puedo cambiar el activo. Eso significa que siempre que ese elemento en particular esté activo, puedo cambiar su color a amarillo. Lo que sea que se ponga a esta parte, podemos cambiarlo a eso. Hagámoslo. Para ello, voy a dar clic en Encabezado. Voy a copiar el código hexadecimal. Iré a Listar aquí dentro de Hover. Además, usaré el mismo color para active. También usaré el mismo color. Aquí hemos seleccionado visión general. Eso significa que actualmente se establece una visión general. Estamos viendo la visión general. Si coloco el cursor alrededor de alguna de las otras, encontrarás que también aparece ese subrayado y el color de la fuente también cambia Correcto. Aquí tienes marcador, ¿qué significa? Tratemos de averiguarlo. Marcador es básicamente el color de tus iconos de viñetas. Correcto. Incluso podemos poner esto en blanco. Bien, Y puedes cambiar el tamaño de la misma. Puedes hacer que esto parezca un poco grande para que sea visible. 12 pixeles serían suficientes, en mi opinión. Bien, viniendo a la sección avanzada, puedes alinear los artículos y puedes hacer esto. Pegajoso también. Ahora bien, cómo hacer esto pegajoso nos ayudaría. A ver. Primero, publicaré esto. Y en cuanto haga clic en Publicar, verá que nos incita eso, ¿le gustaría darle alguna condición Si hago clic en Anuncio, puedes ver que puedo incluir la tabla de contenido de todas mis páginas singulares y post. Pero, ¿quiero aplicar la misma configuración para mi página de inicio que construimos usando el elemento o pro? No, solo quiero mostrar este elemento particular de tabla de contenido para nuestra publicación en bloque. Solo seleccionaré publicación de bloque. Ahora incluso puedo agregar alguna otra categoría a la que quiero aplicar la configuración para toda la publicación de bloque o si seleccionas block post, puedo hacerlo. Si quisiera excluir dentro de todos los blockposts, solo quiero excluir de una publicación de bloque Pero me gustaría aplicar el elemento table of contents para todas las demás publicaciones de bloque. Digamos que tengo 100 publicaciones de bloque de las cuales me gustaría usar este elemento de tabla de contenido en 99 de esas publicaciones de bloque. Pero sólo uno de ese blockpost no debería tener la tabla de contenido ¿Qué harías? ¿Simplemente seguirías y seguirías escribiendo el título de 99 block post? No, solo puedes hacer uso de todo esto en lugar de incluir, puedes agregar una condición y hacer que esta excluya. Ahora en la exclusión, puedes ir a publicar y buscar esa publicación de bloque en particular. Puedo buscar blog, digamos uno. No quiero incluir esta parte en el registro uno. Todo bien. Puedo añadir otras condiciones también, pero por ahora sólo lo voy a mantener como está. Cuando el ciclón guarda, podemos previsualizar los cambios. Cambios de vista previa de Cyclicon. Una vez que me desplace hacia abajo, encontrarás que nuestra tabla de contenido está en su posición fija, ¿verdad? Aquí está en su posición fija. Si quiero que esta tabla de contenido sea pegajosa, lo que básicamente significa que aunque me desplace hacia abajo, mi Tabla de Contenidos debería moverse junto con mi cursor. Eso significa que debe apegarse a su parte. Y no importa si me desplace hacia abajo o me desplace hacia arriba, debería estar conmigo, como como está ahí. Aquí mismo se puede ver el propio panel izquierdo. El panel izquierdo en su totalidad está dedicado para esto. No importa cuánto me desplace hacia abajo, el elemento table of contents estará aquí en lugar de lo que podemos ver aquí mismo, que está en su posición fija. ¿Qué cambios tenemos que hacer? En primer lugar, tendremos que ajustar el ancho de esto de tal manera que incluso si hago esto como pegajoso, no se superponga con nuestro contenido. De lo contrario, el contenido no sería visible. Correcto. Por aquí, ¿qué vamos a hacer? Simplemente seleccionaremos sobre esto. Cambiaremos el ancho de esta para que se ajuste a aproximadamente esta parte. Bien, publica esto. Después de hacerlo, haremos clic en este elemento tabla de contenido. Iremos a Sección Avanzada. En la sección Avanzadas, tendremos que desplazarnos hacia abajo hasta la parte de Efectos de Movimiento aquí mismo. En Efectos de movimiento, encontrarías pegajoso. Quieres hacer esto como pegajoso en la parte superior o en la parte inferior donde exactamente debería ser pegajoso para todos los dispositivos o simplemente para el escritorio. Obviamente, solo lo queremos para escritorio. De lo contrario, el ancho de la tableta y el móvil no es suficiente para ajustarse al contenido y al elemento Tabla de contenido. Sólo vamos a tachar dispositivo tablet y solo nos quedaremos con esto para escritorio. Si me desplazo hacia abajo, encontrarás que la tabla de contenido se pega aquí mismo. Bien, esto es lo que puedes hacer aquí mismo. Ahora puedes ajustar el ancho también de tal manera que pueda ocupar tanto espacio. Porque sabes que la tabla de contenidos sólo está ocupando tanto espacio, ¿verdad? Puedo ampliar el ancho, fino. Esto es lo que obtendrás. Publiquemos esto. Veamos si podemos ver los cambios reflejados. Ahora puedes ver, actualmente estoy en mis plug ins. Los enchufes están resaltados. Si me desplazo hacia abajo hasta aplicaciones móviles, verás aplicaciones móviles, otras características, accesibilidad, todas las cosas estarán resaltadas. Todo bien. Incluso puedo expandirme y colapsar. Esta parte también está colapsando. Si vamos al siguiente, solo puedo hacer clic directamente y se desplazará hacia abajo hasta esa parte en particular y así sucesivamente. Si veo alguna otra publicación de bloque como el bloque uno, entonces no encontraríamos este tipo de tabla de contenidos. Se puede ver que no hay tabla de contenidos. ¿Y si voy a algún otro poste de bloque? Digamos que estoy en mi publicación de bloque de Fema? A ver si podemos ver la tabla de contenidos. Aquí podemos ver la tabla de contenidos. Ahora la única razón por la que no podemos encontrar ningún rubro porque el cuerpo de nuestro poste de bloque no tiene ningún tanque H2H3 y así sucesivamente Correcto. Esa es la razón por la que no se llega a ver ninguna tabla de contenido por aquí. Puedes trabajar alrededor de tu, um, como dije, esta parte, el contenedor de la sección correcta tendrá tu imagen destacada como fondo. Simplemente puedes eliminarlos con solo hacer clic en el flex box aquí mismo, el contenedor. Al ir a la sección de estilo, encontrarás la imagen destacada. Puedes eliminarlos si publicas esto. Ahora ya se ha cambiado la configuración predeterminada de esta plantilla. Aunque vea la publicación del bloque Figma, no encontraría una imagen destacada en el fondo del elemento estable de contenido 30. Lottie - ¡Haz que tu sitio web luzca profesional y exagerado!: Todo bien. Ahora no estoy muy seguro de si alguna vez has oído hablar del elemento Lottie mientras construías tu sitio web usando el elemento o enchufar Pero Lottie esencialmente es un formato de archivo de animación de código abierto que se basa en la notación de objetos Javascript. Json es algo parecido a Javascript, pero es una versión simplificada del mismo. Debido a esto, tienen un tamaño realmente pequeño, son más rápidos de cargar que tipos de archivos de animación tradicionales como los GIF y todos esos. Ahora Lottie también tiene una ventaja más en comparación con GIF, que es que pueden ser sitio web interactivo, haces que tu sitio web sea muy atractivo para los usuarios Puedes hacerlo muy interactivo. Y va a escalar tus habilidades de diseño de sitios web al siguiente nivel. Por eso lo aprenderemos. Ahora, aquí mismo, verás que estoy en mi página de Contactores Justo aquí en la página de Contactores. Me gustaría agregar una sección de héroe para esta página simplemente eligiendo la caja flexible. Seleccionaré el diseño de dos contenedores. En el lado izquierdo agregaré el texto. Y en el lado derecho agregaré una animación de Lottie. Primero, déjame agregar a Lottie justo aquí una vez que la arrastre y suelte. Justo aquí. Por cierto, este es un elemento pro. Bien, entonces esta es una animación predeterminada que puedes ver aquí mismo en la pestaña de contenido. Encontrarás Lottie y Settings. En Lottie encontrarás que o bien puedes usar tu archivo multimedia o URL externa Ahora, ¿qué significa? ¿Y dónde exactamente podrías conseguir estos archivos de Lottie Primero, veamos cómo podemos subir nuestro archivo multimedia aquí en Lottie files.com Esto no es un código abierto, pero yo diría que es un marketplace donde puedes comprar o descargar animaciones de Lottie de forma totalmente gratuita, dependiendo de en qué tipo de animación y plan estés este momento estoy usando la versión gratuita y acabo de buscar play. Ahora hay un montón de animaciones diferentes dando vueltas y estas son completamente gratuitas, aunque podrías encontrar pro en la parte inferior. Pero estos son solo de uso gratuito. Si encuentras alguno de ellos que se pagan, tendrán un círculo, color amarillo con un icono de corona dentro de él. Yo diría que esa es la animación de pago. Pero ahora mismo, digamos que quiero hacer uso de esta animación en particular, ¿verdad? Así que solo puedo hacer click por aquí y puedes cambiar entre los diferentes colores que tengas. Puedes erit animación. Se puede erigir el color de fondo. Pero solo queremos un fondo transparente para que sea fácil para nosotros incrustar en cualquiera de las secciones dentro de nuestro sitio web. Así que sólo puedo hacer clic en Editar Animación. Y puedo abrir esto en Creator, o puedo abrir esto en Lote Editor. Entonces déjame abrir esto en Lottie editor. Y una vez que haga esto, podría tomar algún tiempo cargar. Y aquí puedo cambiar los colores con solo hacer clic en todos los colores, encontrarás que está trabajando alrededor de los tonos de naranja, ¿verdad? Si cambio el color con solo hacer clic aquí mismo, puedo elegir el verde o cualquier otro color. Cualquiera con lo que me sienta cómodo trabajando, solo puedo seleccionar este color verde y formará los diferentes tipos de colores verdes Se puede ver hacia el final de la animación, el color verde está en un estado mucho transparente. Mientras que cuando empieza con el efecto pulso, es muy oscuro. Esto es lo que tienes. También tienes el icono dentro del botón de reproducción. Ahora bien, esta imagen, no estoy muy seguro si puedes editar esta imagen porque esta es, no es una animación aquí. Podrías reemplazar la imagen con lo que quieras o simplemente podrías descargarla con lo que tienes. Yo sólo voy a guardar esta animación. Una vez que haga esto, obtendré opción de guardarlo en mi espacio de trabajo, y puedo dar cualquier nombre que me gustaría. Bien, así que solo voy a guardar esto en mi primera carpeta de proyectos. Ahora bien, esta es la carpeta predeterminada que te llevarás bien con tu cuenta. Ahora en cuanto hagas clic y lo guardes en tu espacio de trabajo, obtendrás una opción para descargar y exportar esto en formato Lottie Json Esto es lo que queremos, aunque también hay otras opciones, como Lottie optimizado, Jason, Lott optimizado y muchos otros formatos como GIF, Webp, Four MOV, los otros cuatro formatos que puedes ver aquí mismo en la esquina inferior derecha de Ahora bien, estos no son elementos interactivos. Ahora, aquí mismo como pueden ver, tengo diferentes animaciones. Ahora estas animaciones tienen algún nombre dando vueltas. No puedes simplemente previsualizarlos así. Al igual que cómo podrías previsualizar imágenes o videos y otras cosas. Aquí tendrás que incrustarlos o mientras estás exportando, tienes que darle un nombre a tu animación para que te resulte fácil importarlos en la sección que quieras Por ahora lo que voy a hacer es simplemente seleccionar esta parte. Y voy a hacer clic en Seleccionar para ver si se ha sacado la animación correcta. Sí, puedes ver Contáctanos, animación se saca bien. Ahora, inicialmente viste que la animación sí. Por una vez, ¿verdad? No va por ahí. En bucle, incluso se puede ajustar la alineación. En primer lugar, puedes hacerlo línea central izquierda, una línea derecha Aline, Pero incluso si cambiara la alineación, no encontrarías ningún cambio necesario simplemente porque ocupa toda la altura y anchura con respecto a las dimensiones Flexbox Derecha, tenemos dos columnas. Este contenedor Flexbox tendrá nuestro título para la página de contacto y esta tendrá la animación Bien, aquí puedes agregar subtítulo si quieres. Puede agregar un título personalizado como título. Entonces, cualquiera que sea el título que haya para la animación, se mostrará aquí mismo. Si solo puedo poner pie de foto, entonces tendré que darle pie de foto a esto. Bien, si hago esto personalizado, tendré que ingresar el subtítulo personalizado a esta animación. Pero por ahora vamos a quedármela. Ninguno abajo. Encontrarás en ahora enlace, puedes agregar un ural personalizado, es decir, cada vez que alguien haga clic en esta animación Lottie animation, serán redirigidos a cualquier página web Bien, ahora hemos cubierto la parte de Lottie. Veamos qué podemos hacer con los ajustes. Ahora la configuración parte, tienes diferentes opciones como disparador en diferentes viewport En primer lugar, solo agregaré también una caja flex más solo para mostrar que la alineación incluso funciona o no. Aquí tengo esta dimensión vertical. Voy a añadir otro elemento Lottie a la derecha del bate. Sólo voy a cargar, solo voy a subir la última animación que era el botón de reproducción. Todo ahora mismo. ¿Bien? Bien. No estoy muy seguro de por qué la imagen no está apareciendo el botón de reproducción Como lo vimos aquí mismo. ¿Qué? Simplemente reemplazaremos esto con alguna otra animación. Veamos qué podemos conseguir aquí. Creo que esto se ve bien, pero este tamaño de animación es demasiado grande. Pero aún así, si podemos intentar alinear esta izquierda. Sí, se puede ver que sí se alinea a la izquierda. Se alinea a la derecha y se alinea con el centro. Tienes diferentes opciones para alinear tu animación yendo a la configuración spart ¿Qué puedes ver? Puedes ver la configuración del viewpoort Eso significa activar esta animación siempre que estés en esa ventana gráfica en particular Ahora, ¿qué significa viewpoort? Aquí puede ver una ventana gráfica es una región de visualización de polígonos en gráficos por computadora En la teoría de los gráficos por computadora, hay dos regiones, como nociones de relevancia a la hora renderizar algunos objetos a una imagen No necesariamente una explicación complicada, sino lo que básicamente significa que el tamaño de la pantalla depende del tipo de dispositivo que estés usando. Digamos que estamos en la pantalla testtop y particularmente estoy usando el Macbook Air M, uno de las dimensiones de mi monitor, pantalla de mi laptop, en cuanto a ancho y alto, sea lo que sea, ocupará todo el ancho y la animación comenzará cada vez que esté viendo esto en mi pantalla Viewpoort Ahora la ventana gráfica justo debajo del punto de activación, encontrarás que la ventana gráfica, está establecida desde 0% 200% Eso significa que si me desplazo por mi pantalla, no importa, mi animación va a continuar Mi animación será 0-100% Pero ¿y si añado eso? animación de viewpoort debería correr del 50% al 65% Digamos que para esta parte aquí, puedes ver en la parte más a la derecha de nuestra página web, cualquiera de la página web, donde quiera que vayas, o incluso en tus carpetas donde tengas múltiples elementos de archivo, siempre encontrarás la barra de desplazamiento aquí mismo, correcta Ahora, la barra de desplazamiento te permite desplazarte y ver tu ventana gráfica completa, ¿verdad? Toda tu ventana gráfica Entonces, si personalizo esta animación de lottie de tal manera que la ventana gráfica debería comenzar desde algún lugar alrededor del 50% y la animación debería terminar en 65% Ahora si me desplazo hacia abajo, encontrarás que he cubierto sobre esta parte, pero aún así la barra de desplazamiento no cubre el 50% de toda la Si vuelvo a desplazarme hacia abajo, se puede ver que alrededor del 49% de la pantalla ha sido cubierta aquí mismo. Puedes ver aquí mismo, por eso ha comenzado la animación. Si vuelvo a desplazarme hacia abajo, ¿sabes qué? Simplemente voy a mantener esto en bucle para que la animación siga funcionando. Ahora, una vez que pase el 65% de mi ventana gráfica, la animación no se ejecutaría Encontrarás que la animación ha sido detenida. Si vuelvo a desplazarme hacia arriba, encontrarás que la animación se está ejecutando de nuevo. Eso es lo que básicamente en esta ventana gráfica realmente significa. Pero la mejor práctica es seguir ejecutándolo. O si solo deseas la animación en un desplazamiento de ventana gráfica en particular, entonces puedes hacerlo Los otros disparadores que tenemos son click, cada vez que hago clic en el elemento, sólo entonces comenzará la animación, correcto. Es decir, haga clic. Y ¿cuántas veces quieres ejecutar esta animación aquí mismo? Loop va a ir en infinito. Si solo cambio esto a tres, entonces se animará tres veces en bucle Después de eso se detendrá. Esta es la segunda vez que se ejecuta. Esperemos a que funcione la tercera vez. Después de la tercera vez, encontrarás que la animación no se ejecutará. Esta es la tercera vez que se está ejecutando. A ver si se ejecuta la próxima vez o no. Aquí, encontrarás que la animación se detiene después de ejecutarla tres veces. Aquí mismo, incluso puedes cambiarlo. Si solo lo dejas en blanco, seguirá funcionando infinitamente Seguido por tienes otros disparadores al flotar. Siempre que muevas tu cursor dentro del elemento Lote, entonces comenzará la animación. Y una vez que salgas del elemento aún la animación seguirá adelante Acabas de activar el punto de partida, ¿correcto? Empezará cuando muevas tu cursor dentro del elemento. Aquí tienes en hover out. Siempre que hagas clic en On como disparador. También tienes on hover out. Eso significa qué pasa si mueves tu cursor fuera del elemento lote. Entonces en ese caso puedes invertir la animación o podrías pausarla cuando inicié la animación. Primero, permítanme comenzar la animación moviendo mi cursor. Ahora bien, si muevo el cursor hacia afuera, se puede ver que la animación se ha detenido ¿Y si hago reversa? Traeré mi cursor. Ahora bien, si muevo el cursor hacia afuera, se puede ver que la animación se está invirtiendo. Así es como sigue. Los otros disparadores que tenemos son scroll. Ahora, ¿qué pasa con el scroll? Primero solo agregaré un diseño de caja flexible más con dirección hacia abajo. Voy a añadir un elemento más de lote para éste. Éste que vimos. Iré a ajustes. No queremos scroll para esto, solo vamos a seguir sobre bien, revés es lo que queremos. Todo bien. Ahora para la otra sección, la otra caja flex que tenemos. Voy a añadir elemento lottie. Simplemente arrástralo y suéltalo aquí mismo. Subiré un archivo multimedia. Continuar. Tengo una animación de rueda también. Vamos a tratar de traer eso. Creo que este podría ser el indicado. A ver. Sí, este es el de la Rueda, pero no estoy muy seguro de por qué no aparece la imagen. Voy a tener que volver a mi tablero de archivos de Lottie. Y una vez que vaya aquí, tendré que revisar esta animación aquí mismo. Yo tengo esto. Voy a cambiar el título de esto a algo así como Rueda para que sea fácil de entender y reutilizarlo. Bien, aquí estamos. Al ver que hay algún punto aquí mismo. No estoy muy seguro de si la imagen sería exportada. Intentemos descargar esto de nuevo. Voy a regresar. Voy a subir un nuevo archivo y solo puedo tomar esta casilla que no vuelva a mostrar este mensaje. Bien. Yo solo seleccionaré Rueda. Bien, la animación no está apareciendo. No muy seguro. Tratemos de averiguar alguna otra animación. Acabo de seleccionar rueda inicialmente, tuvimos esta incorrecta. Intentemos averiguar qué pasa con esta animación. Bien, si hacemos uso de esta animación en particular o tal vez incluso de esta animación. Bien, ¿qué pasa entonces? A ver. Simplemente voy a hacer clic en esto. Voy a hacer clic en Guardar dos Espacio de trabajo Arriba, guárdalo. Y se abrirá una nueva pestaña. Ahora en la nueva pestaña, cambia el nombre de la animación a algo así como rueda dos. Bien, y descargaremos el archivo Json. Descarguemos esto. Voy a subir un nuevo archivo Json. Ojalá esto funcione. Sí, aquí puedes ver que la animación de la rueda está apareciendo correctamente. La configuración de la ventanilla que se va a desplazar. Quiero que la animación dure para siempre. Eso significa que debería ser infinito En look más cada vez que dispares scroll. ¿Qué pasa si te desplazas hacia arriba? Se puede ver que la rueda girará en sentido contrario a las agujas del reloj. Si me desplazo hacia abajo, giramos en sentido horario. Eso es lo que básicamente significa. Ahora bien, si cambias la configuración de la ventana gráfica a, digamos que comienzas aproximadamente del 65 al 70% y terminas en el 100% Entonces incluso si bajas, si te desplazas hacia abajo hasta la parte que no cubres alrededor del 67% de la ventana gráfica, no encontrarás la animación de la rueda girando Si te desplazas más allá del 67% de tu ventana gráfica, solo entonces la animación se activará bien Pero solo mantengamos de cero a 100% Ahora aquí tienes efectos relativos a viewport, o lo quieres con respecto a toda la página Esto es con respecto a toda la página y no a tu punto de vista. Eso significa que el punto de vista podría ser cuántos elementos agrega desde esta parte hasta la parte final. Pero la página será solo desde donde termina tu encabezado y desde donde empieza tu pie de página, esa es tu página. Bien, aquí, si me desplazo hacia abajo más donde pueda ver mi pie de página, entonces la animación no funcionaría. Eso es lo de toda la página. Vamos a traerlo de vuelta a Viewport. Ahora también tienes punto de inicio y punto final Ahora, ¿qué significa? También tengo algunas otras animaciones usando las cuales entenderás esto de una manera mucho mejor. Voy a añadir otro elemento Lottie. Bien, déjame buscar aquí a Lottie. Voy a subir la primera animación que había usado. ¿Es éste? Éste. Intentemos reemplazarlo con éste. Bien, esta es la rueda, esta es la de contacto. Veamos esto. No, esto no también. Tenía una animación de auto también. Déjame ver si podríamos usar eso o no. Sólo voy a mecanografiar carro o podría mecanografiar motocicleta, ciclo, cualquier cosa. La única razón por la que busco auto o cualquier objeto en movimiento es que puedo demostrar cómo funciona exactamente esta parte, el punto de vista y el punto final Bien, aquí tengo esta animación en particular de la que puedo hacer uso. Iré a descargar, Guardar en espacio de trabajo. Sí, seleccione este proyecto como mi carpeta. Si deseas agregar otra carpeta, encontrarás que solo está disponible en la versión pro. Bien, ¿por qué no abrió un nuevo espacio de trabajo? Digámoslo otra vez. Idealmente debería abrir una nueva cinta desde donde podamos descargarla como archivo Json. Bien. Además, podría ser posible que hayamos agotado todos los créditos gratuitos que nos fueron asignados en la versión gratuita. No estoy segura. Voy a tener que averiguarlo. Sólo dame un momento y me pondré en contacto con ustedes. Bien, aquí estoy en mi tablero. Sólo puedo cambiarle el nombre a esto. Una vez hecho, descarguemos esto y voy a subirlo. Voy a seleccionar este lote archivo multimedia y voy a cambiar esto. Vamos a tratar de usar esto. Bien. Aún así creo que podría haber algún problema con la propia Lottie porque no está cargando la imagen Pero aquí puedes encontrar la pequeña caja cuadrada. Son las ruedas. El cuadro más grande aquí mismo donde mi cursor está flotando, es el auto en sí, y en el fondo tienes el paisaje Bien, ahora puedo hacer el punto de partida, digamos 50, y puedo hacer esto como 100. Ahora ¿qué pasa? Verás que este oso negro aparece aquí mismo. Entonces comienza después del 50% de la animación aquí mismo. Si hago click en esta animación aquí, tienes la gran torre dando vueltas, ¿verdad? Así que ese es el 50% de la duración de la animación aquí mismo. Encontrarías que en el fondo tienes gran rascacielos justo de ahí mismo, la animación comenzará y terminará al 100% Incluso podrías bajarlo que el punto final debería estar al 80% de la longitud de la animación Entonces estas son las cosas con las que puedes trabajar ahora mismo. Puede que no tenga sentido para todos ustedes ya que simplemente no podemos ver todos los paisajes Y el objeto que tenemos aquí, pueden jugar alrededor de la velocidad de su animación, ya sea que quieran que se ejecute en una x o 1.5 o dos x velocidad, eso simplemente acelerará la animación. Aquí tienes dos X y puedes ver qué tan rápido son las reglas de animación de animación. Si hago esto como 1.5 correrá algo así. Pero solo mantengámoslo como uno solo. Incluso podrías bajarlo para que la animación sea un poco más lenta. ¿Qué más tenemos? Podemos revertir esto. Ahora bien, qué es lo que hemos visto exactamente aquí mismo. Siempre que salgamos nuestro cursor fuera de la animación, la animación será inversa Algo similar se puede hacer. Aquí tienes opción de renderizado tanto si quieres que sea G o canvas. Si cambio esto a lienzo, entonces veamos qué pasa. Ahora, Canvas no es particularmente una buena opción para hacer, porque Wig es la que contendrá todos tus archivos necesarios, tus imágenes, y todos los diferentes tipos de cosas. También requerirá menos tiempo de carga en comparación con el lienzo. Bien, aquí tienes la opción Leasyload. Desseleccionaremos esta volviendo a esta parte, ahora dentro de estilo, puedes jugar con el ancho y establecer el ancho máximo para tu lote Aquí puedes cambiar si quieres darle algo de transparencia a esto o no. Si agrego algo como 0.19 entonces encontrarás que la animación es muy transparente No es muy opaco. Cuanto más muevas tu control deslizante hacia la derecha, más será visible tu animación aquí. Incluso puedes agregar filtros CSS, igual que cómo podrías hacer con una imagen. Todo bien aquí, solo puedo deshacer esto para que todo esté visible aquí. Incluso puedes agregar efecto hover y puedes cambiar la duración de la transición En la sección avanzada, puedes jugar alrededor del margen, ajustes de relleno y muchos tipos diferentes de cosas. 31. Resaltado de código: Bien, ahora como pueden ver, estoy aquí en la página de mi entrada de blog. Digamos que por alguna razón estás construyendo un blog relacionado con la codificación y te gustaría agregar fragmentos de código en tu entrada de blog En ese caso solo por dar un ejemplo como cómo en el sitio web de Javat point puedes encontrar que todos estos códigos están en formato de fragmento y tienen resaltada la sintaxis Algo similar se podría lograr en nuestro post de bloque de prensa también. Con solo regresar a nuestro sitio web, voy a hacer clic en una nueva caja flexible. Voy a elegir esta dirección aquí. Voy a añadir un nuevo elemento llamado como código resaltado. Déjame arrastrarlo y rop aquí mismo. Ahora, una vez que haga esto, puedes seleccionar entre diferentes idiomas. Justo aquí, el código que tengo sólo para comparar dos cadenas, bien, esto es en formato Java. Esto también es en Java. Lo que puedo hacer, sólo puedo copiar este código. Puedo volver aquí, en vez de Java script, puedo seleccionar Java. Pego el código. Una vez que pegue esto, encontrarás que todas estas líneas tienen, ya sabes, resaltado resaltado en diferentes colores. Puedes encontrar que la clase aparece en azul. El vacío estático público aparece en azul. El valor que aportamos a las variables S uno y S dos están en verde. Entonces la sintaxis principal, los valores de datos de cadena y las funciones print LN también están en rojo. Los comentarios están en formato gris. Esta es la sintaxis que tienes, ¿verdad? Y este es el tipo de resalte que ya pega, ¿verdad? El punto culminante que ya aplica. Ahora aquí encontrarás una palanca para cambiar entre mostrar los números de línea o no. Entonces, si desactiva esto, no encontrarías ningún número de línea como como no puedes encontrar ningún número de línea. Correcto. Pero si quieres agregar, puedes agregarlo aquí. Tienes copia al portapapeles. Eso significa, digamos, aquí estoy aquí, ¿puedo encontrar una opción para copiar al portapapeles A diferencia de los geeks, para los geeks, déjame regresar En lugar de Java t point, déjame solo buscar GFT, que geeks para geeks, tengo el código Javascript aquí mismo. Ahora aquí encontrarás un botón para copiar esto a nuestro portapapeles Si copio, puedes ver que el código ha sido copiado, pero no fue el mismo caso en Java T Point aquí, puedes agregar esto. Si llevo mi cursor dentro de este fragmento de código en particular, puedo encontrar la opción de copiar el Bien, ahora hagamos también un duplicado de esto en lugar de Java. Voy a hacer esto como Javascript. Lo más destacado sería un poco diferente. Permítame también copiar el código para Javascript. Voy a copiar y pegaré el código para Javascript. De esa manera encontrarás alguna sintaxis diferente correcta. Ahora, para esta parte donde tienes la copia al portapapeles, tienes números de línea También destacarás algunas líneas particulares. Tienes 13 guión seis. Ahora, ¿qué significa? Eso significa que estas líneas, línea número uno, línea número 3456, serán resaltadas Bien, déjame cambiar esto a otra cosa y es solo un marcador No es algún valor por defecto. Si agrego algo así como uno, se destacaría la primera línea. Si quiero que se resalte la línea número tres, solo puedo agregar y puedo dar la línea número tres. Si quiero que se muestre la línea número seis, puedo poner coma y línea número seis. Pero califíquense, quiero que los números de línea 456, los tres sean resaltados. Yo sólo puedo hacer cuatro guión seis de la línea cuatro a seis se resaltará Todo bien. Yo puedo hacer lo mismo, algo así como 325. Eso significa que estas tres líneas son donde estamos creando variables y agregando algo de valor a esto. Bien, así que hemos resaltado las líneas aquí, encontrarás una opción para agregar ajuste de palabras. Ahora bien, ¿qué significa envoltura de palabras? Aquí puedes encontrar que el código tiene, qué dices, comentario, que está ocupando todo el ancho. Y tenemos una barra de desplazamiento, barra de desplazamiento horizontal. Tenemos que desplazarnos esto para encontrar todo el asunto. Si alterno esta envoltura de palabras, encontrarás que ¿qué dices? comentario aparece de una manera que ya no necesitamos la barra de desplazamiento. Esto es lo que realmente significa envolver. Puedes desactivar esto para que obtengas tu barra de desplazamiento aquí. Puedes seleccionar entre los diferentes temas que tengas. Actualmente se establece en tema sólido. Si lo cambiamos a tema oscuro, tendrás color de fondo marrón y aquí tendrás texto en blanco. Si elegimos esto, Okada, esto es lo que verás Tenemos luz solarizada. Mañana tenemos crepúsculo. Ahora, mañana es algo similar a lo que podemos ver aquí mismo en Geeks Ja fragmento de código de script Se puede ajustar la altura, se puede ajustar el tamaño de la fuente. Si bajo mi altura a algo alrededor de 115 píxeles, también encontrarás la barra de desplazamiento vertical. Tendrás que colocar el cursor del mouse dentro del fragmento de código y luego tendrás que usar tu rueda de desplazamiento para desplazar bien el código Puedo deshacer esto para que tome una altura suficiente aquí, se puede aumentar o disminuir el tamaño de la fuente. ir a la pestaña de estilo, no tienes estilo, has avanzado. Ahora, avanzado obviamente va a mostrar las mismas cosas que podemos ver para todos los demás elementos. 32. Integración de Paypal y Stripe: ¡cobra pagos fácilmente!: Chicos, ahora vamos a aprender cómo podemos aceptar pagos usando el botón Paypal y Stripe. Ahora estos dos botones, permítanme solo buscar esto y mostrarles a todos. Aquí tenemos dos botones, Paypal y Stripe. Estos dos botones nos permiten como propietarios del sitio web, cobrar pagos, ya sea para simplemente recolectar donaciones o configurar tu pasarela de pago para vender tus productos o servicios. O podría estar ofreciendo una suscripción sin tener la necesidad de entender y usar Vo Commerce. Justo aquí estoy en mi página de bloqueo. Y agregaré una nueva sección y una nueva caja flexible estará en dirección vertical, ¿verdad? Agreguemos el botón Paypal. Primero aquí, solo lo arrastraré y soltaré. Ahora bajo contenido, primero encontrarás los precios y pagos. Debajo de esto, encontrarás cuenta Paypal. Simplemente ingresas a tu cuenta Paypal, ya sea tu Paypal personal o comercial. Simplemente ingresarás el correo electrónico que utilizas tu Paypal. Obviamente, si eres usuario de Paypal, debes saber que el correo electrónico de la cuenta debe estar aquí. En el tipo de transacción, tienes un montón de opciones diferentes como pago, donación, suscripción. Primero veamos acerca de la caja. Digamos que estoy tratando de vender un ebook. Sólo puedo llamar al nombre del artículo para que sea libro. Entonces tengo SKU, que significa Unidad de mantenimiento de existencias, lo que básicamente significa que, digamos que estás vendiendo un producto físico en tu inventario, tienes alrededor de 50 artículos. Si pones 50 por aquí, eso significa que la venta máxima que puede ocurrir es por 50 veces. Bien, si estás vendiendo un producto digital y quieres vender esto solo por un número limitado de usuarios, entonces también, puedes establecer esto como SKU y puedes darle el número bien. Se puede fijar el precio. Depende de ti, lo que quieras quedarte. Digamos que me quedo con 20 dólares y esto está en USD. Se puede cambiar la moneda a dólar australiano, euros y así sucesivamente. Se puede cambiar la cantidad. Ahora bien, esta cantidad es básicamente cada vez que alguien hace clic en el botón Paypal. ¿Cuántos artículos deben agregarse en su tarjeta o cuando compran? ¿Quieres que los usuarios compren dos o tres artículos cada vez que hacen clic en el botón de compra o es solo una cantidad? Sólo vamos a mantener esto como uno solo. Y luego tienes un precio de envío. Puedes agregar esto. Digamos que estoy sumando 5 dólares de envío. Estoy agregando impuesto de alrededor del 5% 5% de $20 sería $1.01 más cinco que es el precio de envío, será de $6 Ahora que $6 se agregarían al precio de venta del artículo que es 2020, más seis serían $26 Bien, aquí en la parte del botón, encontrarías que puedes cambiar el texto. Digamos que en lugar de comprar, ahora te gustaría quedarte con algo como compra. Bien, entonces puedes establecer la alineación para el botón. Aquí se deja una línea. Puedo cambiar esto a centro, o podría escribir una línea, o puedo justificarla de tal manera que ocupe todo el ancho. Bien. Aquí puedo cambiar el logo o icono de Paypal a otra cosa simplemente haciendo clic en él y asegurándonos de que subamos el nuestro propio. O podemos elegir los que ofrece Fontawesome. Pero ahora mismo lo voy a mantener tal como está. Puedo hacer clic en esto para eliminar el icono, o podría subir el mío propio. Aquí en posición de icono, puedo ver que el icono papal aparece antes del texto Si cambio esto a después del texto, vea este icono papal aparece después del texto Solo volvamos a antes del texto. Y luego tienes espaciado de iconos. Si mueves el control deslizante, verás que hay cierta brecha entre tu icono y tu texto. Bien, aquí tienes ID de botón usando cual puedes rastrear cuántas unidades se venden y así sucesivamente. Entonces tienes opciones adicionales. Ahora bien esto es importante, importante en el sentido de que digamos que una vez que un usuario completa el proceso de pago y esa transacción fue exitosa, ¿a dónde quieres redirigir al usuario? Puedes agregar una página de agradecimiento en tu sitio web o una página dinámica donde puedes agregar una etiqueta dinámica mediante cual se les mostrará una factura por su compra. Puedes agregar eso ahora mismo. Solo usaré citar URL, que es la página de inicio. Aquí lo encontrarás. Abre Paypal en una nueva pestaña. Siempre que alguien haga clic en él, Paypal se abrirá en una nueva cuenta. Aquí tienes sandbox también, que veremos en tan solo un momento Pero permítanme cubrir lo que significan los mensajes personalizados, si alterno esto. Digamos que hay algún error. Verás que se ha producido un error. Pero si la cuenta Paypal no está conectada desde el punto de vista del vendedor , se mostrará. No hay método de pago conectado, póngase en contacto con el vendedor. Ahora aquí tenemos sandbox. ¿Qué significa si enciendo esto? Encontrarás cuenta de correo electrónico sandbox. Y dice que esta es la dirección que te ha dado Paypal. Cuando configuras un sandbox con tu cuenta de desarrollador, puedes usar el sandbox para probar tu flujo de compras Sandbox es solo una palabra para explicar que estás trabajando en un entorno de prueba en Paypal mismo Cuando inicias sesión, tienes la opción de ir a developer.paypal.com Una vez que inicies sesión, puedes ir a herramientas de prueba en puedes ir a herramientas de prueba Obtendrás dos cuentas predeterminadas aquí. Tengo estos tres. Si quiero crear una nueva cuenta, simplemente voy a hacer clic en este botón y encontrarás que puedo crear una cuenta personal o una cuenta comercial. Y puedo elegir la región. Si pongo esto como Estados Unidos de América, sólo puedo aceptar los pagos en dólares estadounidenses. Justo una vez que creo la cuenta, puedes ver aquí mismo, se crearía la cuenta de negocios. Simplemente puede hacer clic en la cuenta aquí mismo, el enlace que está ahí. Y necesitas copiar el correo electrónico y volver a tu parte y pegar la cuenta de correo electrónico de sandbox en este marcador de posición. Bien. Ahora como estamos usando un archivo zip del elemento o pro, y en realidad no estamos confiando en un elemento o suscripción, este sandbox no funcionaría Lo que haría, simplemente ingresaré a mi propia cuenta personal de Paypal para ver si el pago funciona o no. Solo dame un momento hasta que ingrese mis datos de Paypal. Ahora voy a publicar. Una vez que publique, sólo voy a previsualizar los cambios. Ahora bien, si me desplazo hacia abajo y si hago clic en el botón de compra, encontrarás que seremos redirigidos a una nueva pestaña donde vimos que había alguna pasarela de pago dando vueltas Pero estamos bloqueados fuera del sistema, vuelva a cerrar la sesión. Y les voy a mostrar a todos cómo funciona aquí. Como puede ver en la tarjeta, se supone que debemos pagar $26 $20 es por el precio de venta del artículo $5 es para el envío y $1 para el total de impuestos es 26. Derecha. Vamos a cancelar esto. Puedes usar tu sandbox. Al llegar a la sección de estilo, puedes cambiar la tipografía Se puede cambiar la sombra del texto. Puedes agregar algunos colores de fondo si quieres. Puede agregar radio de borde. Incluso podrías agregar algunos otros mensajes. Los mensajes que tengas, el mensaje de error y el Paypal no conectado. Se puede cambiar el color de la misma y la tipografía también fina. se puede hacer algo similar para el botón de raya. Solo buscaré el botón de raya, solo lo colocaré debajo de este, y aquí volverías a encontrar el nombre del producto, solo volveré a mi botón de Paypal para mostrar ese otro tipo de transacción. Aquí tenemos check out. Primero, analizamos el tipo de transacción de pago, lo que significa que estás vendiendo en un servicio por la tarifa única. Entonces tienes donación. Ahora una vez que haces clic en la donación, ¿qué pasa? Puedes elegir el nombre del artículo aquí. Sería donación, obviamente. Ahora como esto es donación, no estás vendiendo nada. Simplemente estás aceptando pagos y no queda stock alguno en tu inventario. Simplemente puedes darle a SQ algo así como N uno, solo dos, solo para asociar donación. Con esto, entonces tienes monto de donación. Ya sea que quieras cobrar montos fijos de donación o quieres que sea cualquier cantidad. Si quieres que sea flexible para los usuarios paguen cualquier cosa que puedan. Esto es lo que puedes seleccionar, luego tienes una suscripción. Una vez que hagas clic en él, puedes elegir el nombre del artículo. Digamos nivel básico, ¿verdad? Analizamos los tres niveles de precios en la tabla de precios. Conferencia aquí mismo. Simplemente puedes darle el nombre a tu servicio. Puedes establecer el SQ en algo así como nivel básico. Y puedes fijar el precio. Además, digamos 50 dólares es lo que pagarán mensualmente. O podrías configurarlo diariamente, semanalmente o anualmente. Y también hay función de renovación automática. Cuando alguien hace clic y compra e ingresa sus datos de Paypal, se le cobrará mensualmente, diariamente o semanalmente. Si quieres que esto sea una renovación automática desactivada, entonces no creo que tenga sentido hacer de esto una suscripción. La única diferencia sería que una vez que hagas de esto una suscripción y no tengas la función de renovación automática, básicamente significa que estarás deteniendo el acceso al servicio al que tu usuario tendrá acceso para que tenga que realizar el pago. Nuevamente, si haces esto como renovación automática básicamente significa que el usuario no tiene que ingresar los datos de Paypal una y otra vez. Bien. Estas son pocas cosas en tu botón de Paypal llegando a este botón de raya, si vas aquí, puedes establecer el nombre del producto. Vamos a darle a esto algo así como libro otra vez, libro. Puedo fijar la moneda a otra. Aquí tengo un montón de opciones diferentes. Antes no vimos INR que es rupias indias para Paypal, pero ahora para Stripe sí tenemos esta opción Entonces tienes precio del producto. Puedes configurarlo algo otra vez, $20 Puedes establecer la cantidad. Puedes establecer el precio de envío. La tasa impositiva. Pero para la tasa impositiva tendrás que conectar primero tu cuenta de Stripe y dentro la cuenta Stripe tendrás acceso a los productos. Para ese producto en particular, es necesario establecer las tasas impositivas. Todo bien. Te voy a mostrar como podemos hacer uso del sandbox o debería decir probando API de stripe Esto funcionará con este archivo en particular de nuestro Elementor Pro sin tener la necesidad suscribirse a la suscripción elementor Pro Viniendo a la parte del botón aquí, puedes cambiar el botón a algo así como, digamos compra. Puedo volver a poner la alineación, izquierda, derecha, centro, justificada. Bien, sólo puedo hacer que el centro se alinee. Puedo cambiar el icono. Puedo configurar si quiero que se muestre el icono o antes del texto, puedo elegir el espaciado de los iconos aquí. En las opciones adicionales, puedo elegir la redirección después del pago exitoso Aquí puedo establecer la URL. Aquí tenemos abierto Stripe en una nueva pestaña, mensajes personalizados. Aquí ha configurado el entorno de prueba de rayas. Si alterno esto, verás que primero tendremos que ir a la configuración de integración. Si vuelo el cursor alrededor de esto, verás que abrirá un nuevo enlace en nuestro panel de Wordpress aquí mismo debajo de Panel de Wordpress, encontrarás que estamos en Elemento o Configuración En Configuración, hemos seleccionado integraciones. Ahora, una vez que haya seleccionado integraciones, simplemente desplácese hacia abajo hasta la parte donde encuentre Stripe y bajo la clave secreta de prueba, debe pegar su clave API Así que sólo voy a volver a mi tablero de Stripe. Primero necesitas crear una cuenta. No lleva mucho tiempo crear tu cuenta. No tienes que ingresar un montón de tus datos personales y esperar a autorizar e iniciar tu cuenta. Simplemente puede comenzar con él y solo necesita ir a la configuración de su panel de control. Una vez que vayas allí, encontrarás la puñalada de clave API. Simplemente haga clic allí y revele su clave de prueba. Y cópielo y pegarlo aquí mismo bajo esta clave secreta de prueba. Una vez que hagas eso, simplemente haz clic en API de prueba válida. Aquí solo puedes publicar esto. Ahora bien, una vez que publiques esto, ¿qué pasará? A ver si hago clic en el bloque dos. Una vez que me desplace hacia abajo, puedo dar click en este checkout de raya y se puede ver $20 de libro es lo que podemos ver. Esto está en modo de prueba, bien. Aquí puede ingresar los datos de su tarjeta de correo electrónico del titular de la tarjeta y así sucesivamente. Bien, solo volveremos y sí, básicamente esto fue por tu compra de rayas. La única diferencia está en raya y Paypal es que Paypal te permite seleccionar otras opciones así como suscripción de donación o compra única. Pero para Stripe solo puedes vender un producto. Si quieres vender creo membresía o algo por el estilo. Tendrás que cambiar la configuración dentro de tu propia cuenta de Stripe. Porque aquí mismo, como puedes ver debajo de tus precios y pagos, primero tendrás que configurar tus productos y luego seleccionar las tasas impositivas y así sucesivamente. Actualmente, Element o Pro no te permite como diseñador y desarrollador del sitio web agregar la funcionalidad de donación y suscripción para los botones de raya, Pero puedes hacerlo para el Paypal. 33. Hotspot - ¿Has oído hablar de esto antes?: Bien, ahora déjame mostrarte una característica genial que se llama punto de acceso. Entonces, ¿qué significa? Entonces digamos que tengo una imagen, preferiblemente de un mapa o un producto. Y para eso, digamos en un mapa tienes múltiples ubicaciones y solo estás tratando mostrar eso donde se encuentran tus oficinas o tus tiendas. ¿Correcto? Para que puedas agregar hotspots para que cada vez que alguien haga clic en ese punto caliente o pase el cursor alrededor de él, entonces encuentre la dirección del Déjame mostrarte un ejemplo de ello. Sólo puedo elegir una imagen. Tengo esta foto realmente genial de PC para juegos configurado aquí mismo. Puedo agregar algunos puntos calientes sobre. No obstante, podemos ver si este producto es una silla gaming. Este es un mouse para juegos. Tenemos almohadas, tenemos teclado. Tenemos una computadora que es cuatro en la parte inferior, o cartel de la misma, puedo ver. Entonces tienes monitores externos, Tienes controlador en la parte posterior. Tienes los Funko Pops y las espumas insonorizadas al Derecha. Puedes agregar hotspot aquí y el contenido que encontrarías imagen, puedes elegir el tamaño de la imagen. Puede establecer la alineación izquierda, derecha, centro, y así sucesivamente. Pero por ahora solo está ocupando todo el tamaño del contenedor bajo punto caliente. Podrías agregar un punto caliente o varios. Sólo puedo agregar múltiples hotspots. Pero no se podría ver ahora mismo. ¿Por qué? Porque creo que el color y la forma en que se fija no es visible para nosotros. También veremos cómo podemos hacerlo. Actualmente, he agregado dos hot spots, lo cual no es suficiente para nosotros. Necesitamos 1231 para nuestra silla gaming, uno para almohadas, tercero para el monitor, cuarto para el teclado, quinto para el mouse, seis para lo que dices el teclado mouse pad Entonces tienes para la PC de escritorio, eso sería 12345678, Funko Para el formulario, tenemos diez, agreguemos diez de ellos. 4,567,899.10 Bien, puedo agregar animación, pero no podrías encontrar la animación por aquí Lo que tendremos que hacer, sólo vamos a ir al estilo. Iremos al punto caliente. Bajo punto caliente, se puede ver que no se ha asociado ningún color. Tendremos que elegir un color brillante para que sea visible. Voy a seleccionar algo como el blanco. ¿El blanco sería visible? Yo creo que sí. O podríamos poner esto en algo así como naranja. O podemos agregar otra imagen también. Primero, sigamos con esta imagen y veamos si esto funciona o no. Primero tenemos el punto caliente blanco. Todo bien. Podemos usar esta o podría agregar algo así como una naranja sería naranja visible. Sí. ¿Qué pasa si elegimos otro color? Solo estoy tratando de jugar porque la imagen en sí tiene muchos colores porque tiene una tira RGB en el fondo. Hay muchos colores en la propia imagen. Por lo que se vuelve realmente difícil agregar hot spot porque entonces no sería muy fácil de identificar desde la perspectiva del usuario. Tratemos de darle esto como un punto caliente blanco. Ahora una vez que haga esto, solo puedo ir a Imagen aquí debajo de Hot Spot, tenemos múltiples. Si hago clic en alguno de los puntos calientes aquí, puedo agregar etiqueta. Puedo cambiar la posición de la misma. También puedo agregar un enlace. que significa que si agrego etiqueta algo así como digamos silla Gaming. Se puede ver aquí mismo tengo la etiqueta que es Gaming Chair. Bien, ahora puedo agregar un enlace para que cada vez que alguien haga clic en él, sean redirigidos a enlace externo o enlace interno Puedo agregar icono para este hotspot. Actualmente este punto caliente no tiene ningún ícono, pero con solo el ícono o cargando el nuestro propio, podrías establecer el tamaño personalizado de este punto caliente Puedes cambiar la altura, puedes cambiar el ancho, o podrías restablecerlo con solo desconectarlo. Puedes agregar contenido aquí. hay una diferencia entre la etiqueta Aquí hay una diferencia entre la etiqueta y el contenido. Si tengo esto como la silla gaming, puedo agregar algo así como puedo ver el nombre de la marca. Solo puedo agregar nombre de marca, Secret Lab, silla Gaming, color blanco. Esta es la descripción del producto. Ahora, ¿qué pasa si vamos a la parte de estilo? Bien, aquí tienes punta de herramienta también, que solo cubrirá en un momento. Si voy a la pestaña de estilo en Hot Spot, puedo cambiar diferentes animaciones. Puedo cambiar diferentes animaciones para hotspot. Si alguien se cierne sobre él, ¿quieres mostrar el texto del hotspot o quieres que se pueda hacer clic para que puedas elegir entre diferentes opciones Bien, déjame ir a punta de herramientas y ver Trigger is on click actualmente. Si configuro esto para que se cierte, lo encontrarás. Si pongo el cursor sobre la silla gaming, encontrarás esa silla gaming Secret Lab White El color es texto que se muestra justo debajo de nuestro punto caliente. Aquí tienes el efecto puedes establecer la posición del Tooltip, ya sea que quieras mostrar el texto del contenido en la parte superior de tu etiqueta, o en la parte inferior, o en la derecha, o en la izquierda Puedes configurarlo como quieras. Puedes configurar la animación, ya sea que quieras que se desvanezca, se desvanezca, quieras que se desvanezca, crezca. Si yo dijera esto, se puede ver. Aparece así. Si se desvanece por dirección, así es como va a salir. Si se desliza por dirección, se puede ver que se desliza hacia arriba y se desliza hacia abajo. También puedes establecer la duración de la animación. Si voy al estilo bajo hot spot, puedo el tamaño de nuestra etiqueta, el hot spot. Puedo seleccionar el ancho mínimo y altura mínima para nuestro punto caliente. Tiene cierta altura. Todo bien. También puedes agregar color de caja. ¿Qué significa si agrego algún color de caja? Puedes ver aquí mismo, si tengo silla gaming con algún color de caja, encontrarás que este es nuestro punto caliente, esta es nuestra etiqueta. Si flojo, ahí es cuando verás bien el contenido. Puedes establecer el relleno, puedes ajustar el radio del borde para esto. Incluso podrías agregar sombra de caja por ahora. No queremos ningún color de caja, solo vamos a aclarar esto. También estableceremos el tamaño a lo que sea ahora mismo. Iremos hasta aquí. Puedes cambiar la configuración de la imagen a algo así como me gustaría bajar la transparencia o me gustaría desplegar donde está sus filtros CSS de imagen. Me gustaría bajar la saturación a cero para que obtuviera imagen en blanco y negro. Ahora por aquí, sería fácil cambiar el color del punto caliente y el texto mismo. Justo debajo de la punta de la herramienta, puede seleccionar el color del texto. Si pongo esto a algo así como rojo, veamos qué pasa. El color del contenido, el texto se ha cambiado a rojo. Puedo establecer la tipografía. Incluso puedo cambiar la alineación, e incluso puedo agregar alguna caja fina, y puedo cambiar el color de la caja. Aquí encontrarás que hay alguna caja para nuestro contenido. Esto es lo que queremos para el resto de los artículos. Vamos a tratar de hacerlo. Voy a ir aquí, de vuelta otra vez. En el contenido de este hot spot, el que tenemos para la silla gaming, solo voy a quitar la etiqueta, porque queremos que solo aparezca este botón, ¿verdad? Este efecto pulsante. Bueno, cambiaremos la posición solo hacer clic en posición en lugar de contenido. Y puedo establecer el desplazamiento, ya sea que quiera que sea hacia la derecha de la imagen o hacia la izquierda. Queremos mostrar esto justo encima de la silla para juegos, a la derecha, o simplemente en la silla para juegos. Bien. Aquí es donde podemos establecer la orientación vertical. Ya sea que queramos que sea superior o inferior, podemos establecer esto. Pero ahora mismo sólo me gustaría mantener esto como top. Puedo seleccionar la animación. Quiero que la animación de este punto caliente sea de ritmo suave, superposición expandida, o ninguna. Eso va a pasar por el círculo que tienes aquí mismo. Bien, déjame volver al estilo. Cambiaré el color del punto caliente a algo así como rojo, o digamos simplemente naranja para el caso. naranja se vería bien. Creo que aquí podemos agregar algo así como un naranja brillante. Bien, déjame ir aquí. Seleccionaré naranja brillante. Bien. De vuelta aquí bajo punto caliente, seleccionaremos el artículo. Pasaremos a la posición en la que se establecería una animación para expandirse, bien. O incluso dijimos esto a latido suave, correcto. Has secuenciado la animación, lo que significa que podrías, digamos que tienes múltiples animaciones dando vueltas para tu punto caliente Hay uno, hay dos, hay tres. Por lo tanto, puede configurar esto en el sentido de las agujas del reloj. Primero aparecerá esta animación, luego aparecerá este punto caliente. Entonces por aquí aparecerá el punto caliente y así sucesivamente. Eso es lo que es la animación de secuencia. Volviendo a la parte Tooltip aquí, puedes activar el disparador o hacer clic aquí tienes la animación para el contenido, para este botón de punto caliente de aquí, podemos seleccionar las otras cosas También si queremos ahora para el contenido que tenemos, puedes ver que está apareciendo fuera de nuestra imagen. No queremos que eso suceda. ¿Qué podemos hacer en ese caso? Simplemente deslice el tamaño del punto de acceso circular no sería visible. Este es el tamaño de esto. Viniendo a la parte donde queremos cambiar el texto. Para este texto donde aparece algo poco fuera del punto caliente, tendremos que pasar por debajo Content Tooltip y cambiar la posición en lugar de arriba Podemos cambiar esto a aquí mismo. Aparecerá algo así. Bien, déjame hacer un duplicado del punto caliente aquí. Tengo este otro también, pero voy a cambiar la posición. El otro punto caliente aparecería justo aquí mismo en la parte del monitor. Bien, voy a cambiar el contenido a algo así como Monitor externo, bien. Monitor externo solo para esto. Para ello veremos la silla gaming y así sucesivamente. Puedo hacer que este texto de punta de herramienta aparezca en la parte superior si quiero simplemente yendo a la posición. Y puedo poner dentro de Tooltip, puedo poner esto al principio. Aquí es como mostrará el texto. Puedes hacer esto para todos los demás artículos. Además, puedes simplemente jugar y ver qué funciona mejor para ti. Esto esencialmente puede ser útil cuando realmente está tratando de mostrar diferentes características de su producto. O simplemente tratando de mostrar las diferentes oficinas y diferente ubicación de sus tiendas en todo el mundo. 34. Haz maravillas con Elementor AI: Chicos, el video que todos ustedes han estado esperando finalmente está aquí. Veamos cómo podemos hacer uso del elemento o característica I. Ahora bien, elemento o yo se encuentra actualmente en modo beta en este momento en el que estoy grabando este video, lo que básicamente significa que no todas las funciones funcionarán. Puedes ver aquí mismo tenemos la beta, lo que básicamente significa que no todas las características van a estar funcionando perfectamente bien. Algunos de ellos podrían funcionar bien y algunos de ellos podrían no solo funcionar. No obstante, elementor acaba de lanzarlo para público, y están cobrando dinero por ello Pero ya veremos, y también veremos al final eso ya sea aunque valga la pena o no, porque sé que hay tantas herramientas de IA gratuitas por ahí en el mercado. En primer lugar, el chat GPT ha dominado el mercado de IA. Entonces tenemos el powered de Google, el Bing de Microsoft. Y creo que a Google también se le está ocurriendo Mini, ¿verdad? Hay tantos elementos I y herramientas por ahí. Ahora bien, ¿cómo se destaca la IA de elementor en comparación con las otras herramientas de IA Entonces, ante todo, elemento o IA, ayuda en la generación de texto, lo que nos permite agregar animaciones a nuestros elementos, agregar CSS personalizado, y luego editar imágenes y cambiar los diseños radientes de fondo Primero hagamos clic en el editor de texto aquí mismo. Lo que voy a hacer es simplemente darle indicaciones específicas a elemento o IA, que genere texto a alguien para nuestro sitio web Ahora podríamos hacer lo mismo con ChagBT, pero lo que dice elementor, básicamente entiende de qué se trata tu sitio web Si acaba de agregar algunos elementos en su sitio web, entonces entiende el diseño y entiende lo que necesita el contenido. De esa manera le dará una salida específica para sus necesidades. Vamos a Prost elementor.com y aquí mismo encontrarías un montón de Aquí tienes indicaciones específicas para imágenes, código de texto y para construir contenedores Vayamos a Text part aquí mismo. Si me desplazo hacia abajo, voy a ver una parte que dice hacer una descripción con tres párrafos. Ahora cuando hago clic en Copiar prompt, sólo puedo volver aquí y bajo este editor de texto, sólo puedo hacer clic en Write It With AI. Ahora bien, una vez que haga clic aquí, encontrará que puede llevar algún tiempo. Y por cierto, esta función solo será accesible para aquellos que hayan conectado su cuenta de Google o hayan creado su cuenta en Elementor, y se hayan conectado con el sitio web Y se te dará acceso gratuito a Element, o IA, por un periodo de tiempo limitado. Una vez que se acabe ese periodo de tiempo, tendrás que pagar la cuota de suscripción. Justo aquí. Yo sólo voy a dar el paso rápido. Ahora bien, si notas aquí, verás que el prompt dice: Toma una decisión porque, entre corchetes, tienes el nicho para el que está construido el sitio web está construido el sitio web y que contiene tres párrafos. Así que volvamos aquí. Voy a cambiar esto a, ya que sabes que la razón por la que construimos este sitio web fue para promocionar una aplicación, una aplicación de pasarela de pago. Haremos una descripción para aplicación de pasarela de pago para tal como podemos decir como cuando más para que la gente pueda pagar internacionalmente para que la gente pueda realizar pagos a nivel internacional y nacional sin tener o podría decir muy fácilmente Todo bien. Y eso contiene sólo un párrafo, ¿verdad? Vamos a generar el texto. Podría llevar algún tiempo dependiendo del tipo de contenido que quieras que genere. Vamos a esperar. Y por cierto, todas las funciones que usarás consumirán pocos créditos. No estoy muy seguro de cuántos créditos se asignarían para la versión gratuita, pero solo puedes ver aquí mismo, encontrarás que muestra un párrafo realmente grande. Simplemente podemos hacer clic en esto para que sea más corto solo porque queremos que el contenido se ajuste a nuestra sección de héroes. Aún así es demasiado largo. Permítanme darle un clic de nuevo para que sea más corto. Bien, y aquí tenemos una pasarela de pago es una solución segura y rápida para Bo Domestic y todo este tipo de cosas. Es la elección perfecta para individuos. Si podemos saltarnos esta línea, creo que hasta este punto es bueno. Vamos a copiar. En lugar de copiar y pegar, podemos simplemente eliminar la última línea Y podemos simplemente dar click en Nosotros Texto para que se aplique aquí mismo. Bien, así es como funciona la parte del texto. Publiquemos este sitio web. Viniendo a los botones aquí mismo. Debajo de este texto, tenemos dos botones, ¿no? Veamos si tenemos alguna característica de IA Para el botón, solo buscaré el código. Bajo código, buscaré botón. Bien, déjame buscar botón. Vamos a. Página. Aquí tienes éste. Botones encendidos, gira y el texto se mueve sobre cómo podemos hacer uso de esto. Vamos a copiar este aviso. Volveré a mi página web. Ahora, ya que este botón Más información no tiene un icono, simplemente haremos clic aquí, biblioteca de iconos. Y podemos elegir cualquiera de ellos. Ya que esto es aprender más, podemos simplemente dar click en la flecha. Requerimos una flecha, bien. Creo que este icono de flecha quedaría bien. Insertemos esto aquí mismo. Bien, esto se ve bien. Ahora para usar este prompt, tendremos que ir a Avanzado. Desplázate hacia abajo hasta la parte de CSS personalizado aquí mismo. Encontrarías Editar con IA. Aquí pegaremos el prompt. Bien, vamos a generar el código para esto. Ahora va a generar un código CSS, que lo usaremos. Podemos cambiar pocas cosas. Si eres experto en CSS, bien. Aquí tenemos esta cosa. Simplemente podemos hacer clic en Insertar. Una vez que insertemos esto, veamos aquí. Puedes ver así es lo genial que se ve nuestro botón. Publiquemos esto. Bien, ¿qué otra cosa podemos hacer con esto? Aquí tenemos imagen y tenemos contenedores parte. Derecha, bajemos e intentaremos manipular nuestras imágenes y cambiar el efecto de fondo para esta sección. Para esta sección, como puedes ver, tenemos una superposición de fondo. Hay color blanco, y hay color verde. Todo bien. Ahora bien, este esquema de color va en una parte de degradado. Tiene un gradiente lineal, creo, permítanme seleccionar aquí esta sección. Puedo ir al estilo. Aquí puedes ver la ubicación para el primero es 35% y el segundo es del 100% Intentemos cambiar esto. ¿Qué podemos hacer en este caso? Sólo podemos buscar tres ingredientes finos. Lo que esencialmente encontrarás es que hay tres colores y se animarán en el fondo. Vamos a copiar el aviso. Vamos a ir aquí bajo Avanzado. En Avanzado primero seleccionaremos CSS personalizado Editar con IA. Asegúrese de que está seleccionado el contenedor, el contenedor de fondo, el diseño de la caja flexible y pegue el mensaje. Enderalicemos el código CSS en cuestión de pocos segundos. Solo podemos generar todo el código CSS. Ahora puedes encontrar que ha estado usando algún color por defecto, podemos cambiarlo. El color que he seleccionado en realidad es este. Déjame seleccionar este color. Lo pegaré aquí mismo. Bien, sólo voy a seleccionar esta parte. Yo lo pegaré. Este es mi segundo color. Voy a pegar esto también, el tercer color. Bien. Vamos a copiar. Lo pegaremos aquí mismo. Ahora bien, si publicara esto, encontrarías que está haciendo uso de los colores verdes. Podemos ir a la parte de estilo, Podemos alternar esto apagado. Encontrarías que así es como funciona todo el fondo. Debido a que teníamos el estilo de degradado, se superponía con el CSS personalizado. Por eso la animación y el degradado de color de tres radián no estaba siendo tan efectivos Pero ahora se puede ver, esto es genial de ver. Bien, volvamos aquí. Se pueden construir otras cosas, podemos jugar alrededor de las imágenes. También, tengo esto, podría cambiar esta imagen por otra cosa. Pero déjame desplazarme hacia abajo o sí, algo alrededor de esta parte donde tengo la imagen de este tipo. Bien, solo reemplazaré la imagen de este tipo esta imagen donde hay algunos antecedentes. Y trataremos de eliminar el fondo para esta imagen. En Elegir imagen o además de esta elegir imagen. Tenemos a Erit con IA aquí. Voy a seleccionar esto y eliminar Fondo. Bien, sólo voy a hacer clic en él. A pesar de que existe un sitio web llamado This Removed Dog, donde simplemente puedes subir cualquiera de nuestras imágenes y se eliminará el fondo. Nos da un resultado bastante preciso. Se está tomando algún tiempo y se puede ver que es muy preciso, diría yo, simplemente porque el fondo para la imagen que usamos era llano y tenía algún color de fondo sólido. No estoy muy seguro de si hubiera habido algunas imágenes u objetos más en el fondo qué tan bien habría funcionado. Pero por ahora, vamos a tratar de usar esta imagen. A ver si funciona. Obviamente, va a utilizar esta imagen en esta sección. Así es como se ve la sección. Bien, por la parte de las imágenes, podríamos incluso cambiarlo a otra cosa si tengo una imagen algo así. Déjame sacar a colación una nueva imagen, la imagen del producto. Intentemos hacer uso de la imagen del producto. Justo aquí. Bien. Aquí tengo esta imagen. Sólo puedo elegir esta imagen. Puedo cambiar el producto en sí. Podría agregar variaciones. Puedo describir qué variación o cambio quiero en el producto. Podría decir que la imagen es de pelo. Cuidados. Y así la imagen de la imagen contiene imágenes de productos de jabones acondicionadores para el cabello Nos gustaría sustituir estos productos. Nuevamente, no está mostrando muchas variaciones, diría yo en términos de variaciones de la imagen. No está funcionando tan bien porque conozco y otras herramientas como mid journey también muy en una etapa beta. Obviamente no podemos esperar maravillas del elemento. O dejemos esto y podríamos reemplazar esto de nuevo con lo que habíamos usado antes, que es el cielo. Bien, ¿qué nos queda? Intentemos ver cómo podemos generar un nuevo contenedor aquí. En lugar de hacer clic en el plus donde tenemos que construir todo el contenedor y toda la sección desde cero o imputar una nueva plantilla Intentemos generar una nueva sección usando IA Aquí, simplemente podría hacer clic en ese botón de IA y nos está pidiendo que ingresemos algunas indicaciones sugeridas Ahora quiero que seas muy específico sobre tus indicaciones por ahora Acabo de escribir todo el prompt y he dividido mis prompts en términos de qué diseño, qué tipo de esquema de color quiero seguir, qué tipo de tipografía quiero seguir, qué tipo de imágenes me gustaría, qué tipo de acciones de CTA y elementos de CTA quiero, qué tipo de animaciones me gustaría, qué tipo de marca quiero mostrar a Todo este tipo de cosas que en realidad ya he escrito. Simplemente puede tomar la ayuda de Cha GPT y crear un mensaje que nos ayude a crear indicaciones para Element o AI para crear un nuevo contenedor Digamos que una empresa de productos, bien que estés construyendo una sección de héroes, eso es a lo que puedes ingresar. Simplemente pegaré todo el prompt, y voy a dar click en Generar. Veamos qué tipo de contenedor aparece, porque creo que el diseño es muy visual. No se puede explicar en términos de palabras. Por eso existen productos como Dvd y Figma. Y tienen características colaborativas para que las personas puedan trabajar en colaboración en lugar de escribir y explicar qué tipo de trabajo esperan el uno del otro Aquí puedes ver que está apareciendo cosas muy, muy básicas. Hay dos contenedores. El tiene todo el texto. En cuanto al texto, no tengo ninguna duda de que va a sobresalir porque propio St GBD y el propio modelo GBT, es muy bueno en cuanto a texto, pero en cuanto a imágenes y en cuanto a la animación y maquetación, lo es, no está proporcionando ningún resultado exacto Podríamos simplemente eliminar esta parte o cuál sería la mejor manera de importar cualquiera de las plantillas de premate ya sea del bosque temático o haciendo uso de las plantillas elementor pro Espero que hayan disfrutado de esta conferencia. Hay muchas otras cosas que ese elemento podría mejorar en términos de IA. Veamos si en el futuro podrían mejorar y desplegar la versión adecuada del elemento. O yo para público. 35. Notas finales: Chicos. Ahora antes de que terminemos este curso, solo me gustaría discutir algunas de las cosas que quizás nos hubiéramos perdido. Justo aquí, estoy en mi panel de Wortress y bajo Elementor tenemos algo llamado Cuando vayamos aquí mismo, encontrarás en pestañas generales que hay algo llamado modo seguro. Ahora bien, esto puede ser útil cuando, digamos que estás usando algunos de los complementos, o tal vez has importado un tema del tema para nosotros o cualquiera de los mercados temáticos y tu sitio web se rompe para depurar los problemas Simplemente podría habilitar el modo seguro usando el cual identificará qué enchufe en particular o qué es exactamente lo que está causando que su sitio web se rompa, y luego puede depurar. Entonces ese es un aspecto importante para usar el modo seguro. Después llegando a la parte de control de versiones, aquí puedes retroceder a cualquiera de las versiones anteriores del elemento o simplemente seleccionando cualquiera de las versiones y haciendo clic en el botón de reinstalar Bien, entonces aquí tienes el modo de mantenimiento. Ahora solo digamos que una vez que subas o transfieres este sitio web de tu sistema local a tu proveedor de hosting, entonces entonces decides, digamos que quieres actualizar tu sitio web o algunas de las páginas web, entonces no sería una buena experiencia que los visitantes en tu sitio web y en ese momento en particular estés actualizando paralelamente el sitio web. Entonces en ese caso, lo que puedas hacer, solo puedes seleccionar el modo de mantenimiento en algo llamado como mantenimiento. O próximamente, próximamente podría ser útil cuando en realidad estás incluido una página web en tu propia barra de menú o barra de navegación, o en tu encabezado. Yo diría que esa página en sí no está en vivo completamente como en mi sitio web. Aquí tengo. Déjame mostrarte lo que quiero decir con eso. Aquí tengo algo llamado como página de Bloques. Si voy aquí mismo, encontrarán que hay una página próximamente porque no he publicado ninguno de los bloques. Algo así se puede hacer simplemente seleccionando próximamente. O simplemente podrías alternar al modo de mantenimiento, lo que básicamente significa que cada vez que alguien visita tu URL mientras estás actualizando el sitio web, verá que el sitio web está en mantenimiento. Y puedes crear el tema personalizado y el diseño usando el elemento o constructor de temas. Y puedes elegir el diseño de diferentes páginas para su mantenimiento o próximamente. Si selecciono el modo de mantenimiento, verás elegir la plantilla particular. Ahora bien, si has guardado alguna plantilla para el modo de mantenimiento, esa saldría ahí mismo en el menú y podrás seleccionarla. Bien, aquí tienes la opción de importar o exportar cualquiera de los kits, lo que básicamente significa que, digamos que has descargado cualquiera de los elementos temáticos o tema del tema para o cualquiera de los mercados temáticos, puedes importarlos O si quieres vender tu propio tema que construías usando el elemento o los elementos Pro y quieres empezar a ganar dinero como freelancer y vender tus activos digitales. Entonces puedes exportar todo tu tema y venderlo en cualquiera de los marketplaces Bien, aquí tienes la sección de usuarios. Se pueden agregar múltiples usuarios. Entonces, si puedes ver que hay múltiples roles de usuario como suscriptor, colaborador, autor, editor, administrador. A partir de ahora, somos administradores, lo que significa que tenemos acceso a todas las cosas que podemos hacer en nuestro sitio web de prensa. Si creas un nuevo suscriptor, básicamente significa que ellos podrán leer el post y comentar en tu entrada de blog. Si le has dado a alguien como rol de colaborador, entonces puede editar y eliminar la publicación. Eso significa, digamos que tienes el sitio web de tu empresa o tienes tu propio sitio web de portafolio personal y has publicado blogs, pero tienes un redactor contigo y les has dado acceso al colaborador para que puedan editar el contenido de tu post o tal vez incluso eliminarlo Si no está a la altura de la marca, tienes la opción de darle acceso a alguien autor, lo que básicamente significa que puede publicar su publicación, puede subir archivos a la mediateca. Digamos que en lugar de un editor donde editor básicamente significa que son colaboradores, digamos que tienes a una persona redactor contigo en tu equipo cuyo trabajo es simplemente editar tu publicación de bloque y no crear y eliminar y agregar contenido a ella Deberías darles colaborador, pero si tienes un redactor junto contigo, debes darles acceso de autor para que puedan escribir, publicar, subir medios y otras imágenes, videos, lo que sea apropiado para la publicación de bloque Entonces tienes un acceso de editor. Con acceso de editor, lo que la persona puede hacer es que pueda administrar categorías dentro de block post. Pueden moderar los comentarios, entonces pueden incluso hacerlo y eliminar cualquiera de los post o una página web. Esto es otra cosa importante porque aquí les has dado el acceso de tu página web también, que es diferente a tu publicación de bloque. Esto se convierte en un trabajo de tiempo completo en el que tienen acceso al poste de bloque. Ahora este acceso al editor es útil cuando estás entregando todo el proyecto de diseño web a tu cliente Eso sin embargo, no manipulan los complementos ni eliminan a los usuarios ni editan el tema en sí, lo que podría causar algunos problemas de ruptura del sitio web. Es perfecto para darles acceso al editor y debes mantener el acceso del administrador por ti mismo. Entonces aquí para darle a cualquiera de tus usuarios, digamos solo un acceso de suscriptor, intentemos dar un nombre de usuario. Voy a darle a esto algo así como un editor. Voy a escribir un correo electrónico. Permítanme simplemente incluir cualquiera de los correos electrónicos. Entonces aquí tengo el correo electrónico. Puedo escribir el nombre, apellido, y aquí puedo cambiar la contraseña si me gusta. Déjame simplemente poner algo así como una contraseña muy simple y solo puedo activar o desactivar esta barra de notificaciones. Ya que esta es mi propia identificación de correo electrónico. Sé que me han dado acceso al editor, así que simplemente voy a desaprovechar esto Y aquí puedo elegir el papel diferente. Déjame darle esto como rol de suscriptor y agregaré un nuevo usuario. Todo bien. Ahora, permítanme cerrar la sesión e iniciaré sesión con un usuario diferente, que es el acceso del editor o acceso de suscriptor, debería decir. Así que aquí puedes ver que he iniciado sesión usando el Editor Access. Aquí mismo puedes ver el acceso del editor. Entonces en mi tablero en sí, solo tengo una opción, menú de colapso de perfil, Y puedo ir al tablero. Bien, así que si voy a un sitio web de prensa, puedo seleccionar cualquiera de las publicaciones del bloque. Y aquí solo tengo acceso para leer y agregar comentarios a mi publicación de bloque, que es muy similar a cualquiera de los usuarios que no tienen ninguno de los accesos a su sitio web. Incluso pueden hacer lo mismo, pueden leer el post de bloque y pueden dejar comentarios dentro de tu post. Pero solo la diferencia es que cada vez que alguien está dejando algún comentario, necesita iniciar sesión en su sitio web. Entonces eso es lo que has hecho al darle acceso a alguien como suscriptor. Todo bien. Entonces espero que ustedes tengan el punto y felicidades. Por la presente terminamos todo este curso. En serio. ¿Sabías que sólo el 10% de los alumnos pasa el primer módulo? Esto significa que eres literalmente uno de los mejores estudiantes que alguna vez han tomado este curso. Y ahora sólo hay dos cosas que debes hacer. El primero es tomar medidas. Hoy, sé que va a sonar un poco cliché, pero es un hecho que el viaje en 1,000 millas comienza con un solo paso Empieza por construir un sitio web sencillo. No importa si hoy no puedes hacer todo, pero solo empieza por lo menos. Bien, segundo, necesito tus comentarios. Tómese 30 segundos de su tiempo para dejar sus comentarios honestos sobre este curso aquí en la plataforma. Y yo, así como cientos de otros estudiantes, estaré en tu gratitud. Así que estoy muy emocionada de ver cómo este curso impactará positivamente el resto de tu vida. Así que asegúrate de mantenerme informado sobre tus resultados. Estoy deseando que llegue su éxito. Cuídate. Adiós.