Divi y sus opciones de posición integradas son una herramienta de diseño conveniente para el posicionamiento preciso de cualquier elemento Divi, incluidos los botones. La mayoría de las veces, confiamos en la posición estática predeterminada de un botón que sigue el flujo del documento (o página). Sin embargo, si sabemos cómo colocar los botones de manera absoluta, podemos crear algunos diseños de botones únicos y prácticos para nuestro contenido Divi.
En este tutorial, le mostraremos cómo crear 4 diseños de botones diferentes que resaltarán de manera única el módulo Blurb de Divi. Esto será útil cuando use anuncios publicitarios en su sitio web.
Empecemos.
Eche un vistazo rápido a los cuatro diseños de botones que crearemos en este tutorial.
Para poner sus manos en los diseños de diseño de botones 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 a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a 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 el primero de nuestros diseños de cuatro botones, vamos a crear botones inferiores dobles debajo de un módulo publicitario. Esta es una excelente opción para presentar contenido (como servicios) que requieren dos CTA. Además, esta es una excelente manera de mantener los botones pegados en la parte inferior de las columnas con la misma altura.
Para comenzar, agregue una fila de dos columnas (una mitad una mitad) a la sección.
Configuración de fila
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 2
- Igualar alturas de columna: SÍ
- Ancho: 100%
- Margen: 50px inferior
- Relleno: 0px arriba, 0px abajo
Configuración de la columna 1
- Color de fondo: #2e3858
- Relleno: 50px inferior
Este relleno inferior creará el espacio necesario para cuando agreguemos los botones absolutamente posicionados.
Diseño de módulo de Blurb
A continuación, agregue un módulo de propaganda a la columna 1.
Luego cargue una imagen en el módulo de propaganda de la siguiente manera:
Vaya a la configuración de diseño y actualice lo siguiente:
- Alineación de imagen/icono: Izquierda
- Fuente del título: PT Sans
- Peso de la fuente del título: Negrita
- Color del texto del título: #ffffff
- Tamaño del texto del título: 38px
- Espaciado entre letras del título: 2px
- Color del cuerpo del texto: #ffffff
- Ancho de la imagen: 40%
- Ancho de contenido: 100%
- Ancho: 100%
- Relleno: 50 px, arriba, 50 px abajo, 30 px a la izquierda, 30 px a la derecha
Diseño del botón #1
Agregue un nuevo módulo de botón debajo del módulo de publicidad.
Luego actualice la configuración del botón de la siguiente manera:
- Tamaño del texto del botón: 16px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #2dc3a3
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 2px
- Fuente del botón: PT Sans
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: TT
- Margen: 0px inferior
- Relleno: 1em arriba, 1em abajo, 1,5em izquierda, 2,5em derecha
Botón #1 Posicionamiento Absoluto
Para colocar el botón absolutamente en la parte inferior izquierda de la columna, actualice lo siguiente:
- Posición: Absoluta
- Ubicación: abajo a la izquierda
Divi lo hace fácil con la cuadrícula de ubicación en la que se puede hacer clic incorporada. Dado que queremos que el botón quede al ras de la parte inferior de la columna, no se necesitan valores de compensación.
Diseño y posición del botón #2
Para crear el botón #2, duplique el módulo de botón anterior.
El duplicado se apilará directamente sobre el botón anterior, por lo que si está utilizando el generador visual, puede parecer que no ha pasado nada. Haga clic para abrir la configuración del módulo de botones y actualice lo siguiente:
- Color de fondo: #df4570
- Ubicación de la posición: abajo a la derecha
Ahora borre la columna 2 actualmente vacía y duplique la columna 1 para obtener también un diseño duplicado exacto en la columna de la derecha.
Mira el resultado. Tenga en cuenta que el contenido de la columna de la derecha empuja la columna hacia abajo en la página, pero debido a que nuestros botones están colocados absolutamente, continúan abrazando la parte inferior para lograr un diseño simétrico agradable.
Para el siguiente diseño de botones, colocaremos tres botones a la derecha de un módulo de publicidad en una sola columna.
Para impulsar este diseño de diseño de botón siguiente, duplique la fila anterior.
Ajustes de publicidad
Actualice la configuración de publicidad de la siguiente manera:
- Color de fondo: #df4570
- Ancho de la imagen: 60%
- Ancho: 56 % (computadora de escritorio y tableta), 100 % (teléfono)
Esto creará la habitación que necesitamos a la derecha de la propaganda para agregar nuestro diseño de tres botones.
Para posicionar el Botón #1, abra la configuración del botón para el botón verde en la esquina inferior izquierda y actualice lo siguiente:
- Posición: Absoluta (escritorio y tableta), Relativa (teléfono)
- Ubicación: arriba a la derecha
- Desplazamiento vertical: 20 % (computadora de escritorio y tableta), 0 % (teléfono)
- Desplazamiento horizontal: 5 % (computadora de escritorio y tableta), 0 % (teléfono)
Para colocar el botón #2, duplique el botón que acaba de colocar. Puede eliminar el botón rojo en la parte inferior derecha porque no lo necesitaremos.
Luego abra la configuración del botón duplicado y actualice lo siguiente:
- Color de fondo: #df4570
Luego mueva el botón un poco hacia abajo para aumentar el desplazamiento vertical.
- Desplazamiento vertical: 35 %
Finalmente, repite el proceso una vez más duplicando el botón anterior y actualizando lo siguiente:
- Color de fondo: #3599e5
- Desplazamiento vertical: 50 %
Mira el resultado final del diseño de tres botones.
Para este próximo diseño, vamos a colocar los botones un poco más esporádicamente y luego ajustaremos el tamaño de algunos botones usando la escala de transformación.
Para comenzar, duplique la fila anterior que contiene el diseño de tres botones.
Ajustes de publicidad
Luego abra la configuración para el módulo de publicidad en la columna 1 y actualice lo siguiente:
- Ancho: 60%
- Color de fondo: transparente
- Ancho: 60%
- Alineación del módulo: Centro
- Alineación de texto: centro
- Alineación del módulo: centro
- Ancho del borde: 2px
- Color del borde: rgba(255,255,255,0.15)
- Texto Tamaño del texto: 20px
- Margen: 50px arriba
- Desplazamiento vertical: 8%
- Desplazamiento Horizontal: -7%
- Posición Ubicación: Arriba a la derecha
- Desplazamiento vertical: 34 %
- Desplazamiento Horizontal: -10%
- Escala de transformación: 80%
- Posición Ubicación: abajo a la derecha
- Desplazamiento vertical: -3 %
- Desplazamiento Horizontal: 5%
- Escala de transformación: 138%
Configuración de fila
- Ancho del canalón: 4
- Ancho: 80% (escritorio)
Mira el resultado final.
Para este último diseño de botón, vamos a crear algunas pestañas en la parte superior derecha de la propaganda.
Para iniciar el diseño, duplique la fila del diseño de botones #2.
Configuración de columna
A continuación, actualice la configuración de fondo para la columna n. ° 1 de la siguiente manera:
- Color de fondo (escritorio): ninguno (predeterminado)
- Color de fondo (teléfono): #2e3858
En la pestaña Avanzado, actualice la opción de visibilidad para que el desbordamiento se oculte en la pantalla del teléfono.
- Desbordamiento horizontal (teléfono): Oculto
- Desbordamiento vertical (teléfono): Oculto
Ahora podemos usar los tres botones que se encuentran actualmente en la columna como nuestros botones desplegables. Abra la configuración del botón superior y actualice lo siguiente:
- Desplazamiento vertical: 0px
- Desplazamiento horizontal: 0px
Como vamos a usar el botón para una pestaña, debemos dejar espacio para el ícono correcto para que se vea centrado siempre que sobresalga por detrás del módulo de publicidad. Continúe y actualice el relleno del botón de la siguiente manera:
- Relleno: 2em izquierda, 3em derecha
Luego agregue el siguiente CSS personalizado al elemento After:
|
01
|
padding-left: 10px; |
Luego actualice el desplazamiento horizontal en el teléfono de la siguiente manera:
- Desplazamiento horizontal (teléfono): -134px
Esto ocultará el lado izquierdo del botón fuera de la columna en la pantalla del teléfono para que el botón completo se muestre al pasar el mouse o hacer clic.
Para colocar el segundo botón extraíble, duplique el botón anterior y actualice el color de fondo del duplicado.
- Color de fondo: #df4570
Luego, actualice la posición de la siguiente manera:
- Desplazamiento vertical: 63px
Luego actualice las siguientes opciones de posición para la visualización del teléfono:
- Cargo (teléfono): Familiar
- Desplazamiento vertical (teléfono): 0%
Finalmente, para colocar el tercer botón de tirador, duplique el módulo de botones anterior. A continuación, abra la configuración del módulo de botones duplicados y actualice lo siguiente:
- Color de fondo: #3599e5
- Desplazamiento vertical: 126px
Una vez que el tercer botón esté en su lugar, use la función de selección múltiple de Divi manteniendo presionado Cmd (o Ctrl) y haciendo clic en cada uno de los módulos de botones.
Luego abra la configuración de uno de los módulos de botones y agregue la siguiente transformación traducir al pasar el mouse.
- Transformar Trasladar el eje X (pasar el mouse): 68 %
Esto actualizará los tres botones con la función de pestaña desplegable al pasar el mouse hacia la derecha un 68 %.
Posicionamiento del módulo Blurb
Este diseño de botones requiere que el módulo de publicidad oculte parcialmente los tres botones. Por lo tanto, le daremos a la publicidad un ancho del 100% y luego usaremos el margen derecho para exponer la parte necesaria de las pestañas de los botones. Luego, todo lo que tenemos que hacer es darle a la publicidad un índice Z alto para asegurarnos de que se encuentre sobre los botones.
Abra la configuración del módulo de publicidad y actualice lo siguiente:
- Ancho: automático
- Margen: 50px derecho
- Cargo: Relativo
- Índice Z: 11
Luego actualice el color de fondo.
- Color de fondo: #2e3858
Configuración de fila
Una vez que finalicen los botones de publicidad y pestañas, abra la configuración de la fila y actualice el ancho para dar a esas pestañas algo de espacio para moverse.
- Ancho: 80%
Elimine la columna 2 y luego duplique la columna 1 para que tenga el mismo diseño en cada una.
Luego abra la configuración para la columna 1 y asígnele el siguiente índice Z:
- Índice Z: 12
Esto asegurará que los botones de la columna uno no se oculten detrás del contenido de la columna 2 al pasar el mouse.
Si lo desea, puede actualizar los íconos de cada botón para que se ajusten a sus necesidades.
Echa un vistazo al resultado final del diseño del botón de lengüeta.
Resultados finales
Pensamientos finales
Los botones de posicionamiento abren absolutamente la puerta para un sinfín de diseños de botones en Divi. Con suerte, este tutorial lo ayudará a comprender cómo utilizar mejor la posición absoluta en Divi. Otras funciones integradas útiles, como las opciones de transformación y el índice Z, hacen que el diseño de botones esté absolutamente posicionado.
Espero escuchar de usted en los comentarios.
¡Salud!