Elementor mantém elementos em suas colunas, o que é exatamente certo até que o design exige outra coisa: um crachá que fica metade na foto e metade fora dela, ou um rótulo empurrado além da borda da seção O Extensão posicionamento em Complementos Mestres para Elementor adiciona controles de deslocamento a cada widget, coluna, seção e contêiner Você pode empurrar ou reposicionar totalmente qualquer coisa do painel em px, em ou %, com valores separados por dispositivo.
O que a extensão Posicionamento faz #
Uma vez habilitado, cada elemento recebe um Posicionamento seção sob seu Avançado guia. Escolha um Tipo de posição e mova o elemento com controles deslizantes de deslocamento:
- Tipo de posição: Padrão e Estático mantêm o fluxo normal, Relativo compensa o elemento de seu próprio ponto, e Absoluto o coloca dentro do pai posicionado mais próximo Não há opção Fixa aqui; para isso, use a configuração Posição do próprio Elementor.
- Superior /Direito /Inferior /Esquerdo: deslocamentos em px, em ou % para cada lado, incluindo valores negativos para empurrar bordas passadas.
- Do Centro: um deslocamento horizontal do meio do pai Ele define à esquerda para 50% mais o seu valor.
- Índice Z: decide qual elemento ganha quando as coisas se sobrepõem.
Cada controle carrega o ícone responsivo, de modo que desktop, tablet e celular mantêm seus próprios valores. O painel adiciona um aviso sensato: evite combinar do centro e da esquerda ao mesmo tempo.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- O posicionamento é uma extensão gratuita, portanto, nenhuma licença Pro é necessária.
Como ativar a extensão Posicionamento #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. O posicionamento fica no Exibir widgets grupo, ao lado de Linha Grade e Contêiner Extras. Clique em sua alternância para que fique roxo e depois bata Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Abra o painel Posicionamento #
Selecione o elemento no editor Elementor, o emblema de qualidade redondo na demonstração e abra o Avançado guia. Expandir o Posicionamento seção com o emblema MA roxo e conjunto Tipo de posição para Relativo. Os controles de deslocamento aparecem: superior, direito, inferior, esquerdo, do centro e índice Z abaixo deles.
Arraste qualquer controle deslizante e o elemento se move ao vivo na tela Um Top negativo de -143 na demonstração levanta o emblema do meio da foto em direção à sua borda superior; valores positivos empurram para o outro lado.
Mova o elemento para o lugar #
A demo percorre o crachá ao redor da foto com alguns valores: Top 357 deixa cair em direção à metade inferior, Certo -262 desliza para fora e a Inferior o valor ajusta a sobreposição até que o emblema se estenda pela borda inferior da foto Cada controle deslizante também leva valores digitados, para que você possa combinar o espaçamento exato de uma maquete.
Com Relativo, o elemento mantém seu slot no layout e o conteúdo ao seu redor permanece colocado Absoluto tira o elemento do fluxo, então o conteúdo abaixo sobe para preencher a lacuna Quando dois elementos acabam empilhados, o campo Índice Z se instala quem fica em cima.
O resultado na página #
Publique e o crachá renderiza exatamente onde estava estacionado: sobrepondo a borda inferior da foto, quebrando o retângulo sem tocar a estrutura da coluna por baixo.
Verifique tablet e celular antes de terminarOfset que olham para a direita no desktop pode empurrar um elemento fora da tela em uma janela de visualização estreita, que é exatamente por isso que cada controle aqui é responsivo.
Onde o posicionamento preciso compensa #
- Crachás e selos. Um selo que se sobrepõe a um canto de foto é lido como projetado, não colocado.
- Cartões sobrepostos. Puxe um cartão de depoimento ou estatística para a borda da imagem ao lado dele.
- Sotaques de quebra de seção. Formas ou rótulos que cruzam os limites da seção.
- Correções de alinhamento fino. Empurre um elemento alguns pixels sem envolvê-lo em hacks de margem.
- Composições de heróis em camadas. Empilhe texto sobre imagens com o Índice Z decidindo a ordem.
Vídeo Tutorial #
Veja o crachá se mover pelo layout em tempo real, desde habilitar a extensão até a página publicada.
Perguntas frequentes #
Como faço para mover um elemento livremente no Elementor?
Habilite a extensão Posicionamento na guia Extensões de complementos mestres, selecione o elemento e abra Posicionamento na guia Avançado. Defina o tipo de posição como relativo e use os controles deslizantes superior, direito, inferior e esquerdo; o elemento se move ao vivo na tela enquanto você arrasta.
Posso usar valores de deslocamento negativos?
Sim. valores negativos empurram o elemento além de seu limite normal, que é como você sobrepõe um emblema em uma borda de foto ou puxa um elemento fora de sua seção Digite o valor ou arraste o controle deslizante em qualquer direção.
O que a configuração Z-Index faz?
Z-Index controla a ordem de empilhamento quando os elementos se sobrepõem O elemento com o número mais alto renderiza no topo Defina-o no mesmo painel de Posicionamento sempre que um elemento reposicionado precisar ficar acima ou abaixo de seus vizinhos.
As compensações também funcionam no celular?
Todo controle de deslocamento é responsivo, portanto, desktop, tablet e celular mantêm valores separados Sempre visualize as portas de visualização estreitas após o posicionamento: um deslocamento que se encaixa em uma tela ampla pode empurrar o elemento para fora da tela em um telefone, e os valores por dispositivo são como você o corrige.
A extensão Posicionamento é gratuita?
Sim. o posicionamento é fornecido com a versão gratuita do Master Addons for Elementor, no grupo Display Widgets da guia Extensões A página de preços cobre o que os planos Pro adicionam.
Embrulhando #
O posicionamento permite colocar elementos Elementor fora de seu slot normal: escolha Relativo ou Absoluto, defina os deslocamentos e use valores de Índice Z e por dispositivo para o restante Página de extensão de posicionamento compara-o com a configuração de Posição incorporada do Elementor Se um elemento também precisar de rotação ou escala, emparelhe-o com o Transforma extensão (Pro).Pode navegar pelo resto do Widgets e extensões Master Addons numa página.
