Resaltado del complemento Divi: Iconos de carga Divi


Iconos de carga de Divi es un complemento de terceros para Divi que facilita la adición de más iconos a Divi Builder. A diferencia de otros complementos de íconos que solo integran Font Awesome y Material Icons, este le permite agregar cualquier conjunto de íconos que desee. Solo tiene que ser un tipo de archivo compatible, y resulta que utiliza los cinco tipos de archivo más populares.

El complemento agrega un cargador a su instalación de WordPress donde arrastrará y soltará sus archivos de icono. Luego, los iconos se agregan a cualquier módulo Divi que muestre iconos. Al igual que los iconos Divi estándar, cualquier conjunto de iconos que cargue se puede diseñar con Divi Builder. En este punto destacado del complemento Divi, echaremos un vistazo a los íconos de carga de Divi y veremos lo fácil que es de usar.

Instalación y activación de iconos de carga de Divi

Cargue y active el complemento como de costumbre, y luego vaya a Configuraciones > Iconos de carga de Divi en el menú del tablero para ingresar su clave de activación.

Carga de iconos con iconos de carga Divi

También en la pantalla de configuración está la función de carga. Aquí subirás tus iconos. Los iconos deben estar en formatos .eot, .svg, .ttf, .woff, .woff2 y .css. Puede descargar iconos de cualquier fuente que desee y utilizarlos con Divi Upload Icons siempre que estén en estos formatos e incluyan el archivo CSS. Para instalar los iconos, arrástrelos y suéltelos en la ventana de carga. Las instrucciones se proporcionan en el área de carga y hay un breve vídeo que demuestra cómo usarlo.

Los iconos a veces incluyen varios formatos. Debe cargar los archivos CSS junto con los íconos, y los íconos deben ser un archivo compatible. En este ejemplo, estoy cargando varios conjuntos. Incluyen varios tipos de archivos y archivos CSS. A los de la imagen de arriba con los íconos naranjas les faltan archivos.

Los archivos de este ejemplo son correctos. Subí tipos de archivos compatibles con sus archivos CSS. Ahora tengo más de 2500 iconos nuevos. Los descargué de icono de fuente, Dripicons, Fuentes de iconos de la fundacióny Iconos de mapa. El desarrollador mantiene un lista de iconos que han sido probados y puede usar con Divi Upload Icons. Por supuesto, hay muchos más iconos que puedes usar.

A modo de comparación, aquí está el módulo de propaganda de Divi antes de que cargara los nuevos íconos. Divi incluye 360 ​​iconos. Puede hacerse una idea de cuántos son mirando la longitud de la barra en la ventana.

Esta imagen incluye todos los 2500 iconos que subí. Ahora tengo muchos más iconos para elegir y la barra de la ventana es mucho más pequeña. Puede ver los iconos en Visual Builder, pero no incluye el nuevo filtro ni las herramientas de búsqueda.

Filtro y búsqueda de iconos de carga de Divi

Se agrega una nueva herramienta de filtro si usa el constructor clásico. Puede abrir o cerrar el filtro. Está cerrado en este ejemplo.

Hacer clic Iconos de filtro para ver las familias de iconos que ha instalado y una función de búsqueda. Haga clic en cualquiera de las familias de iconos para ver solo esa familia. También puede ver todas las familias o cerrar el filtro y la opción de búsqueda. El filtro funciona rápido. Al hacer clic en una familia de íconos o buscar íconos, los íconos se muestran casi instantáneamente, incluso con mis 2500 íconos. Estoy seguro de que eso depende en parte de la cantidad de iconos que tengas instalados, por lo que tu experiencia puede ser diferente.

En este ejemplo, he seleccionado el Iconos de mapa que subí. Hay casi 200 iconos en esta familia de iconos.

Aquí están los Iconos de la fundación. También tiene cerca de 200 iconos.

Aquí están los Icofontos. Esta familia de iconos agrega más de 2000 iconos.

Puede buscar por palabra clave o por icono de nombre de familia. Los resultados incluyen íconos de todas las familias de íconos que ha subido y los que ya estaban disponibles en Divi.

