Fronteira

O Campo fronteiriço dá a um widget personalizado um conjunto completo de controles de borda em uma gota: um dropdown Border Type, entradas Border Width por lado e um selecionador Border Color Inside the Master Addons Construtor de widgets, você adiciona o campo uma vez, coloca seu shortcode no seu CSS, e qualquer pessoa que edite o widget no Elementor pode reestilizar a borda sem tocar no código.

O controle de fronteira apoia Condições como todo campo, ele pode permanecer oculto até que uma alternância de borda seja ativada e a saída do token no construtor seja renderizada pelo Mecanismo de modelo de sintaxe dupla. Ambos os guias cobrem os detalhes.

O campo mapeia diretamente para o CSS border abreviação. Qualquer que seja o tipo, largura e cor que o usuário escolher no painel, imprima em sua folha de estilo onde quer que você coloque o token.

O que o campo Border faz #

Um campo Border torna o familiar controle de grupo de fronteira do Elementor no painel de opções do seu widget Selecione o widget e três controles relacionados aparecerão:

• Tipo de borda: um dropdown com padrão, nenhum, sólido, duplo, pontilhado, tracejado e ranhura.
• Largura da borda: Entradas superior, direita, inferior e esquerda com um link alternar para definir todos os quatro de uma vez, além de um ícone de dispositivo para valores responsivos.
• Cor da borda: um seletor de cores com acesso às suas cores globais.

Os controles Largura e Cor ficam ocultos até que o usuário escolha um tipo de borda diferente de Padrão ou Nenhum, o que mantém o painel limpo quando nenhuma borda está em uso. Este é o mesmo padrão do Campo texto e os outros campos do Widget Builder: largue o campo, nomeie-o, use o token Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

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 cabeçalho com um <h2 class="border-title"> em seu HTML.

Como adicionar um campo Border #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Fronteira campo. Ele fica perto da parte inferior da lista, entre o Fundo e a Sombra de Texto.

Arraste o campo Fronteira para uma seção abaixo do Conteúdo, Estilo, ou Avançado aba. O estilo é a casa natural para ele, embora funcione em qualquer lugar Uma vez que ele pousa, as opções do campo abrem à esquerda e seu shortcode aparece no Documentação barra lateral ao lado do editor de código.

Opções de campo fronteiriço explicadas #

Selecione o campo Border para abrir suas configurações Eles seguem o mesmo layout de todos os outros campos do Widget Builder.

• Etiqueta: o texto mostrado acima o controle em Elementor, “Border” por padrão.
• Nome: o identificador único para o campo Deve conter apenas letras, números e sublinhados Um campo nomeado border dá-lhe o {{border}} código curto.
• Descrição: texto auxiliar opcional mostrado abaixo do controle.
• Valor padrão: a borda com a qual o widget começa, escrita como abreviação CSS, por exemplo 1px solid #333. Deixe-o vazio e o widget será enviado sem borda até que o usuário defina um.
• Mostrar etiqueta e Bloco de etiquetas: o rótulo padrão alterna, além dos controles usuais do Separador e Condições mais abaixo.

Conecte o campo ao seu CSS #

O token do campo Border pertence à sua folha de estilo, não ao seu HTML Abra o CSS aba e use-o como o valor do border propriedade em qualquer seletor que deva carregar a borda Com nosso exemplo de título:

• A regra diz border: {{border}}; dentro do .border-title seletor.
• No momento da renderização, o token se expande para a abreviação completa escolhida pelo usuário 5px solid #e02b20.

Clique Salvar configurações quando a regra estiver em vigor Você pode soltar o mesmo token em qualquer seletor no widget, para que um controle de Fronteira possa delinear um cartão, sua imagem ou ambos.

Use o controle de fronteira no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta Selecione o widget e o controle Border aparecerá em seu painel com o rótulo que você definiu.

Escolha um tipo de borda #

O Tipo de fronteira listas suspensas Padrão, Nenhum, Sólido, Duplo, Pontilhado, Tracejado e Ranhura Escolha qualquer tipo que não seja Padrão ou Nenhum e mais dois controles aparecem abaixo dele: Largura da borda e cor da borda A visualização é atualizada assim que você escolher, então escolher Tracejado desenha um contorno tracejado ao redor do widget imediatamente.

Defina a largura da borda #

O Largura da borda o controle leva valores separados de Topo, Direita, Inferior e Esquerda Mantenha o ícone do link ligado para alterar todos os quatro lados juntos, ou desvinculá-lo para bordas irregulares, como uma parte superior e inferior grossas com lados finos O ícone do dispositivo ao lado do rótulo permite definir larguras diferentes por ponto de interrupção.

Escolha a cor da borda #

O Cor Bordada o controle abre o seletor de cores do Elementor Use o ícone do globo para extrair de suas cores globais ou escolha um valor personalizado com a entrada selecionador e hexadecimal, RGBA ou HSLA.

Cada alteração cai ao vivo na visualização Em nosso exemplo o cabeçalho termina com uma borda vermelha sólida, 5 pixels na parte superior e inferior e 3 pixels nas laterais.

Casos de uso comum #

• Esboços de cartão e caixa onde cada site precisa de seu próprio peso e cor de borda.
• Manchetes destacadas como o título em caixa neste exemplo.
• Molduras imagem em widgets de equipe, portfólio ou produto.
• Estilos botão onde uma variante de contorno precisa de uma borda editável pelo usuário.
• Caixas de chamada e aviso que alternam entre estilos sólidos e tracejados.

Dicas para trabalhar com o campo Fronteira #

• Coloque o token em CSS, não em HTML. O shortcode se expande para um valor CSS, portanto só faz sentido como um valor de propriedade border: {{border}};.
• Defina um valor padrão em forma abreviada. Algo como 1px solid #333 faz com que o widget pareça finalizado antes que alguém abra o painel.
• Emparelhe-o com raio de borda. O campo abrange o tipo, a largura e a cor Adicione um campo Dimensões ou um fixo border-radius regra para cantos arredondados.
• Lembre-se de que Nenhum é uma escolha real. Os usuários podem desligar a borda do painel, portanto, não confie na borda para manter o layout unido.
• Reutilize o token onde ele ajuda. O mesmo {{border}} o valor pode estilizar vários seletores e todos seguem um controle.

Perguntas frequentes #

Embrulhando #

O campo Widget Builder Border embala um dropdown tipo borda, larguras responsivas por lado e um seletor de cores em um único arrastar e soltar Nomeie o campo, set border: {{border}}; no seu CSS, e as decisões de borda saem da sua folha de estilo e entram no painel Elementor, onde os editores podem lidar com elas Combine-o com o Campo texto e a Divisor para construir um painel de widgets que cubra conteúdo e estilo em um só lugar Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.