--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections' title: 'Secções | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:01:45+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Uma secção é uma faixa da sua página, como uma secção principal no topo ou uma faixa cinzenta de funcionalidades por baixo. Dá-se a cada secção o seu próprio fundo, cor de texto, espaçamento e altura e depois preenche-se com filas ou conteúdo. Leia esta página para adicionar e configurar secções; para dividir uma em colunas, veja Adicionar uma fila.' tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Secções description: 'Uma secção é uma faixa da sua página, como uma secção principal no topo ou uma faixa cinzenta de funcionalidades por baixo. Dá-se a cada secção o seu próprio fundo, cor de texto, espaçamento e altura e depois preenche-se com filas ou conteúdo. Leia esta página para adicionar e configurar secções; para dividir uma em colunas, veja Adicionar uma fila.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T09:01:45+0000' dateModified: '2026-10-24T09:09:48+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/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections' description: 'Uma secção é uma faixa da sua página, como uma secção principal no topo ou uma faixa cinzenta de funcionalidades por baixo. Dá-se a cada secção o seu próprio fundo, cor de texto, espaçamento e altura e depois preenche-se com filas ou conteúdo. Leia esta página para adicionar e configurar secções; para dividir uma em colunas, veja Adicionar uma fila.' 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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Secções. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Adicionar uma fila](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) Uma secção é uma faixa da sua página, como uma secção principal no topo ou uma faixa cinzenta de funcionalidades por baixo. Dá-se a cada secção o seu próprio fundo, cor de texto, espaçamento e altura e depois preenche-se com filas ou conteúdo. Leia esta página para adicionar e configurar secções; para dividir uma em colunas, veja [Adicionar uma fila](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Adicionar uma secção O exemplo constrói uma secção principal azul-escura para uma clínica. Por baixo segue-se uma secção cinzenta clara com três colunas. 1. Clique em **Add Elements** numa página vazia e escolha **Section** no separador **Layout**. Por baixo de uma secção existente, clique em **Add Section Below**, o mais redondo por baixo dela. 2. Paire o cursor sobre a secção, abra **More** e escolha **Settings**. 3. Configure a secção inteira: aqui **Align text center** em **HTML classes**, um **Background** azul-escuro e um **Font color** branco. Clique em **Save**. 4. Clique em **+** na secção para lhe adicionar conteúdo diretamente, ou adicione um **Row** para a dividir em colunas. 5. Clique em **Save** na barra de ferramentas para guardar a página. **Background** e **Font color** estão no painel **Style** da caixa de diálogo. Os elementos novos ficam no topo da secção, por isso adicione primeiro o mais baixo: no vídeo, o botão entra antes do cabeçalho. ## O que vê A faixa azul-escura enche a janela de ponta a ponta. O seu cabeçalho e botão ficam numa caixa centrada, o contentor interior da secção. A secção cinzenta começa logo por baixo, com as suas três colunas de funcionalidades na mesma caixa centrada. Cada secção nova já traz a classe **Vertical padding size 5 (py-5)**em **HTML classes**. Essa classe dá-lhe o espaço por cima e por baixo do seu conteúdo. ## Configure a sua secção A caixa de diálogo de definições tem cinco painéis: **General**, **Background effects**, **Animation**, **Style** e **Hover style**. Só as secções têm **Background effects**. | Definição | Painel | O que faz | Predefinição | |---|---|---|---| | **Full width** | General | As filas vão de ponta a ponta em vez de dentro do contentor centrado | Off | | **100% height** | General | A secção tem pelo menos a altura da janela do navegador | Off | | **Vertical centering** | General | O conteúdo fica no meio vertical de uma secção mais alta do que ele | Off | | **HTML ID** | General | Um nome de âncora, para uma ligação para `#name` saltar para esta secção | vazio | | **HTML classes** | General | Classes utilitárias, como **Align text center** ou um tamanho de preenchimento | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** ou **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | A cor por trás da secção e a cor do seu texto | None: o tema decide | O fundo abrange sempre a secção inteira, diga **Full width** o que disser. Os efeitos de imagem movem o **Background image** escolhido no painel **Style**; [Fundos](/hc/documentation/learn-dxpr-builder/design/backgrounds) mostra cada efeito. Para mais ou menos espaço, troque **Vertical padding size 5 (py-5)** por um tamanho menor ou **No vertical padding (py-0)**. Para píxeis exatos, use o modelo de caixa no painel **Style**, como explica [Espaçamento](/hc/documentation/learn-dxpr-builder/element-settings/spacing). ## Receitas de secções | Secção | Definições que a criam | |---|---| | Principal | **100% height** e **Vertical centering** ligados, um efeito **Parallax image**, um cabeçalho e um botão | | Funcionalidades | Um **Background** claro, um cabeçalho e depois uma fila de três colunas | | Apelo à ação | Um **Background** forte, **Align text center**, uma linha curta e um botão | | Testemunhos | Um **Background** claro e uma fila de três colunas, cada uma com um **Block quote** | [Crie uma secção principal](/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/hero-section) constrói a primeira passo a passo. ## Se não a vir - **A página vazia não tem botão Add Elements.** O assistente de criação de páginas está desligado, por isso a página vazia só oferece **Choose a template**. Clique na área vazia para abrir o seletor de elementos ou ligue **Enable page creation assistant** em `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Não há botão Add Section Below.** Só as secções colocadas diretamente na página o têm, não uma secção dentro de uma coluna ou de um separador. Clique em **+** na coluna. - **Vertical centering não muda nada.** A secção só tem a altura do seu conteúdo, por isso não há espaço para centrar. Ligue também **100% height**. - **Full width parece não fazer nada.** O fundo já abrange a secção inteira; **Full width** só leva as filas até às suas bordas. Com texto curto numa coluna, a mudança é difícil de ver. - **Apareceu uma secção que não adicionou.** Escolheu um **Row** ou um elemento de conteúdo numa página vazia e cada elemento precisa de uma secção à volta. O DXPR Builder adicionou uma por si; abra as suas definições como as de qualquer outra. ## E a seguir? - [Adicionar uma fila](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): divida uma secção em colunas. - [Fundos](/hc/documentation/learn-dxpr-builder/design/backgrounds): efeitos de paralaxe, gradiente e vídeo para secções. - [Esquemas de largura total](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): quando deixar as filas ir de ponta a ponta.