Adicionar um contentor de camadas posicionadas.

Learn DXPR BuilderBuild pagesAdd contentLay-out

Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.

Um cabeçalho branco de Spring Open Day e a sua data sobre o canto superior esquerdo de uma pintura abstrata laranja

Adicionar um contentor de camadas posicionadas

  1. Paire o cursor sobre a coluna e clique em + na sua barra de controlos, ou no + no meio de uma coluna vazia, para abrir o seletor de elementos.
  2. No separador Layout, clique em Positioned layers.
  3. As suas definições abrem-se primeiro. Defina Height para caber a camada mais alta e clique em Save. Aparece uma tela vazia.
  4. Paire o cursor sobre a tela e clique em + na sua barra de controlos para adicionar um elemento, como Text ou um Image. Cada elemento adicionado torna-se uma camada que pode posicionar.

O que vê

A tela mantém a altura definida e cada camada fica onde a colocou, por cima ou por baixo das outras. Os visitantes veem a composição como aparece no editor. As posições guardam-se como fração da tela, por isso uma camada mantém o seu lugar quando a tela estreita. O texto mantém o tamanho, salvo se ligar Responsive.

Configure as suas camadas posicionadas

Abra as definições em More > Settings na barra de controlos de Positioned layers.

Definição O que faz Predefinição
Width Largura da tela, como 100% ou 600px 100%
Height Altura da tela em píxeis 500
Responsive Ajusta a altura da tela e o texto à largura da tela, para a composição manter as proporções em ecrãs pequenos Off

Posicionar camadas

  • Select: clique numa camada. Aparecem pegas nos seus cantos e bordas.
  • Move: arraste a camada pelo seu nome na sua barra de controlos, como Text ou Image. As camadas ficam dentro da tela.
  • Resize: arraste uma pega da camada selecionada.
  • Add at a spot: faça duplo clique numa parte vazia da tela. O seletor de elementos abre-se e o elemento novo fica onde clicou.

O menu More de cada camada tem quatro itens extra. 100% width e 100% height esticam a camada pela tela. Bring forward e Send backward movem-na para cima ou para baixo das outras camadas.

Se não a vir

  • Uma camada não se move quando a arrasta. As camadas só se movem pela pega com o seu nome na barra de controlos. Paire o cursor sobre a camada e arraste essa pega.
  • Uma camada esconde-se atrás de outra. Está mais abaixo na pilha. Abra o menu More da camada e escolha Bring forward.
  • As camadas sobrepõem-se ou transbordam nos telemóveis. Responsive está desligado, por isso a altura da tela e o texto mantêm o tamanho. Ligue Responsive nas definições de Positioned layers.
  • Falta Positioned layers no seletor dentro de uma tela. Uma tela não pode conter outra tela. Adicione o novo elemento Positioned layers a uma coluna.
  • Falta Positioned layers no seletor em todo o lado. O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca Layers em Elements no seu perfil em /admin/dxpr_studio/dxpr_builder/profile.

E a seguir?