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 puedes usar en tus proyectos. Los iconos están disponibles en el editor de WordPress y en cualquier módulo Divi que te permita elegir iconos. En este artículo, echaremos un vistazo a los iconos de WP y Divi y veremos qué los diferencia de la multitud.
WP and Divi Icons agrega más de 2500 íconos a WordPress. Incluye iconos Font Awesome , iconos de materiales y 450 iconos de diseño personalizado, incluidos 48 iconos multicolores. Está disponible tanto en una edición gratuita como en una profesional . Estoy probando la edición pro.
Cargue y active el complemento de forma normal. 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, aún es ú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 tablero llamado WP and 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 tantos esquemas de color 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 agregó al editor de WordPress.
Esto abre el editor donde puede elegir un ícono, 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 mostré anteriormente. Todavía puede seleccionarlos desde este editor, cambiar su tamaño, agregar un título, agregar una clase e insertarlos en su contenido desde aquí.
Los íconos se ven muy bien dentro del contenido.
Uso de iconos WP y Divi con Divi Builder
Se agregan muchos íconos nuevos a Divi Builder a los que se puede acceder desde cualquier módulo que le permita seleccionar íconos. Se agregó 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 función).
Me gustaría ver un filtro agregado para poder elegir entre Font Awesome, Material o los íconos personalizados. De esta manera, podía ver fácilmente los íconos personalizados e ignorar los íconos de Font Awesome y Material si quería algo diferente de los demás, o construir solo con Font Awesome o Material Icons, o combinar mis íconos de forma selectiva.
Incluye iconos individuales y multicolores.
Busque y cambie iconos en vivo desde la interfaz.
Son ajustables como cualquier icono de Divi.
También puede agregar íconos multicolores desde el generador de interfaz. 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, he agregado 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 usando 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 usar 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, una cartera, un control deslizante que cubre cómo trabaja y los pasos que toma, testimonios, premios, sobre 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 iconos de varios colores y muestra imágenes y texto alternando en la página. Otras secciones utilizan texto de fondo grande y muestran la historia de la empresa, los miembros del equipo con íconos multicolores en la superposición, el formulario de contacto, la información de contacto y el pie de página.
Luz de diseño comercial
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 de pantalla completa con un menú vertical a la derecha y usa íconos para los botones de seguimiento social. Una sección delgada debajo de esto muestra una CTA de donación. También incluye una sección acerca de, 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 son fáciles de usar. Se tarda unos segundos más en 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 «bienvenido 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 e íconos de materiales, pero mis favoritos son los íconos personalizados, y especialmente los íconos multicolores. El editor es simple y divertido de usar. Creo que es un excelente complemento incluso sin Divi, pero es aún 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