Estender uma secção de borda a borda.

Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design

O conteúdo de uma secção pode correr de borda a borda, ou ficar encaixotado no centro enquanto o fundo enche a janela. Um interrutor na secção decide: Full width. O exemplo constrói uma secção cinzenta com três colunas e depois liga Full width para as colunas esticarem. Para preenchimentos de cor e foto, consulte Fundos.

O vídeo constrói uma secção cinzenta com 3 colunas e depois deixa o conteúdo correr de borda a borda.

Construir uma secção encaixotada

  1. Clique em Add Elements na área de conteúdo vazia e escolha Section no separador Layout.
  2. Paire sobre a secção, abra More e escolha Settings.
  3. Abra o painel Style e escolha um Background cinzento claro.
  4. Clique em Save. O cinzento já abrange a janela.
  5. Clique em + na secção e escolha Row.
  6. Clique no ícone de grelha na linha, escolha o mosaico com três colunas iguais e clique em Save.
  7. Em cada coluna, clique em +, escolha Text no separador Content, escreva um Heading 4 e uma linha, e clique em Save.

As três colunas ficam numa caixa centrada sobre a faixa cinzenta.

Ligar Full width

  1. Abra More na secção e escolha Settings.
  2. No painel General, ligue Full width.
  3. Clique em Save.
  4. Clique em Save na barra de ferramentas do DXPR Builder.
  5. Abra o menu de vista, o ícone de olho na barra de ferramentas, e escolha Preview.

O que vê

A faixa cinzenta parece igual a antes. Só a caixa de conteúdo mudou: a primeira coluna começa agora na borda esquerda da secção e a última termina na borda direita.

Cada secção tem duas partes: um elemento exterior com o fundo, e uma caixa interior com as linhas. Full width só muda a caixa interior. Desligado, fica centrado com largura máxima; ligado, estica-se até às bordas da secção.

Definições

O painel General da secção tem três interrutores de esquema, todos desligados por predefinição:

Setting What it does
Full width As linhas enchem a secção de borda a borda em vez de uma caixa centrada
100% height A secção tem pelo menos a altura da janela do navegador
Vertical centering As linhas ficam no meio vertical da secção

As linhas não têm definição própria de largura; a secção decide.

Dois padrões

  • Edge-to-edge background, boxed text: o principal comum. Deixe Full width desligado e defina o fundo no painel Style ou Background effects.
  • Edge-to-edge content: uma faixa de cartões ou imagens. Ligue Full width e dê algum Padding às colunas se o texto ficar demasiado perto da borda da janela.

Se a alteração não aparece

  • Nothing changes when you switch on Full width. Num ecrã estreito, como um telemóvel, a versão encaixotada já enche a largura. Alargue a janela do navegador e veja outra vez.
  • The background stops short of the window edges. O tema coloca o conteúdo da página numa região encaixotada, e a secção só pode encher essa região. Escolha um esquema de página ou região de largura total no tema.
  • Text touches the window edge. É o que Full width faz. Adicione Padding no painel Style das colunas, ou deixe Full width desligado.

O que se segue?