Los botones de iconos se han vuelto esenciales 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. Con el módulo de iconos, podemos elegir entre cientos de iconos y usar innumerables opciones de diseño integradas de Divi Builder para crear casi cualquier tipo de botón de icono que se te ocurra. Con suerte, este artículo lo ayudará a comenzar a crear algunos botones de íconos increíbles para su próximo proyecto.
¡Empecemos!
Aquí hay un vistazo rápido a los botones de iconos que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Para comenzar, agreguemos una fila de una columna a la sección normal predeterminada.
Luego agregue un nuevo módulo de icono a la columna.
Icono, URL de enlace y color de fondo
En la pestaña de contenido del modal de configuración de iconos, actualice lo siguiente:
- Icono: Flecha derecha (ver captura de pantalla)
- URL del enlace del icono: # (solo un relleno por ahora)
- Color de fondo: #3e22ff
Borde y radio del borde
En la pestaña de diseño, actualice lo siguiente:
- Esquinas redondeadas: 10px
- Ancho del borde: 2px
- Color del borde: #7272ff
Sombra de la caja
- Sombra de cuadro: Ver captura de pantalla
- Color de sombra: rgba(62,34,255,0.48)
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 sea el mismo que el ancho del botón del icono. El ancho del botón del icono se puede determinar agregando el ancho del icono, el relleno izquierdo y derecho y el ancho del borde izquierdo y derecho. En este ejemplo, el ancho total del botón es 94px.
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:
|
01
|
max-width: 94px |
Aquí está el resultado.
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 duplicada 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. Podríamos hacer ajustes en el relleno para obtener las dimensiones correctas, pero esto es un poco engorroso y podría limitar algunas de las opciones de desplazamiento del ícono. Por ejemplo, agregar relleno al módulo de íconos creará espacio alrededor del ícono. Por lo tanto, si crea una opción de desplazamiento para cambiar el color del ícono al pasar el mouse, el color del ícono no cambiará al pasar el mouse sobre el espacio (o relleno) alrededor del ícono. Cambiaría solo al pasar el mouse sobre el ícono mismo.
Para crear un botón perfectamente cuadrado que atraiga el ícono al pasar el mouse, podemos agregar un CSS personalizado para establecer una altura y un ancho para el ícono, así como centrarlo usando la propiedad CSS Flex.
Aquí está cómo hacerlo.
Primero, abra la configuración del icono duplicado. Luego actualice el ícono con uno nuevo desde el selector de íconos.
Saque el relleno del módulo de iconos. Esto no será necesario ya que estableceremos una altura y un ancho para el icono.
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento Icon:
|
01
02
03
04
05
|
height: 90pxwidth: 90pxdisplay: flex;align-items: center;justify-content: center; |
Ahora el botón del ícono tendrá una altura y un ancho iguales de 90 px, lo que lo convertirá en un cuadrado perfecto. Además, la propiedad flex alinea el icono en el centro del módulo. Esto le permite actualizar el tamaño del icono dentro del módulo de iconos con facilidad.
Para terminar este botón, démosle un degradado de fondo y un color de borde blanco de la siguiente manera:
- Gradiente de fondo Color izquierdo: #3e22ff
- Degradado de fondo Color derecho: #ff2000
- Color del borde: #fff
Aquí esta el resultado final.
Una vez que el icono del botón es un cuadrado perfecto, hacerlo circular es simple. Pero antes de mostrarte este sencillo truco, dupliquemos la fila anterior para iniciar la creación de nuestro botón de icono circular.
Ahora abra la configuración de nuestro nuevo icono duplicado y, en la pestaña de diseño, actualice el radio del borde (o las esquinas redondeadas) de la siguiente manera:
- Esquinas redondeadas: 50%
¡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
- Color de fondo: #121212
Aquí está el resultado.
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. Así es como se hace.
Primero, agregue una nueva fila de una columna a la página.
Abra la configuración de la fila y actualice el ancho de la canaleta a 1.
- Ancho del canalón: 1
A continuación, abra la configuración de la columna dentro de la fila y agregue el siguiente CSS personalizado al elemento principal de la columna:
|
01
02
|
display:flex;align-items:center; |
Agregue un nuevo módulo de icono a la columna.
En la pestaña de contenido de la configuración de iconos, seleccione un icono y agregue una URL de enlace de icono.
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #3e22ff
- Tamaño del icono: 40 px
- Margen: 10 px a la izquierda, 10 px a la derecha
- Ancho del borde: 2px
- Color del borde: #3e22ff
NOTA: El margen creará espacio entre los botones adyacentes una vez que agreguemos más adelante.
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento de icono (como hicimos anteriormente para el botón de icono cuadrado):
|
01
02
03
04
05
|
display: flex;align-items: center;justify-content: center;height: 60px;width: 60px; |
Ahora, cada vez que agreguemos nuevos botones de iconos, aparecerán uno al lado del otro. Para demostrar esto, dupliquemos el botón de icono existente tres veces para crear un total de cuatro botones de icono en el menú horizontal.
Después de eso, podemos regresar y actualizar los íconos según sea necesario.
Aquí está el resultado.
Es difícil hablar sobre el diseño de botones de iconos sin mencionar los efectos de desplazamiento. Son demasiado divertidos para ignorarlos. No te aburriré con todas las posibilidades disponibles con las opciones de desplazamiento integradas de Divi, pero mencionaré algunas para que fluya esa creatividad.
Cambiar el color de fondo y el color del icono al pasar el mouse
Cambiar los colores del botón 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 active 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, estamos cambiando el color de fondo de blanco a azul y también cambiando el icono de azul a blanco.
Cambio de icono al pasar el mouse
Otro efecto de desplazamiento que te puede gustar es cambiar el ícono a uno completamente diferente. Para hacer esto, puede elegir un icono diferente para el estado de desplazamiento al elegir un icono en la configuración de iconos.
Botón de icono de escala al pasar el mouse
Un efecto de desplazamiento que es difícil de ignorar es el efecto de desplazamiento de escala. Esto hace que el botón del icono se expanda o aumente de tamaño. 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 icono, abra la configuración del icono y, en la pestaña de diseño, busque las opciones de transformación. Active las opciones de desplazamiento y luego asigne la siguiente escala de transformación al estado de desplazamiento:
- Escala de transformación Y: 118%
- Escala de transformación X: 118%
Esto aumentará el tamaño del botón de icono en un 18 % cuando el usuario pase el cursor sobre él.
Botón de icono de rotación al pasar el mouse
Girar cosas al pasar el mouse 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
Echemos un vistazo a nuestros 4 efectos de desplazamiento en acción.
Resultado final
Echemos un vistazo a los resultados finales de nuestro tutorial.
Aquí están nuestros tres botones de iconos (estándar, cuadrado y circular).
Y aquí está el menú horizontal del botón de icono con efectos de desplazamiento.
Pensamientos finales
Saber diseñar botones de iconos para un sitio web es fundamental. 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 ayudarán a desbloquear algo de la magia para sus propios diseños de botones de íconos.
Espero escuchar de usted en los comentarios.
¡Salud!