Cómo usar Lordicon con WordPress y Div

Las tendencias en el diseño web cambian drásticamente de año en año. Sin embargo, algo que parece haber dominado y permanecer es el uso de la animación. Cuanto más personas usan personas y aplicaciones móviles, más esperan que los sitios que visiten usen algunos de los mismos principios. El uso correcto de la animación puede estimular la interacción del usuario, lo que le permite guiar a los visitantes a su sitio a través de la experiencia que desea tener. Aquí viene el servicio de Lordicon. ¿Qué es Lordicon? Lordicon es una colección de íconos animados interesantes que se pueden usar en varios formatos digitales. Cada icono está disponible en formatos JSON, GIF, EPS, SVG y PNG. Además, puede copiar y pegar códigos HTML estándar. El uso de HTML permite integrar iconos en la mayoría de los medios CMS y HTML estáticos sin la necesidad de ningún complemento.
Lordicon ofrece acceso a más de 5.600 íconos animados en su biblioteca. Puede usar de forma gratuita a más de 1000 de esos íconos de Lordicon. Sin embargo, si desea acceso a la biblioteca completa, necesitará una suscripción. Comience con Lordicon es simple. Regístrese con su dirección de correo electrónico, configure una contraseña y esté listo para explorar su biblioteca extendida. Si es un desarrollador, el registro en GitHub puede ser la forma más fácil de todos.

Tendrá dos categorías de iconos para elegir entre el registro.
Los iconos de alambre son iconos más modernos y expresivos, que son completamente personalizables. Puede elegir sus colores, establecer la velocidad para la animación, elegir si hacer un bucle o elegir el estilo de animación.
Los íconos del sistema se parecen a los íconos ofrecidos por Font Awesome y similar al estilo que viene en la división. Antes de mostrarle cómo usar Lordicon, para repasar las opciones de precios, para que pueda decidir si Lordic es algo que desea. Use en su Sitios web. ¿Cuánto cuesta Lordicon? Lordicon es libre de usar! Sin embargo, como se mencionó anteriormente, necesitará una suscripción paga para usar todas las variantes de los iconos. Lordicon ofrece dos puntos de precio. Puede optar por pagar mensualmente, lo que costará $ 16 por mes. Si elige comprar un plan anual, su costo se reduce a la mitad a $ 8 por mes o $ 96. También debe tenerse en cuenta que con una suscripción paga, también tendrá más control sobre cómo integrar sus iconos en su sitio web.

La navegación a través de la interfaz de Lordicon, la interfaz Lordicon es simple y bien pensada. El primer paso es buscar iconos. Después de haber encontrado el que desea usar, haga clic en él para mostrar sus opciones. Con el icono seleccionado, puede editarlo con las opciones enumeradas en la barra lateral. Aquí establecerás los colores y el ancho de las líneas. Desde allí, puede copiar HTML, descargarlo como GIF o Lottie (JSON) o hacer clic en el botón Multi para obtener opciones adicionales. Si desea parámetros de control completos para su icono, haga clic en la flecha en la barra del lado derecho para abrir el editor completo.

En el editor completo, tendrá algunas opciones adicionales. Además de elegir el color y el tamaño del contorno, podrá elegir una variación para su icono. Por lo general, hay tres variantes diferentes a las que puede elegir, para que pueda hacer coincidir la estética de su sitio. Otras opciones incluyen el estilo, el tamaño y la escala de Shutter -roke. Una vez que haya realizado sus cambios, puede descargar o incorporar el icono. La descarga incluye la incorporación con HTML, Loridcon Lottie JSON, GIF, APNG, WebP y MP4. Además, puede descargar archivos de origen en formatos EPS, Lottie JSON o después del efecto.

Luego puede importar estos archivos a la biblioteca de medios de WordPress para usarlos como cree correctamente. Cómo usar Lordicon con cualquier sitio de WordPress es bastante fácil de incorporar a Lordicons en sitios de WordPress usando bloques de Gutenberg con Lordicon Plugin. La documentación lórica establece que sus íconos se pueden incorporar fácilmente en cualquier sitio de WordPress utilizando bloques de Gutenberg o utilizando módulos Divi (u otros constructores de sitios). Además, colaboraron con Slider Revolution para integrar sus íconos en diapositivas. El uso de Gutenberg bloquea el uso de iconos de Lordicon con Gutenberg es simple. Hay dos formas de hacer. La primera forma es establecer los parámetros de diseño en Lordicon y copiar el código HTML para usarlo en un bloque HTML personalizado en Gutenberg. El segundo utiliza el complemento de iconos animados de Lordicon con su propio bloque personalizado en Gutenberg.

En primer lugar, debe instalar y activar el complemento Lordicon en el tablero de WordPress. Una vez activado, cree o edite una página o publique en su sitio de WordPress. Luego haga clic en el icono negro + para elegir el bloque de elementos Lordicon. Luego vaya a la biblioteca de iconos de Lordicon. Para este ejemplo, usaremos el icono de abeja. Busque en la abeja, luego la flecha para abrir el editor completo.

La incorporación de su ícono en Gutenberg, la incorporación del ícono se puede hacer de dos maneras. La primera forma es descargar el archivo JSON de Lordicon, luego subirlo a su sitio de WordPress. La segunda forma es hacer clic en el botón HTML y copiar el enlace CDN en el código de incorporación para simplemente conectarse a él.
De todos modos, funciona bien, pero el uso de Jsons en su sitio tiene el potencial de disminuir. Si tiene la intención de usar solo unos pocos efectos de animación aquí y allá, es perfecto. Sin embargo, si desea usar más archivos JSON, sería mejor usar el TIE CDN ​​para que Lordicon entregue la imagen solo. Para este ejemplo, usaremos la conexión CDN. Para incorporar el icono en su sitio, haga clic en el botón HTML en la pantalla del icono de abeja y copie el enlace CDN.

