Campo URL

Botões e links precisam de mais do que um endereço da web Eles precisam de um botão de alternância de janela aberta em nova, uma opção nofollow e, às vezes, atributos personalizados O Campo URL nos Adições Mestres Construtor de widgets dá ao seu widget personalizado o mesmo controle de link que o Elementor usa em qualquer outro lugar, para que os editores obtenham um seletor de links familiar em vez de uma caixa de texto simples.

Como todo campo Widget Builder, o campo URL é compatível Condições. Seu valor é renderizado através do Mecanismo de modelo de sintaxe dupla com acesso pontilhado, {{ link.url }}, {{ link.is_external }}, assim que cada parte aterrissa no atributo direito Ambos os guias cobrem os detalhes.

Você solta um campo URL no painel do widget, escolhe quais opções de link expor e conecta-o à sua marcação com um shortcode Este guia está focado no campo URL, mas também cai rapidamente Campo texto assim, você pode definir a etiqueta do botão ao mesmo tempo.

O que o campo URL faz #

O campo URL renderiza o controle de link do Elementor no painel de opções do seu widget Os editores colam um link, invertam as opções necessárias e seu widget gera uma tag de âncora adequada Um campo Texto contendo um endereço bruto não pode fazer isso O campo URL lida com os atributos target e rel para você, portanto, os links externos abrem corretamente e nofollow está a um clique de distância.

Ele emparelha naturalmente com um campo Texto para o rótulo visível Em um botão de call-to-action, o campo URL carrega o link e o campo Texto carrega as palavras no botão.

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 Se este for o seu primeiro, leia o Visão geral do Widget Builder primeiro.

Como adicionar um campo URL #

No editor Widget Builder, encontre o painel de campos à esquerda e arraste o URL campo em uma seção abaixo do Conteúdo, Estilo, ou Avançado guia. Os controles de link geralmente vivem sob o Conteúdo Uma vez que ele está no lugar, 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 URL explicadas #

Selecione o campo URL para abrir suas configurações As primeiras opções correspondem aos outros campos, então você obtém um conjunto de opções específicas do link.

• Etiqueta: o texto mostrado acima o controle em Elementor, por exemplo “Url” ou “Button Link”.
• Nome: o identificador exclusivo para o campo apenas letras, números e sublinhados Isso se torna seu shortcode, então um campo nomeado url dá-lhe {{url}}.
• Descrição: texto auxiliar opcional mostrado abaixo do controle.
• Espaço reservado: a dica fraca mostrada na caixa de link quando ela está vazia.
• Valor padrão: um link inicial, se você quiser que o botão aponte para algum lugar antes que alguém o edite.

Opções URL #

O Opções URL grupo decide quais partes do controle de link aparecem no Elementor Marque apenas o que o widget precisa:

• Entrada de URL: o próprio campo de ligação, onde o editor cola o endereço.
• Abrir em nova janela: uma alternância que define target="_blank" no link.
• Adicionar não seguir: uma alternância que adiciona rel="nofollow", útil para links patrocinados ou não confiáveis.
• Atributos personalizados: um campo para atributos extras em key|value formato, útil para ganchos analíticos ou atributos de dados.

Configurações comuns: responsivas, dinâmicas e muito mais #

Abaixo das opções de URL você obtém o mesmo Configurações Comuns como todos os campos no construtor: Mostrar Etiqueta, Bloco de Etiquetas, Controle Responsivo, Suporte Dinâmico, Frontend Disponível, Separador e Condições O Suporte Dinâmico é o útil aqui, uma vez que permite que o link puxe de uma fonte dinâmica Documentação do campo de texto explica cada um deles em detalhes.

Conecte o campo ao seu código #

O campo URL dá-lhe um shortcode mais alguns sub-tokens, para que você possa mapear cada opção de link para o atributo HTML certo Para um campo nomeado url:

• {{url.url}} emite o endereço de link para o href atributo.
• {{url.is_external}} gera o destino, então o “Open na nova janela” toggle funciona.
• {{url.nofollow}} gera o valor rel para a alternância “Add nofollow”.

Coloque-os em uma etiqueta de ancoragem e adicione a Campo texto token como {{button_text}} para o rótulo visível:

A âncora agora puxa seu link, alvo e rel do controle de URL único, e o campo Texto fornece as palavras Salve o widget e o botão renderiza com o que o editor definir Uma coisa que vale a pena saber: se você colocar apenas {{url}} por si só, você obtém o endereço, mas não o comportamento de destino ou não seguir, portanto, use as subtokens quando essas alternâncias forem importantes.

Use o controle de URL no Elementor #

Arraste seu widget personalizado para uma página e abra-o no editor Elementor O campo URL aparece como o controle de link padrão: uma caixa para o endereço, além das alternâncias que você ativou Cole um link, ligue o “Open em nova janela”, se necessário, e o botão atualiza ao vivo.

Na demonstração, o campo Texto rotulado “Button Text” define o botão para “Choose Your Plan”, e o campo URL aponta-o para o link de destino Dois pequenos campos, e você tem um botão call-to-action totalmente editável que qualquer um pode atualizar do Elementor.

Casos de uso comum #

• Botões Call-to-Action com link editável, texto e comportamento de nova janela.
• Botões de preços ou planos esse ponto para finalizar a compra.
• Leia mais links em cartões e blocos de recursos.
• Links patrocinados ou afiliados onde não seguir importa.
• Links rastreados usando atributos personalizados para dados analíticos.

Dicas para trabalhar com o campo URL #

• Exponha apenas as opções que você precisa. Se um botão nunca abrir uma nova guia, deixe essa opção desligada para manter o controle limpo.
• Use os subtokens, não apenas {{url}}. Mapa {{url.url}}, {{url.is_external}}, e {{url.nofollow}} então, cada alternância realmente faz alguma coisa.
• Emparelhe com um campo de Texto para o rótulo do botão em vez de codificar as palavras em seu HTML.
• Ligue nofollow para links patrocinados para ficar no lado direito das diretrizes de pesquisa.
• Construa o campo antes de referenciar seu shortcode. O token existe somente depois que o campo estiver no painel.

Perguntas frequentes #

Embrulhando #

O campo URL do Widget Builder transforma um link simples em um controle completo de link Elementor dentro de seu próprio widget personalizado Escolha as opções para expor, conecte as subtokens em sua tag âncora, combine-a com um campo Texto para o rótulo e você terá um botão editável que lida com links, novas janelas e nofollow sem marcação codificada Dê uma olhada no resto do Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.