Cómo usar el módulo de botones en el constructor

Al crear una página de destino (o cualquier página) usando Divi Builder, es posible que desee agregar un botón para facilitar a sus visitantes. Entre los elementos de diseño (llamados módulos) ofrecidos por Divi Builder se encuentran el módulo de botón, que puede usar para agregar un botón en la página en la que trabaja. Por supuesto, también puede agregar el módulo de botón a una plantilla de generador de temas, como la plantilla de encabezado personalizada, la plantilla de sótano personalizada, etc. Si es nuevo en Divi Builder, este artículo le mostrará cómo agregar un módulo de botón, así como para estilizarlo.
Cómo agregar un módulo de botón al Builder Divin para crear una página usando Divi Builder, debe agregar al menos una sección y fila. Cuando agrega una fila, puede seleccionar la estructura de la columna de acuerdo con sus necesidades. Luego puede agregar los módulos, incluido el módulo de botón, a las columnas en una fila. Tenemos artículos separados que cubren cómo trabajar con una sección y una fila en el Builder Div. Puedes leerlos para obtener más información. Para agregar un módulo de botón, simplemente puede hacer clic en el icono Gray Plus en la columna que desea agregar y seleccionar el botón.

La configuración del módulo de botón aparecerá inmediatamente después de seleccionar el módulo de botón. Puede realizar el proceso de personalización del botón en este panel. Antes de comenzar el estilo del botón, puede agregar un enlace al botón y establecer el texto del botón. Para agregar el enlace, puede abrir el enlace en la pestaña Contenido.

Mientras establece el texto del botón, puede abrir el bloque de texto. También en la pestaña de contenido. Puede agregar un texto estático o un texto dinámico. Para agregar un texto dinámico, puede hacer clic en el icono base Bason en los campos de botones. Configurar el tamaño del botón Divi Builder no ofrece ninguna opción de configuración específica dedicada a configurar el tamaño del botón. Entonces, ¿cómo establecer el tamaño del botón?

Para establecer el tamaño del botón, puede establecer el relleno. Para hacer esto, puede acceder a la pestaña de diseño en el panel de configuración del botón y abrir el bloque de espacios. Simplemente puede configurar el relleno superior, el relleno inferior, el relleno derecho y el relleno izquierdo. La configuración de relleno agregará espacio entre el texto del botón y el marco del botón, que también afecta el tamaño del botón.
Estimulando el botón Después de haber terminado de configurar el tamaño del botón, configurar el texto y agregar el enlace, puede comenzar a estilizar el botón. La aparición predeterminada del botón ofrecido por Div Builder es un botón blanco con borde azul y texto azul. Antes de que pueda cambiar el botón, debe activar el estilo personalizado. Para hacer esto, abra el bloque de botones en la pestaña de diseño y active la opción Use estilos personalizados para el botón. Activar esta opción abrirá más opciones de estilo.

Desde el bloque de bloque en la pestaña de diseño (para usar estilos de botón personalizados), puede:

Establezca el tamaño de texto del botón
Establezca el color del texto del botón
Establezca el fondo de fondo. Puede usar un fondo de color sólido, gradiente o imagen
Establezca el lado del borde del botón
Establezca el color del borde del botón
Establezca el radio de los bordes el botón del botón del texto del botón
Establezca el peso del texto del botón
Establezca el icono del botón
Una vez que haya hecho opciones de estilo en el bloque de botones, puede abrir otros bloques en diseño para aplicar otras opciones de estilo.
Sombra de la caja
Puede abrir este bloque para aplicar un tono de botón al botón. Hay 7 opciones de sombra para casetes ofrecidas por Divi Builder. Después de seleccionar uno, puede establecer el color de la sombra, la posición horizontal, la posición vertical, el poder del desenfoque y el poder de la propagación.
Filtros
Puede abrir este bloque para aplicar filtros CSS al modo.

Transformar
Puede abrir este bloque para aplicar la transformación CSS al botón. Simplemente seleccione la transformación CSS que desea aplicar (haciendo clic en una de las pestañas disponibles) y use el mouse para establecer el valor de transformación.


Animación
Puede abrir este bloque para establecer la animación de entrada del módulo de botón. Hay siete opciones de animación de entrada desde las que puede elegir. Una vez que haya seleccionado uno, puede establecer la duración de la animación, el retraso de la animación y la opacidad de inicio.

Configuración avanzada Una vez que termine de hacer estilo en la pestaña de diseño, puede pasar a la pestaña avanzada para hacer algunas configuraciones avanzadas. Desde agregar CSS personalizado hasta configurar el efecto de desfile. Hay 7 bloques que puede abrir en la pestaña avanzada.
Clases de identificación y CSS

Puede abrir este bloque para agregar CSS personalizado a través del módulo de código. Puede abrir el bloque para agregar la clase CSS ID y CSS.
CSS personalizado
Puede abrir este bloque para agregar CSS personalizado directamente en lugar del módulo de código. Simplemente puede pegar el código CSS a los campos disponibles. Atributo

Puede abrir este bloque para establecer el atributo del enlace del botón.
Visibilidad

Desde este bloque, puede deshabilitar/activar el botón en ciertos tipos de dispositivos (escritorio, tableta y teléfono inteligente). Simplemente marque el tipo de dispositivo que desea deshabilitar el botón.
Transiciones

Puede abrir este bloque para establecer la transición de la animación Hover.
Posición

Cuando agrega un nuevo módulo a la división del constructor (incluido el módulo de botón), la posición se establece en Static (predeterminado). Si lo desea, puede establecer la posición en relativo, fijo o absoluto.
Relativo: si selecciona esta opción, el módulo de botón seguirá el flujo de página normal. Esta opción ofrece propiedades superior, inferior y derecha. Absoluto: si selecciona esta opción, no habrá espacio real creado en la página para el módulo de botones. Puedes pensar en ello como un elemento flotante sobre otras filas que ocupan un espacio real. Remedio: si selecciona esta opción, el módulo de botón detendrá el flujo de página normal y no tiene espacio real en la página.

Efectos de folación
Puede abrir este bloque para establecer los efectos del desfile en el módulo de botón. Puede establecer el efecto de desfile horizontal o el efecto de desfile vertical. También puede aplicar la opción pegajosa desde este bloque.