Añade imágenes animadas GRATIS a tu sitio web de WordPress

1. Introducción: Bienvenido de nuevo a otra impresionante clase de Skillshare conmigo, puede Besser. Siempre es un placer tenerte aquí. ¿ Quieres aprender a agregar vectores animados a tu sitio web así? Quiero mostrarte cómo agregar archivos cargados a tu sitio web de WordPress con carga Elementor, el archivo fue creado por el equipo de Airbnb y es de código abierto. Y como se puede ver, el servicio ha sido utilizado por diseñadores y desarrolladores de muchas empresas de todo el mundo. Algunas de ellas son las marcas más grandes la industria tecnológica en la actualidad. Vamos a hacer todo eso de forma gratuita. No tendrás que pagar por ningún plug-in o cualquier servicio con siempre pasar más tiempo. Vamos a seguir adelante y empezar. 2. Agregar las imágenes animadas: Aquí estamos en mi tablero. Esta es una instalación completamente nueva de WordPress, por lo que no tengo ningún complemento instalado excepto los que vienen por defecto. Seguiré adelante y seleccionaré los dos marcando esta casilla y eliminándolos. Simplemente no quiero tenerlos ahí. Entonces ahora que tenemos una pizarra limpia, haré clic en Agregar nuevo. Y por supuesto, necesito agregar Elementor. Instalar Elementor. Tengo que mencionar que la elemental en sí tiene la opción de agregar animaciones a su sitio web, pero eso está disponible en la versión Pro de Elementor. Entonces si cambiamos a la página web oficial, como puedes ver aquí en increíbles animaciones a tu sitio web con mucho widget. Necesitas ir pro para poder usar esa función. Dado que esto está disponible en la versión pro, hay alguna manera de hacerlo de gratuita sin gastar dinero? Y la respuesta es sí. Así que volviendo dentro de nuestro dashboard, como puedes ver aquí, tenemos complementos adicionales de Elementor creados por desarrolladores de terceros. Y algunas de estas características adicionales que vienen de forma gratuita con estos complementos. Las características que son premium o en la versión Pro de la propia elemental. Por lo que queremos instalar complementos premium para Elementor. Y este es el complemento que nos dará la característica para agregar animaciones a nuestra página web. Ahora que tenemos instalados los dos, podemos seguir adelante y activarlos a la vez yendo dentro de los plugins instalados. Seleccionaré ambos marcando esta casilla aquí. Y luego voy a seguir adelante y decir activar y aplicar. ¿ Verdad? Y ahora que tenemos los dos plugins instalados y activados, tengo que mencionar que estoy usando el Tema Astra. Entonces si voy dentro de apariencia, notarás que mi tema activo es Astra. Ir dentro de las páginas. Voy a seguir adelante y crear una nueva página. Vamos a llamarlo aterrizaje. Entonces iré aquí mismo en estos ajustes, voy a ir a plantilla Elementor ancho completo. Entonces voy a seguir adelante y lo publicaré. Probablemente anulación de stat. Entonces vamos a Editar con Elementor porque ahí va a estar haciendo eso desde el front-end. ¿ Verdad? Entonces aquí estamos. Lo que queremos hacer es agregar nuevo. Quiero añadir una nueva sección. Por lo que agregaré esta sección de doble columna. Y en esta columna aquí, aquí es donde estamos agregando nuestra animación. Por lo que voy a hacer clic en el signo más aquí. Y luego vino aquí, escribiré Lottie. Notarás que tenemos la versión elemental pro y la versión premium de animaciones de carga. Entonces si hacemos clic en la versión Elementor Pro, no podemos usarla porque como puedes ver, el log aquí dice que necesitas tener la versión pro. Pero lo bueno es que nos han estancado el plug-in premium Elementor Adams y nos permite agregar los archivos de carga utilizándolo. Nos presentará aquí las opciones de animaciones de Lawdy premium de edición. Y lo primero que notarás es que tenemos una fuente de archivo. En la fuente del archivo tenemos dos opciones. Podemos subir nuestro propio archivo, nuestra propia animación si está en el formato correcto. O podemos agregar una URL externa. Entonces iremos con la URL externa. Y eso significa que necesitamos agarrar una URL de cargar archivos y dejarlo aquí. Entrará cargando archivos. Y aquí, iré a la barra de búsqueda y escribiré para cualquier tipo de animación que necesite. Entonces digamos, por ejemplo, el afilado. Después golpeó Enter. Como se puede ver, tenemos varias opciones aquí para elegir. Uh, la mayoría de ellos son gratuitos, por supuesto que tiene que haber algunas versiones premium. Voy a seguir adelante y seleccionar tal vez este de aquí mismo. Por lo que voy a hacer clic en eso. Y traerá este pop-up con todos los detalles que necesitamos. Ahora esta es la URL que necesitamos copiar, así que voy a hacer clic en eso para copiarlo, y ahora está copiado. Iré dentro de nuestra página Elementor y la pegaré dentro de este campo. Tardará un momento en aparecer. Ahí lo tenemos. Ahora notarás que es demasiado pequeño. Lo primero que hay que hacer es tal vez aumentar su tamaño. También puedes simplemente escribir el tamaño que necesitas directamente aquí. Digamos 500. Entonces vamos a actualizar eso. Vista previa de los cambios. Ahí lo tenemos, la animación en nuestra página web. Para que puedas seguir adelante y añadir más detalles a tu página web. Así que tal vez quieras el rumbo ahí. Compras limitadas. Tal vez desee cambiar ese color de fuente. Tal vez la topografía cambió el tamaño de la fuente de Montserrat. Tal vez. Seleccionaré la columna misma. Columna que sostiene esta zona. Entra y entra. Avanzado. Desmarque el margen, y luego vamos a darle un margen superior de 70. Muy bien, entonces vamos a hacer clic en este icono aquí arriba para agregar algo de texto. Volvamos a hacer clic en él para agregar un botón. Cambiemos el botón de color a este amarillo. Por lo que haré clic en el botón. Y luego bajo botón, bajo Estilo, ve a color. Este amarillo aquí mismo. Ahí lo tenemos. Actualice eso. Y vamos a prever los cambios. A lo mejor puedes darle color a estas fuentes este azul. Voy a ir a seleccionar esta consistencia de color azul, marrón. Y ahora el azul coincide con el azul en esto. Y luego vamos a hacer clic en esta animación de Lawdy yendo dentro de estilo. Para que como se puede ver, tenemos muchas opciones diferentes aquí. También podemos aumentar la velocidad de animación. La velocidad aumentará en pequeños incrementos porque como se puede ver, estamos aumentando en puntos. Y también podemos elegir qué desencadena la animación. Tal vez en el hover, cuando alguien se cierne sobre él, es cuando se anima. En pergamino. Cuando alguien necesita desplazarse, es entonces cuando comienza a animarse. Estilo Insight. También podemos ir dentro los filtros CSS y jugar con estos ajustes aquí mismo. Entonces, por ejemplo, podemos aumentar el brillo. Podemos jugar con el contraste. También podemos aumentar y disminuir la saturación de los colores. También podemos jugar con el matiz solo para ver si podemos conseguir los colores de nuestra marca, correcto. Muy bien, vamos a actualizar eso. Y vamos a prever los cambios. Y ahí lo tenemos. Cuando pasamos más de ocho, ahí es cuando se anima. Cuando no estamos flotando ya, no es animar porque ese es el escenario que elegimos. Así es como hacerlo, chicos. Te recomendaría seguir adelante y jugar con todos los ajustes y ver qué tan creativo puedes conseguir con ellos. Y eso marca el final de nuestro tutorial. Ojalá hayas aprendido algo hoy. Y sobre todo, espero que hagas algo impresionante con él. Si te gusta la clase, no olvides dejar una reseña. Podría ayudar a otro estudiante a decidir si esto es lo que están buscando antes de que realmente lo vean. Si estás usando Elementor y te gustaría aprender a construir páginas web impresionantes y sitios web totalmente operativos. Echa un vistazo a mi perfil. encontrarás varias clases Allíencontrarás varias clasesdonde te enseño a hacer eso. De lo contrario, fue un placer enseñarte esto hoy y te veré la próxima vez. Paz.