Documentación de Divi - El módulo Botón

Divi - Documentación en español

Actualizada v3.28

El módulo Botón

Existen varios módulos del constructor que incluyen botones: los Carruseles, los Llamados a la acción, los formularios de Suscripción, por solo nombrar algunos. Sin embargo, también es posible añadir un botón único dentro de un diseño de Divi. Cuando se combina con los Ajustes de diseño avanzado, podrá crear incontables estilos de botones.

Divi - Módulo "Botón"

Cómo añadir un módulo Botón en una página

Antes de poder añadir un módulo Botón, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Localice el módulo Botón dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “botón” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Sistema de ayuda de Divi

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtro de búsqueda en módulos

Ver más información aquí.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como el texto y el enlace. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.

Texto
  • Botón – Escriba el texto del botón.
Enlace
  • URL del enlace del botón – Introduzca la URL de destino para el botón.
  • Destino del enlace del botón – Aquí puede elegir si el enlace se abre en la misma ventana o no.
Etiqueta de administración
  • Etiqueta de administración – 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.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como fuente, color, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.

Alineación
  • Alineación del botón – Aquí puede elegir la posición del botón respecto de la columna que lo contiene: izquierda, derecha o centrada.
Texto
  • Color de texto – 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.
Botón
  • Usar estilos 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 de texto de Botón – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
  • Color de texto de Botón – De manera predeterminada, los botones tomarán el color de acento 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 de Botón – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
  • Ancho del borde de 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 del borde de Botón – De manera predeterminada, los bordes tomarán el color de acento 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 de 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 de 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, seleccionándola 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 Peso de fuente – 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.
  • Mostrar icono de Botón – 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 – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
  • Color de icono de 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 de icono de 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.
  • Sombra de texto de Botón – 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”..
Espaciado
  • 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.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. 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).
Filtros
  • Filtros – 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, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – 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.
Animación
  • Estilo de la 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.

Opciones avanzadas

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.

Atributos
  • Relación del botón – Especifique el valor del atributo rel del enlace. El atributo rel especifica la relación entre el documento actual y el documento vinculado.
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.

Ver demostración en vivo del módulo

Facebook
WhatsApp
Twitter
LinkedIn
Pocket
Reddit
Enviar por correo
Imprimir

