Los botones con fuentes icónicas tienen muchos usos en el mundo del diseño web. Dado que las fuentes de iconos se mantienen nítidas en color y diseño a medida que se escalan a diferentes tamaños, tiene sentido usarlas en botones. Y, crear un botón con fuentes icónicas en Divi es realmente bastante fácil usando las fuentes de la biblioteca " ElegantIcons". En este tutorial, le mostraré cómo puede usar fuentes de iconos con el módulo de botón Divi para crear un solo botón de icono.
Algunos de los aspectos más destacados de este tutorial incluyen:
- Cómo usar ElegantIcons para agregar un icono como texto de un botón
- Cómo agregar relleno y radio de borde para que el botón se vea como un cuadrado o círculo perfecto
- Cómo reemplazar el ícono del botón con un ícono diferente al pasar el mouse
- Cómo colocar un ícono de botón para superponer una imagen
- y más…
vista
Aquí hay una vista previa de lo que viene ...
Qué necesitas?
Para este tutorial usaré lo siguiente:
- Tema divi (obviamente)
- Iconos de fuentes con estilo, un tutorial sobre Tema elegante es mucho más preciso. Una vez que haya descargado el archivo zip de la publicación del blog, lo arrastraremos al archivo de fuente eleganticons.ttf para usarlo como fuente personalizada para nuestro módulo de botones.
- La página de inicio de Bed & Breakfast (disponible gratis de Divi Builder)
¡Empecemos!
Agregue la fuente Elegant Icons a su módulo de botones
Agregar un módulo de botones
Para comenzar, cree una nueva página e implemente el constructor visual. Elija "Construir desde cero", luego, una vez implementado el generador visual, agregue una fila de columna a la sección y luego agregue un módulo de botón a la fila.
Arrastre la fuente elegante del icono
Para conseguir el juego de colores. ElegantFontspuedes descargar este paquete de fuentes a través de este enlace. Extraelo contenido desde el archivo zip y busque los archivos de fuentes de iconos elegantes navegando a elegante_fuente > HTML CSS > clase. Luego arrastre el archivo “ElegantIcons.ttf” a su computadora y suéltelo en el generador visual.
Esto abrirá el modal Descargar fuente automáticamente. Simplemente haga clic en el botón de descarga para descargar la fuente a Divi Builder.
Ahora tendrá acceso a la fuente de iconos con estilo cuando personalice una fuente mod en el constructor visual.
Vaya a la configuración del módulo de botones y actualice la fuente del botón con la nueva fuente Elegant Icon que acaba de descargar. Aparecerá en la lista de iconos en "Fuentes personalizadas".
Es posible que notes que el texto de tu botón se ha transformado en un montón de iconos. De hecho, cada carácter ingresado en el área de ingreso de texto del botón ahora tiene un ícono correspondiente a la letra / carácter actualmente utilizado.
Como solo necesitamos un ícono para nuestro botón, puede seleccionar cualquier carácter en el teclado para generar el ícono asociado con ese carácter. Por ejemplo, ingrese el número 5 para el texto de su botón para obtener una flecha de cheurón derecha.
Cambiar iconos de botón al pasar el mouse
Como sabe, el módulo de botones incluye la opción de agregar iconos al pasar el mouse. Podemos usar esta función para reemplazar la fuente del icono con el icono de desplazamiento para un buen efecto de desplazamiento. Todo lo que tenemos que hacer es cambiar la configuración de los botones de la siguiente manera:
Tamaño del texto del botón: 30px Icono del botón: vea la captura de pantalla (este será el icono que reemplazará el icono de fuente utilizado para el botón) Icono Color del botón: # 0c71c3 (que debe coincidir con el color utilizado para el texto del botón ) Ubicación del icono del botón: Color del texto de desplazamiento del botón izquierdo: rgba (255,255,255,0) (esto es completamente transparente para ocultar la fuente del icono del botón de desplazamiento). Relleno personalizado: primera a la izquierda, primera a la derecha (este relleno reemplazará la expansión mientras se desplaza)
Ahora todo lo que tenemos que hacer es reemplazar el margen del elemento frontal en el CSS personalizado. Vaya a la pestaña Avanzado e ingrese el siguiente código CSS en el cuadro frontal:
margin-left: 0 !important; |
Ahora el icono de su botón será reemplazado por el icono de pasar el cursor por encima.
Botones de iconos creativos con círculo escalados con el tamaño del texto del botón
Los botones en forma de círculo funcionan muy bien para botones de un solo icono. Y, si comprende el funcionamiento interno del espaciado del módulo de botones, puede crear botones perfectamente circulares que se adapten al tamaño del texto del botón.
El truco consiste en espaciar el botón usando la unidad de longitud "em". Esta unidad de longitud es relativa al tamaño del texto de su botón. Entonces, si el tamaño del texto del botón es 30px, 1em también es 30px (2em será 60px y así sucesivamente…). Sabiendo esto, solo debemos asegurarnos de que nuestro relleno alrededor de nuestro botón sea el mismo en los 4 lados. Pero lo que quizás no hayas considerado es que la altura de la línea de texto del botón es 1.7em por defecto. Esto significa que debemos tener esto en cuenta cuando agregamos nuestros valores de relleno superior e inferior.
Para aquellos de ustedes que quieran saber el cálculo detrás de los valores de relleno necesarios para crear botones circulares, aquí está:
Para relleno izquierdo y derecho, establezca ambos en 1em. Esto significa que el ancho total de su botón será de 90px (o 3em) porque ...
30px relleno a la izquierda + 30px para font-icon + 30px relleno a la derecha = 90px total
La altura de la línea de texto del botón es 1.7em, lo que equivale al 170% del tamaño del texto del botón (30px), que es 51px.
Para relleno superior e inferior, establezca ambos en 0,65em. 0.65em es el equivalente al 65% del tamaño del texto del botón (30px), lo que equivale a 19.5px.
Entonces…
Relleno superior 19.5px + altura de línea 51px + relleno inferior 19.5px = total 90px
Esto significa que cuando el texto del botón se establece en 30 px, el tamaño total del botón será de 90 px por 90 px (un cuadrado perfecto). De hecho, puedes pensarlo de esa manera. Independientemente del tamaño del texto del botón, el tamaño total del botón es 3 veces el valor. Entonces, el texto del botón de 40 px creará un botón de 120 px por 120 px, etc.
Por el momento, el botón tiene las dimensiones adecuadas, pero sigue siendo cuadrado. Todo lo que tenemos que hacer es agregar un radio de borde del 50% para cambiar el botón cuadrado a un botón de círculo perfecto.
Esto es lo que necesita para cambiar su botón a un botón circular:
Botón Radio del borde: 50%
Tapicería personalizada: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left
Recuerde, puede ajustar el tamaño del texto del botón y el botón permanecerá en un círculo perfectamente como el tamaño del texto.
Agregar botones en Divi
Divi facilita la adición y personalización de botones de iconos únicos para adaptarse al diseño de cualquier diseño predefinido.
Para este ejemplo, le mostraré cómo agregar un solo botón de icono al diseño de la página de inicio de Bed & Breakfast.
Para agregar el diseño a su página, abra el menú de configuración haciendo clic en el icono púrpura en la parte inferior de la página (asegúrese de que el generador visual esté habilitado). Luego haga clic en el icono Cargar desde biblioteca. Seleccione el diseño de la página de inicio de Bed & Breakfast y haga clic en el botón "Usar este diseño" para implementar el diseño en la página.
Agregar un botón de icono a una imagen
Suponga que desea agregar un pequeño botón de icono para superponer la esquina de una imagen con un CTA adicional relacionado con un producto o servicio en particular. Todo lo que necesita hacer es agregar un módulo de botón debajo de la imagen y personalizarlo para incluir la fuente del icono y hacer que se superponga a la imagen con un espaciado personalizado.
Busque la sección "Acerca de nosotros" en la página de inicio. Luego agregue un módulo de botones directamente debajo de una de las imágenes utilizadas para presentar la "Habitación Doble" (la primera en la primera columna de la fila de tres columnas).
Luego, abra la configuración del botón y ponga una "P" mayúscula en el cuadro de texto del botón. Esto cambiará en nuestro icono una vez que seleccione los impresionantes conjuntos de fondos como la fuente del botón.
Para comenzar a hacer coincidir rápidamente el diseño del botón con el diseño, guarde la configuración del botón y busque el botón "Reservar ahora" en la parte superior del diseño. Abra la Configuración del botón y copie los estilos del botón haciendo clic con el botón derecho en el título de alternancia de Opciones de botón y seleccionando la opción "Copiar estilos de botón" de la lista.
Ahora, haga clic derecho en el módulo que agregó debajo de la imagen y seleccione "Pegar estilo de botón".
Luego actualice la configuración del botón de la siguiente manera:
Botón de fuente: Fuente impresionante
botón de fuente Ancho del borde: 0px
Mostrar icono de botón: NO
Luego agregue nuestro inteligente relleno personalizado para que el botón sea un cuadrado perfecto:
Acolchado personalizado: 0.65em superior, 0.65em inferior, 1em izquierda, 1em derecha
Para colocar el botón de modo que cubra la esquina inferior derecha de la imagen, primero debe quitar el margen inferior del módulo de imagen de arriba. Abra la configuración del Módulo de imagen de imagen directamente encima del botón y establezca el Margen inferior en 0px.
Ahora necesitamos arrastrar el botón sobre la imagen usando un valor de margen negativo personalizado igual a la altura del botón. Para hacer esto, necesitamos determinar la altura de nuestro botón.
Como se mencionó anteriormente en este artículo, con el relleno personalizado en su lugar, podemos saber el tamaño exacto de nuestro botón en función del tamaño actual del texto del botón. Dado que el tamaño del texto del botón es 20px, sabemos que la altura de nuestro botón es 3em (3 veces el tamaño del texto del botón), que es 60px. Por lo tanto, necesitamos establecer un margen personalizado para nuestro botón de la siguiente manera:
Margen personalizado: -60px Arriba
Y luego podemos colocar nuestro botón a la derecha ajustando la alineación del botón a la derecha.
Ahora que tenemos un diseño funcional para nuestra imagen y nuestro botón. Todo lo que tenemos que hacer es agregar el mismo botón a todas las imágenes de la sección.
Dado que eliminamos el margen inferior de la imagen, podemos aplicar fácilmente este cambio a todas las imágenes de la sección usando la opción Extender estilos. Haga clic derecho en la imagen y seleccione "Extender estilos de imagen".
En el cuadro de diálogo Extender estilos, seleccione "Esta sección" para la opción A través y haga clic en el botón Expandir. Ahora todas las imágenes tienen un margen inferior de 0px.
El último paso es simplemente copiar y pegar los módulos Button debajo de cada imagen.
Aquí está el diseño final.
Y debido a que utilizamos técnicas de espaciado adecuadas, el botón también permanecerá en su lugar en el móvil ...
Iconos disponibles mediante el módulo de botones
Dado que el texto del botón del módulo de botones se limita a los caracteres disponibles en el teclado, deberá explorar estas teclas para encontrar los iconos disponibles asociados con cada tecla. Una manera fácil de hacer esto es crear un módulo de botones con la fuente del botón configurada como fuente elegante y escribir los caracteres en el cuadro de texto del botón.
Aquí hay una captura de pantalla de los personajes con su icono de fuente correspondiente:
Si encuentra esta lista algo exhaustiva, siempre puede usar un módulo de texto para crear enlaces de íconos usando los códigos Unic enumerados. aquí .
Consideraciones finales
El uso de iconos elegantes con el módulo de botones de Divi es una forma conveniente de crear botones únicos para su Sitio web. Esto abre la puerta a la creatividad con configuraciones de módulos para personalizar su botón con estilos de texto únicos, efectos de desplazamiento y más. Me gustan especialmente los valores de espaciado de botones personalizados que aseguran que los botones tomen la forma de un cuadrado o círculo perfecto.
Hay muchos usos para los botones de iconos. Es de esperar que el ejemplo de uso cubierto en este tutorial añada algo de inspiración a sus propios proyectos.
