Seleccionar página

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.

 

 

Curso WordPress online barato

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 con la plantilla divi

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 diseño de iconos en la web

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”.

 

CSS personalizado para añadir efecto al icono

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

 

Compártelo ya!!

▷LLÉVATE TODOS ESTOS RECURSOS GRATIS

 

LLEVATE GRATIS:

 

👉 CURSO WORDPRESS Y DIVI (24 Clases en vídeo)

 

👉 MASTER CLASS: Claves para crear una web que consiga clientes

 

👉 TALLER SEO: Keyword research + 👉 Guía para crear una web profesional + 👉 Training Mis plugins imprescindibles

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com