¿Te gustaría saber cómo utilizar el módulo Icon de Divi Cómo crear iconos personalizados?

Los botones de iconos se han convertido en un elemento básico en el mundo del diseño web. Los íconos brindan llamadas a la acción visuales concisas que funcionan muy bien para dispositivos móviles porque no ocupan mucho espacio. También funcionan bien como botones emergentes o de alternancia que los usuarios reconocen intuitivamente sin necesidad de texto.

En el tutorial de hoy, le mostraremos cómo diseñar botones de iconos con Divi. Crear un botón de icono en Divi es bastante simple y divertido de hacer. 

Usando el módulo de íconos, podemos elegir entre cientos de íconos y usar innumerables opciones de diseño integradas desde Divi Builder para crear casi cualquier tipo de botón de icono que se te ocurra. 

Esperamos que este artículo lo ayude a comenzar a crear increíbles botones de íconos para su próximo proyecto.

Vamos a empezar!

vista

Aquí hay una descripción general rápida de los botones de íconos que crearemos en este tutorial.

use el módulo Divi Icon para crear íconos personalizados

Crear una nueva página con Divi Builder

Ver también: Divi: Cómo personalizar la cesta y los iconos de búsqueda del módulo "Menú de ancho completo"

Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.

Divi líneas convertidas en pestañas

Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder

#titulo de la imagen

A continuación, haga clic Empezar a construir (Construir desde cero)

Divi líneas convertidas en pestañas

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Crea botones de íconos con el módulo de íconos Divi

Parte 1: crear un botón de icono

Para comenzar, agreguemos una fila de una columna a la sección normal predeterminada.

Columna columna divi

Luego agregue un nuevo módulo Ícono a la columna

Ajuste de línea divi

Icono, enlace URL y color de fondo

En la pestaña Contenido configuración del módulo de iconos, actualice lo siguiente:

  • Icono: Flecha derecha (ver captura de pantalla)
  • URL del enlace del icono: # (solo un relleno por ahora)
  • Fondo: #3e22ff
Dimensionamiento divi

Borde y radio del borde

En la pestaña Diseño, actualice lo siguiente:

  • Esquinas redondeadas: 10px
  • Ancho del borde: 2px
  • Color del borde: #7272ff
Mostrar separador divi

Caja de sombra

  • Sombra de caja: Ver captura de pantalla
  • Color de sombra: rgba (62,34,255,0.48)
Configuración de espaciado modular divi

Coincidencia del espacio en el que se puede hacer clic con el tamaño del botón del icono

Actualmente, el módulo de iconos abarcará todo el ancho del contenedor principal (o columna). Esto significa que el espacio en el que se puede hacer clic es más grande que el botón del icono real. 

Para hacer coincidir el espacio en el que se puede hacer clic con el tamaño del botón del icono, podemos darle al módulo un ancho máximo que es el mismo que el ancho del botón del icono. 

En este ejemplo, el ancho total del botón es de 94 píxeles.

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:

max-width: 94px
#titulo de la imagen

Aquí está el resultado.

Parte 2: Crear un botón de icono cuadrado

Para crear nuestro botón de icono cuadrado, duplique la fila que contiene el primer botón de icono que acabamos de crear. Esto nos dará un botón duplicado en la fila para trabajar.

Dale al ícono la misma altura y ancho mientras lo mantienes centrado

La gran colección de íconos disponibles para usar en el módulo Icon incluye íconos Divi e íconos Fontawesome. Sin embargo, no todos los iconos tendrán la misma altura y anchura. Esto hace que sea un poco más difícil determinar el ancho y el alto exactos del botón del icono. 

Para crear un botón perfectamente cuadrado que atraiga el ícono al pasar el mouse, podemos agregar CSS personalizado para establecer una altura y un ancho para el ícono, así como centrarlo usando la propiedad CSS Flex.

He aquí cómo.

Primero, abra la configuración del icono duplicado. Luego actualice el ícono con uno nuevo desde el selector de íconos.

Agregar contenido de módulo de texto

Retire el relleno del módulo de iconos. Esto no será necesario ya que vamos a establecer una altura y un ancho para el icono.

Configuración de la posición del módulo de texto Divi

En la pestaña avanzada, agregue el siguiente CSS personalizado a Elemento de icono :

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Configuración de código módulo CSS texto divi

Ahora el botón del icono tendrá una altura y un ancho de 90 píxeles, lo que lo convierte en un cuadrado perfecto. Además, la propiedad flex alinea el icono en el centro del módulo. Esto le permite actualizar fácilmente el tamaño del icono en el módulo de iconos.

Para completar este botón, démosle un degradado de fondo y un color de borde blanco de la siguiente manera:

  • Paradas de gradiente:
    • 0%: #3e22ff
    • 100%: #ff2000
#titulo de la imagen
  • Color del borde: #fff
#titulo de la imagen

Aquí está el resultado final.

Crear botón de icono circular

Una vez que el icono del botón es un cuadrado perfecto, hacerlo circular es simple. Pero antes de mostrarte este simple truco, dupliquemos la línea anterior para comenzar a construir nuestro botón de icono circular.

#titulo de la imagen

Ahora abra la configuración de nuestro nuevo icono duplicado y debajo de la pestaña Diseño, actualice el radio del borde (o las esquinas redondeadas) de la siguiente manera:

  • Esquinas redondeadas: 50%
Configuración de fuente Divi 1

¡Y así, tenemos un botón de icono circular!

Para cambiar un poco el diseño, vamos a darle al módulo de iconos un icono y un color de fondo diferentes de la siguiente manera:

  • Icono: ver captura de pantalla
  • Fondo: #121212