39 comentarios en “El módulo Botón”

    1. Hola, Gloria.

      No hay ajustes para configurar el botón «Volver arriba». Las personalizaciones deben hacerse vía CSS (en el recuadro CSS personalizado de las Opciones del tema). Un ejemplo sería el siguiente:

      .et_pb_scroll_top.et-pb-icon {
          bottom: 12px; /* Posición desde margen inferior */
          right: 12px; /* Posición desde margen derecho */
          font-size: 54px; /* Tamaño del icono */
          color: #ff0000; /* Color del icono */
          background: #000; /* Color de fondo */
          border-radius: 100px; /* Radio de borde del fondo */
      }
      

      Saludos.

      1. Hola Aye! Siento las molestias. He configurado el botón volver arriba, similar a tu blog y otros. Lo he hecho con CSS mirando códigos que compartíais (súper gracias!)
        El caso es que no sé por qué, cuando clicas en mi botón se pone una línea en medio muy antiestética y no tengo ni idea de por qué es esto! Podrías mirármelo a ver si se te ocurre por qué puede ser?
        Es en la web que estoy construyendo: https://www.comolasperasalosperos.com/
        Mil gracias.

  1. Buenos días, gracias de antemano por la ayuda. Tengo una landing page, en la cual tengo varios botones que hacen llamado a registrarse a un proyecto. Quiero enlazar estos botones con un formulario de bloom. El problema que tengo es que el código CSS principal que me arroja cada botón en divi es diferente y no se como colocarlos en la sección CSS del formulario Bloom. Hay forma de hacerlo para no tener que elaborar tantos formularios en bloom como botones en divi.?.

    1. Hola, Eustorgio.

      Disculpas por la demora en la respuesta. La verdad, no me queda muy claro cuál es el efecto que estás buscando. Si es usar un enlace de anclaje al formulario de Bloom, simplemente dale una ID CSS al módulo donde está ese formulario (por ejemplo, registrarse), y luego en el botón usá el enlace #registrarse.

      Saludos.

      1. Buenos dias Aye, gracias por tu ayuda. Trataré de explicarme mejor:
        Tengo una landing page, que tiene varios llamados a la accion. Este llamado a la acción lo registro mediante la creación de un modulo de botón. Cada botón creado origina un código que se muestra en el apartado CCS principal. Como éste codigo es diferente para cada boton creado, se origina el problema de colocarlo la sección de bloom de CCS, que admite un solo código. La pregunta es, si es posible unificar en Divi el codigo CSS de todos los botones de llamado de acción de la landing page o si en el formulario de bloom en la seccion de CSS se puede colocar mas de un codigo?
        Esperando haberme podido explicar mejor, me despido de usted,
        Atentamente
        Eustorgio Reyes

        1. Hola, Eustorgio.

          Sigo pidiendo perdón por la demora… pero creo que estoy un poco más cerca de entender. A ver si te sigo: cada botón de llamado a la acción tiene un estilo distinto, pero todos esos botones apuntan al mismo formulario de Bloom. Cuando se hace clic en el botón con estilo A, quiero que el formulario me muestre un botón con estilo A, pero cuando hago clic en el botón con estilo B, quiero que el formulario muestre el botón con estilo B. ¿Es correcto?

          Si es así, me temo que no hay manera de discriminarlos en el CSS de Bloom, porque el formulario tendría una ID única. En ese caso, sí tendrías que crear tantos formularios como botones.

          Saludos.

    1. Hola, Jesús.

      La opción sería Color de texto de Botón. Cuando pasas el cursor sobre el bloque de opciones te va a aparecer junto al título el icono de un puntero, le das clic ahí y se abrirán las dos opciones: Predeterminado (Default) y Encima (Hover), para asignar ambos colores.

      Saludos.

  2. Para personalizar el botón, ahora no me aparece ninguna opción HOVER (antes sí aparecían).
    He leido la respuesta de 2 de noviembre, y ello funciona con el constructor visual, pero no con el constructor clásico. Hay alguna manera para el clásico?
    Gracias

    1. Hola, José.

      Solo funciona en el constructor visual. Muchas de las características nuevas están disponibles únicamente allí, ya que en un futuro cercano ET planea combinar ambas interfaces y el constructor clásico será reemplazado por una nueva versión, más similar al constructor visual (más info aquí).

      Saludos.

  3. Hola, estoy teniendo un problema con el constructor visual. Cuando le doy a la rueda dentada de algún módulo, sección o fila no se me abre el recuadro de opciones y a veces se me vacia la página de contenido,y no puedo seguir trabajando con el constructor visual.
    A que puede deberse estó?

  4. Hola hago un botón que enlaza a un pdf, cuando se pulsa sobre el botón no se abre directamente el pdf, si no que se abre una página previa donde se ve una miniatura del pdf, es posible saltarse esa pre visualización y abrirlo directamente?, si hay que pasar por la miniatura, se puede poner en algún sitio pulsa sobre la miniatura para abrirlo en grande?
    Gracias.

    1. Hola, Francisco.

      Gracias por tu comentario.

      Parecería que estás enlazando a la página del adjunto, por eso se ve la miniatura. Tendrías que usar la URL completa del archivo. Por ejemplo: https://tusitioweb.com/wp-content/uploads/2019/12/archivo.pdf.

      Saludos.

  5. Hola!

    Cómo puedo añadir código a un botón para hacer seguimiento con eventos personalizados del pixel de facebook?

    En mi sitio web me centro en que las personas me contacten por whatsapp y quiero hacer un seguimiento a las personas que hacen clic en el botón de contacto, solo que no encuentro cómo editar el código del boton para incertar el fragmente de segumiento del pixel.

    Muchas gracias por su valiosa colaboración.

    Saludos.

    1. Hola, José.

      Todos los elementos del constructor tienen controles para adaptar los estilos a la vista de escritorio, tablet y smartphone. Los encontrarás haciendo clic en el icono del celular que aparece al pasar el cursor sobre el título de cada opción.

      Saludos.

    1. Hola, Dante.

      Este es un módulo independiente, si te referís al botón del formulario de contacto, no es posible. Tendrías que usar un plugin como Contact Form 7, por ejemplo.

      Saludos.

  6. Hola!
    Quiero cambiar el color del botón cuando acerco el mousse y probé lo que dijeron arriba, pero lo que me pasa es que cuando estoy en modo de edición acerco el mousse y veo los cambios correctamente, pero cuando salgo del constructor visual solo se me aplica el cambio del color del texto pero no el del fondo.
    Fui como dijeron al ícono del puntero y cambié ambos colores, tanto el del texto como el del fondo, pero como dije arriba sólo se aplica el del texto.

    Muchas gracias.

    1. Hola, Lola.

      Gracias por tu comentario.

      El procedimiento está correcto, fijate que no sea un problema de caché del navegador (vaciá el historial y cookies, o abrí la página en una pestaña de incógnito).

      Saludos.

          1. Hola, Lola y Andrés.

            En las actualizaciones 4.6.1 y 4.6.4 se corrigieron errores relacionados con el fondo de los botones. También comprueben que el estilo del botón en el Personalizador esté en su valor predeterminado para el color de fondo (panel Botones > Estilo de botones al pasar el cursor).

            Saludos.

  7. Buenas tardes, estoy tratando de ajustar el tamaño de un botón ( en este caso la anchura) a la de la columna donde lo he incluido, y que sea así en todos los formatos y tipos de pantalla ( que sea resposive). Entiendo que es una opción que hay que meter con CCSS¿ es así? ¿ cual sería el código a emplear?

  8. Hola, hice el botón que abre una foto en la misma página, pero luego que esta se abre no hay forma de cerrarla y que quede en la misma página, toca darle atrás o cerrar la página, cómo hago? Mil gracias.

  9. Hola, tengo dos problemas:
    1. Puse un botón dentro de la sección Slider que lleva a la página de proyecto de mi portafolio, pero al darle click no funciona, se queda en blanco «cargando», he revisado y tiene el enlace correcto, de hecho, al ingresar directamente a la página de proyecto con la URL, esta si carga con normalidad.

    2. Modifiqué el tamaño de imagen del slider para que se vea «vertical», pero al revisarla en movil, se ve la sección del slider y el texto, pero dejó de cargar la imagen.

  10. Hola tengo un problema con divi, he creado un header con tres columnas: una imagen para el logo, el menu y un boton. Les puse la funcion sticky a los tres para q hagan cambios al hacer scrool. el problema es queen el boton no hay cambios vcuando hago scroll, en cambio en los otros modulos si. No se por que la verdad, en el constructor ala hora de configfurarlo si se ve los cambios pero al abrir la pagina fuera del constructor no. solo pasa en el boton.

Responder a Aye Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Scroll al inicio