Resaltado del complemento Divi: Iconos WP y Divi

WP and Divi Icons es un complemento de terceros para WordPress que funciona con cualquier tema de WordPress y se integra en Divi Builder. Para usar con Divi, incluye diseños exclusivos que puede usar en sus proyectos. Los iconos están disponibles en el editor de WordPress y en cualquier módulo Divi que le permita elegir iconos. En este artículo, echaremos un vistazo a WP y Divi Icons y veremos qué lo distingue de la multitud.

WP y Divi Icons agregan más de 2500 íconos a WordPress. Incluye íconos de Font Awesome, íconos de materiales y 450 íconos de diseño personalizado, incluidos 48 íconos multicolores. Está disponible tanto en una edición gratuita como en una profesional. Estoy probando la edición profesional.

Instalación de iconos WP y Divi

Sube y activa el complemento como de costumbre. Estoy usando la versión 1.1.0 con Divi versión 3.17 y WordPress 4.9.8.

A continuación, deberá activar su licencia. Puede navegar a la pantalla de activación o hacer clic en el mensaje que aparece en la parte superior de la pantalla. Sin embargo, sigue siendo útil saber cómo navegar allí, porque esta página se convertirá en la pantalla de opciones una vez que ingrese su clave de licencia.

Para acceder a la pantalla independientemente del tema que esté utilizando, haga clic en el enlace Instrucciones en la descripción del complemento en la lista de complementos. Si está utilizando Divi, se agrega un nuevo elemento de menú al menú Divi en el panel de control llamado WP y Divi Icons. Haga clic aquí e ingrese su clave de licencia.

Personalización de los iconos multicolores

Después de ingresar su clave de licencia, se abre la pantalla con las instrucciones, una lista de 48 íconos multicolores y herramientas para crear sus propios esquemas de color para esos íconos.

Tienes control sobre tres colores. Ajuste los controles de color y espere unos segundos para ver los resultados. Al hacer clic en Eliminar, se elimina el esquema de color. Los colores agregan un pequeño efecto de sombreado, lo que crea versiones más oscuras de cada color y se ve increíble.

Al hacer clic en Agregar combinación de colores, se crea un nuevo conjunto de iconos multicolores que puede ajustar.

Agregue tantas combinaciones de colores como desee. Esto amplía enormemente lo que puede hacer con los iconos. Los controles son intuitivos. Resulta que esto me pareció un poco adictivo.

Uso de iconos WP y Divi en WordPress con cualquier tema

Para usar los íconos con cualquier tema, seleccione el nuevo ícono que se agrega al editor de WordPress.

Esto abre el editor donde puede elegir un icono, editar el color escribiéndolo en el campo de color o usando el selector de color, cambiar el tamaño ingresando el número en píxeles o usando el control deslizante, agregar un título y agregar una clase. También puede buscar iconos.

Cualquier cambio que realice se muestra en vivo. En este ejemplo, ingresé el color que quería, cambié el tamaño a 106 píxeles y cambié el nombre a Green Leaf.

Al hacer clic en Aceptar, se agrega el icono a su contenido.

Haga doble clic en el icono para abrir el editor y realizar cambios.

Haga clic en Aceptar y los cambios se reflejarán en el icono dentro de su contenido.

Este editor no edita los iconos multicolores. Tendrá que editarlos en la pantalla de configuración principal que demostré anteriormente. Aún puede seleccionarlos desde este editor, cambiar su tamaño, agregar un título, agregar una clase e insertarlos en su contenido desde aquí.

Los iconos se ven muy bien dentro del contenido.

Uso de WP y Divi Icons con Divi Builder

Se agregan muchos íconos nuevos al Divi Builder a los que se puede acceder desde cualquier módulo que le permita seleccionar íconos. Se agrega una nueva función de búsqueda y los íconos son mucho más grandes, lo que los hace más fáciles de ver (lo que muestra que este complemento probablemente fue diseñado por un viejo como yo. Puedo identificarme y apreciar esta característica).

Me gustaría ver un filtro agregado para poder elegir entre Font Awesome, Material o los íconos personalizados. De esta manera, podría ver fácilmente los íconos personalizados e ignorar los íconos Font Awesome y Material si quisiera algo diferente a los demás, o construir solo con Font Awesome o Material Icons, o combinar mis íconos de forma selectiva.

