--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Dar a uma secção uma cor, foto ou gradiente de fundo | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:01+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:47:01+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dar a uma secção uma cor, foto ou gradiente de fundo' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:47:01+0000' dateModified: '2026-10-24T11:47:01+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Dar a uma secção uma cor, foto ou gradiente de fundo. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Estender uma secção de borda a borda](/pt-pt/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Animar elementos ao deslocar, pairar ou clicar](/pt-pt/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Crie uma secção principal](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 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](/hc/documentation/learn-dxpr-builder/ai/image-generation). ### 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](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 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? - [Esquemas de largura total](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): deixe o fundo e o conteúdo correr de borda a borda. - [Separador de animação](/hc/documentation/learn-dxpr-builder/design/animation-tab): esbata o texto à medida que a secção entra na vista. - [Secção principal](/hc/documentation/learn-dxpr-builder/tutorials/hero-section): construa um cabeçalho de página inteira com uma foto em paralaxe.