Secções.

Learn DXPR BuilderBuild pagesAdd contentLay-out

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.

A página da clínica como os visitantes a veem: uma secção azul-escura de ponta a ponta com o cabeçalho centrado Book your health check, uma linha sobre consultas na mesma semana e um botão branco Book online, por cima de uma secção cinzenta clara com três colunas, Same-week visits, Experienced GPs e Results online

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 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.

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 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?