Espaciado

Puedes añadir márgenes o rellenos (padding) a este módulo introduciendo valores numéricos.

• Margen – Añade espacio fuera del módulo.

• Relleno (Padding) – Añade espacio dentro del módulo.

Haz clic en el ícono de cadena entre los valores para bloquearlos y mantenerlos iguales (por ejemplo, arriba y abajo).

Valores predeterminados
Margen: 0
Relleno: 0

Borde

Agrega un borde al módulo, ya sea completo o en un solo lado. Ajusta el ancho con el deslizador y selecciona un color y estilo de borde.

• Esquinas redondeadas – Introduce un valor numérico para redondear las esquinas. Cuanto mayor sea el número, más redondeadas serán. Haz clic en el ícono de cadena para aplicar valores distintos a cada esquina.

• Estilos de borde – Aplica borde a todos los lados o individualmente (superior, derecho, inferior, izquierdo).

• Ancho del borde – Establece el grosor del borde (mínimo 1px para ser visible).

• Color del borde – Selecciona desde la paleta del sitio o usa el cuentagotas.

• Estilo del borde – Elige entre: sólido, discontinuo, punteado, doble, relieve, ranura, inserto, sobresaliente o ninguno.

Sombra de Caja

Agrega sombra al módulo completo.

Opciones disponibles tras seleccionar un estilo:

• Posición horizontal – Posición lateral de la sombra.

• Posición vertical – Posición vertical de la sombra.

• Intensidad del desenfoque – Cuanto mayor el valor, más difusa será la sombra.

• Intensidad de expansión – Aumenta la densidad y tamaño de la sombra.

• Color de la sombra – Elige el color de la sombra.

• Posición de la sombra – Dentro o fuera del módulo.

Filtros

Ajusta los filtros visuales del módulo:

• Tono (Hue) – Cambia el ángulo del color.

• Saturación – Controla la intensidad del color.

• Brillo – Ajusta qué tan brillante se muestra.

• Contraste – Diferencia entre luces y sombras.

• Invertir – Invierte el color, brillo y saturación.

• Sepia – Aplica un tono cálido (amarillo/marrón).

• Opacidad – Ajusta la transparencia del fondo.

• Desenfoque – Aplica desenfoque Gaussiano.

• Modo de fusión – Cómo se mezcla el módulo con las capas inferiores (por defecto: Normal).

Transformación

Controla la forma y posición del módulo:

• Escalar – Aumenta o disminuye su tamaño.

• Trasladar (Translate) – Mueve el módulo.

• Rotar – Gira el módulo.

• Sesgar (Skew) – Inclina el módulo diagonalmente.

• Puntos de origen – Cambia el punto desde el cual se aplica la transformación.

Haz clic en el ícono de cadena para mantener valores simétricos.

Animación

Aplica animaciones al módulo:

• Estilo de animación – Selecciona entre varias opciones.

• Duración – Define el tiempo que dura la animación (milisegundos).

• Retraso – Establece un tiempo antes de que inicie.

• Opacidad inicial – Nivel de transparencia al inicio.

• Curva de velocidad – Controla la fluidez del movimiento (por ejemplo, entrada/salida suave).

• Repetición – Puedes hacer que la animación se repita continuamente (loop).

Pestaña Avanzado

ID y Clases CSS

• ID CSS – Identificador único para personalizar con CSS.

• Clases CSS – Agrega clases CSS reutilizables.

CSS Personalizado

• CSS libre – Usa selector para dirigir tu código. Ejemplo:

  css
  selector h1 { color: red; }
  

• Elementos del módulo – Añade CSS directamente a secciones específicas del módulo.

Atributos

• Texto alternativo (Alt Text) – Describe la imagen si no carga o para tecnologías asistidas. También mejora el SEO.

---

Condiciones

Define cuándo se muestra el módulo según criterios como:

• Tipo de usuario (nuevo o cliente),

• Navegador,

• Sistema operativo,

• Visita repetida, etc.

Puedes combinar múltiples condiciones.

Visibilidad

• Deshabilitar en – Oculta el módulo en móviles, tablets o escritorio.

• Desbordamiento horizontal/vertical – Define qué pasa si el contenido excede el tamaño del módulo:

  • Visible

  • Oculto

  • Desplazamiento (scroll)

  • Automático

Transiciones

Controla la transición durante efectos de hover:

• Duración – Tiempo que tarda en ocurrir el efecto.

• Retraso – Tiempo antes de comenzar la transición.

• Curva de velocidad – Fluidez del movimiento.

Posición

Controla la posición del módulo:

• Relativa (predeterminada) – Dentro del flujo del documento.

• Absoluta – Se saca del flujo y se posiciona en relación con su contenedor más cercano.

• Fija (Fixed) – Se fija en la pantalla (como un encabezado fijo).

Opciones:

• Desplazamiento vertical y horizontal – Ajusta la posición.

• Z-index – Controla qué módulo está por encima o debajo.

Efectos de Desplazamiento

Define el comportamiento del módulo al hacer scroll:

• Sticky – Fija el módulo arriba, abajo o ambos.

• Movimiento vertical – Cambia la velocidad de scroll del módulo.

• Activador de movimiento – Decide cuándo se activa el efecto (parte superior, media o inferior del módulo).

Guardar tu diseño

• Haz clic en la flecha verde en la parte inferior del módulo para guardar los cambios.

Si cierras sin guardar, perderás todo.

Guardar diseño de la página

• Usa CMD + S (Mac) o CTRL + S (Windows).

• O haz clic en el ícono morado con tres puntos ..., y luego en el botón verde Guardar.

Salir del Constructor Visual

Haz clic en Salir del Constructor Visual desde la barra superior de administración para finalizar.