O campo Fundo adiciona o controle de fundo do Elementor a um widget personalizado construído com os Complementos Mestres Construtor de widgets. Os editores escolhem uma cor sólida, uma imagem ou um gradiente no painel Elementor, e os estilos vão para o elemento em que seu seletor CSS aponta. É adequado para banners, cartões e qualquer caixa cujo plano de fundo deva mudar de página para página.
O plano de fundo é um campo Pro. O plugin gratuito inclui um Widget Builder limitado e o conjunto completo de campos vem com Master Addons Pro.
O que o campo Fundo faz #
- Ele adiciona o controle de Tipo de Fundo do Elementor à guia Estilo do seu widget, com um ícone por tipo de fundo que você permite.
- O Classic dá uma cor e uma imagem, com configurações de posição, fixação, repetição e tamanho assim que uma imagem é escolhida.
- O gradiente fornece duas cores com suas localizações, um tipo linear ou radial e um ângulo ou posição.
- Elementor escreve o próprio CSS para o elemento na opção Seletor Você não precisa de um token em seu HTML ou CSS.
Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
- Um widget aberto no Widget Builder O exemplo neste guia é um widget “Promo Banner” cuja caixa externa tem a classe
promo-banner.
Como adicionar um campo de Fundo #
- Ir para Complementos mestres > Construtor de widgets e abra seu widget.
- Clique no Estilo tab e adicione uma seção, por exemplo “Banner Background”.
- Tipo
backgroundna caixa de pesquisa de campo à esquerda. - Arrastar Fundo na secção As suas definições abrem na barra lateral esquerda, e a antevisão da secção mostra os ícones de tipos.
Opções de campo de fundo explicadas #
- Etiqueta nomeia o campo no construtor, por exemplo “Banner Background” No Elementor, os editores veem o título da seção e um controle chamado Background Type.
- Nome é o ID único do campo Apenas letras, números e sublinhados.
- Descrição é uma nota para você dentro do construtor.
- Tipos define quais tipos de fundo os editores podem escolher: Clássico, Gradiente, Vídeo e Apresentação de Slides Um novo campo mostra Clássico e Gradiente.
- Inclui e Exclui destinam-se a adicionar ou ocultar configurações únicas dentro do controle. Em nossos testes, nenhum deles alterou o painel Elementor. Exclui mostra a imagem por padrão, mas a configuração Imagem ainda apareceu, então deixe ambas como estão.
Mantenha Tipos para Clássico e Gradiente Vídeo e Apresentação de Slides adicionam suas configurações ao painel, mas quando as testamos em um widget personalizado, um link de vídeo e uma galeria de apresentação de slides não desenharam nada atrás do banner Elementor apenas constrói a marcação extra que esses dois tipos precisam para suas próprias seções e contêineres.
Role até a parte inferior da barra lateral para o Seletor As configurações comuns acima dele (Mostrar Etiqueta, Separador, Condições e o resto) funcionam como em outros campos.
Defina o Seletor #
O Seletor informa ao Elementor qual elemento obtém o plano de fundo Para o banner é a classe na caixa externa:
.promo-bannerNão tens de digitar {{WRAPPER}} para este campo O construtor adiciona-o na frente do seu selector, por isso .promo-banner torna-se {{WRAPPER}} .promo-banner e só afeta este widget Com uma lista separada por vírgulas, cada parte obtém a sua própria {{WRAPPER}}. Se o Seletor estiver vazio, o plano de fundo vai para o invólucro externo do widget em vez do seu elemento.
Dê ao elemento um fundo de fallback na guia CSS Ele mostra até que um editor escolha algo, e os estilos do controle o substituam depois disso:
.promo-banner {
background-color: #1f1147;
color: #ffffff;
}
Clique Salvar configurações quando terminar.
Use o controle de fundo no Elementor #
Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta Selecione o widget e abra o Estilo guia. Sua seção mostra o tipo de fundo com um ícone para cada tipo permitido. O banner mantém sua cor alternativa até que você escolha um.
Clique no ícone do pincel para Clássico e escolha um Cor. O banner é atualizado imediatamente.
Sob a cor, clique no Imagem caixa para escolher uma imagem da Biblioteca de Mídia Mais configurações aparecem uma vez que uma imagem é definida: Resolução de imagem, Posição, Anexo, Repetição e Tamanho da exibição Centro, Sem repetição e Capa funcionam bem para a maioria dos banners.
Clique no segundo ícone para Gradiente. Defina o primeiro Cor e é Localização, o Segunda Cor e sua localização, então escolha Linear com um Ângulo ou Radial com uma posição.
Casos de uso comum #
- Banners de heróis e promoções que obtêm uma nova imagem ou gradiente para cada campanha.
- Cartões em tabelas de preços, grades de equipe e listas de recursos.
- Tiras de call-to-action que alternam entre uma cor de marca e uma foto.
- Um painel interno ou camada de sobreposição, apontando o seletor para esse elemento em vez da caixa externa.
Dicas para trabalhar com o campo Fundo #
- Mantenha sempre um fallback
background-colorna guia CSS. cobre novos widgets e o momento anterior ao carregamento de uma imagem. - Mantenha o texto legível nas fotos O banner de exemplo adiciona uma camada escura com
.promo-banner::beforeeisolation: isolatena caixa, o texto branco permanece legível em imagens brilhantes. - Aponte o Seletor em um elemento Vários campos de Fundo em diferentes seletores são mais fáceis para os editores do que um campo compartilhado por muitas partes.
- Stick to Classic e Gradient in Tipos para widgets personalizados.
- Para uma única cor plana sem imagem ou gradiente, o Campo cor é mais simples para editores.
Perguntas frequentes #
O campo Fundo é gratuito?
Não. O plano de fundo é um dos campos Pro no Widget Builder, portanto o Master Addons Pro deve estar ativo antes de adicioná-lo a um widget.
Preciso adicionar {{WRAPPER}} ao seletor de Fundo?
Não. O construtor acrescenta {{WRAPPER}} em frente ao seletor do campo de Fundo para você, então .promo-banner é suficiente Digitar você mesmo também funciona.
Onde está o token de fundo para o meu CSS?
Não há um para usar O plano de fundo cobre muitas propriedades CSS de uma só vez, então o Elementor escreve as regras para o Seletor para você.
Por que o vídeo ou apresentação de slides não mostra?
Esses tipos precisam de marcação extra que o Elementor adiciona apenas às suas próprias seções e contêineres Em um widget personalizado suas configurações aparecem, mas nada é desenhado Use Classic ou Gradient.
Por que minha cor alternativa desapareceu depois de escolher um gradiente?
Um gradiente define a cor de fundo para transparente e pinta o gradiente no topo Seu fallback volta se o editor desligar o tipo de fundo.
Embrulhando #
Adicione o campo Fundo a uma seção Estilo, mantenha Tipos em Clássico e Gradiente e defina o Seletor para o elemento que deve mudar Coloque uma cor de fallback na guia CSS e os editores podem tirá-la de lá Para o resto do estilo do elemento, veja o Fronteira e Sombra Caixa campos e verifique preços para o que cada plano inclui.
