Adicionar um contentor de camadas posicionadas.

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.

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.

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?

• Secções: dê à área à volta da tela uma cor ou imagem de fundo.
• Adicionar um esquema aninhado: combine camadas com filas e colunas em esquemas mais complexos.
• Separador de animação: deixe cada camada aparecer com o seu próprio efeito de entrada.