WYSIWYG

O campo WYSIWYG coloca o editor de rich text do WordPress em um widget personalizado que você constrói com os Master Addons Construtor de widgets. Os editores obtêm negrito, itálico, links, listas e o botão Adicionar mídia, a mesma barra de ferramentas que eles usam ao escrever um post Seu widget recebe HTML formatado e imprime com um token É o campo para qualquer região de texto onde uma Textarea simples achataria a formatação.

WYSIWYG é um dos campos que você pode usar no Widget Builder da versão gratuita O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo WYSIWYG faz #

• Adiciona o editor de rich text ao painel do seu widget no Elementor, com guias Visual e Código e um botão Adicionar Mídia.
• Salva o que os editores escrevem como HTML.
• Imprime-o através de um token como {{ member_bio }}, filtrado a maneira como o WordPress filtra o conteúdo da postagem.
• Mantém a formatação: parágrafos, negrito, itálico, links, listas e títulos, todos renderizados.
• Obtém um valor padrão, que pode incluir marcação, portanto, um widget novo mostra um exemplo trabalhado.

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.
• Complementos Mestres para Elementor instalados e ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Team Member”: Campos de texto para o nome e função, e um campo WYSIWYG nomeado member_bio para a biografia.

Como adicionar um campo WYSIWYG #

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

Opções de campo WYSIWYG explicadas #

• Etiqueta: o texto acima do editor em Elementor, por exemplo “Bio” O campo começa rotulado como “Content”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo member_bio.
• Descrição: uma dica mostrada sob o editor em Elementor Use-a para definir expectativas, como “Duas ou três frases Negrito, links e listas estão bem.”
• Valor padrão: o conteúdo inicial Esta é uma caixa de texto simples, então digite o HTML você mesmo, por exemplo, um parágrafo com um strong tag e um link.

Bloco Etiqueta está ligado por padrão aqui, que é o que você quer: o editor precisa da largura total do painel Deixe Seletor vazio, já que um bloco de texto não é um valor CSS.

O restante das Configurações Comuns se comporta como em outros campos, inclusive Condições se a região só deve aparecer quando outro campo é definido.

Em nossos testes o cartão de campo dentro do construtor mostrou o valor padrão como HTML bruto em seu pequeno editor de visualização Isso é apenas a própria visualização do construtor Elementor renderiza o mesmo padrão que o texto formatado.

Imprima o conteúdo do seu modelo #

Um token coloca toda a região Enrole-o em um contêiner que você possa estilizar e guarde-o para que um campo vazio não deixe nenhum invólucro perdido:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

Estile a região do painel CSS visando as tags que o editor escreve:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

Não adicione raw para um token WYSIWYG. O token simples já renderiza a formatação, e raw remove apenas o filtro de segurança.

O que o filtro mantém e deixa cair #

O valor passa pelo mesmo filtro que o WordPress usa para conteúdo de postagem Em nossos testes, títulos, parágrafos, strong, em(listas), links e até mesmo inline style os atributos permaneceram inalterados. Um iframe foi removido e uma tag de script foi removida sem execução.

Um detalhe para saber antes de entregar o widget a um cliente: quando uma tag de script foi colada através da guia Código, a tag foi despojada, mas o JavaScript dentro dela permaneceu na página como texto simples, então uma linha de código apareceu no meio da biografia Nada avisa Diga aos editores para colar texto, não incorporar, e verifique a guia Código se caracteres perdidos aparecerem em uma página.

Use o controle WYSIWYG no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta O campo mostra o editor completo sob seu rótulo: Adicionar mídia, as guias Visual e Código, um menu suspenso no formato do parágrafo, negrito, itálico, sublinhado, listas, um botão de link e tela cheia.

Os editores escrevem da maneira que fazem em um post A visualização é atualizada assim que o foco sai do editor O Código a guia mostra o HTML subjacente, que é útil para limpar a formatação colada.

Aqui está a carta finalizada no front-end, com a frase em negrito, o link e a lista todos vindos do campo:

Casos de uso comum #

• Biografias de membros da equipe e caixas de autores.
• Descrições de recursos ou serviços que precisam de uma lista ou frase em negrito.
• Órgãos de depoimento com citação e linha de atribuição.
• Qualquer região de texto longa em um widget de cartão, caixa ou painel.

Dicas para trabalhar com o campo WYSIWYG #

• Dê-lhe um valor padrão com marcação real. Os editores então veem o tipo de conteúdo que a região espera e você sabe que a formatação é renderizada.
• Defina o comprimento na Descrição. “Duas ou três frases” salva muitas correções de layout posteriormente.
• Estilize as tags, não o texto. Regras para p, a e ul dentro da sua classe wrapper mantenha a região consistente, independentemente do que os editores escrevem.
• Guarde o token com {% if %} portanto, um campo vazio não deixa um invólucro vazio na página.
• Apenas texto simples? O Campo Textarea é mais leve Para marcação colada ou encaixar trechos, use o Campo código.

Perguntas frequentes #

Embrulhando #

Coloque um campo WYSIWYG em uma seção de Conteúdo, forneça um rótulo claro, uma descrição útil e um valor padrão com marcação real e imprima o token dentro de um {% if %} proteja e estilize as tags do painel CSS Os editores obtêm a barra de ferramentas que já conhecem e seu widget obtém HTML formatado limpo Para texto simples use o Campo Textareapara trechos colados, o Campo código, e verifique preços para o que cada plano inclui.