Código

O campo Código coloca um pequeno editor de código em um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. Os editores colam um trecho, como o HTML do crachá que um provedor de pagamento distribui, e o campo o mantém legível com números de linha e destaque de sintaxe. É o campo para marcação que precisa ser colado em vez de digitado como prosa.

O código é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Código faz #

• Adiciona um editor de código ao painel do seu widget no Elementor, com números de linha e realce.
• Destaques na língua que escolher, desde HTML e CSS até JSON, SVG e PHP.
• Salva tudo o que foi colado como texto.
• Imprime-o através de um token como {{ badge_markup }}, limpado com o filtro de conteúdo de postagem do próprio WordPress, então as renderizações HTML e as tags de script permitidas são descartadas.
• Tem um raw filtre para o caso raro em que um trecho deve sair intocado.

Novo para o construtor? Leia o Visão geral do Widget Builder primeiro, depois volte com um widget aberto.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Trust Badges”: um campo Texto para o cabeçalho e um campo Código nomeado badge_markup isso leva o HTML de crachá do provedor.

Como adicionar um campo Código #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Adicione uma seção sobre o Conteúdo tab, por exemplo “Badges”.
3. Tipo code na caixa de pesquisa de campo à esquerda.
4. Arrastar Código na secção Clique no lápis no campo para abrir as suas definições.

Opções de campo de código explicadas #

• Etiqueta: o texto acima do editor em Elementor, por exemplo “Badge Markup”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo badge_markup.
• Descrição: uma dica mostrada sob o editor em Elementor Use-a para dizer o que o campo espera, como “Paste the HTML que seu provedor de pagamento ou revisão lhe dá.”
• Idioma: o modo de realce A lista tem HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig e Typescript HTML é o padrão.

A linguagem muda destacando apenas Não limita o que um editor pode colar, e não altera a forma como o valor é impresso.

O painel não tem Valor Padrão e nenhuma configuração de altura para este campo, então o editor sempre abre vazio em sua altura padrão Ative Bloco Etiqueta portanto, a etiqueta fica acima do editor, em vez de ficar ao lado dela.

Em Configurações comuns você também encontrará Mostrar etiqueta, Separador e Condições, que funcionam da mesma forma que em outros campos Deixe Seletor vazio: um trecho colado não é um valor CSS.

Imprima o código no seu modelo #

Coloque o token onde o trecho deve pousar e guarde-o para que um campo vazio não deixe nenhum invólucro para trás:

<div class="tb">
  <p class="tb-heading">{{ tb_heading }}</p>
  {% if badge_markup %}
  <div class="tb-badges">{{ badge_markup }}</div>
  {% endif %}
</div>

Estile o wrapper no painel CSS como de costume O próprio snippet traz quaisquer classes que o provedor deu, por isso vale a pena adicionar sua própria classe de wrapper para controlar o espaçamento e o alinhamento.

O que o token tira #

O valor passa pelo mesmo filtro que o WordPress usa para conteúdo de postagem As tags permitidas nas postagens saem coladas: div, span, a, img e o resto. tags de script e iframes são removidos.

Um detalhe vale a pena saber antes de você entregar o widget para um cliente Em nossos testes, uma tag de script colada foi removida, mas o JavaScript dentro dele permaneceu na página como texto simples, então o visitante viu uma linha de código no meio do widget Nada avisa sobre isso Teste o snippet de um provedor em uma página de rascunho uma vez, e diga aos editores para colar apenas a marcação.

O filtro bruto #

Adicionando raw para o token imprime exatamente o que foi colado, scripts e iframes incluídos:

{{ badge_markup|raw }}

Em nossos testes que versão manteve o iframe e correu o script Isso é útil para uma incorporação que você controla, e arriscado em qualquer outro lugar, porque qualquer um que pode editar o widget pode, em seguida, executar JavaScript na página Use-o apenas quando cada editor dessa página já é confiável com HTML não filtrado, e manter o token simples para widgets clientes toque.

O mecanismo de modelo também aceita trim, upper e lower em um token, que ocasionalmente é útil para um pequeno trecho de texto simples.

Use o controle de código no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta O campo mostra como um bloco de editor escuro sob seu rótulo, com números de linha ao lado Cole o trecho e as atualizações de visualização assim que você clicar fora.

O editor é uma pequena janela, então um longo trecho rola dentro dela Isso é bom para colar, menos para ler; escreva o trecho em algum lugar mais espaçoso se você planeja editá-lo à mão.

Aqui está o widget finalizado na extremidade frontal, construído a partir de três blocos de crachás colados:

Casos de uso comum #

• Pagamento, revisão e confiança crachás que os provedores distribuem como HTML.
• Blocos de esquema ou dados estruturados que um editor precisa colar por página.
• Pequenos ícones ou logotipos SVG colados como marcação.
• Um pequeno trecho CSS ou JSON do script do seu widget é lido.

Dicas para trabalhar com o campo Código #

• Diga o que colar na Descrição. Os editores não podem dizer de um editor vazio o que o campo espera.
• Guarde o token com {% if %}. Caso contrário, um campo não utilizado deixaria um invólucro vazio na página.
• Teste um trecho real do provedor uma vez. É assim que você descobre quais partes sobrevivem ao filtro.
• Mantenha raw apenas para editores confiáveis. O token simples é o padrão seguro para sites clientes.
• Texto formatado em vez de marcação? Usar o Campo WYSIWYG assim, os editores obtêm um editor visual em vez de código.

Perguntas frequentes #

Embrulhando #

Coloque um campo Código em uma seção Conteúdo, escolha o idioma, escreva uma Descrição que diz o que colar e imprima o token dentro de um {% if %} guarda. Mantenha o token simples para sites de clientes e alcance raw somente com editores confiáveis Para rich text em vez de marcação, consulte o Campo WYSIWYG, e verifique preços para o que cada plano inclui.