Fondo degradado de texto divi

Aquí está el resultado.

Crear un menú horizontal de botón de icono

Una tendencia popular es usar íconos para crear un menú de íconos que generalmente consta de varios botones colocados uno al lado del otro. Para hacer esto, podemos usar la propiedad flex. 

Aquí está cómo hacerlo.

Primero, agregue una nueva fila a una columna en la página.

Configuración de texto Divi

Abra la configuración de línea y actualice el ancho de medianil a 1.

  • Ancho del canalón: 1
Configuración de la columna Divi

A continuación, abra la configuración de la columna dentro de la fila y agregue el siguiente CSS personalizado al elemento de la columna principal:

display:flex;
align-items:center;
Configuración de fondo de la columna Divi

Añadir un nuevo módulo Ícono a la columna

Posición de la columna divi

En la pestaña Contenido configuración del icono, seleccione un icono y agregue la URL del vínculo del icono.

Configuración de espaciado de columna Divi

En la pestaña Diseño, actualice lo siguiente:

  • Color del icono: #3e22ff
  • Tamaño del icono: 40 px
#titulo de la imagen
  • Margen (izquierdo y derecho): 10px
#titulo de la imagen
  • Ancho del borde: 2px
  • Color del borde: #3e22ff

OBSERVACION: El margen creará espacio entre los botones adyacentes una vez que agreguemos más más tarde.

#titulo de la imagen

En la pestaña Tecnología, agregue el siguiente CSS personalizado en el campo Elemento de icono (como hicimos antes para el botón de icono cuadrado):

display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Ajuste de espaciado de línea Divi

Ahora, cada vez que agreguemos nuevos botones de iconos, aparecerán uno al lado del otro. Para ilustrar esto, dupliquemos el botón de icono existente tres veces para crear un total de cuatro botones de icono en el menú horizontal.

#titulo de la imagen

Después de eso, podemos regresar y actualizar los íconos según sea necesario.

Aquí está el resultado.

Se agregaron efectos de desplazamiento al botón de icono

Es difícil hablar sobre el diseño de botones de iconos sin mencionar los efectos de desplazamiento. Son demasiado divertidos para ignorarlos. 

Cambiar el color de fondo y el color del icono al pasar el mouse

Cambiar los colores de los botones es un efecto de desplazamiento popular y efectivo. Por ejemplo, podemos cambiar el color de fondo y el color del ícono simultáneamente cuando el usuario pasa el mouse sobre el botón.

Para hacer esto, abra la configuración del módulo de iconos y habilite las opciones de desplazamiento para el color de fondo y elija un color diferente para el estado de desplazamiento. Luego puedes hacer lo mismo con el icono. 

En este ejemplo, cambiamos el color de fondo de blanco a azul y el icono de azul a blanco.

Configuración divi de caja de sombra

Cambiar icono al pasar el mouse

Otro efecto de desplazamiento que te puede gustar es cambiar completamente el ícono. Para hacer esto, puede elegir un icono diferente para el estado de desplazamiento cuando elige un icono en la configuración de iconos.

Diseño de selección divi

Escala de botón de icono al pasar el mouse

Un efecto de desplazamiento difícil de ignorar es el efecto de desplazamiento de escala. Esto agranda o agranda el botón del icono. La mejor manera de agregar este tipo de efecto de desplazamiento es usar las opciones de transformación de Divi. Esto permitirá que el botón crezca sin afectar los elementos que lo rodean.

Para agregar un efecto de desplazamiento de escala al botón del ícono, abra la configuración del ícono y debajo de la pestaña de Diseño, busque las opciones de transformación. Habilite las opciones de desplazamiento, luego asigne la siguiente escala de transformación al estado de desplazamiento:

  • Transformar Y: 118%
  • Transformar X: 118%

Esto aumentará el tamaño del botón de icono en un 18 % cuando el usuario pase el cursor sobre él.

Configuración del borde del módulo Divi

Girar botón de icono al pasar el mouse

La rotación de objetos flotantes siempre es una microinteracción divertida. Para rotar un botón de icono al pasar el mouse, podemos usar la opción transformar rotar. Pero antes de eso, hagamos que el botón sea circular para que solo el icono parezca girar.

Para hacer que el ícono sea circular, suponiendo que el botón sea un cuadrado, simplemente actualice la configuración de las esquinas redondeadas al 50 % en las cuatro esquinas.

Luego actualice las opciones de transformación para incluir el siguiente valor de rotación de transformación en el estado de desplazamiento:

  • Transformar Rotar Z: 180 grados
Configuración de espaciado divi

Echemos un vistazo a nuestros 4 efectos de desplazamiento en acción.

Resultado final

Echemos un vistazo a los resultados finales de nuestro tutorial.

Lea también: Divi: cómo resaltar un módulo "Blurb" al pasar el mouse y desenfocar los demás

Aquí están nuestros tres botones de iconos (estándar, cuadrado y circular).

use el módulo Divi Icon para crear íconos personalizados

Y aquí está el menú de botones de iconos horizontales con efectos de desplazamiento.

use el módulo Divi Icon para crear íconos personalizados

¡¡¡Descarga DIVI ahora!!!

Conclusión

Saber diseñar botones de iconos para un Sitio web es esencial. Y, como hemos visto en este tutorial, no es tan difícil con Divi. El módulo de iconos de Divi tiene un montón de opciones integradas que abren la puerta a diseños creativos de botones de iconos. 

Con suerte, las técnicas de este artículo lo ayudarán a descubrir algo de la magia de sus propios diseños de botones de íconos.

Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo

También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...