Diseño Experiencia Branding
Hola a todos en el tutorial de hoy veremos como poner iconos animados con Elementor pro.
Tal como vez en el ejemplo —>
Iconos animados con elementor Pro
Subir Icono svg
Lo primero que vamos hacer es agregar una sección con un widget de icono.
Aqui pueden descargar el archivo .svg
CSS
Con el widget de icono seleccionado, vamos a la pestaña de avanzado y en la parte de abajo ponemos la clase CSS “logo”
Es muy importante que le pongas 2 al z index para que quede en la capa superior y no quede debajo de otro widget.
Codigo CSS
Con el widget de icono seleccionado, vamos a la pestaña de avanzado y en la parte de abajo ponemos la clase CSS “logo”
Ahí mismo nos vamos hacia abajo hasta CSS personalizado y pegamos el código
Estilo del Icono
Ahora hay que darle estilo al icono.
Con el widget de Icono seleccionado nos vamos a la pestaña de estilo.
Ahi podemos modificar el tamaño y el color del icono.
Colocacion del Icono
Dentro de la pestaña avanzado, nos vamos a la seccion de colocacion.
Seleccionamos ancho personalizado y modificamos el widget al tamaño del icono.
Nos vamos a posición y hay dos opciones.
Absoluto, se queda dentro de la sección.
Fijo: se queda fijo en la pantalla.
aquí es como tu quieras.
Dentro de colocación tenemos también las opciones de compensación horizontal y vertical con esta s opciones vamos acomodar el icono donde queramos.
Efecto de movimiento
Si quieres darle un efecto al icono y que gire más rápido, dentro de la pestaña de avanzado, vas a encontrar efectos de movimiento, seleccione scrolling effects y Rotar.
Ahi puedes mover la velocidad de rotación y la dirección.
Te gustaria usar elementor como un profesional
Aprende a tu ritmo, clases por zoom, elementor pro gratis.
Charlemos por WhatsApp
Editando el archivo SVG
Ahora que ya sabes como hacer el icono animado, vamos a ver como editar el archivo para que pongas el texto que tu quieras.
Para esto vas a necesitas un editor de codigo por ejemplo sublime tex o Visual studio code
Este ultimo es gratis y si te interesa el diseño de iconos te será de gran ayuda.
Aqui te dejo el enlace de un tutorial que me gusto mucho.
El archivo del icono que descargaste lo vas a abrir con el visual studio code o cualquier editor de código.
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 150 150″><defs><path id=”circlePath” d=”M 75, 75 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 “></path></defs><circle cx=”75″ cy=”50″ r=”37.5″ fill=”none”></circle><g><use href=”#circlePath” fill=”none”></use><text fill=”currentColor”><textPath href=”#circlePath”>fernando abitia</textPath></text></g></svg> Dónde está mi nombre, vas a poner el texto que quieras, ten en cuenta que por se circular, tal vez se encimen las palabras, por eso debes hacer pruebas.
Video tutorial de Icono Animado con Elementor pro
Y ya quedo listo tu icono animado. Te dejo el video para que solo sigas los pasos.
Dale click para ver en Youtube
Gracias por ver este tutorial si tienes alguna duda contactame o si quieres que te ayude con tu web o quieres posicionar tu sitio en los primeros lugares, puedes contratar mis servicios de SEO
Tambien puedes encontrat aqui mi curso gratis de SEO
¡Me encantan los iconos animados! Son una forma divertida de darle vida a mi sitio web.
Aunque respeto tu opinión, creo que los iconos animados pueden distraer a los usuarios y hacer que la carga del sitio sea más lenta. Personalmente, prefiero un diseño limpio y minimalista que resalte el contenido. Cuestión de gustos, supongo. ¡Saludos!
¡Me encantan los iconos animados! Elementor Pro es la mejor opción para crearlos. ¡Genial!
¡Me encantan los iconos animados! Elementor Pro es genial para personalizarlos. ¿Alguien sabe si se pueden subir iconos SVG directamente? #amantesdelCSS
¡Increíble! Estos iconos animados con Elementor Pro son la bomba. ¡Me encanta la creatividad con CSS y SVG!
¡Totalmente de acuerdo! Elementor Pro ofrece herramientas geniales para crear diseños impresionantes. La combinación de CSS y SVG permite explorar al máximo la creatividad. ¡Es genial ver cómo se pueden animar los iconos! Definitivamente, una gran opción para los amantes del diseño.
¡Me encantan los iconos animados con Elementor! Son una forma divertida de agregar personalidad a los diseños.
¡Me encantan los iconos animados con Elementor! ¡Le dan vida a mi página web!
Los iconos animados pueden ser divertidos, pero a veces distraen de la información principal. Personalmente, prefiero un diseño limpio y minimalista en mi página web. Pero cada uno tiene sus gustos, ¡así que si te encantan, sigue usándolos!
¡Me encantan los iconos animados con Elementor! Añaden un toque divertido y moderno a cualquier diseño. ¿Quién más está de acuerdo? 🙌💃🎉
¡Me encanta la idea de añadir iconos animados a mi sitio web con Elementor! ¡Voy a probarlo ahora mismo!
¡Vaya! Nunca pensé que los iconos animados con Elementor pudieran ser tan divertidos. ¿Alguien más lo ha probado?