Cómo agregar un color de fondo

1. Haz clic en la primera pestaña, el ícono del Balde de Pintura.
   
2. Haz clic en Agregar color de fondo y elige un color de la paleta de colores de tu sitio, o usa el ícono del cuentagotas para encontrar un nuevo color.

Cómo agregar un degradado de fondo

1. Haz clic en la segunda pestaña, el ícono de Degradado.
   
2. Haz clic en Agregar degradado de fondo.
   Para cambiar los colores del degradado, haz clic en los puntos de parada del degradado y selecciona un color de la paleta de colores de tu sitio o usa el ícono del cuentagotas para elegir un nuevo color. Los puntos de parada permiten añadir más colores al degradado. Haz clic en cualquier lugar de la barra deslizante para añadir un nuevo punto de parada.

Opciones del degradado de fondo
Tipo de degradado - Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el deseado.

Dirección del degradado - Puedes cambiar la dirección del degradado arrastrando la barra deslizante o escribiendo un valor numérico.

Repetir degradado - Activa esta opción a sí si quieres que el degradado se repita.

Unidad de degradado - La unidad de degradado cambia cómo se calculan los puntos de parada del degradado. Selecciona el menú desplegable para cambiar la unidad.

Colocar degradado sobre la imagen de fondo - Si se aplica una imagen de fondo, puedes colocar el degradado por encima de la imagen activando esta opción a sí.

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña, el ícono de Imagen.
2. Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya cargada o subir una nueva.

Opciones de imagen de fondo
Usar efecto Parallax - Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido en primer plano, dando la ilusión de un efecto 3D), activa esta opción. Por defecto, está desactivada.

Tamaño de imagen de fondo - Elige el tamaño de tu imagen de fondo seleccionando una opción del menú desplegable.

Posición de imagen de fondo - Elige la posición de la imagen de fondo seleccionando una opción del menú desplegable.

Repetición de imagen de fondo - Elige si y cómo se repite la imagen de fondo seleccionando una opción del menú desplegable.

Mezcla de imagen de fondo - Elige cómo se mezcla la imagen de fondo con otras capas del módulo seleccionando una opción del menú desplegable.

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña, el ícono de Video.
   
2. Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar un video ya cargado o subir uno nuevo.

Opciones de video de fondo
Mp4 vs WebM - Recomendamos subir tanto una versión mp4 como una versión webm del video porque no todos los navegadores soportan formatos WebM. Subir ambos tipos de archivo asegura que tu video se reproduzca en todos los dispositivos y navegadores.

Ancho del video de fondo - Establece el ancho del video escribiendo un valor numérico.

Alto del video de fondo - Establece la altura del video escribiendo un valor numérico.

Pausar video cuando otro video se reproduce - Si quieres que el video de fondo se pause cuando otro video se esté reproduciendo, activa esta opción. Por defecto, el video se pausará cuando no esté visible. Si quieres que el video continúe, desactiva esta opción.

Cómo agregar un patrón de fondo

1. Haz clic en la quinta pestaña, el ícono de Patrón.
   
2. Haz clic en Agregar patrón de fondo.

Elige el tipo de patrón que quieres en el menú desplegable.

Opciones de patrón de fondo
Color del patrón - Selecciona el color del patrón de la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

Transformar patrón - Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

Tamaño del patrón - Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones: ancho del patrón y alto del patrón. Arrastra la barra deslizante o escribe un valor numérico para definirlas.

Origen de repetición del patrón - Selecciona el origen desde el cual el patrón se repite.

Desplazamiento horizontal y vertical del patrón - Ajusta los desplazamientos horizontal y vertical del patrón.

Repetición del patrón - Elige cómo se repite el patrón, ya sea horizontal, vertical, y más.

Modo de mezcla del patrón - Define cómo la capa del patrón interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña, el ícono de Máscara.
   
2. Haz clic en Agregar máscara de fondo.

Selecciona el tipo de máscara que quieres desde el menú desplegable.

Opciones de máscara de fondo
Color de la máscara - Elige el color de la máscara de la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

Transformar máscara - Transforma la máscara horizontal o verticalmente, gírala o inviértela.

Relación de aspecto de la máscara - Establece la relación de aspecto de la máscara. La relación de aspecto es la proporción entre el ancho y la altura de una imagen.

Tamaño de la máscara - Selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones: ancho y alto de la máscara. Arrastra la barra deslizante o escribe un valor numérico para definirlas.

Modo de mezcla de la máscara - Define cómo la capa de la máscara interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Filtros

Ajusta los filtros del módulo:

Tono - Define el ángulo del tono de un color.

Saturación - Define qué tan intensa debe ser la saturación del color.

Brillo - Define qué tan brillantes deben ser los colores.

Contraste - Define qué tan marcadas deben ser las áreas claras y oscuras.

Invertir - Invierte el tono, la saturación y el brillo según el valor especificado.

