Iconos de Divi en el texto
¡Bienvenidos a la parte 3 de 12 en mi serie de Martes de Tutoriales! Cada martes durante 12 semanas, estoy distribuyendo tutoriales de vídeo para mis preguntas más solicitadas en el diseño, diseños o trucos con WordPress y Divi.
¡En este tutorial, que es tal vez el tutorial más solicitado que he recibido, te muestro Cómo agregar iconos al menú Divi! Y mientras que hay numerosas maneras de hacer esto, voy a cómo lo hago sin el uso de plugins, fuente impresionante o imágenes importadas innecesarias. Mi objetivo en todos mis diseños de sitios web Divi es hacer las cosas ligeras, flexibles y sin el uso de plugins externos o cosas que pueden romper con las actualizaciones. Idealmente, trato de usar CSS que sea global, fácilmente personalizable y flexible. ¡Y eso es exactamente lo que aprenderás en este tutorial!
Hice un poco de investigación para ver si podía averiguar cómo hacer esto un poco más fácil para todos nosotros y me di cuenta de una manera de disminuir drásticamente la cantidad de CSS arriba. En lugar de añadir el icono al contenedor del enlace del menú, podemos editar el propio enlace. Por ejemplo, en lugar de “menu-services:before”, podemos hacer “menu-services a:before”, que afectará al propio enlace, ¡así que no necesitamos añadir ninguna anchura en particular! Recomiendo usar ahora el código revisado de abajo.
Icono personalizado de Divi blurb
No sólo son semánticamente útiles cuando se trata de asegurarse de que los motores de búsqueda entienden su contenido – el elemento de lista desordenada es grande para una serie de otras razones, incluyendo (alerta de spoiler – Estoy a punto de usar una lista desordenada para hablar de las listas desordenadas. ¿Qué tan meta es eso?):
Aunque pueden ser extremadamente útiles, a veces (como mínimo) las viñetas que se muestran en las listas desordenadas por defecto dejan algo que desear desde el punto de vista del diseño. En el peor de los casos, no se ajustan en absoluto a su esquema de diseño.
El siguiente es un práctico tutorial de css que uso en la mayoría de los proyectos en los que trabajo. La ventaja es que se puede “establecer y olvidarse” y la persona que edita el sitio web puede añadir/editar/eliminar elementos de la lista sin estropear nada o arruinar sus geniales iconos. Aquí vamos.
Vamos a utilizar el módulo de texto incorporado de Divi para mantener las cosas fáciles. Por defecto, el módulo de texto tiene un botón en la barra de herramientas para añadir listas desordenadas, por lo que usted o sus clientes podrán gestionar los elementos de la lista sin tener que preocuparse de ningún código personalizado.
La fuente de los iconos de Divi no se carga
El uso de imágenes para los iconos causa problemas para la velocidad de la página y se ve pixelada en las pantallas retina cuando se optimiza adecuadamente. El plugin WP and Divi Icons añade gráficos basados en código SVG que son ligeros, tienen menos impacto en la velocidad de tu página y permiten que tus páginas carguen más rápido.
WP and Divi Icons es exactamente lo que necesitaba. Ya no necesito pedir ayuda a un diseñador gráfico. Más que suficientes iconos para utilizar en todos los casos y el escenario funciona muy bien con CSS. Toneladas de iconos con estilo adecuados para cada tema. Bien merecido 5 estrellas. – wookvsh
Utiliza los iconos para captar la atención de tus visitantes y mejorar la navegación con iconos reconocibles en los que se puede hacer clic. Añádelos a las secciones de servicios y características, mejora la navegación con iconos en tus menús de navegación, o conecta tus redes sociales y úsalos como enlaces de iconos para compartir en redes sociales.
Elige el tamaño de tu icono y escoge un color personalizado con una vista previa en vivo de cómo aparecerá el icono. Añade clases CSS personalizadas para un estilo específico. WP y Divi Icons le da el control total de estilo para ofrecer el diseño perfecto en cada sitio.
Iconos Divi
Después de añadir su primera Lista de Iconos, verá aparecer una barra gris con el título de su Lista de Iconos mostrado como una etiqueta. La barra gris también tiene tres botones que le permiten editar, duplicar o eliminar la Lista de Iconos.
Aquí puede controlar el radio de las esquinas de la Imagen. Habilite el icono de enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir valores personalizados para cada una. puede jugar con la adición de bordes y Box Shadow a la Imagen
Aquí puedes elegir la dirección del Icono, si seleccionas de Izquierda a Derecha el icono estará a la Izquierda y el texto a la Derecha. Y lo mismo ocurre con la opción de derecha a izquierda, el texto a la izquierda y el icono a la derecha.
Aquí puedes controlar el radio de las esquinas de la Imagen. Active el icono de enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir valores personalizados para cada una.