Sería interesante si el filtro funcionara después de la búsqueda para ver los resultados por familia de iconos. Le muestra el nombre con la familia de iconos cuando pasa el cursor sobre cada icono. En la imagen de arriba, me coloco sobre el segundo ícono de la derecha. Esto es lo suficientemente útil, por lo que el filtro de búsqueda no es realmente una prioridad alta.

Ejemplos de iconos de carga de Divi

Por supuesto, una de las ventajas de usar íconos es la capacidad de ajustar tamaños, colores, agregar círculos, bordes, etc., usando Divi Builder. El complemento y los iconos funcionan con Visual Builder, pero no muestra los iconos en la vista en vivo. Este ejemplo muestra los íconos en la selección de íconos del módulo, pero la vista previa en vivo no funciona.

Los iconos se muestran bien en la página o publicación publicada. Aún puede usar Visual Builder para personalizar el tamaño y los colores, simplemente no los verá en la vista previa en vivo. Prefiero Visual Builder cuando personalizo colores y tamaños, pero usaré el Classic Builder para el resto de los ejemplos. Esta es la página de inicio del paquete de diseño de Hipotecas.

Los iconos se ven muy bien y se pueden personalizar como los iconos Divi estándar. Encontré todos estos íconos usando la función de búsqueda. Ésta es la configuración predeterminada.

Cambié los colores para que coincidan con el diseño, al igual que las imágenes originales que utilizó el diseño.

Para este, he seleccionado usar el tamaño de fuente para el ícono y lo ajusté a 32px. Está empezando a parecerse más al diseño original, pero con mis iconos.

En este, agregué un círculo a cada ícono. Cambié los colores de los círculos e íconos y agregué un borde al segundo y al cuarto desde la izquierda. Elegí diferentes colores solo para mostrar cómo se ven.

Así es como se ven los íconos ubicados a la izquierda del texto.

En este, reemplacé las imágenes en el diseño del campo de golf con íconos. Usé colores del diseño y los dimensioné a 48 px.

Para este ejemplo, he inhabilitado el ajuste de tamaño de fuente para los iconos. Este es el tamaño predeterminado, 96px. Se combinan bien con el diseño del diseño.

También se ven increíbles cuando se usa la configuración del icono de círculo. Cambié el color del icono a blanco y utilicé el bronceado del diseño como color del círculo. Los íconos todavía están en 48px.

Para este, he usado uno de los tonos de verde del diseño. Hay muchas posibilidades con las personalizaciones de Divi Builder.

Precio de Divi Upload Icons

Los iconos de carga de Divi cuestan $ 24,97. Tiene uso y actualizaciones ilimitados. Puede comprar Divi Upload Icons en el mercado.

Pensamientos finales

Divi Upload Icons facilita la carga de los iconos exactos que desea desde cualquier biblioteca de fuentes. La idea detrás del complemento es que, en lugar de instalar miles de iconos que no necesita, puede instalar los iconos exactos y las familias de iconos que desea usar con su sitio web Divi.

Dado que está cargando los íconos en Divi Builder, se almacenan en su servidor. Subí más de 2500 íconos y no tuve problemas de velocidad con Divi Builder o mi sitio web.

Tenga en cuenta que requiere fuentes con el archivo de fuente y el archivo CSS. Es fácil cargar las fuentes incorrectamente (adivinen cómo lo sé). Asegúrese de seguir las instrucciones exactamente o las fuentes serán cuadrados vacíos. Además, no funciona con Font Awesome 5, pero funciona muy bien con 4.7.

Me gustó usar Divi Upload Icons. Me gustaría usarlo con Visual Builder, pero funciona muy bien con el constructor clásico. Fue necesario un intento adicional para asegurarme de que tenía los archivos correctos, pero teniendo en cuenta la cantidad de familias de iconos que hay en Internet, vale la pena tomarse el tiempo para encontrar iconos con los archivos correctos. Los íconos no son difíciles de encontrar y el desarrollador proporciona muchos enlaces a íconos que ya probó.

Si está interesado en agregar sus propios íconos al Divi Builder, vale la pena echarle un vistazo a Divi Upload Icons.

Queremos escuchar de ti. ¿Has probado Divi Upload Icons? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de hanss / shutterstock.com