El uso de iconos en páginas web es algo muy habitual hoy en día. En este post vamos a profundizar en este tema. Veremos cómo añadir iconos con la plantilla Divi para WordPress a través del Divi builder.
VER MÁS CURSO WORDPRESS ONLINE
También veremos cómo crear algún efecto al poner el ratón sobre el icono añadiendo algo de código al builder. Esta tarea será muy sencilla ya que Divi en su versión 2.7 viene perfectamente preparada con ventanas de código para que este pueda ser añadido fácilmente desde el panel de administración.
1.- VENTAJAS DE AÑADIR ICONOS A LAS PÁGINAS WEB FRENTE A IMÁGENES
Hoy en día es muy habitual incluir iconos en las páginas web, principalmente se utiliza para resumir los servicios que ofrece una empresa o un profesional. Es un recurso muy utilizado en páginas web corporativas.
Los iconos ayudan a romper la monotonía del texto y ayudan al visitante a compartimentar el contenido en varios bloques, facilitando su lectura.
Los iconos en la web dan un toque visual a la página y se cargan a mayor velocidad que las imágenes. Por lo que una página web con iconos será mucho más rápida que la misma con imágenes.
Todos los page builders para WordPress disponen de iconos. Si la plantilla que utilizas no utiliza ningún page builder plantéate añadirle uno para darle un toque más profesional a tu web. Aquí tienes un comparativo con un profundo análisis de varios page builders.
Descuento Divi y Divi Builder
2.- AÑADIR ICONOS CON EL DIVI BUILDER EN WORDPRESS
El módulo para añadir iconos en Divi es el módulo “Anuncio” en inglés (Blurbs). El módulo anuncio tiene las siguientes opciones de configuración:
2.1.- Ajustes generales
i.- Título: El texto aquí indicado aparecerá como título en negrita.
ii.- URL: si queremos que el icono sea un link aquí debemos indicar la url de destino. En caso contrario lo dejaremos en blanco.
iii.- La URL se abre: aquí podemos elegir que el enlace se abra en una nueva pestaña o en la misma pestaña. Mi recomendación por motivos de SEO es siempre abrir los enlaces en una nueva pestaña.
iv.- Usar icono: en este apartado del módulo anuncio de la plantilla Divi para Wordrpess elegiremos si queremos utilizar un icono de la biblioteca del Divi builder o queremos subir un icono personalizado.
Si elegimos SI, estamos indicando que queremos utilizar un icono preexistente en el Divi builder.
Icono: aquí elegiremos el icono que queremos utilizar en la página.
Elegir icono para la web
Color icono: en este apartado elegiremos el color del interior del icono.
Icono circular: aquí elegiremos si queremos que el icono esté circunscrito. Es decir, si queremos que aparezca un circulo perimetral al icono.
Color del círculo: aquí indicaremos el color interior del círculo.
Mostrar borde del círculo: Ahora elegiremos si queremos que se muestre el borde del círculo.
Color del borde del círculo: ahora seleccionaremos el color del borde del círculo.
Si elegimos NO, estamos indicando que queremos utilizar un icono personalizado.
Imagen: desde aquí podemos subir un icono personalizado que tengamos en nuestro pc.
Texto alternativo para la imagen: aquí estableceremos el alternative text o etiqueta alt de la imagen. Importante a nivel de SEO.
v.- Ubicación de la imagen o el icono: aquí seleccionaremos si queremos que el icono aparezca encima del título o lateralmente.
vi.- Animación de la imagen o el icono: aquí estableceremos como queremos que aparezca el icono. Es decir, como hacer la transición.
vii.- Color del texto: Según el fondo que hayas establecido aquí puedes elegir que el texto aparezca claro u oscuro. Luego podrás personalizar totalmente este aspecto en las pestaña “ajustes avanzados de diseño”
viii.-Orientación del texto: aquí elegiremos la alineación de los textos que acompañan al icono (título + texto). Alineación izquierda, derecha, centrado o justificado.
ix.- Contenido: Aquí escribiremos el texto que queremos que aparezca con el icono. Si no hemos utilizado el apartado de título podemos ahora poner título y texto bajo el mismo.
x.- Desactivar el: con este apartado podemos hacer que el módulo para iconos no aparezca en algún tipo específico de dispositivo: escritorio, móvil o tablet.
2.2.- Ajustes avanzados de diseño
i.- Anchura máxima de la imagen: desde este apartado puedes establecer una anchura máxima para el icono, en caso de haber utilizado un icono personalizado. Esta anchura la puedes personalizar para móviles, tablets y escritorio.
ii.- Usar tamaño de fuente de icono: Esta opción aplica cuando hayamos utilizado un icono incluido en la biblioteca del Divi builder. Si elegimos “no” el icono aparecerá al tamaño estándar. En caso de elegir “SI” nos aparecerá un nuevo apartado denominado “tamaño de fuente de icono” en el que podremos establecer el tamaño en Pixeles del icono.
Tamaño de fuente de icono: podremos establecer el tamaño del icono entre 1 y 120 px. Podremos personalizar el tamaño del icono según se muestre en móviles, tabletas o escritorio. Recuerda que esta opción aplica solo si estás utilizando un icono incluido en la biblioteca del Divi builder, que como ya sabes es el page builder de la plantilla Divi para WordPress.
Ajustes avanzados de diseño iconos
iii.- Cabecera fuente: aquí personalizaremos el tipo de fuente y algunos formatos básicos (negrita, cursiva, subrayado) para el texto que pusimos en el título del módulo.
iv.- Cabecera tamaño de fuente: Ahora estableceremos el tamaño de la fuente del texto que establecimos en el título del módulo (podemos especificar el tamaño según dispositivo).
v.- Cabecera color del texto: aquí estableceremos el color de dicho texto.
vi.- Cabecera especio entre letras: Aquí podremos personalizar el espaciado entre letras.
vii.- Cabecera altura de línea: Aquí el espacio entre líneas de texto.
viii.- Cuerpo de fuente: Ahora estableceremos el tipo de fuente y formatos básicos para el texto que aparecerá bajo el título del iconos. Este texto lo incluimos en el apartado “Contenido”.
ix.- Cuerpo tamaño de fuente: aquí podemos seleccionar el tamaño del texto que aparecerá bajo el título del icono (podemos especificar tamaños según dispositivo)
x.- Cuerpo color del texto: aquí seleccionaremos el color del texto
xi.- Cuerpo espacio entre letras: ahora podemos seleccionar el espaciado entre letras.
xii.- Cuerpo altura de línea: ahora el espaciado entre líneas del texto que aparece bajo el título del icono.
xiii.- Color de fondo: aquí seleccionaremos el color de fondo del todo el módulo. Es decir del conjunto de icono + título de icono + texto bajo el título. Si lo dejamos tal cual está el color será transparente.
xiv.- Imagen de fondo: podemos establecer una imagen de fondo para el conjunto del módulo para iconos.
xv.- Usar borde: podemos establecer un borde al perímetro del módulo. En caso de utilizar dicho borde podremos personalizar los siguientes aspectos:
Color del borde: desde aquí estableceremos el color del borde del módulo para mostrar iconos con WordPress y Divi
Anchura del borde: aquí la anchura en pixeles del borde
Estilo del borde: aquí el tipo de diseño para el borde.
xvi.- Margen personalizado: aquí podemos establecer márgenes para el exterior del módulo. Es decir, lo que se conoce en css como el “margin”.
xvii.- Relleno personalizado: desde aquí podemos establecer márgenes internos para el módulo. Es decir, lo que se conoce en CSS como el “padding”.
3.- EFECTO SOBRE LOS ICONOS AL PONER EL RATÓN SOBRE EL ICONO CON DIVI
Te voy a mostrar en este apartado como realizar un efecto hover sobre los iconos realizados con el Divi Buider. Es decir, con el page builder de la plantilla Divi.
El efecto consiste en que al poner el ratón sobre alguno de los iconos, aparece una especie de halo color rojo. Al mismo tiempo aparece una sombra sobre los bloques de texto que acompañan a los iconos. Tienes un vídeo del efecto en la parte superior del post.
3.1.- Configurar efecto hover sobre los iconos de una página
Para poder mostrar este diseño en tu web tendrás que realizar la siguiente configuración y añadir un código CSS. No te preocupes, el código es muy fácil añadirlo. El page builder tiene un apartado para añadir código CSS a la página de una manera sencilla. Eso sí, debe ser a partir de la versión 2.7 de la plantilla DIVI.
Vamos a seguir los pasos uno a uno:
a.- Añadir una sección: en primer lugar añadiremos una nueva sección y le asignaremos el color de fondo #f5f5f5
b.- Añadir fila: ahora añadiremos una fila dentro de la sección con 2,3 o 4 columnas según quieras que se muestren en 2,3 o 4 iconos por fila.
i.- Fila de anchura completa: entra a la configuración de la fila, en “Ajustes generales” y en la opción: “Hacer que esta fila tenga anchura completa” pon el selector en “SI”.
ii.- Separación de columnas: un poco más abajo verás una opción de configuración de la fila de nombre: “El uso personalizado de canalón de ancho”. Pon el selector en “SI” y establece el espacio entre columnas en 2.
iii.- Clase CSS: Ahora ve a la pestaña “CSS Personalizado” de la fila y en el campo “Clase CSS” escribe: blurb-card
A continuación pulsa el botón de guardar del Divi Builder y guarda la página.
c.- Añadir los módulos “Anuncio”: ahora añadimos el módulo anuncio en cada una de las columnas de la fila. En cada módulo realizaremos lo siguiente:
i.- Añadimos Título y URL. La URLs será a la que se dirigirá el usuario cuando haga clic sobre el icono.
ii.- Usar iconos: en el selector “Usar icono” seleccionamos “SI”.
iii.- Icono: elegimos un icono
iv.- Color de icono: seleccionamos el color blanco para el icono
v.- Icono circular: en el apartado icono circular seleccionamos “SI”.
vi.- Color del círculo: en el apartado color del círculo ponemos el color #0f2c41
vii.-Orientación del texto: en el apartado orientación del texto seleccionamos: “centro”
viii.- Contenido: añadimos un texto en el apartado contenido utilizando el editor de texto.
Recuerda guardar y actualizar la página
d.- Añadir módulo botón: añade un módulo tipo botón debajo de cada módulo anuncio. En el módulo botón rellenamos el apartado “URL del botón” donde pondremos la URL a la que se dirigirá al visitante cuando haga clic sobre el rectángulo de texto que hay bajo el icono.
Pon también un texto para el botón. No te preocupes, este texto no aparecerá cuando introduzcas el código CSS del siguiente punto.
e.- Añadir código CSS: Ya solo queda añadir el código CSS. Para añadir el código ve a la parte superior del page builder. En la parte izquierda está el texto “El constructor Divi”, pues a la derecha verás un icono tipo hamburguesa (icono de tres rayas). Este icono sirve para realizar configuraciones para toda la página.
Haz clic sobre el icono y pega el código que te voy a aportar en el área de texto de título: “CSS Personalizado”.
Pegamos el código CSS en el apartado CSS Personalizado
Aquí te dejo un botón para que te descargues el código CSS que tienes que utilizar. El código CSS está comprimido. Descarga el archivo, descomprímelo, copia el texto con un editor de código y lo pegas en lugar antes indicado.
DESCARGAR CÓDIGO CSS
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Buenos dias,
Mi cliente se cargó el paquete que le envié WorPress, y todo funciona perfectamente excepto los iconos que incluí en DIVI.
Un saludo y gracias
Hola Joaquín! Muchas gracias por toda la información y ayuda que ofreces. Tengo una duda sobre los iconos: me gustaría añadir un icono de email al pie de la plantilla Divi, al lado del resto de iconos, con el link a mi dirección de email. ¿Es esto posible? He visto que tú lo tienes en el menú secundario (arriba del todo).
Mil gracias por adelantado!
Hola Carolina,
Añadir el icono del email en la barra inferior junto al resto de redes sociales no es fácil, pues no hay ninguna opción en la plantilla para hacerlo.
Arriba, como lo tengo yo si es fácil, solo tendrías que ir a: «Divi > Personalizador de temas > Cabecera y navegación > Elementos de cabecera».
Ahora en el campo de «correo electrónico» pon tu email.
Buenas tardes Joaquín, gracias por toda la información que nos ofreces.
Tengo una duda sobre los anuncios en la que espero me puedas ayudar.
He creado una fila de 3 anuncios y todo correcto en la visión del pc ya que se ven los 3 de forma horizontal, pero el problema surge en la versión móvil, ya que los 3 anuncios me salen en una fila vertical en lugar de horizontal.
He reducido tamaños pero no hay manera.
¿cómo podría solucionarlo para ver en el móvil los anuncios de forma horizontal?
Gracias de antemano
Hola José Miguel,
Todos los módulos que se colocan en más de una columna con Divi se visualizan de manera horizontal en escritorio y verticla en Móvil. No solo el módulo anuncio sino todos.
La razón es que esto lo hace automáticamente Divi para asegurarse de que la plantilla esté optimizada para móviles. En caso de hacer lo que comentas, que módulos de diferentes columnas se muestren horizontalmente en móviles supondría una penalización en la optimización móvil en la mayoría de casos.
Por lo que además de que no se puede hacer, no te lo recomiendo en absoluto.
Es posible que modificando directamente el código de la plantilla o a través de algún plugin se pudiera hacer lo que comentas, pero como te digo, no te lo recomiendo.
Muchas gracias Joaquín por tu rápida respuesta y por la información, la pondré en practica tal cual me comentas.
Saludos
Gracias a tí,
Un saludo
hola, como puedo hacer un icono que he creado yo en png tenga los efectos?
Buenas,
Cómo el efecto solo se puede aplicar a los iconos que hay en la biblioteca del divi builder,
lo que tendrías que hacer es utilizar el plugin Divi Booster para añadir el icono que tienes en la biblioteca de Divi,
Divi Booster es un plugin que añade a la plantilla Divi más de 90 nuevas funcionalidades: En este post puedes ver una guía parcial de las opciones que incorpora Divi Booster y en este otro post las opciones de divi booster relacionadas con los Iconos
Hola!
Excelente información
Tengo una consulta ¿Como puedo añadir iconos de font awesome en el modulo de texto de divi? Estoy intentando y no encuentro la manera de realizarlo.
De antemano muchísimas Gracias🙂
SALUDOS.
Hola Joel,
de su blog» introduce el siguiente código:Para añadir iconos de Font Awesome,
1.- ve en el panel de administración de wordpress a: «Divi > Opciones del tema > Integration» y en el campo «Agregar código al
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"Al principio de la línea de código falta < y al final > que no los he podido poner porque si lo pongo no se muestra el código en los comentarios.
2.- Luego deberás utilizar el código correspondiente en el módulo código según el icono que quieras mostrar
hola buenas, he cargado en cambio de icono de divi, imagenes mias de iconos, solo que no consigo poner efecto hover, quiero que cuando pasas con el raton cambia el color del icono, he cargado correctamente la imagen en el servidor de color diferente, pero no funciona.
he probado con content y con background-image pero no funciona
me puedes ayudar por favor?
Buenas,
¿has probado en la pestaña de CSS personalizado del módulo Anuncio?
Excelente aporte Joaquin. Tengo una curiosidad.
Es posible cambiar el color del circulo y el color del borde del circulo cuando paso el cursor, y si es posible como se realiza. Gracias de antemano Joaquin.
Hola Miguel,
poder seguramente que se puede,
pero habría que ir realizando pruebas sobre el código,
yo probaría sobre el bloque:
.blurb-card .et_pb_column:hover .et-pb-icon {background: rgba(255, 255, 255, 0.05);color: #fff !important;-webkit-transition: all 0.1s linear;-o-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-ms-transition: all 0.1s linear;-kthtml-transition: all 0.1s linear;}y modificaría el color del «background»
Joaquin buenos días, no funciona los cambios en ese bloque, intentare en otros bloques. Otra consulta, como haces que el marco del texto cruce por la mitad del icono.
Hola Joaquin Ya pude subir el marco cambiando a negativo el margen en el primer bloque. Mi problema es que la cabecera con el tecto montan. Donde podría bajar la cabecera y el texto a la vez. Gracias de antemano.
Buenas Miguel,
no entiendo a que te refieres
Hola,
Tengo un par de problemas:
1- Me gustaría cambiar el color del icono de rojo a algún otro color y no me deja. Cambiandolo en el apartado color del icono no consigo cambiarlo.
2- Cada vez que muevo el cursor encima de alguno de los cuatro apartados, indirectamente se me ilumina la fila entera. Quiero decir que el efecto de iluminación no va por separado sino que por filas.
Muchas gracias.
Buenas,
¿has probado a hacerlo con el constructor tipo backoffice en vez con el constructor visual?
El segundo apartado no entiendo a que te refires
Un saludo
Lo del color solucionado. 😉
Con el segundo punto quiero decir: he puesto en total cuatro apartados. Dos arriba y dos abajo. Cuando muevo el cursor hacia la izquierda, el efecto de la luz en forma de circulo se me activa en las dos apartados. Lo mismo me pasa cuando lo muevo a la derecha. En vez de que la luz en circulo se activara individualmente, digamos que se activa por filas.
No se si me he explicado bien (podria mandarte un vídeo breve sino).
Muchas gracias.
buenas,
si entiendo que te refires a que el efecto hover (con el código que se menciona en el post) no te funciona de manera individual sino con varios iconos juntos.
Pues no se porque te ocurre eso, en el ejemplo que hice si funcionaba correctamente.
¿si los pones en una sola línea si te funciona bien?
Eso es, me refiero al efecto hover. He hecho la prueba y he puesto los cuatro apartados en cuatro columnas y ahora no me da ningún problema. Creo que el efecto hover funciona por filas. Alguna solución?
La solución no es fácil,
tendrías que ir modificando el código y probando resultados
Hola , la verdad que la plantilla Divi funciona muy fácil para casi todo pero estoy atascado en algo. Estoy intentado insertar una fila de imágenes con 10 columnas. Divi solo me deja seleccionar un espacio con 4 cuerpos como máximo. Como podría insertar 10 imágenes seguidas en una fila en 2 filas consecutivas??? Podría hacerse?
Un saludo y gracias de antemano
Buenas,
Aquí te dejo dos enlaces a dos posts que indican como añadir más columnas con el divi builder (mas de 4 columnas con divi):
Añadir columnas con el divi builder
Crear 5/6/7/8 columnas con Divi
Hola Joaquín,
No soy una experta en programación pero esto diseñando mi propia página web mediante el constructor DIVI. La verdad que hasta ahora ha ido todo muy bien pero estoy atascada en uno de los pasos y no se como solucionarlo. Intento crear un apartado de cursos, en los que quiero indicar cuatro tipos de cursos. Para ello, utilicé los módulos de anuncio puesto que quería acompañar cada tipo de curso con una imagen (he utilizado iconos descargados). Mi idea es que quedaran en dos filas los cursos, con dos cursos por fila (No sé si me explico bien!). El problema es que no me quedan a la misma altura, sino que cada uno va a una altura distinta (puesto que la descripción de algún curso es mayor que la otra y al ocupar más el texto no me los equilibra). He intentado de todo pero no sé que puedo hacer. Por favor, ayuda!! Espero haberme explicado, si quieres te puedo enviar una foto para que veas como está. Millones de gracias por tu página, me ayuda mucho! Un saludo
Hola Olaya,
Seguramente estás usando una única fila para los cuatro módulos tipo icono y por eso te ocurre lo que describes. Tienes que crear una fila para 2 cursos y debajo otra nueva fila para los otros dos cursos (ambas filas dentro de la misma sección). De esta manera aunque en un curso tenga más texto que el que tiene al lado, no influirá en los cursos que hay debajo.
Un saludo
Fantástica web en todos los sentidos.
Mi cuestión es la siguiente:
No sé cómo cambiar el de los títulos en los «anuncios» en la plantilla divi. Necesito que sean . Doy vueltas y más vueltas y no encuentro como hacerlo.
Me refería a las etiquetas h1, h2, h3, …. Necesitaba que el título de los anuncios tuvieran etiquetas h3. En mi primer comentario he visto que no está permitido escribir etiquetas ;))
Gracias Joaquin y saludos.
Hola Juan,
Efectivamente en los anuncios los títulos aparecen automáticamente como H4. Yo cuando quiero que salgan con otro título, por ejemplo H2. Lo que hago es no rellenar el título y en el contenido con el editor pongo el título marcado como H2 y contenido como Parrafo. Los efectos de diseño solo afectarán al contenido tipo párrafo, para cambiar algo del diseño del H2 lo hago añadiendo CSS directamente sobre el H2 en la pestaña de texto del editor.
Un saludo
Hola Joaquin, muchas gracias por estos post tan explicativos y de gran ayuda. Tengo un problema relacionado pero con los conmutadores, quiero que aparezca el titulo de cada conmutador en h2 pero automaticamente aparece en h4. El problema es que no se puede modificar el titulo en el editor. Querria saber si hay alguna forma de modificarlo. Muchisimas gracias de antemano.
Hola Hector,
en las últimas versiones de Divi han añadido para muchos de los módulos (entre ellos el conmutador) la opción de elegir el tipo de H1-H6 para el título.
En el caso del conmutador lo tienes en pestaña «Diseño > Título texto»
hola Joaquín,
Cómo estas? te felicito por tu página, porque es super completa!! realmente se nota que eres muy profesional.
Te escribo porque estoy queriendo hacer mi página con Divi. Aún no la he comprado (lo haré a través de tu oferta) y estoy queriendo replicar una página que tenía hecha con otra plantilla (Zerif Pro de Themeisle).
Por ello tengo dos preguntas:
1) cómo puedo hacer para que en algunas secciones el texto aparezca como desplazándose, de izquierda a derecha por ejemplo. Luego queda fija (un poco el efecto que hacía Powerpoint con las letras). O que dos columnas aparezcan una de derecha a izquierda y la otra de izquierda a derecha, así hace un efecto de centrado… creo que si me dices cómo se llama hacer esto, voy a darme cuenta del recurso a usar. Si entras a mi página actual, se puede ver eso en dos secciones y en el ribbon con texto.
2) hay alguna manera de que tanto las fotos como los videos en lugar de almacenarse en la galería de imágenes se guarden por ejemplo en la nube o youtube a través de una url? esto lo haría para hacer más liviana mi página.
Desde ya muchas gracias!
Hola Patricia,
gracias por tus palabras.
1.- Con la plantilla Divi podemos hacer el tipo de movimientos que describes con imágenes e iconos, pero no con textos. Es decir podrás usar los módulos tipo imagen y anuncio (iconos) para ello.
2.- En cuanto a lo de las imágenes, nadie tiene las imágenes fuera de WordPress. Lo suyo es subir las imágenes optimizadas para que pesen poco y luego poner un plugin de caché para aumentar la velocidad de la web y comprima las fotos (en esto no influye la elección de plantilla). En cuanto a los vídeos lo suyo como dices es crear un canal de youtube y luego incrustar lo vídeos en WordPress (esto no depende de la plantilla utilizada)
Un saludo