Fundo

O Campo de fundo entrega ao seu widget personalizado o mesmo painel de fundo As seções do Elementor usam: uma guia clássica para cores e imagens sólidas, uma guia gradiente com duas paradas de cores e uma guia de vídeo para fundos de movimento Dentro dos Complementos Mestres Construtor de widgets, você adiciona o campo uma vez, aponta-o para um seletor CSS e cada decisão em segundo plano passa para o painel Elementor.

Como todo controle do Widget Builder, o Background suporta Condições para visibilidade do painel, a saída de token no construtor passa pelo Mecanismo de modelo de sintaxe dupla. Ambos os guias explicam a configuração e as limitações.

O plano de fundo é um controle de grupo, a mesma família da Tipografia e da Fronteira Isso significa que o modelo de conexão difere dos campos de texto ou cores: não há token para colar no seu CSS Você preenche a opção Seletor e o Elementor grava os estilos de fundo nesse seletor em si.

O que o campo Fundo faz #

• Controle de grupo de fundo do Renders Elementor no painel do seu widget, com guias para cada tipo de fundo que você permitir.
• Guia clássico: uma cor sólida ou uma imagem com as configurações usuais de posição, tamanho e repetição.
• Guia de gradiente: duas paradas de cores com controles de localização, ângulo e tipo.
• Guia de vídeo: um fundo de movimento atrás do elemento selecionado.
• Escreve o próprio CSS para o seletor que você fornece, sem nenhum token de modelo envolvido.

Primeiro widget? Comece com o Visão geral do Widget Builder antes dos controles do grupo de fiação.

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 Nosso exemplo é um widget herói cujo <div class="hero-box"> o contêiner deve ter um histórico escolhido pelo editor.

Como adicionar um campo de Fundo #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Fundo campo, listado com outros campos de grupos de estilo, como Typography e Box Shadow.

Arraste-o para uma seção abaixo do Estilo tab, sua casa natural Uma vez que pousa, as opções do campo abrem à esquerda.

Opções de campo de fundo explicadas #

• Etiqueta: o texto mostrado acima o controle em Elementor, por exemplo “Hero Background”.
• Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados.
• Seletor: o seletor CSS ao qual o plano de fundo se aplica É a conexão em si, abordada na próxima seção.
• Tipos: que abas o controle mostra, de clássico, gradiente e vídeo Aparar a lista mantém o painel focado; um widget de cartão raramente precisa da guia de vídeo.
• Excluir: remove sub-controlos individuais do grupo quando você quer uma versão reduzida do painel.
• Descrição, Mostrar rótulo, separador e condições comportam-se como em todos os campos.

Aponte o campo no seu seletor #

Aqui está a parte que faz as pessoas tropeçarem se estiverem acostumadas com os campos de token: o campo Fundo não tem {{shortcode}} para o seu CSS. Um fundo é um pacote de propriedades, portanto não pode ser impresso através de um token; a {{ token }} para este campo não produz nada útil. Em vez disso, você preenche o Seletor opção e Elementor geram os estilos.

Para o contêiner herói, o seletor é:

{{WRAPPER}} .hero-box

• {{WRAPPER}} significa o próprio contêiner do widget, delimitando o plano de fundo apenas para esse widget Os controles de grupo usam o seletor exatamente como escrito, então você digita {{WRAPPER}} você mesmo; nada está preparado para você.
• .hero-box é o elemento dentro do HTML do seu widget que recebe o plano de fundo.

Cuidado: saia {{WRAPPER}} desligado e o seletor corresponde a cada .hero-box na página, então o plano de fundo de um widget pousa em todos eles Os controles do grupo levam o seletor para bruto, tornando este o erro mais fácil de enviar.

Mantenha um fundo de fallback na guia CSS do widget É o que o widget mostra em uma nova gota, e os valores do controle o substituem uma vez que um editor escolhe algo Uma cor de fallback sólida ganha seu keep duas vezes, uma vez que também cobre o momento antes que uma imagem de fundo pesada termine de carregar, o que de outra forma pisca em branco em conexões lentas.

Use o controle de fundo no Elementor #

Adicione o widget a uma página no Elementor, recarregando o editor se a página já estivesse aberta O controle aparece sob sua etiqueta com uma guia por tipo permitido.

Na guia clássica, escolha uma cor ou escolha uma imagem da biblioteca de mídia com configurações de posição, tamanho e repetição Mude para a guia gradiente para duas paradas de cores com ângulo e localização, ou para a guia de vídeo para um fundo de movimento A visualização é atualizada conforme você avança.

Casos de uso comum #

• Widgets de herói e banner onde cada site quer sua própria imagem ou gradiente atrás do título.
• Fundos cartão em tabelas de preços, grades de equipe e listas de recursos.
• Tiras call-to-action que alternam entre uma cor de marca e uma foto por campanha.
• Cabeçalhos vídeo, com a guia de vídeo habilitada apenas em widgets criados para ela.
• Painéis sobrepostos, apontando o seletor para uma camada interna acima da mídia.

Dicas para trabalhar com o campo Fundo #

• A opção Seletor é toda a conexão. Não procure um token de fundo na guia CSS; não há nenhum.
• Sempre inicie o seletor com {{WRAPPER}}. Os controles de grupo o usam bruto, portanto, um seletor de classe vazado vaza para cada correspondência na página.
• Aparar a lista Tipos. Oferecer apenas clássico e gradiente mantém os widgets de cartão simples e impede que os editores deixem cair vídeos onde eles não pertencem.
• Mantenha estilos de fallback no Widget CSS. Uma cor de fundo padrão em sua folha de estilo torna o widget apresentável antes que alguém abra o controle.
• Contraste de texto mental. Quando os editores controlam o plano de fundo, emparelhe o widget com controles de cores para o texto sentado em cima dele.

Perguntas frequentes #

Embrulhando #

O campo Fundo do Construtor de Widgets traz a edição de fundo de nível de seção para qualquer elemento de um widget personalizado: nomeie o campo, defina o Seletor como {{WRAPPER}} mais sua classe, e escolha quais tipos o editor vê Ele segue o mesmo modelo seletor que o Campo tipografia, então, uma vez que um controle de grupo clica, o resto também explora o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.