O Construtor de widgets de complementos mestres transforma seu próprio HTML, CSS e JavaScript em um widget Elementor real, com controles editáveis no painel Elementor Você projeta o painel de opções, conecta-o ao seu código com códigos de acesso e o widget se comporta como qualquer elemento nativo Elementor Sem PHP, sem clichê de plugins, sem editor de código separado para fazer malabarismos.
Dois sistemas passam por baixo de tudo o que aqui se descreve: Condições deixe qualquer controle mostrar ou ocultar com base no valor de outro campo, e o Mecanismo de modelo de sintaxe dupla transforma seus nomes de campo em tokens, {% if %} verificações e {% for %} loops nas guias HTML, CSS e JS. Ambos os guias cobrem configuração e limitações.
Este guia percorre o painel de opções do Widget Builder exatamente como aparece na tela: adicionando um novo widget, arrastando campos para as guias Conteúdo, Estilo e Avançado, escrevendo código, usando os códigos de acesso dinâmicos, carregando bibliotecas CDN e, finalmente, exportando ou importando um widget como arquivo JSON. Você pode encontrar o recurso no Página do Widget Builder e dentro de todo o widgets e extensões lista.
O que o Widget Builder faz #
A maioria dos addons dá-lhe um conjunto fixo de widgets Este dá-lhe as ferramentas para fazer o seu próprio Você monta um painel de opções a partir de tipos de campo prontos (cabeçalho, texto, cor, número, dimensões, switcher, e mais), soltar em seu código, e vincular os campos a esse código com tokens de shortcode simples Salve o widget e Master Addons registra tanto um shortcode e um widget Elementor você pode arrastar para qualquer página.
Pense nisso como a ponte entre um trecho no estilo CodePen e um widget Elementor totalmente editável Uma vez construído, qualquer pessoa da sua equipe pode ajustar as cores, o espaçamento e o texto do editor Elementor sem nunca abrir a fonte.
Antes de começar #
- WordPress com o Elementor construtor de páginas instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- HTML e CSS básicos O JavaScript é opcional e só é necessário para widgets interativos.
Abra o Widget Builder e adicione um novo widget #
Do painel do WordPress, vá para Complementos mestres → Construtor de widgets. Isso abre o Widgets de complementos mestres tela, que lista todos os widgets personalizados que você construiu junto com sua categoria, autor e shortcode gerado Na parte superior você verá três botões: Adicionar Novo Widget, Importar Widget, e Vídeo Tutorial.
Clique Adicionar Novo Widget.A Criar Novo Widget o diálogo aparece com dois campos:
- Título do widget (obrigatório): um nome descritivo para o seu widget, por exemplo “Hero Section” É isso que você vai procurar no painel Elementor mais tarde, então faça algo que você vai reconhecer.
- Categoria Widget: a categoria Elementor em que o widget está agrupado (Favoritos por padrão).As categorias mantêm seus widgets personalizados organizados no editor.
Digite um título, escolha uma categoria e clique em Salvar alterações. Master Addons abre o editor Widget Builder para seu novo widget.
Dentro da interface do Widget Builder #
O construtor está dividido em três áreas de trabalho, da esquerda para a direita:
- Painel de campos (esquerda): uma biblioteca pesquisável de tipos de controle que você arrasta para o seu widget, como Cabeçalho, Texto, Área de texto, URL, Cor, Número, Comutador, Selecionar, Escolher, WYSIWYG, Código e Data Hora.
- Painel de configurações (centro): o Conteúdo, Estilo, e Avançado guias onde você organiza esses campos em seções Este é o painel de opções real que seus usuários verão no Elementor.
- Painel de código (direito): o HTML, CSS, JS, e INCLUI guias onde você escreve a marcação, estilos, scripts e referências de biblioteca.
A barra superior contém o nome do widget com um ícone de engrenagem de configurações próximo a ela, além disso Visualização e Salvar configurações botões.
Construa o painel de opções: Conteúdo, estilo e guias avançadas #
É aqui que você projeta os controles Escolha um campo do painel esquerdo e arraste-o para uma seção sob o Conteúdo, Estilo, ou Avançado guia. Siga a mesma lógica Elementor usa: texto e links em Conteúdo, cores e tipografia em Estilo, espaçamento e layout em Avançado.
Cada seção tem um Seção Título (o rótulo mostrado no cabeçalho da seção) e a Nome da Seção, um identificador único que você irá referenciar no seu código Adicione quantas seções e campos o widget precisar.
Por exemplo, solte a Campo cor na guia Estilo para permitir que os usuários recoloram o widget e a Campo dimensões na guia Avançado para controlar o preenchimento em todos os quatro lados Cada tipo de campo tem sua própria documentação se você quiser a lista completa de opções.
Códigos curtos dinâmicos: conecte campos ao seu código #
Esta é a parte que une tudo Cada campo que você adiciona gera um token shortcode, e esses tokens aparecem no Documentação barra lateral ao lado do editor de código Adicione um campo de cores e você obterá {{color}}. Adicione um campo Dimensões e você obterá {{dimensions}}.
Coloque esses tokens em seu HTML, CSS ou JS onde quiser que o valor do campo aterra. Quando um usuário altera esse controle no Elementor, Master Addons troca o token pelo valor ativo, para que seu código permaneça dinâmico. Uma coisa a lembrar: o token só existe quando o campo correspondente estiver no painel, então construa o campo primeiro e depois faça referência ao seu shortcode.
Adicione seu HTML, CSS e JS #
Com o painel e os códigos de acesso prontos, mude para as guias de código à direita e cole sua marcação, estilos e scripts.
guia HTML: escreva a estrutura do widget e coloque tokens de shortcode onde pertencem os valores dinâmicos.
Guia CSS: estilo a marcação Referência os mesmos tokens de shortcode para puxar em cores e dimensões escolhidas no painel.
Guia JS: adicione JavaScript para qualquer comportamento interativo, como efeitos de hover ou um controle deslizante O JS simples de baunilha funciona, assim como o jQuery depois de carregá-lo em Inclui.
Se você precisar apenas de um campo de código dentro do painel, em vez do editor principal, o Campo código coloca uma entrada destacada por sintaxe em seus controles.
Inclui: carregar bibliotecas CDN CSS e JS #
Abrir o INCLUI guia para anexar bibliotecas externas do qual seu widget depende Existem duas listas: Bibliotecas CSS e Bibliotecas JS. Para cada um você adiciona a Manusear (um nome único) e a URL de origem ou alça registrada, então clique Adicionar CSS ou Adicionar JS.
É assim que você puxa algo como Font Awesome de um CDN, ou jQuery, sem editar seu tema Master Addons só enfileira a biblioteca quando o widget está realmente na página, para que suas outras páginas permaneçam limpas.
Precisa de ícones dentro do widget? Master Addons também envia oito pacotes bibliotecas ícone você pode usar sem uma chamada externa de CDN.
Configurações do widget: título, ícone, categoria e exportação #
Clique no ícone engrenagem ao lado do nome do widget na barra superior para abrir Configurações Widget no painel esquerdo. daqui você controla como o widget se apresenta dentro do Elementor:
- Título do widget: renomear o widget Este título mostra na lista de widgets Elementor.
- Ícone do widget: clique Mudar Ícone para escolher um ícone no seletor de ícones Master Addons. Você pode usar qualquer ícone incluído ou uma classe Font Awesome.
- Categoria do widget: escolha a categoria Elementor em que o widget aparece, para que ele agrupe com widgets relacionados.
- Widget de exportação: exporte toda a configuração do widget como um arquivo JSON que você pode salvar, fazer backup ou compartilhar com qualquer pessoa.
O selecionador de ícones agrupa milhares de ícones em categorias como Todos os ícones, Ícones Elementor, Ícones de linha simples, Ícones de fonte icônica, Ícones lineares e Ícones de material Filtre pelo nome, selecione um e clique em Inserir.
Importar um widget de um arquivo JSON #
Compartilhar funciona nos dois sentidos Voltar ao Widgets de complementos mestres tela, clique no Importar Widget botão. A caixa de diálogo permite arrastar e soltar um .json arquivar ou navegar por ele. Somente .json os arquivos exportados do Widget Builder são suportados.
Qualquer pessoa com o arquivo JSON de um widget pode importá-lo, painel, código, inclui e tudo, em seguida, usá-lo em seu próprio site em segundos Isso faz com que o Widget Builder uma maneira arrumada de reutilizar widgets em projetos ou entregá-los a um cliente.
Dicas para construir widgets personalizados confiáveis #
- Nomeie seções claramente. O Nome da Seção acaba no seu código, então mantenha-o curto e significativo.
- Adicione um campo antes de fazer referência ao seu código curto. Os tokens só existem depois que o campo correspondente estiver no painel.
- Use a visualização com frequência. Verifique a visualização ao vivo antes de salvar para pegar um token ausente mais cedo, em vez de na página ao vivo.
- Carregar bibliotecas através de Inclui, não em linha. Ele mantém seu código limpo e carrega scripts apenas onde eles são necessários.
- Exporte conforme avança. Uma exportação JSON funciona como backup e arquivo de compartilhamento.
- Não está vendo seu widget no Elementor? Verifique o guia solução de problemas para correções de visibilidade.
Perguntas frequentes #
O que é o Master Addons Widget Builder?
O Widget Builder é uma ferramenta em Master Addons for Elementor que transforma seu próprio HTML, CSS e JavaScript em um widget Elementor editável Você projeta um painel de opções a partir de campos de arrastar e soltar e o conecta ao seu código com tokens de shortcode, sem PHP necessário.
Como funcionam os códigos de acesso {{color}} e {{dimensions}}?
Cada campo que você adiciona ao painel de opções gera um token de shortcode, como {{color}} ou {{dimensions}}. Você coloca o token em seu HTML, CSS ou JS, e Master Addons o substitui pelo valor que o usuário define no Elementor, o que torna o widget dinâmico.
Posso adicionar bibliotecas CSS e JS externas a um widget personalizado?
Sim. Abra a guia Inclui, adicione um identificador e um URL de origem CDN em Bibliotecas CSS ou Bibliotecas JS e clique em Adicionar. Master Addons carrega a biblioteca apenas em páginas que usam o widget, para que não diminua a velocidade do restante do seu site.
Como compartilho um widget Elementor personalizado?
Abra as Configurações do Widget no ícone de engrenagem e clique em Exportar Widget para baixar um arquivo JSON Qualquer pessoa pode então usar o botão Importar Widget na tela do Widget Builder para arrastar esse arquivo JSON e usar o widget em seu próprio site.
O Widget Builder está incluído gratuitamente?
O Widget Builder faz parte do Master Addons for Elementor Veja o página preços para a análise atual do plano e quais recursos estão incluídos em cada nível.
Embrulhando #
O Master Addons Widget Builder fecha a lacuna entre um snippet de código e um widget Elementor de produção Construa o painel, escreva seu HTML, CSS e JS, conecte-o com tokens de shortcode, carregue todas as bibliotecas que precisar e, em seguida, exporte ou importe o resultado como JSON. Dê uma olhada no resto do Biblioteca de widgets Master Addons para ver o que mais você pode construir.
