Deixar um editor recolorir um widget sem abrir o CSS é uma das coisas mais úteis que um widget personalizado pode fazer O Campo cor nos Adições Mestres Construtor de widgets coloca o seletor de cores do Elementor no painel do seu widget, completo com cores globais e um canal alfa opcional Você nomeia o campo, escolhe onde ele mora e seu shortcode é alimentado diretamente no seu CSS.
Como todo campo Widget Builder, o campo Cor suporta Condições para visibilidade do painel. Seu token é renderizado pelo Mecanismo de modelo de sintaxe dupla, que é o que permite imprimir a cor escolhida em qualquer lugar do seu CSS. Ambos os guias cobrem a configuração e as limitações.
Este é um controle de estilo, então na demonstração ele vai para baixo do Estilo aba. O campo funciona da mesma forma, não importa em qual guia você o coloque. Onde ele mora é sua chamada, e tudo se resume a como você deseja organizar os controles do seu widget personalizado.
O que o campo Cor faz #
O campo Cor renderiza o seletor de cores nativo do Elementor no painel de opções do seu widget Os editores clicam na amostra, escolhem uma cor (ou uma cor global do tema) e o seu widget emite esse valor onde quer que você tenha colocado o shortcode correspondente Na maioria das vezes, isso significa uma propriedade CSS como color, background, ou border-color.
Por usar o seletor próprio da Elementor, os editores obtêm os controles que já conhecem: o swatch, o conta-gotas, as cores recentes e a paleta global de coresLigue o canal alfa e eles também podem definir transparência.
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. Primeiro? comece com o Visão geral do Widget Builder.
Como adicionar um campo Cor #
No editor Widget Builder, encontre o painel de campos à esquerda e arraste o Cor campo em uma seção Como a cor é uma escolha de estilo, o Estilo tab é o lar natural, mas o Conteúdo e Avançado as guias também aceitam. Assim que o campo estiver instalado, suas opções serão abertas à esquerda e seu shortcode aparecerá no Documentação barra lateral ao lado do editor de código.
Opções de campo de cores explicadas #
Selecione o campo Cor para abrir suas configurações A maioria das opções corresponde aos outros campos, além de um que é específico para a cor.
- Etiqueta: o texto mostrado acima do selecionador em Elementor, por exemplo “Text Color”.
- Nome: o identificador exclusivo para o campo apenas letras, números e sublinhados Isso se torna seu shortcode, então um campo nomeado
colordá-lhe{{color}}. - Descrição: texto auxiliar opcional mostrado abaixo do controle.
- Alfa: ligue isto para permitir a transparência no selecionador Com ele desligado, os editores só podem escolher cores sólidas Habilite-o quando precisar de valores rgba, como uma sobreposição semitransparente.
- Valor padrão: a cor inicial como valor hexadecimal, como
#FFFFFF. Defina isso para que o widget pareça finalizado antes que alguém o toque.
Configurações comuns: responsivas, dinâmicas e muito mais #
Abaixo do valor padrão 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 Controle Responsivo é útil aqui se você quiser uma cor diferente por dispositivo Documentação do campo de texto cobre cada um deles em detalhes.
Conecte o campo ao seu código #
Um campo de cores nomeado color produz o token {{color}} na barra lateral Documentação Coloque - a no seu CSS como o valor de qualquer propriedade de cor Por exemplo, para colorir o texto do herói:
No editor CSS você escreveria algo como .hero-content { color: {{color}}; }. Quando o editor escolhe uma cor no Elementor, o Master Addons troca o token por esse valor e o texto recolora ao vivo O mesmo token funciona para background, border-color, ou qualquer coisa que pegue uma cor, e você pode reutilizá-la em quantas regras precisar Uma coisa a ser observada: mantenha o token como o valor total, então color: {{color}};, não embrulhado em aspas, ou o CSS não será aplicado.
Use o controle de cores no Elementor #
Arraste seu widget personalizado para uma página e abra-o no editor Elementor Sob a guia onde você colocou o campo, o controle Cor aparece como a amostra padrão com o botão de cores globais ao lado Clique nele, escolha uma cor e o widget atualize na tela.
Os editores podem escolher uma cor única ou clicar no ícone do globo para extrair das cores globais do site, o que mantém widgets personalizados na marca Se você ativou o Suporte Dinâmico, o ícone de tags dinâmicas também aparece aqui.
Casos de uso comum #
- Cor do texto para títulos e parágrafos.
- Cor de fundo para seções, cartões e botões.
- Cores de borda e acento amarrado a uma paleta de marcas.
- Sobrepor matizes usando o canal alfa para transparência.
- Hover estados quando emparelhado com um segundo campo de cores.
Dicas para trabalhar com o campo Cor #
- Coloque-o onde for adequado ao seu widget. Estilo é a convenção, mas o campo funciona sob qualquer guia, então organize os controles da maneira que faz sentido para você.
- Ligue o Alpha apenas quando precisar de transparência. Para cores sólidas da marca, deixá-lo fora mantém o selecionador mais simples.
- Defina um valor padrão sensível. Um bom padrão significa que o widget parece correto no momento em que é descartado em uma página.
- Apoie-se nas cores globais. Incentive os editores a escolher a partir da paleta global para que os widgets permaneçam consistentes em todo o site.
- Construa o campo antes de referenciar seu shortcode. O token existe somente depois que o campo estiver no painel.
Perguntas frequentes #
Qual é o campo Cor no Master Addons Widget Builder?
O campo Cor adiciona o seletor de cores do Elementor a um widget personalizado Você nomeia o campo, coloca seu shortcode em seu CSS e qualquer cor que o editor selecione no Elementor é aplicada ao seu widget Ele suporta cores globais e um canal alfa opcional.
Como uso o shortcode {{color}} no meu widget personalizado?
Adicionar um campo de Cor nomeado color, então no editor CSS use o token como um valor de propriedade, como .hero-content { color: {{color}}; }. Master Addons substitui o token pela cor escolhida, para que o widget seja recolorido com base na escolha do editor.
O campo Cor suporta transparência?
Sim. ligue a opção Alpha nas configurações do campo e o selecionador Elementor permite que os editores definam transparência, produzindo valores rgba. Com Alpha desligado, o selecionador permite apenas cores sólidas. Use-o para sobreposições ou fundos semitransparentes.
Posso colocar o campo Cor fora da guia Estilo?
Sim. o campo Cor funciona sob a guia Conteúdo, Estilo ou Avançado O estilo é a escolha usual para um controle de estilo, mas onde você coloca é até como você deseja organizar as opções do seu widget personalizado.
O campo Cor pode usar as cores globais do site?
Sim. Como ele usa o selecionador nativo da Elementor, os editores podem clicar no botão de cores globais e escolher na paleta de temas A escolha de cores globais mantém os widgets personalizados consistentes com o resto da marca do site.
Embrulhando #
O campo Widget Builder Color transforma uma cor codificada em um selecionador editável dentro de seu próprio widget personalizado Nomeie-o, escolha se deseja permitir alfa, defina um padrão e conecte {{color}} no seu CSS Depois disso, qualquer pessoa pode recolorir o widget do Elementor, com cores globais e transparência na torneira 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.