Incluye iconos de uno y varios colores.

Buscar y cambiar íconos en vivo desde la interfaz.

Son ajustables como cualquier icono Divi.

También puede agregar íconos multicolores desde el generador de frontend. No puede ajustar los colores del ícono aquí (eso se hace en el editor de íconos multicolores), pero puede agregar un círculo, agregar un borde, ajustar sus colores y ajustar el tamaño del ícono desde la configuración del módulo.

En este ejemplo, agregué un círculo con un borde.

Puede usarlos tanto desde el frontend como desde el backend.

El editor de iconos de WordPress también está disponible en el módulo de texto Divi. Este editor funciona exactamente igual que con cualquier tema de WordPress.

Diseños de iconos WP y Divi

El complemento funciona con cualquier tema, pero tiene características especiales solo para Divi. Una de las mayores ventajas de usarlo con Divi son los diseños personalizados exclusivos. Fueron diseñados a medida utilizando WP y Divi Icons y el enlace de descarga solo está disponible dentro del complemento. Están disponibles para descargar para cualquier persona con el complemento y se pueden utilizar en cualquier proyecto. Son diseños completos con muchos módulos de estilo.

Ya hay varios disponibles y varios más en camino. Aquí hay un vistazo a cada uno con un enfoque en cómo usan los íconos. Puede verlos en la página de demostración del desarrollador.

Diseño de comercio electrónico

Este diseño incluye un encabezado con estilo con burbujas para mostrar los tipos de pasarelas de pago y socios de envío que utiliza la empresa. Los iconos multicolores muestran los servicios ofrecidos. Cómo funciona se muestra en pestañas. También incluye tablas de precios, testimonios, suscripción al boletín de preguntas frecuentes y pie de página.

Diseño de agencia creativa

Este incluye un encabezado con estilo, un área sobre los tipos de servicios que ofrece, un portafolio, un control deslizante que cubre cómo trabaja y los pasos que toma, testimonios, premios, acerca de su equipo, contacto y pie de página. Utiliza muchas esquinas en ángulo y efectos de sombras profundas. Los iconos multicolores muestran los servicios.

Diseño de negocios oscuro

Este tiene un encabezado de dos columnas con una imagen en un lado y texto en el otro. Una sección que muestra los servicios que ofrece utiliza íconos de varios colores y muestra imágenes y texto alternando a lo largo de la página. Otras secciones usan texto de fondo grande y muestran la historia de la empresa, los miembros del equipo con íconos multicolores en la superposición, formulario de contacto, información de contacto y pie de página.

Luz de diseño empresarial

Este es el mismo diseño que Business Layout Dark, pero con colores claros.

Diseño sin fines de lucro

Este muestra un control deslizante de imagen a pantalla completa con un menú vertical a la derecha y usa íconos para los botones de seguimiento social. Una pequeña sección debajo muestra una donación a la acción. También incluye una sección acerca de, las causas que apoya, una sección de eventos, proyectos, anuncios publicitarios con íconos, patrocinadores y un pie de página.

Licencia y documentación

Los precios van desde gratis para una edición limitada, $ 39 para un solo sitio, $ 59 para 3 sitios y $ 79 para sitios ilimitados. Puede comprar el complemento en el sitio web del desarrollador.

Incluye soporte premium y 3 años de actualizaciones. La documentación se proporciona en el sitio web del desarrollador.

Pensamientos finales

WP y Divi Icons es fácil de usar. Se necesitan unos segundos adicionales para cargar los iconos cuando hago clic en ellos en los módulos Divi. Estoy seguro de que esto se debe principalmente a mi lenta conexión a Internet de "bienvenida a la vida en el campo". Me gustaría ver un filtro agregado a los módulos Divi. La función de búsqueda es útil para encontrar iconos basados ​​en palabras clave.

Me gusta que agregue Font Awesome y Material Icons, pero mis favoritos son los íconos personalizados, y especialmente los íconos multicolores. El editor es simple y divertido de usar. Creo que es un gran complemento incluso sin Divi, pero es incluso mejor con Divi debido a los diseños gratuitos.

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

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