Crie seus próprios widgets de elementador. Nenhum código necessário.
Conheça o Widget Master Addons (Construa um poderoso código gerado por meio de um poderoso ponte entre seu editor Elementor personalizado Transforme designs exclusivos, interfaces geradas por IA ou trechos interativos do CodePen em widgets Elementor totalmente funcionais e reutilizáveis.
A vantagem do construtor de widgets
Crie widgets verdadeiramente exclusivos
Construa widgets para as necessidades exatas do seu projeto - algo que bibliotecas pré-fabricadas não podem oferecer.
Dê vida aos designs de IA e CodePen
Integre diretamente UIs personalizadas de ferramentas de IA ou protótipos ao vivo da CodePen em seu site como widgets editáveis do Elementor.
Controle Criativo Total
Você possui toda a pilha: estrutura (HTML), estilo (CSS) e interatividade (JS), além da capacidade de adicionar bibliotecas externas.
Reutilize e economize tempo
Crie um widget uma vez, salve-o em sua biblioteca e reutilize-o em qualquer projeto com configurações consistentes e editáveis.
Construído para usuários avançados
Se você conhece o Elementor, você pode usar o Widget Builder A interface familiar baseada em tabulação torna a criação de widgets visual e intuitiva.
Widgets personalizados em qualquer site
Construa um widget uma vez e exporte/importe-o facilmente para usar em sites WordPress completamente diferentes, economizando imenso tempo
Crie e nomeie seu widget
Comece estabelecendo a identidade do seu novo componente Dê um título claro e organize-o dentro de uma categoria para acesso contínuo toda vez que você usar o Elementor.
- Atribua um título exclusivo e descritivo ao seu widget.
- Categorize-o para facilitar o acesso futuro no painel do editor.
- Configure a base básica para o seu elemento reutilizável.
Projete a experiência do editor
Construa a interface com a qual seus usuários irão interagir Ao adicionar controles como alternâncias e selecionadores de cores, você constrói visualmente o painel de configurações do widget sem escrever nenhum código.
- Adicione controles (texto, cor, selecione) no painel esquerdo.
- Cada controle se torna uma opção editável no Elementor.
- Desenhe visualmente todo o painel de configurações voltado para o usuário.
Mapeie controles para seu código
É aqui que seu widget se torna dinâmico O construtor gera códigos de acesso inteligentes para cada controle, que você coloca em seus modelos para criar links ao vivo entre configurações e saída.
- Use códigos de acesso gerados automaticamente como {{color}}.
- Cole-os em seu código HTML, CSS ou JS.
- Crie um link direto entre as entradas do editor e a exibição front-end.
Salvar e usar em qualquer lugar
Depois de salvo, seu widget personalizado está pronto para ação Ele aparece no editor Elementor, pronto para ser arrastado para qualquer página e personalizado com as configurações ao vivo que você construiu.
- Salve para adicioná-lo instantaneamente ao painel Elementor.
- Arraste e solte o widget em qualquer página.
- Ajuste as configurações ao vivo e veja a renderização do design instantaneamente.
Widgets prontos
Doze layouts Pro e oito gratuitos Importar o JSON, editar no Elementor.
O que você realmente pode construir?
Da IA ao site
Gere um cartão de preços complexo ou um controle deslizante de testemunho com uma ferramenta de design de IA, copie o código e conecte-o ao Widget Builder Agora é um widget Elementor gerenciável com texto e cores editáveis.
CodePen para produção
Encontrou um botão animado impressionante ou uma galeria única no CodePen? não apenas incorporá-lo - transformá-lo em um widget nativo onde você pode controlar todos os parâmetros.
Construa seu próprio kit de interface do usuário
Crie um conjunto de botões, cabeçalhos ou cartões de informações personalizados com os padrões de interação exclusivos da sua marca e reutilize-os em todos os sites dos clientes.
Opções Disponíveis
Texto
Adicionar entrada de texto básica.
Apenas valores numéricos de entrada.
Para entradas de texto mais longas.
Editor de texto visual rico.
Insira trechos de código diretamente.
Armazene dados de fundo ocultos.
Alterne uma opção ligada/desligada.
Abra configurações avançadas popover.
Escolha entre opções suspensas.
Escolha qualquer cor visualmente.
Selecione uma família de fontes.
Controle todo o estilo de texto.
Escolha uma data/hora.
Insira ou selecione links.
Carregar ou selecionar mídia.
Selecione várias imagens juntas.
Escolha a partir da biblioteca de ícones.
Ajuste os valores com o controle deslizante.
Definir preenchimento, margem, etc.
Aplique efeitos de sombra visualmente.
Defina as propriedades de fundo do elemento.
Selecione entre as opções de imagem.
Crie grupos de conteúdo repetidos.
Organize o conteúdo em guias.
Adicione opções de cores em seu widget.