Si no ha aprovechado la nueva interfaz de opciones de fondo de Divi, se lo está perdiendo. Las posibilidades de diseño de fondo son asombrosas. Pero, ¿no sería increíble tener las mismas opciones de diseño poderosas para nuestros botones? Si la respuesta es sí, entonces creo que te va a encantar este post.
Hoy voy a mostrarte cómo incorporar las mismas potentes funciones de diseño de fondo a los botones de estilo. Este truco de diseño pone en capas el fondo de Fila y Columna detrás del módulo de botones para brindarle 3 capas de capacidades de diseño. Con este tipo de poder, las cosas podrían ponerse peligrosas. Lo mejor es mantener la calma e ir despacio al principio
Vamos.
Estos son los diseños de botones de ejemplo que se tratan en esta publicación.
Suscríbete a nuestro canal de Youtube
La puesta en marcha
Usando Visual Building, agregue una sección regular con una fila de una columna.
A continuación, agregue un Módulo de botones a la fila.
Luego actualice la configuración del módulo de botones de la siguiente manera:
Opciones de contenido
Texto del botón: [ingresar texto]
URL del botón: [ingresar URL]
Opciones de diseño
Alineación del botón: Centro
Color del texto: Claro
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 48 px
Opciones avanzadas
Necesitamos el ancho del 100% para llenar el ancho de la columna. Para hacer esto, ingrese el siguiente CSS personalizado en el cuadro Elemento principal:
|
01
|
Width: 100%; |
Guardar ajustes
No puede ver nada en la página en este momento porque el borde y el texto de su botón son blancos. En lugar de diseñar el color de fondo del botón usando la configuración del módulo de botón, vamos a personalizar el color de fondo de la fila/columna detrás del botón usando las opciones de fondo más avanzadas. Revisaremos la configuración del módulo de botones una vez que comencemos a hacer diseños más específicos en los botones. Pero por ahora, terminemos de configurar la fila.
Vaya a la Configuración de fila en la que se encuentra su nuevo botón y actualice lo siguiente:
Opciones de contenido
Seleccione la pestaña Degradado de fondo de la Columna 1 y luego haga clic en el botón circular gris con un símbolo más blanco.
Ahora debería ver los colores degradados predeterminados detrás de su botón blanco.
La columna encaja bien detrás de nuestro botón ahora, pero necesitamos disminuir el ancho del botón. Para hacer esto, vamos a usar la configuración de tamaño de fila. Al establecer un ancho personalizado para nuestra fila, también establecemos el ancho de nuestro botón.
Opciones de diseño
En las opciones de diseño, vamos a ajustar el tamaño de la fila para que se ajuste a nuestro nuevo botón ajustando lo siguiente:
Usar ancho personalizado: SÍ
Ancho personalizado: 500 px (esto establece el ancho máximo del botón en 500 px)
Relleno personalizado: 0 px arriba, 0 px a la derecha, 0 px abajo, 0 px a la izquierda
Opciones avanzadas
Necesitamos hacer coincidir el radio del borde de la fila y la columna con lo que hemos establecido para nuestro botón para que todos coincidan. Para hacer esto, ingrese el siguiente CSS personalizado en el cuadro Elemento principal:
|
01
|
border-radius: 10px; |
Ingrese el mismo CSS en el cuadro Elemento principal de la columna :
|
01
|
border-radius: 10px; |
Guardar ajustes
Ahora que la configuración de Fila se ha actualizado para tener un ancho y relleno personalizados, se han logrado dos cosas. Primero, hemos establecido con éxito un ancho personalizado para nuestro botón. Y segundo, ahora tenemos otra capa de opciones de fondo que podemos usar para diseñar nuestro botón.
Eso es un total de 3 capas de fondo (botón, columna, fila) que podríamos usar para diseñar más adelante.
Aquí hay una ilustración de cómo se construye actualmente el botón.
Bastante genial, ¿verdad?
Eso es todo para la configuración básica. Ahora es el momento de la parte divertida de crear diseños asombrosos para sus botones.
Para crear este botón, utilizará las 3 capas, el fondo de la fila para el video, el fondo de la columna para el degradado y el fondo del botón para la ligera superposición azul.
Para la configuración de la fila , actualice las siguientes opciones de contenido :
Video de fondo: [subir video]
Columna 1 Colores de degradado de fondo: rgba(12,113,195,0.41), rgba(131,0,233,0.18)
Guardar ajustes
Para la configuración del módulo de botones , actualice lo siguiente:
Opciones de contenido
Texto del botón: «Compruébalo»
Opciones de diseño
Color de fondo del botón: rgba(12,113,195,0.25)
Color del borde del botón: #0c71c3
Guardar ajustes
Ahora el único problema que nos queda es el radio del borde del fondo del video. Tenemos que agregar algo de CSS personalizado para darle al video un radio de borde que coincida con el botón. Este código adicional solo es necesario para el botón de fondo de video.
Para agregar el CSS personalizado, vaya a la configuración de la página desde Visual Builder y haga clic en la pestaña Avanzado. Luego actualice el cuadro de entrada CSS personalizado con el siguiente CSS:
|
01
02
03
04
05
|
.et_pb_section_video_bg {border-radius: 10px;} |
Guardar ajustes
Sugerencia : otra opción de diseño genial es mostrar el video al pasar el mouse. Simplemente dé a su módulo de botones un color de fondo sólido y cámbielo a transparente al pasar el mouse.
¡Eso es todo! Ahora tienes un botón con un video de fondo.
El botón a cuadros requiere el uso de dos capas (fila y columna) de degradados de color de fondo.
Para crear este botón, utilizará 2 capas, el fondo de la fila para el primer nivel de degradados y el fondo de la columna para la última capa de degradado de color.
Para la configuración de la fila , actualice las siguientes opciones de contenido :
Colores de degradado de fondo: #8300e9, #0c71c3
Dirección de degradado: 270
grados Posición de inicio: 50 %
Posición final: 0 %
Columna1 Colores de degradado de fondo: rgba(224,11,0,0.39), rgba(255,255,255,0)
Dirección de degradado: 180 grados
Inicio Posición: 50%
Posición final: 0%
Guardar ajustes
Ahora vaya a la configuración del módulo de botones y actualice lo siguiente
Opciones de contenido
Texto del botón: «Suscribirse»
Opciones de diseño
Ancho del borde del botón: 0 px
Espaciado entre letras del botón: 10 px
Fuente del botón: Predeterminado, Negrita (B), Cursiva (I)
Espaciado entre letras del botón flotante: 10 px
Eso es todo. Aquí esta el resultado final.
Ahora ya sabe cómo agregar un efecto de cuadros a sus botones.
Para crear este botón, utilizará 2 capas (fila y columna) de degradados de color de fondo.
Para la configuración de la fila , actualice las siguientes opciones de contenido :
Colores de degradado de fondo: #8300e9, #0c71c3
Tipo de degradado: Radial
Dirección radial: Centro
Posición de inicio: 50 %
Posición final: 100 %
Columna1 Colores de degradado de fondo: rgba(224,11,0,0.39), rgba(255,255,255,0)
Degradado Tipo: Radial
Radial Dirección: Centro
Posición inicial: 50 %
Posición final: 100 %
Guardar ajustes
Ahora vaya a la configuración del módulo de botones y actualice lo siguiente:
Opciones de contenido
Texto del botón: «contáctame»
Opciones de diseño
Ancho del borde del botón: 0px
Fuente del botón: Crafty Girls
Icono de botón: [elegir icono de corazón]
Mostrar solo icono al pasar el mouse por botón: NO
Opciones avanzadas
Para un toque final, agreguemos una sombra deslizante al botón. Además del código anterior, ingrese el siguiente CSS personalizado en el cuadro Elemento principal :
|
01
|
box-shadow: 0px 5px 10px 3px #ccc; |
¡Eso es todo! Aquí está su resultado final:
Para crear este botón, utilizará 2 capas (fila y columna) de degradados de color de fondo. Además, vamos a agregar algunos CSS personalizados en el módulo del botón para crear el efecto emergente del borde inferior.
Para la configuración de la fila , actualice las siguientes opciones de contenido :
Colores de degradado de fondo: #023500, #008c02
Tipo de degradado: Radial
Dirección radial: Centro
Posición inicial: 19 %
Posición final: 0 %
Columna1 Colores de degradado de fondo: rgba(0,206,72,0.43), rgba(255,255,255,0)
Tipo de degradado: Radial
Radial Dirección: Centro
Posición inicial: 32 %
Posición final: 0 %
Ahora vaya a la configuración del módulo de botones y actualice lo siguiente:
Opciones de contenido
Texto del botón: «Comprar»
Opciones de diseño
Tamaño del texto del botón: 65 px
Ancho del borde del botón: 0 px
Fuente del botón: Roboto, Negrita (B), Mayúsculas (TT)
Opciones avanzadas
Ahora para el toque final. Agregue el siguiente CSS personalizado al código existente en el cuadro de entrada Elemento principal :
|
01
|
box-shadow: 0px 5px 0px 0px #01771f; |
Para crear este botón, utilizará las 3 capas, la fila para la imagen de fondo, la columna para el fondo degradado y el fondo del botón para la superposición de color azul semitransparente.
Para la configuración de la fila , actualice las siguientes opciones de contenido :
En la pestaña Imagen de fondo
Imagen de fondo: [cargar imagen]
Tamaño de la imagen de fondo: Cubierta
Posición de la imagen de fondo: Centro
Repetición de la imagen de fondo: No repetir
Mezcla de imagen de fondo: Multiplicar
En la pestaña Degradado de fondo
Colores de degradado de fondo: rgba(12,113,195,0.33), #edf000
Tipo de degradado: Lineal
Dirección del degradado: 63 grados
Posición inicial: 50 %
Posición final: 100 %
Ahora desplácese hacia abajo hasta las opciones de Fondo de la Columna 1 y seleccione la pestaña de degradado.
Colores de degradado de fondo de columna 1: rgba(236,239,31,0.66), rgba(0,0,0,0.49)
Tipo de degradado de columna: Lineal
Dirección de degradado de columna: 139 grados
Posición inicial de columna: 12 %
Posición final de columna: 0 %
Guardar ajustes
Eso se encarga de nuestro segundo nivel de diseños de fondo. Queda uno más.
Vaya a la configuración del módulo de botones y actualice lo siguiente:
Opciones de contenido
Texto del botón: «Obtener boletos»
Opciones de diseño
Color de fondo del botón: rgba(12,113,195,0.16)
Color del borde del botón: #efef4f
Fuente del botón: Lato
Icono del botón: [seleccione el icono de Tickets]
Mostrar solo el icono al pasar el cursor por el botón: NO
Color del texto flotante del botón: #023b7c
Color de fondo flotante del botón: #023b7c
¡Eso es todo!. Echa un vistazo a su botón de imagen.
Para construir este último botón, solo usaremos una capa de diseño de fondo. Vamos a utilizar una combinación de imágenes de la imagen de fondo y el color de fondo para crear una apariencia única.
Para la configuración de la fila , desplácese hacia abajo hasta las opciones de fondo de la columna 1 y actualice lo siguiente:
Imagen de fondo de columna: [cargar imagen de retrato]
Tamaño de imagen de fondo de columna: Ajustar (esto asegurará que el retrato siempre quepa dentro del botón)
Posición de la imagen de fondo de columna: Centro izquierda (esto alinea su retrato a la izquierda del botón)
Imagen de fondo de columna Repetir: No repetir
imagen de fondo de columna Mezclar: Luminosidad (esto crea una buena combinación del color naranja con el retrato)
Asegúrese de eliminar los colores de degradado actuales si los tiene configurados. Si no, querrás poder mezclar el fondo naranja. Simplemente haga clic en la pestaña de degradado y coloque el cursor sobre el cuadro de selección de color y haga clic en el ícono de la papelera que aparece en la parte superior derecha.
Ahora puedes ver la mezcla naranja en tu botón.
Guardar ajustes
Ahora vaya a la configuración del módulo de botones y actualice lo siguiente:
Opciones de contenido
Texto del botón: «Hablemos»
Opciones de diseño
Alineación del botón: Botón derecho
Color del borde: #ff7b23
Espaciado entre letras del botón: 3 px
Fuente del botón: Mono feliz
Ícono de botón [agregar ícono de chat]
Solo mostrar ícono al pasar el mouse por el botón: NO
Espaciado entre letras del botón: 3 px
¡Todo listo! Me gusta este diseño para un botón de contacto de blog. Creo que le da un toque personal agradable.
Hasta ahora, hemos estado usando las filas de una sola columna para que sirvan como fondo para nuestros botones. Esto nos permite 3 capas de diseño de fondo. Sin embargo, si desea incluir un botón en una estructura de columna diferente, puede hacerlo. Simplemente perderá la fila como capa de fondo.
Por ejemplo, supongamos que desea agregar una fila de ½ ½ columna con un botón a la izquierda y algo de texto a la derecha. Esto es lo que harías.
Comience con una nueva sección regular y seleccione la estructura de fila de ½ ½ columna . Luego agregue un módulo de botón a la columna de la izquierda.
En la configuración del Módulo de botones , asegúrese de insertar el siguiente CSS en el cuadro de entrada Elemento principal en la pestaña Avanzado:
|
01
|
Width: 100%; |
Puede personalizar el resto del módulo de botones más tarde.
A continuación, vaya a Configuración de fila y desplácese hacia abajo hasta las opciones de Fondo de la columna 1 y actualice la configuración de fondo como desee.
Luego vaya a la pestaña Diseño y actualice lo siguiente:
Relleno personalizado de la columna 1: 0px arriba, 0px a la derecha, 0px abajo, 0px a la izquierda
Guardar ajustes
Ahora tiene un botón en la columna izquierda que puede usar las opciones de fondo de la columna 1 para el diseño. Una vez que regrese y actualice el estilo del botón a su gusto, agregue su texto en la columna derecha y ¡listo!
¿Sensible?
Sí. Debido a que los botones están construidos dentro de la estructura de columnas de Divi , los botones responderán bien en todos los dispositivos. Es posible que deba volver a visitar la configuración del módulo de botones para ajustar cómo ciertos elementos de botones se ajustan a diferentes dispositivos.
Compatibilidad con varios navegadores
Actualmente, la propiedad CSS background-blend-mode no es compatible con Internet Explorer o Edge y Safari tiene opciones de combinación limitadas. Sin embargo, la reserva no es considerable en mi experiencia para la mayoría de los casos.
Así es como se ven los botones en IE:
Si está comprometido con IE, le sugiero que los pruebe para encontrar un término medio que se vea bien tanto en IE como en otros navegadores.
Pensamientos finales
Debo admitir que este tutorial es bastante innovador para mí personalmente. En el pasado, tenía que agregar un montón de clases y CSS adicional a mi tema hijo si quería diseñar botones de forma creativa. Pero ahora que puedo usar las opciones de fondo de Divi, mi vida se volvió mucho más fácil. Espero que puedas usar este truco de diseño para llevar tus botones al siguiente nivel.
Esperamos saber de usted en los comentarios.
Salud