Dale a una sección un fondo de color, foto o degradado.

Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño

Puedes rellenar cualquier sección con un color, una foto o un degradado. El color y la foto vienen del panel Style, que tienen las secciones, filas, columnas y elementos. Las secciones añaden un panel Background effects para degradados, fotos fijas y de paralaje, y vídeo de YouTube. El ejemplo crea una sección azul marino con una foto de ciudad, texto blanco y un degradado encima.

El vídeo añade una foto tras una sección, y luego la cubre con un degradado.

Añade un color y una foto

  1. Haz clic en Add Elements en el área de contenido vacía y escoge Section en la pestaña Layout.
  2. Pasa sobre la sección y abre More > Settings.
  3. Abre el panel Style.
  4. Escoge un tono azul marino oscuro para Background.
  5. Escoge blanco para Font color.
  6. En Background image, haz clic en Select Image. Busca en la biblioteca de medios, marca una foto y haz clic en Insert selected.
  7. Fija Background style en Cover.
  8. Fija Background position en Center center y haz clic en Save.
  9. Haz clic en + en la sección y escoge Text en la pestaña Content.
  10. Escribe un encabezado, como Evening lectures, y una línea debajo. Fija el encabezado en Heading 2 y centra ambas líneas en la barra del editor.
  11. Abre el panel Style, fija Font color en blanco y haz clic en Save.

Añade un degradado

  1. Pasa sobre la sección y abre More > Settings de nuevo.
  2. Abre el panel Background effects y fija Background effect en Gradient.
  3. Escoge un Start color y un End color, y haz clic en Save.
  4. Haz clic en Save en la barra, abre el menú de vista (el icono de ojo) y elige Preview.

Lo que ves

Tras los primeros pasos, la foto llena toda la sección tras el encabezado blanco. Cover recorta lo que no encaja, y Center center mantiene el centro de la foto a la vista. El color azul marino solo se muestra mientras la foto carga o donde la foto no llega.

El degradado funde del color inicial arriba al color final abajo. Está sobre la foto. Los colores opacos cubren la foto por completo; los colores con algo de transparencia la dejan ver.

Ajustes

Panel Style (cada sección, fila, columna y elemento)

Ajuste Qué hace Predeterminado
Background Un color de relleno del selector de color o una muestra del tema Ninguno
Background image Una imagen de la biblioteca de medios, escogida con Select Image Ninguno
Background style Cover rellena el elemento y recorta; Contain muestra la imagen entera y puede dejar huecos; No repeat la muestra una vez a su tamaño; Repeat la repite en mosaico Theme defaults
Background position Qué parte de la imagen queda a la vista cuando se recorta, como Center center o Left top Theme defaults

Cuando la generación de imágenes con IA está configurada, Background image también acepta un prompt. Consulta Generación de imágenes con IA.

Panel Background effects (solo secciones)

Efecto de fondo Qué hace Ajustes extra
Simple image (predeterminado) La foto se desplaza con la página Ninguno
Fixed image La foto queda fija mientras la página se desplaza sobre ella Ninguno
Parallax image La foto se mueve más lenta que la página. Consulta Sección hero para ver un ejemplo. Parallax speed, Parallax mode (Fixed o Local), Disable on mobile
Gradient Dos colores se funden en la sección, sobre la foto si hay una Start color, End color, Gradient direction (180 grados va de arriba abajo), Start position, End position
YouTube video Un vídeo de YouTube silenciado llena la sección; marca Loop para repetirlo YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Los efectos fijos y de paralaje mueven la foto que fijaste en el panel Style. Un vídeo de YouTube no necesita foto.

Si no ves el fondo

  • No hay ningún panel Background effects. Solo las secciones lo tienen. Pasa sobre la sección, no sobre una fila, columna o elemento, y abre More > Settings.
  • The photo is cut off. Cover recorta lo que no encaja en la sección. Cambia Background position para mantener el motivo a la vista, o elige Contain.
  • The gradient hides the photo. El degradado está encima, y los colores opacos cubren la foto. Baja la opacidad de Start color y End color en el selector de color.
  • The section shows no gradient. Un degradado necesita ambos colores. Escoge un Start color y un End color.
  • El vídeo de YouTube no se reproduce. YouTube video URL está vacío o no es un enlace a un vídeo. Pega la dirección completa del vídeo, como https://www.youtube.com/watch?v= seguida de su ID.

¿Qué sigue?