Dar a uma secção uma cor, foto ou gradiente de fundo.

Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design

Qualquer secção pode ser preenchida com uma cor, uma foto ou um gradiente. A cor e a foto vêm do painel Style, que secções, linhas, colunas e elementos têm. As secções acrescentam um painel Background effects para gradientes, fotos fixas e de paralaxe e vídeo do YouTube. O exemplo constrói uma secção azul-marinho com uma foto de cidade, texto branco e um gradiente por cima.

O vídeo adiciona uma foto atrás de uma secção e depois cobre-a com um gradiente.

Adicionar uma cor e uma foto

  1. Clique em Add Elements na área de conteúdo vazia e escolha Section no separador Layout.
  2. Paire sobre a secção e abra More > Settings.
  3. Abra o painel Style.
  4. Escolha uma amostra azul-marinho escura para Background.
  5. Escolha branco para Font color.
  6. Em Background image, clique em Select Image. Pesquise na biblioteca de multimédia, marque uma foto e clique em Insert selected.
  7. Defina Background style como Cover.
  8. Defina Background position como Center center e clique em Save.
  9. Clique em + na secção e escolha Text no separador Content.
  10. Escreva um título, por exemplo Evening lectures, e uma linha abaixo. Defina o título como Heading 2 e centre ambas as linhas na barra de ferramentas do editor.
  11. Abra o painel Style, defina Font color como branco e clique em Save.

Adicionar um gradiente

  1. Paire sobre a secção e abra outra vez More > Settings.
  2. Abra o painel Background effects e defina Background effect como Gradient.
  3. Escolha um Start color e um End color e clique em Save.
  4. Clique em Save na barra de ferramentas, abra o menu de vista (o ícone de olho) e escolha Preview.

O que vê

Após os primeiros passos, a foto enche toda a secção atrás do título branco. Cover corta o que não cabe, e Center center mantém o meio da foto visível. A cor azul-marinho só aparece enquanto a foto carrega ou onde a foto não chega.

O gradiente mistura da cor inicial no topo para a cor final no fundo. Fica sobre a foto. Cores opacas cobrem a foto por completo; cores com alguma transparência deixam-na transparecer.

Definições

Painel Style (cada secção, linha, coluna e elemento)

Setting What it does Default
Background Uma cor de preenchimento do seletor de cores ou de uma amostra do tema None
Background image Uma imagem da biblioteca de multimédia, escolhida com Select Image None
Background style Cover enche o elemento e corta; Contain mostra a imagem inteira e pode deixar espaços; No repeat mostra-a uma vez no tamanho próprio; Repeat repete-a em mosaico Theme defaults
Background position Que parte da imagem fica visível quando é cortada, por exemplo Center center ou Left top Theme defaults

Quando a geração de imagens por IA está configurada, Background image também aceita uma prompt. Consulte Geração de imagens por IA.

Painel Background effects (apenas secções)

Background effect What it does Extra settings
Simple image (predefinição) A foto desloca-se com a página None
Fixed image A foto fica fixa enquanto a página passa sobre ela None
Parallax image A foto move-se mais devagar do que a página. Consulte Secção principal para um exemplo. Parallax speed, Parallax mode (Fixed ou Local), Disable on mobile
Gradient Duas cores misturam-se pela secção, sobre a foto se houver Start color, End color, Gradient direction (180 graus corre de cima para baixo), Start position, End position
YouTube video Um vídeo do YouTube sem som enche a secção; marque Loop para o repetir YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Os efeitos fixo e de paralaxe movem a foto definida no painel Style. Um vídeo do YouTube não precisa de foto.

Se o fundo não aparece

  • There is no Background effects panel. Só as secções o têm. Paire sobre a secção, não sobre uma linha, coluna ou elemento, e abra More > Settings.
  • The photo is cut off. Cover corta o que não cabe na secção. Mude Background position para manter o motivo visível, ou escolha Contain.
  • The gradient hides the photo. O gradiente fica por cima, e cores opacas cobrem a foto. Baixe a opacidade de Start color e End color no seletor de cores.
  • The section shows no gradient. Um gradiente precisa de ambas as cores. Escolha um Start color e um End color.
  • The YouTube video does not play. YouTube video URL está vazio ou não é uma ligação para um vídeo. Cole o endereço completo do vídeo, por exemplo https://www.youtube.com/watch?v= seguido do ID.

O que se segue?