Lo más destacado 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 Configuraciones > 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 es necesario hacer nada más 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 Divi Icons Pro

Los iconos, filtros y función de búsqueda se agregan automáticamente a los módulos Divi que usan iconos. Se trata de tres módulos de propaganda que muestran un icono de Iconos de estilo de línea, Font Awesome e Iconos 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 iconos aparecerán en el área de selección de iconos. 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 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 correcto.

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 usted. Los iconos están bien diseñados y son algunos de mis favoritos entre las marcas.

Aquí tienes una pequeña muestra de íconos 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 puse 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. Puede ver en este ejemplo que busqué iconos de Font Awesome para "pintar".

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

Éste agrega un círculo a los íconos. Hice que el círculo sea blanco para que coincida con el fondo del diseño y 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í tienes una vista más cercana para que puedas 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 asistencia 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 iconos y 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 iconos son la forma más fácil de agregar nuevos iconos 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 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 un montón de nuevos íconos prácticamente sin esfuerzo. Si está interesado en agregar más íconos al creador de Divi, Divi Icons Pro es una buena idea.

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