Resaltado del complemento Divi: Divi Icons Pro

Divi Icons Pro es un complemento de terceros que agrega más de 2500 íconos y varias funciones relacionadas con Divi Builder. Viene con varias opciones de compra e incluso incluye una opción gratuita con más de trescientos iconos personalizados. En este punto destacado del complemento Divi, echaré un vistazo a la edición profesional del complemento y veré qué puede hacer.

Acerca de Divi Icons Pro

Divi Icons Pro agrega muchas características nuevas de íconos a Divi, que incluyen:

• Más de 2500 nuevos iconos
• 360 iconos de estilo de línea personalizada
• 1295 iconos Font Awesome en 74 categorías y 4 estilos cada uno
• 900 iconos de Material Design en 16 categorías y 5 estilos cada uno
• Integración Divi Builder
• Función de búsqueda de iconos en los módulos Divi
• Filtro de iconos en los módulos Divi para elegir por familia o escribir el nombre del icono

Los íconos se integran en el constructor Divi y funcionan igual que los íconos nativos de Divi, por lo que puede diseñarlos con cualquier módulo Divi que use íconos. Al igual que cualquier icono en el generador de Divi, puede personalizar el color y el tamaño, establecer dónde se muestra con los controles del módulo y agregar un círculo o borde.

Instalación de Divi Icons Pro

Descomprime el archivo de descarga. En el interior, encontrará el complemento y las instrucciones. Sube y activa el complemento como de costumbre.

Active la clave API yendo a Configuración > Activación Divi Icons PRO en el menú del tablero. Ahora puede usar la versión pro del complemento. Los iconos se integran automáticamente en Divi Builder, por lo que no hay nada más que deba hacer a menos que desee personalizar la configuración predeterminada en las opciones del tema.

Divi Icons Pro Opciones del tema Divi

Los íconos están habilitados de forma predeterminada, pero puede habilitar o deshabilitar las familias de íconos que desee y elegir cómo se cargan en el sitio web. Se agrega una nueva pestaña Divi Icons Pro a las Opciones del tema Divi. Aquí, puede elegir las familias de iconos que desea utilizar. También puede optar por cargar Font Awesome y Google Material Icon Fonts desde CDN.

Iconos de Divi Icons Pro

Los íconos, filtros y la función de búsqueda se agregan automáticamente a los módulos Divi que usan íconos. Se trata de tres módulos de propaganda que muestran un ícono de los íconos de estilo de línea, la fuente impresionante y los íconos de diseño de materiales.

Búsqueda de Divi Icons Pro

La función de búsqueda le permite utilizar palabras intuitivas para encontrar sus iconos. No es necesario que sepa el nombre del icono. Simplemente ingrese la palabra clave que desea buscar y los íconos aparecerán en el área de selección de íconos. Puede limitar su búsqueda por marca si lo desea seleccionando la marca en el filtro. Algunos de los íconos no aparecieron en los resultados de la búsqueda, por lo que la búsqueda no es perfecta, pero funcionó lo suficientemente bien. Es posible que algunos de los iconos de Font Awesome y Material Icons no tengan un nombre adecuado.

Filtro Divi Icons Pro

Puede filtrar los iconos o verlos todos. El filtro muestra iconos de esa marca o familia específica. Para ver las marcas específicas, simplemente haga clic en el botón con la etiqueta de la marca que desea ver. Filtrará todos los demás iconos. Este ejemplo muestra una pequeña muestra de iconos de temas elegantes.

Aquí hay una muestra de iconos de estilo de línea. Son más delgados que los otros íconos, por lo que tienden a funcionar mejor por sí mismos. Los probé con los demás y funcionan juntos en algunos casos. Vale la pena intentar ver qué funciona para ti. Los iconos están bien diseñados y son algunos de mis favoritos entre las marcas.

Aquí hay una pequeña muestra de iconos de Font Awesome.

Aquí hay una pequeña muestra de iconos de diseño de materiales.

Ejemplos de Divi Icons Pro

Para este ejemplo, reemplacé las imágenes en el diseño de Resort con iconos de estilo de línea. Los configuré en azul y cambié el tamaño a 48 píxeles. Los iconos se ven muy bien en el diseño.

