Cómo colocar los botones absolutamente para crear modelos únicos en la división

Las opciones de posición de la Divica Built -In son una herramienta de diseño conveniente para el posicionamiento preciso de cualquier elemento de la Divica, incluidos los botones. La mayoría de las veces, confiamos en la posición estática predeterminada de un botón que conserva el flujo del documento (o página). Sin embargo, si sabemos cómo colocar los botones absolutamente, podemos crear algunos modelos únicos y prácticos para nuestro contenido. En este tutorial, le mostraremos cómo crear 4 botones diferentes, que acentuarán de manera única el módulo Divi Brurb. Esto será útil cuando se use borrones en su sitio web.
Vamos a empezar. Tire de la vista para ver esta mirada rápida a los cuatro botones que construiremos en este tutorial.





Descargue los aspectos del botón Divic de forma gratuita para poner su mano en el diseño de la apariencia de los botones en este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Creando la apariencia de los botones no. 1: debajo de los botones dobles
Para el primero de los cuatro botones, crearemos botones de doble fondo debajo de un módulo de propaganda. Esta es una excelente opción para presentar contenido (como servicios) que requieren dos CTA. Además, esta es una excelente manera de mantener sus botones pegados a la parte inferior de las columnas con igual altura.

Para comenzar, agregue una fila con dos columnas (0 por mitad) en la sección.
Configuración de fila

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Igualar las alturas de la columna: entregar: 100%
Marja: 50 px a continuación
Forro: 0 px arriba, 0 px abajo
Configuración de columna 1
Color de fondo: # 2E3858

Revestimiento: 50 px fondo
Este relleno inferior creará el espacio necesario para cuando agregamos los botones absolutamente posicionados. Diseño del módulo de propaganda y luego, agregue un módulo de propaganda a la columna 1.
Luego suba una imagen en el módulo de la propaganda de la siguiente manera:

Vaya a la configuración de diseño y actualice lo siguiente:

Alineación de imágenes / iconos: izquierda

Fuente del título: para sans
Título Fuente de peso: Bold
Color de texto del título: #ffffff
Título Tamaño del texto: 38 PX
Cartas de título Espaciado: 2 PX
Color del texto del cuerpo: #ffffff
Ancho de imagen: 40%
Ancho de contenido: 100%
Ancho: 100%
Forro: 50 px, arriba, 50 px abajo, 30 px izquierda, 30 px a la derecha
Agregar el botón Botón doble inferior Botón # 1 Diseño Agregue un nuevo módulo de botón en el módulo de la propaganda.
Luego actualice la configuración del botón de la siguiente manera:

Tamaño de texto de texto: 16 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # 2DC3A3
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Botón de fuente: PT Sans
Botón de peso de fuente de fuente: en negrita
Botón de estilo de fuente: TT
Marja: 0 px a continuación
Revestimiento: 1em hacia arriba, 1em hacia abajo, 1.5em a la izquierda, 2.5em a la derecha
El botón de posición absoluta # 1 Para colocar el botón absoluto en la parte inferior de la columna, actualice lo siguiente:
Posición: Absoluto

Ubicación: abajo a la izquierda
Div hace esto fácilmente con la cuadrícula de ubicación construida. Como queremos que el botón permanezca en color en la parte inferior de la columna, no se requieren valores de compensación. El botón de diseño y posición # 2 Para crear el botón # 2, copie el módulo de botón anterior. El despliegue se apilará directamente sobre el botón anterior, por lo que si usa el generador de imágenes, no ha sucedido nada. Haga clic para abrir la configuración del módulo de botón y actualice lo siguiente:
Color de fondo: # DF4570

Ubicación de la posición: hacia abajo a la derecha

Ahora elimine la columna 2 de corriente vacía y doble columna 1 para obtener un diseño duplicado exacto en la columna derecha.
El resultado de la aparición del botón no. 1 Verifique el resultado. Observe que el contenido de la columna derecha empuja la columna más hacia abajo, pero debido a que nuestros botones están absolutamente posicionados, continúan abrazando el fondo para un hermoso diseño simétrico.

Creando la apariencia de los botones no. 2: tres botones laterales

Para el siguiente aspecto de los botones, colocaremos tres botones en el lado derecho de un módulo de propaganda en una sola columna.

Para comenzar este proyecto de diseño del botón siguiente, copie la fila anterior.

Configuración de la propaganda Actualizar la configuración de la propaganda de la siguiente manera:

Color de fondo: # DF4570
Ancho de imagen: 60%

Ancho: 56% (escritorio y tableta), 100% (teléfono)
Esto creará la habitación que necesitamos a la derecha de la propaganda para agregar nuestra apariencia con tres botones. Botón de posicionamiento # 1 Para colocar 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: Absoluto (escritorio y tableta), relativo (teléfono)
Ubicación: VERTICAL RETO VERTICAL Sucedecalage: 20% (escritorio y tableta), 0% (teléfono)

Horizontal Gap: 5% (escritorio y tableta), 0% (teléfono)
Botón de posicionamiento # 2 Para colocar el botón # 2, copie 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 para el botón Duplicate y actualice lo siguiente:
Color de fondo: # DF4570
Luego mueva el botón un poco hacia abajo, aumente la brecha vertical.

Brecha vertical: 35%

Botón de posicionamiento # 3 Finalmente repita el proceso una vez más, duplicando el botón anterior y actualizando lo siguiente:
Color de fondo: # 3599E5

