Dimensões

O Campo dimensões dá a um widget personalizado o familiar controle de espaçamento de quatro entradas da guia Avançado do Elementor: valores superior, direito, inferior e esquerdo com um ícone de link que os mantém sincronizados Dentro dos Complementos Mestres Construtor de widgets, é o campo que você alcança sempre que o preenchimento, a margem ou um raio de borda por canto devem ser editáveis no painel em vez de codificados em sua folha de estilo.

Como todo controle do Widget Builder, o Dimensions suporta Condições, assim você pode revelar opções de espaçamento somente quando eles aplicam Saída de token através do construtor é executado através do Mecanismo de modelo de sintaxe dupla; ambos os guias cobrem os detalhes e limitações.

O valor que ele armazena carrega todos os quatro lados mais a unidade, e seu painel CSS imprime cada peça pelo nome Obter essa ortografia correta é todo o truque, e há um comportamento específico para este campo que vale a pena conhecer antes de conectá-lo: o campo Seletor simples do construtor não faz nada por um controle de Dimensões.

O que o campo Dimensões faz #

• Rende o controle de quatro entradas para cima, direita, inferior e esquerda, com o ícone do link que reflete um valor para todos os lados.
• Armazena todos os lados mais a unidade em um único valor, seu CSS é lido com notação de ponto.
• Oferece um switcher de unidade nas unidades que você permite, como px, % e em.
• Pode limitar quais lados mostram através da opção de dimensões permitidas, até entradas somente horizontais ou somente verticais.
• Suporta valores responsivos portanto, cada ponto de interrupção mantém seu próprio espaçamento.

Se você não construiu um widget antes, o Visão geral do Widget Builder cobre o básico; comece por aí.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de cartão de preços cujo .price-card box deve permitir que os editores definam o preenchimento interno.

Como adicionar um campo Dimensões #

Abra o painel de campos à esquerda do editor Widget Builder e encontre o Dimensões campo, listado com outros campos de valor CSS, como Slider.

Arraste-o para uma seção abaixo do Estilo tab, a casa habitual para os controlos de espaçamento Uma vez aterrada, as opções do campo abrem-se à esquerda.

Opções de campo de dimensões explicadas #

• Etiqueta: o texto ao lado do controle em Elementor, por exemplo “Card Padding”.
• Nome: o identificador exclusivo ao qual seu CSS se refere, apenas letras, números e sublinhados, por exemplo pad.
• Predefinição: o valor inicial, segurando a parte superior, direita, inferior, esquerda, a unidade, e se os lados começam ligados.
• Unidades de tamanho: as unidades entre as quais o usuário pode alternar, como px, % e em.
• Dimensões permitidas: quais entradas aparecem. “All” mostra quatro lados; “horizontal” mostra apenas esquerda e direita; “vertical” mostra apenas a parte superior e inferior; uma lista personalizada escolhe lados específicos.
• Responsivo: adiciona o ícone do dispositivo para que desktop, tablet e celular mantenham valores separados.
• Descrição, Mostrar etiqueta, separador e condições funcionam da mesma forma aqui e em todos os outros campos.

Conecte o valor Dimensões ao seu CSS #

O valor armazenado é uma matriz com as chaves top, right, bottom, left, unit, e isLinked. No painel CSS, soletre os quatro lados e repita a unidade após cada um:

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

Com 24 de cada lado e px selecionado, a regra é renderizada como padding: 24px 24px 24px 24px;. Desvincule os lados no painel e cada token carrega seu próprio número O mesmo padrão cobre margin e, lado a lado por canto, border-radius. Uma peculiaridade CSS que vale a pena lembrar se você oferecer % como uma unidade: o preenchimento percentual é resolvido em relação à largura do elemento, mesmo para cima e para baixo, e os editores não esperarão isso.

Cuidado: o campo Seletor do construtor não emite nenhuma propriedade CSS padrão para um controle Dimensões, portanto, preenchê-lo não produz nada Escreva os lados no painel CSS como acima, ou defina entradas de seletores completos que contenham a propriedade completa; a opção Seletor simples não é um atalho para este campo.

Use o controle Dimensões no Elementor #

Solte seu widget personalizado em uma página no Elementor ou recarregue o editor se a página já estiver aberta; novos controles nunca aparecem em uma guia do editor obsoleto. O controle aparece com quatro entradas, o switcher de unidade e o ícone de link em seu canto.

Digite em qualquer entrada enquanto o ícone do link estiver ativo e todos os quatro lados atualizem juntos Clique no ícone para desvincular e cada lado assume seu próprio valor, que é como você obtém preenchimento assimétrico, como uma parte superior mais alta do que inferior Com o Responsive on, o ícone do dispositivo armazena espaçamento separado por ponto de interrupção.

Casos de uso comum #

• Cartão e caixa de preenchimento, o único controle de espaçamento mais comum em widgets personalizados.
• Margens de seção e embalagem assim, os editores podem ajustar o ritmo vertical entre os blocos.
• Raio da borda por canto, usando os quatro valores como cantos em vez de lados.
• Botão preenchimento, muitas vezes com dimensões permitidas limitadas à horizontal.
• Compensações de mídia, cutucando uma imagem ou crachá com valores de margem.

Dicas para trabalhar com o campo Dimensões #

• Soletre todos os lados e a unidade. A conexão do painel CSS é de quatro tokens mais quatro tokens unitários; um nu {{ pad }} imprime nada utilizável.
• Pule o campo Seletor simples. Ele não emite nenhuma propriedade para Dimensões O painel CSS, ou uma entrada completa de seletores, é a rota de trabalho.
• Limite os lados quando a propriedade exigir. Um controle somente horizontal mantém honesto um campo de preenchimento de botões.
• Defina um padrão vinculado. Começar com lados iguais e vinculados dá aos editores uma linha de base sã e uma entrada para pensar.
• Mantenha o espaçamento entre bases em sua folha de estilo. O widget deve olhar para a direita na primeira gota; o controle então se ajusta a partir daí.
• Ligue Responsive para preenchimento e margem. O espaçamento da área de trabalho raramente sobrevive ao contato com a tela do telefone.

Perguntas frequentes #

Embrulhando #

O campo Dimensões do construtor de widgets move as decisões de preenchimento, margem e raio para fora da sua folha de estilo e para dentro do painel: um controle, quatro lados, uma unidade, todos impressos pelo nome na guia CSS. Use-o ao lado do Campo deslizante, que cobre os comprimentos de valor único para os quais um controle de quatro lados seria um exagero. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.