Regrese a su sitio e inserte el enlace CDN a la dirección de URL del icono en la configuración de bloqueo. Luego establecerá el disparador y elegirá un tiempo de retraso (si lo desea). Finalmente, establezca el tamaño del ícono, el peso de la carrera y los colores.

Eso es todo. Como puede ver, los íconos de Lordicon son fáciles de usar y ofrecen más formas de integrarlos en su sitio de WordPress utilizando el editor de Gutenberg. Si probablemente no desee usar el complemento Lordicon y elegir el código Built -in, puede seguir los mismos pasos que describimos en la siguiente sección, reemplazando el código DIV con el bloque HTML personalizado en Gutenberg. Cómo usar Lordicon con la Diven Div, le mostraremos cómo incorporar estos íconos animados en el Div. Para este tutorial, utilizaremos la página de diseño de la aplicación móvil disponible (¡gratis!) Con su elegante suscripción de temas. Puede acceder a todos nuestros paquetes de diseño prefabricados en Divi Builder. Hay algunas formas en que puede incorporar íconos de Lordicon en el Div. Usando un GIF, agregando HTML a un módulo de división de código o usando un código corto. Exploremos cada opción, para que pueda elegir cuál es el más fácil para usted usando un GIF para este tutorial, para usar la página de destino en el paquete de diseño de aplicaciones móviles. Primero, tomaremos la información en la sección de héroes y reemplazaremos la imagen con GIF lordic. Elija el color púrpura de la sección Hero y vaya a Lordicon para elegir el ícono del reloj. Haga clic en el color verde predeterminado y reemplácelo con #6F4FFF. Haga clic en Aplicar para guardar sus cambios.
Hay tres estilos para el ícono. Elija el estilo de línea (la opción media que se muestra en la captura de pantalla a continuación) para nuestro icono. En la configuración de vista previa, configure el disparador de bucle al pasar con el mouse y el tamaño del mar. Luego establezca el tipo de movimiento disponible en Hover-1. Esto tendrá su ícono animado cuando pase con el mouse y la animación en el bucle. Luego ajuste el ancho de la carrera al 35%. Después de tener la configuración correcta, haga clic en el botón GIF para descargar el icono. Cuando aparezca el cuadro de diálogo, seleccione transparente para el fondo, 100px para el tamaño y deje el valor predeterminado de 250 ms para la demora. Haga clic en el botón Descargar.

Agregue su icono a la División Regrese al Builder Divi y seleccione el primer mensaje de la sección Hero. Haga clic en el icono de la rueda para editar, luego seleccione el menú de caída de la sección de imagen e icono. Haga clic en el icono de horario ya instalado para reemplazarlo. Seleccione el GIF recién descargado para agregarlo a la biblioteca de medios.

Luego haga clic en la pestaña Diseño y desplácese hacia abajo hasta el ancho de imagen/icono. Establezca el ancho del icono en 100 px. Deje su alineación del conjunto izquierdo, luego haga clic en el bifa verde para guardar el módulo.
Aunque incorporar un GIF en su sitio Div es simple, exploremos una forma adicional en la que puede incorporar los íconos animados de Lordic en su div. Usando el módulo de código DIV, este método le dará un poco más de control sobre la forma en que se presenta el icono. La incorporación de un GIF funciona excelente, pero limita algunos de los efectos de animación. Por ejemplo, los efectos como moverse con mouse no funcionan cuando se usa un GIF. Para tener un control real sobre todos los aspectos de cómo aparece el icono de Lordicon en la división, le sugerimos que use el código del código. El uso del módulo de código es simple. Usando la misma página del paquete de apariencia, navegue en el segundo módulo de propaganda en la página. Esta vez, eliminaremos la imagen del módulo de la propaganda y la guardaremos. Después de guardar, haga clic en el icono Black + y encontraremos el módulo de código DIV. Agrégalo a la sección/fila sobre la propaganda.


Regrese a Lordicon y haga clic en el botón HTML de incrustación. Esto mostrará el cuadro de diálogo Incrustar en la web. Asegúrese de que el bucle esté seleccionado al pasar con el mouse. Luego asegúrese de que su tamaño esté configurado en 100 PX. Finalmente, haga clic en el código HTML.

Ahora, regresa a tu div Guárdelo y el nuevo Lordicon debe aparecer sobre el módulo de la propaganda del que eliminó la imagen.

El uso de un código corto para usar un código corto es muy similar con la incorporación HTML. En Lordicon, busque el ícono de las plantas en crecimiento. En la configuración de vista previa, configure el disparador de bucle al pasar con el mouse y el tamaño del mar. Reemplace el color verde estándar con #6F4FFF. Establezca el ancho de la carrera en 35%. Finalmente, descargue el archivo JSON haciendo clic en el botón JSON. Que encontrará en el código HTML.

Le recomendamos que se conecte a una URL en el código corto, en lugar de cargarla en su biblioteca de medios. Esto ahorrará espacio en su sitio, especialmente si tiene la intención de usar más iconos y procesos de servidor. Los códigos cortos de Lordicon comienzan con [Lord-Icon] y terminan con [/Lord-Icon]. Si usa un enlace CDN, el código corto se verá así:

Trigger = “Hover” size = “100” Pallette = ” #000000, #6F4FFF”]
[/Lord-icon]
Para la fuente del icono (src =), copiará el enlace del icono de la planta en crecimiento en el código HTML. Asegúrese de que la animación esté configurada para desplazarse, el tamaño está configurado en 100 y los colores (paleta) son #000000 y #6F4FFF.

El último paso es colocar el código corto en el módulo de código DIV y guardarlo. El código corto debería verse en la captura de pantalla a continuación.