Brecha vertical: 50%
El resultado de la aparición del botón no. 2 Verifique el resultado final de la aparición con tres botones.


Creando la apariencia de los botones no. 3: botones dispersos y escalados
Para el siguiente aspecto, colocaremos los botones un poco más esporádicos y luego ajustaremos el tamaño de unos pocos botones utilizando la escala de transformación. Para comenzar, copie la fila anterior que contiene la apariencia con tres botones.
Configuración de la propaganda Luego abra la configuración del módulo de blurb 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 fronterizo: 2 PX
Color del borde: RGBA (255,255,255,0,15)

Tamaño de texto de texto: 20 PX
Margen: Top 50 PX

Botón # 1 Posicionamiento
Brecha vertical: 8%

Brecha horizontal: -7%

Botón # 2 Posicionamiento

Posición de ubicación: a la derecha a la derecha
Brecha vertical: 34%
Brecha horizontal: -10%

Escala de transformación: 80%
El botón de posicionamiento # 3
Ubicación Posición: Derecha inferior
Brecha vertical: -3%

Gap Horizontal: Escala de transformación del 5%: 138%

Configuración de fila
El ancho de la canaleta: 4
Ancho: 80% (escritorio)
Apariencia del botón # 3 Resultado Compruebe el resultado final.

Creando la apariencia del botón # 4: botones Pull-Tab

Para este último aspecto del botón, crearemos algunas pestañas de extracción en la esquina superior derecha del texto. Para comenzar el proyecto, copie el giro del botón no. 2.
Configuración de la columna luego actualice la configuración de fondo para la columna # 1 de la siguiente manera:
Color de fondo (escritorio): ninguno (predeterminado)

Color de fondo (teléfono): # 2E3858

En la pestaña avanzada, actualice la opción de visibilidad, de modo que la superación esté oculta en la pantalla del teléfono.

Overflow Horizontal (teléfono): Oculto

Desbordamiento verticalmente (teléfono): oculto
Botón de posicionamiento de la pestaña # 1 Ahora podemos usar los tres botones actualmente en la columna como botones Pull-Tab. Abra la configuración para el botón superior y actualice lo siguiente:
Brecha vertical: 0 px

Brecha horizontal: 0 px
Como usaremos el botón para una pestaña, debemos dejar espacio para el icono correcto, de modo que se vea centrado cada vez que venga detrás del módulo de la propaganda. Continúe y actualice el llenado del botón de la siguiente manera:
Junta: 2em a la izquierda, 3em a la derecha

Luego agregue los siguientes CSS personalizados al elemento posterior a la izquierda: 10px; Luego actualice la brecha horizontal en el teléfono de la siguiente manera:
Horizontal Gap (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 en el cursor / clic.

Posicionar el botón de extracción # 2 Para colocar el segundo botón de extracción, copie el botón anterior y actualice el fondo duplicado.
Luego actualice el puesto de la siguiente manera:
Brecha vertical: 63 PX
Luego actualice las siguientes opciones de posición para mostrar su teléfono:
Posición (teléfono): pariente

Brecha vertical (teléfono): 0%
Botón de posicionamiento de la pestaña de dibujo # 3 Finalmente, para colocar el tercer botón Pull-Tab, copie el módulo de botón anterior. Luego abra la configuración para el módulo de botón duplicado y actualice lo siguiente:

Color de fondo: # 3599E5
Brecha vertical: 126 PX

Una vez que el tercer botón esté en posición, use la función de selección múltiple de DIV, manteniendo presionado CMD (o CTRL) y haga 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 al pasaje.
Transformar el eje x traducido (lugar): 68%

Esto actualizará los tres botones con la función de extracción Hover moviéndola al 68%derecho. Posicionar el módulo de la propaganda Este aspecto de los botones requiere que el módulo de la propaganda oculte parcialmente los tres botones. Por lo tanto, le daremos a la propaganda un ancho del 100% y luego usaremos el borde derecho para exponer la pieza necesaria de las pestañas de los botones. Luego, todo lo que tenemos que hacer es darle a la propaganda un alto índice para asegurarse de que esté por encima de los botones. Abra la configuración del módulo de blurb y actualice lo siguiente:
Ancho: automático
Marja: 50 px a la derecha

Posición: pariente

IND ÍNDICE: 11
Luego actualice el color de fondo.

Color de fondo: # 2E3858
La configuración de la fila después de que se completen los botones de la propaganda y la tabla de tracción, abra la configuración de la fila y actualice el ancho para dar esos espacios en movimiento. Poco: 80%
Limpie la columna 2 y luego copie la columna 1 para que tenga el mismo diseño en cada uno. Luego abra la configuración para la columna 1 y dale el siguiente índice z:
IND ÍNDICE: 12
Esto asegurará que los botones en la columna uno no se oculten detrás del contenido de la columna 2 en el mouse. Si lo desea, puede actualizar los iconos para cada botón para satisfacer sus necesidades.

Apariencia del botón # 4 Resultado Verifique el resultado final del aspecto del botón Pull-Tab.
Resultados finales

Botones de posicionamiento de pensamientos finales abren la puerta para interminables disposiciones de botones en la división. Esperamos que este tutorial lo ayude a comprender cómo usar la posición absoluta en el Div. Otras características útiles construidas, como opciones de transformación e índice z, hacen un diseño de botones absolutamente posicionado. Espero tener noticias suyas en los comentarios. ¡Suerte!