Modulo Boton – Crear y modificar un botón

Un botón en una página web es el elemento principal de la llamada a la acción , para que adquieran un producto, para que vayan a otra página.etc. 

Muchos módulos incluyen botones como los formularios , los formularios de suscripción, los llamados a acción , los slider o carruseles. los módulos de blog. etc. Podemos modificar su texto, color, alineación, fuente de texto, bordes. etc . 

Si deseamos que sea más personalizado en Avanzado con código CSS y otras herramientas obtendremos mayor personalización.

Vamos a crear y personalizar un botón desde cero.

Primero debes crear  la sección y luego la fila.  Acá puedes encontrar que son y como se crean las secciones.  https://artlike.co/2022/04/21/las-secciones-en-divi/

Luego vas a secciones y filas , das click en añadir nuevo módulo y busca botón.

Y ya se nos habrá creado el botón.

Hay varias opciones  en contenido como son:  Texto, Enlace, Etiqueta de administración

Para modificar el texto vas  al modulo botón y en Texto modificas el nombre. Recuerda al finalizar dar click en el botón check para guardar cambios.

Puede colocar un enlace  coloca la URL del sitio al que desee redirigir abriéndolo en otra pestaña o la misma.

De manera predeterminada, este módulo aparecerá con el nombre Botón en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Acá encontrará todas las opciones del diseño del módulo tales como fuente, color, tamaño y espaciado, alineación, texto, botón, espaciado, sombra,filtros, transformación, animación,  Acá puede modificar la apariencia del botón.

– Aquí puede elegir la posición del botón respecto de la columna que lo contiene: izquierda, derecha o centrada.

– Aquí puede elegir el contraste del texto. Si trabaja con un fondo oscuro, el texto deberá ser claro. Si trabaja con un fondo claro, el texto deberá ser oscuro.

Usar estilo personalizados para botón:  Si activa esta opción aparecerán varios ajustes de personalización para el botón, que le permitirán cambiar la apariencia.

Tamaño texto del botón: Puedes ajustar el tamaño del texto.

Color de texto del botón- De manera predeterminada, los botones tomarán el color definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.

Color de Fondo del Botón- De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.

Ancho de borde del botón- Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.

Color de borde del botón- De manera predeterminada, los bordes tomarán el color definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.

Radio del borde del botón –El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.

Espacio entre letras del botón-  El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.

Fuente de botón- Puede cambiar la fuente del texto del botón, seleccionando del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.

Botón Luz suave- Esto controla el peso de la fuente del texto del botón. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.

Botón estilo de fuente-Esto controla el estilo de la fuente del texto del botón. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.

Botón Icono- Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.

Icono de Botón- Acá puede elegir el icono que prefiera

Color de Icono del Botón-  De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.

Ubicación del icono del botón-Puede elegir mostrar el icono del lado derecho o izquierdo.

Solo mostrar icono al posar el cursor en el Botón-  De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.

Tamaño del texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción “Ninguna”..

Margen : El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.

Relleno: El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.

Puede añadir una sombra a la caja , escoja la que desee. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).

 Acá puede cambiar  la tonalidad de los colores .

Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. 

También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Sobrexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.

Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.

Puedes añadir hermosos efectos a tu botón.

Estilo de animación- Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.

Repetición de la animación- De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.

Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo

Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.

Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.

Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.

Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.

Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado al módulo, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar el módulo dentro de la hoja de estilos del tema hijo.

Clases &ID CSS

ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.

Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos.

CSS Personalizado- Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el módulo.

Relación del botón – Especifique el valor del atributo  del enlace. El atributo especifica la relación entre el documento actual y el documento vinculado.

Bookmark: Este atributo garantiza que la URL de la página que se abrirá al presionar el botón se mantendrá inalterable sin importar los cambios que se realicen en el contenido asociado a esa URL.

External: Este atributo indica que el contenido de la URL de la página mostrada en la nueva ventana pertenece a otro sitio web y no al nuestro.

Nofollow: Sirve para indicar al motor de búsqueda que no incluya la URL de esa página cuando realice el rastreo de nuestro sitio web.

Noreferrer: Este atributo indica al navegador que la página que se abrirá al pulsar el botón no tendrá incluido los datos de nuestro sitio web con el propósito de mantener anónima la vinculación.

Noopener: Este atributo sirve para proteger a tu sitio web de un ataque malicioso que pueda provenir de la página abierta en la nueva ventana.

Visibilidad

Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.

Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido

Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.

z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.

Transiciones

Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.

Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.

Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.