En este, cambié la ubicación del ícono de arriba a la izquierda. También cambié el tamaño a 30 px y agregué 50 px de relleno para centrar cada propaganda.

En este ejemplo, reemplacé el módulo de redes sociales en el pie de página con anuncios para poder elegir mis propios íconos y diseñarlos. Todos estos son de Font Awesome. Configuré los colores para que coincidan con la marca de la red, cambié el tamaño a 52 px y agregué 30 px de relleno en el lado derecho para centrarlos.

Esta vez, cambié el ícono a blanco e hice que el fondo tuviera el color de la marca. Agregué una sombra de cuadro y agregué algo de relleno para centrar los íconos. También agregué relleno al botón naranja para ensancharlo para que coincida con el ancho de los íconos sociales. Los iconos combinan bien con el diseño del diseño.

Este usa el diseño de Mejoras para el hogar. Reemplacé las imágenes con desenfoques y una combinación de íconos usando diferentes familias de fuentes. Están configurados para mostrarse a la izquierda de la propaganda. Los iconos son 50px. Puedes ver en este ejemplo que busqué íconos de Font Awesome para "pintar".

Estos ya eran anuncios publicitarios con íconos, así que los seleccioné, busqué los mismos temas y elegí íconos diferentes.

Éste agrega un círculo a los íconos. Hice el círculo blanco para que coincida con el fondo del diseño e hice que el color del círculo coincida con los íconos.

Los iconos funcionan con botones, pero no se muestran en Visual Builder. Funcionan muy bien en el sitio web real.

Aquí está el icono en el botón dentro del diseño. Funciona muy bien.

Aquí hay una vista más cercana para que pueda ver cómo se ve en el botón.

En este ejemplo, reemplacé las imágenes con desenfoques dentro del diseño Paralegal. Busqué íconos que coincidieran con el tema y, con la excepción del ícono de dinero, usé colores de los gráficos originales.

Para este ejemplo, reemplacé las imágenes en el diseño de Butcher con iconos. Usé el rojo del texto del título y establecí el tamaño de fuente del icono en 84px.

Agregué un color de fondo y una sombra de cuadro a cada uno de los borrones. Se ve muy bien dentro del diseño. Estoy flotando sobre la propaganda en el centro para mostrar su efecto de desplazamiento. Se eleva por encima de los demás y el contenido, incluidos los iconos, se desplaza hacia la derecha.

Precio de Divi Icons Pro

Hay varias opciones de compra según la cantidad de sitios que desee utilizar con el complemento. Incluyen soporte de 6 meses y actualizaciones de por vida. Puede comprar Divi Icon Pro desde el sitio web del desarrollador.

• Licencia regular (1 sitio) - 25,00 €
• Licencia ampliada (sitios ilimitados) - 65,00 €

También hay una versión gratuita que incluye los iconos de estilo de línea 360. No incluye soporte ni actualizaciones.

Documentación de Divi Icon Pro

La documentación está incluida en el archivo de descarga, pero también puede acceder a ella en línea. La documentación es detallada y lo guía a través de la instalación del complemento y el uso de los íconos y las funciones. También incluye preguntas frecuentes y enlaces para obtener asistencia. Los enlaces incluyen las comunidades Divi en las redes sociales y su cuenta con un enlace para crear un ticket de soporte.

Pensamientos finales

Los complementos de íconos son la forma más fácil de agregar nuevos íconos a Divi Builder y Divi Icons Pro es tan fácil como parece. Incluye muchos íconos y puede habilitar o deshabilitar las marcas específicas de íconos para tener más control sobre lo que aparece en los módulos. Me gustan las funciones de filtro y búsqueda. Pude encontrar un ícono para cada tema con el que trabajé.

Los únicos problemas que tuve fueron los íconos que no querían mostrarse en los botones al usar Visual Builder, pero funcionó muy bien en Classic Builder y se muestran muy bien en el sitio web. Algunos de los íconos no aparecieron en los resultados de búsqueda, pero creo que eso es más una cuestión de cómo los desarrolladores de íconos nombran los íconos. Estos problemas son menores y no me impedirán usar o recomendar el complemento.

Divi Icons Pro es fácil de usar y agrega una tonelada de nuevos íconos prácticamente sin esfuerzo. Si está interesado en agregar más íconos al constructor Divi, Divi Icons Pro es un trabajo.

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

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