Sepia - Define una apariencia más cálida, con tonos amarillos/marrones.

Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

Desenfoque - Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Fusión se refiere a cómo el módulo se mezcla con las capas que están debajo. Por defecto, estará seleccionado “normal”.

Transformación

1. Escalar
2. Trasladar
3. Rotar
4. Inclinar

Puntos de origen

Presiona la tecla de tabulación para acceder a cada opción. Configura cada opción introduciendo valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de eslabón en la parte inferior derecha.

Animación

• Duración de la animación – Define el tiempo que tarda una animación en completar un ciclo.

• Retraso de la animación – Define el tiempo que se espera desde que se aplica la animación a un elemento hasta que comienza a ejecutarse. La animación puede comenzar más tarde, inmediatamente desde el inicio o inmediatamente a la mitad de la animación.

• Opacidad inicial de la animación – Define el valor de opacidad inicial.

• Curva de velocidad de la animación – Define el método de transición de la animación. Transicionar suavemente la animación al inicio y al final crea un efecto más fluido que una curva lineal.

• Repetición de la animación – Por defecto, las animaciones se reproducen solo una vez. Si deseas que la animación se repita continuamente, elige la opción de bucle aquí.

Pestaña Avanzado

Aquí puedes aplicar código CSS personalizado a tu módulo. También puedes agregar clases e ID CSS al módulo, lo cual puede ser útil para personalizar estilos mediante propiedades CSS avanzadas o para aplicar código personalizado usando la clase CSS del módulo.

ID y Clases CSS

CSS Personalizado

• CSS de forma libre – Escribe CSS libre usando el selector de palabra clave para aplicar estilos a este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del módulo – También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en la pestaña Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.
  

Atributos

Condiciones

Puedes agregar una condición o múltiples condiciones.

Visibilidad

• Mostrar contenido en móviles – Activa o desactiva esta opción para mostrar u ocultar el contenido en teléfonos móviles.

• Mostrar llamada a la acción en móviles – Activa o desactiva esta opción para mostrar u ocultar el botón de llamada a la acción en teléfonos móviles.

• Mostrar imagen/video en móviles – Activa o desactiva esta opción para mostrar u ocultar la imagen o video en teléfonos móviles.

• Desactivar en – Define la visibilidad del módulo. Puedes ocultarlo en teléfono, tableta o escritorio marcando la casilla correspondiente.

Desbordamiento horizontal – Define qué se muestra cuando el contenido excede los bordes izquierdo y derecho de un elemento de bloque:

• Visible – El contenido se mostrará si excede su altura.

• Desplazamiento – Si el contenido del módulo excede su altura, aparecerá una barra de desplazamiento vertical.

• Oculto – Si el contenido excede su altura, la parte sobrante se ocultará.

• Automático – El navegador decidirá si mostrar una barra de desplazamiento.

Desbordamiento vertical – Define qué se muestra cuando el contenido excede los bordes superior e inferior de un elemento de bloque:

• Visible

• Desplazamiento

• Oculto

• Automático

Transiciones

• Duración de la transición – Define la duración (en milisegundos) de la animación al pasar el cursor.

• Retraso de la transición – Define el retraso de la transición de la animación al pasar el cursor (en milisegundos).

• Curva de velocidad de la transición – Define la curva de velocidad de la transición al pasar el cursor.

Posición

• Posición – Define la posición del módulo:

  • Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo.

  • Absoluta – El módulo se saca del flujo normal y se posiciona respecto a su contenedor más cercano o el contenedor inicial.

  • Fija – El módulo se posiciona con respecto a la ventana del navegador. Útil para crear módulos pegajosos (sticky).

• Desplazamiento vertical – Define la posición vertical del módulo.

• Desplazamiento horizontal – Define la posición horizontal del módulo.

• Índice Z – Define el orden del módulo en el diseño de la página. Un número más alto superpone el módulo sobre otros.

Efectos de desplazamiento

También puedes habilitar el movimiento vertical, lo que permite ajustar la velocidad de desplazamiento del módulo sin afectar los elementos circundantes.

La opción de Activador de movimiento permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está visible.

Cómo Estilizar Diapositivas de Ancho Completo Individuales

Los ajustes de diseño y avanzados son los mismos para las diapositivas individuales que los del módulo. A continuación se detallan las opciones únicas disponibles para cada diapositiva.

Primero, haz clic en el ícono de engranaje para acceder a la configuración de una diapositiva individual. Para eliminar una diapositiva, haz clic en el ícono de papelera. Para reorganizar una diapositiva, arrástrala y suéltala.

Texto

• Título – Escribe el título de la diapositiva aquí. Déjalo en blanco si no deseas que aparezca un título.

• Botón – Escribe el texto del botón aquí. Si no deseas que aparezca un botón, déjalo en blanco.

• Cuerpo – Escribe el texto del cuerpo aquí. Déjalo en blanco si no deseas mostrar texto.