Los íconos hacen que cualquier elemento se haga visualmente más atractivo. Además llevan significado en sí mismos y ayudan en la experiencia de usuario.
Por otro lado, en el caso de los íconos de Divi, tienen la ventaja extra de que no pesan mucho (Ya que teóricamente son fuentes y no imágenes), por ende no afectan el rendimiento de nuestra página.
Todas éstas características hacen que los íconos sean elementos de suma importancia dentro del diseño de una web.
Los íconos Divi pueden utilizarse en algunos módulos (como el módulo anuncio), incluso hay un módulo específicamente creado para mostrar exclusivamente íconos. Pero, ¿qué sucede cuando queremos usar los íconos en lugares dónde no pueden usarse módulos, por ejemplo en el menú?
Hoy veremos cómo ubicar los íconos de Divi dónde querramos, incluso en el menú principal. El artículo incluye una herramienta que te ayudará a generar visualmente el código para el ícono que necesitas. Y así, sólo tengas que copiar y pegar.
Echemos un vistazo…
Antes de empezar, ¿Ya tienes el tema Divi con licencia?
Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.
Por otro lado, si sólo necesitas una licencia para 1 sitio web, puedes utilizar nuestro servicio de activación de licencia Divi a un excelente precio. Si eres miembro premium, tienes un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Los íconos Divi pueden llamarse con CSS
Cada ícono Divi tiene un código numérico que los identifica (Puedes ver una lista de todos los íconos y sus respectivos códigos numéricos al final de éste artículo).
Utilizando su código numérico identificador, podemos llamarlos mediante un poco de código CSS.
Como sé que muchos tienen códigofobia, les he creado (como ya se ha vuelto costumbre en mi blog) una herramienta que generará automáticamente los códigos necesarios por ustedes. Incluso pudiendo definir el tamaño y el color que queremos que tenga el ícono y poder previsualizar como quedará en tiempo real. Y tengas todo listo para sólo copiar y pegar.
.
Daremos daremos un vistazo a cómo generar el código fácilmente con la herramienta, luego veremos qué hacer con esos códigos. Pero antes…
Te puede Interesar:
Módulo Blog Divi: Mejorando la paginación por defecto + Incluye Herramienta Gratuita
Paso Previo: Debemos desactivar los íconos dinámicos
Debido a las últimas actualizaciones de Divi, la configuración por defecto de performance (que mejora la velocidad de la web), tiene la opción de íconos dinámicos activada.
Ésta opción hace que no se carguen los iconos en páginas dónde ningún módulo las esté utilizando. Y debido a que nuestros íconos creados con éste truco, son agregados «manualmente»y no generados por un módulo de manera nativa, debemos desactivar ésta opción para evitarnos problemas.
Para ello debes ir a las opciones de Tema>General> Pestaña performance. Y desactivar la opción de «Dynamic Icons». Tal como se ve en la imagen de abajo.
Paso 1: Generar el Código necesario para añadir íconos Divi
Para visualizar la herramienta que nos generará el código necesario, solo dejen su correo en el formulario de abajo y hagan click al botón: «Ver Herramienta».
Y automáticamente aparecerá.
Adicionalmente, se te enviará a tu correo un mail de confirmación para ser añadido a mi lista. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones, sorteos y obviamente más herramientas. Además que tenemos una comunicación más directa para compartir y resolver dudas. Así que confirma tu correo.
Seguro que éstos otros artículos también te encantarán:
No se encontraron postsUtilizando la herramienta
Lo primero que nos piden es crearle un nombre para el icono. Es necesario para el CSS.
Pueden ponerle cualquier nombre que se les ocurra. Es importante recalcar que cada ícono que agregues a tu diseño debe tener un nombre único.
Luego hagan click al botón «Elegir ícono» para que les aparezca la lista de todos los íconos Divi, simplemente deberán hacerle click al que sea de su agrado.
Más abajo podrán elegir el tamaño del ícono y el color (haciendo click al campo color) y podrán ver un preview de cómo se ve el ícono en tiempo real.
Por último, simplemente deberán hacer click en generar código y listo, aparecerá todo el código que necesitamos.
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Si te está gustando éste artículo, éstos otros te van a encantar:
Paso 2: ¿Qué hacemos con esos códigos? Copiando y pegando el código 1
Se habrán dado cuenta que se generan dos códigos. El código 1 es el CSS que definirá al ícono. Pueden añadirlo en cualquier campo de CSS personalizado.
Por ejemplo, en un módulo código entre las etiquetas style. (Ej: <style> Código 1 </style>), en tal caso sólo funcionará para esa página dónde se encuentra el módulo código.
Como en éste ejercicio voy a agregar íconos para el menú, necesitamos que el CSS se aplique a todo el sitio web. Por ello voy a pegar el código 1 en el editor de CSS global de Divi. El cuál puedes encontrar en las opciones del tema Divi, desde el panel de WordPress, en le campo de CSS personalizado. Como en la imagen de abajo.
Obviamente después de pegar, guardamos cambios.
Te puede Interesar:
Cómo y dónde añadir CSS personalizado el tema Divi
Paso 3: Ubicando el ícono Divi: Copiando y pegando el código 2
A partir de éste punto el ícono ya está definido (Porque ya hicimos el paso anterior). Lo único que falta, es que ubiquemos al ícono dónde queremos que aparezca. Para ello, simplemente bastará con pegar el código 2 en la ubicación deseada.
Por ejemplo, como se ve en la imagen de abajo, lo he pegado en el módulo texto y vemos que aparece el ícono perfectamente.
(Cabe mencionar que para agregar código en el módulo texto, debes estar en la pestaña “texto” y no en “visual”)
Cómo Añadir Íconos al Menú de Divi
Ahora ésto resulta muy fácil. Simplemente irías donde se agregan las etiquetas de navegación de los menús en WordPress, como se ve en la imagen de abajo y pegarías el código 2, generado por la herramienta, allí.
Guardas cambios y Mira cómo se verá el menú:
¡Así de fácil! ¡Imagina las posibilidades!
Los íconos en los menús y cabeceras más usados son los de redes sociales, que se ven de la siguiente manera:
¿Eres fanático del tema Divi y estás armando tu web con él?
Entonces, mi tienda de Layouts y Plantillas para Divi te va a encantar!!
Mira éstos artículos que también utilizan íconos Divi:
Todos los Iconos de DIVI Elegant Themes
A continuación te presento una lista con todos los íconos de DIVI/Elegant Themes y sus respectivos códigos numéricos para que sólo copies y pegues:
Busco iconos
HERRAMIENTAS