O Beaver Builder 2.9 introduziu um poderoso novo recurso de design: Backgrounds de várias camadas . Esta atualização oferece um controle mais criativo sobre linhas, colunas e módulos de caixa, permitindo empilhar cores, gradientes e imagens - tudo em um só lugar.

Mas com mais poder vem a necessidade de design atencioso. Neste artigo, percorreremos maneiras inteligentes para usar esse novo recurso e compartilhar dicas para ajudá -lo a tirar o máximo proveito dele.

O que são fundos de várias camadas?

Os fundos de várias camadas são uma adição poderosa ao construtor de castores que permite empilhar vários elementos de fundo-como imagens, gradientes e cores-em uma única coluna, linha ou módulo de caixa.

Em vez de escolher apenas um tipo de plano de fundo, você pode combinar vários para criar uma experiência mais envolvente e visualmente rica para seus usuários:

Veja como um fundo de várias camadas pode parecer:

• Camada base : uma imagem de alta qualidade define o tom e o contexto da seção.
• Camada do meio : um gradiente semi-transparente adiciona contraste e ajuda a garantir que o texto permaneça legível.
• Camada superior : uma sobreposição de cores da marca ou uma textura sutil une tudo e reforça sua identidade visual.

Ao misturar esses elementos, você pode criar antecedentes que possuem apelo estético e clareza funcional. O resultado é um layout com profundidade, contraste e textura visual - sem sobrecarregar o usuário.

Esteja você projetando uma seção de heróis, um bloco de frase em ação ou uma grade de recursos, fundos de várias camadas oferecem flexibilidade e controle criativo que elevam seu design de plano a totalmente dimensional.

Por que usar fundos de várias camadas?

Os fundos de várias camadas são uma ótima maneira de elevar visualmente seus projetos-sem escrever uma única linha de código. Ao empilhar cores de fundo, gradientes e imagens, você pode criar efeitos atraentes que melhorem a estética e a usabilidade:

Aqui estão algumas razões práticas para usar fundos em camadas:

• Melhore a legibilidade do texto : adicione uma sobreposição ou gradiente por trás do texto para aumentar o contraste e a legibilidade - especialmente ao usar fundos de imagem.
• Reforce a identidade da sua marca : use as cores, padrões ou texturas da sua marca em camadas de fundo para criar uma experiência visual mais coesa e reconhecível.
• Chame a atenção para áreas importantes de conteúdo : os fundos em camadas podem orientar o olhar do usuário para as principais chamadas para a ação, seções em destaque ou conteúdo promocional.

E o melhor de tudo - tudo é feito na interface do usuário do construtor de castores. Não é necessário CSS extra ou configuração complexa. Com apenas alguns cliques, você pode criar designs dinâmicos e em camadas que são tão funcionais quanto lindos.

Como usar fundos de várias camadas no Beaver Builder

Você pode misturar e combinar quantos tipos de fundo quiser - colores, gradientes e imagens - em qualquer pedido:

Veja como adicionar vários fundos a uma linha, coluna ou módulo de caixa:

1. Abra o elemento para edição
   Clique para editar o módulo de linha, coluna ou caixa, onde deseja aplicar um plano de fundo de várias camadas.
2. Vá para as configurações de fundo
   No painel Configurações do módulo, navegue até a seção em segundo plano .
3. Ativar vários fundos
   Selecione a opção de múltiplos antecedentes para ativar as camadas.
4. Adicione seu primeiro fundo
   Clique no ícone + para adicionar um tipo de fundo e escolha entre cores , fotos ou gradientes . Personalize as configurações conforme necessário.
5. Adicione mais camadas de fundo
   Clique no ícone + novamente para adicionar outra camada. Repita o processo para cada tipo de plano de fundo que você deseja empilhar.
6. Salve suas alterações
   Depois de ficar feliz com o design de fundo em camadas, clique em Salvar .

Com apenas alguns cliques, você pode criar fundos lindamente em camadas que adicionam profundidade visual e aumentam a legibilidade.

Dicas de design para camadas como um profissional

Para ajudá-lo a aproveitar ao máximo esse recurso, aqui estão sete dicas rápidas para o uso de fundo de várias camadas de forma eficaz.

1. Gradientes de camada sobre imagens para melhor legibilidade

Sobreponha um gradiente escuro ou semi-transparente sobre uma imagem de fundo para aumentar a visibilidade do texto. Isso ajuda o texto branco ou de cor clara a aparecer sem perder o impacto da sua imagem. É um truque simples que mantém seu conteúdo claro e legível.

2. Mantenha -o sutil, não perturbando

Menos é mais. Atenha -se a 2 a 3 camadas de fundo para evitar sobrecarregar seu layout. Muitas texturas ou cores brilhantes podem distrair os usuários e prejudicar sua mensagem. Aponte para designs limpos e focados que orientam a atenção - não o roubam.

3. Use cores de marca estrategicamente

Use sua paleta de marca para criar gradientes ou sobreposições de cores. Isso reforça a identidade da marca e adiciona um toque profissional ao seu site. É uma maneira inteligente de combinar estilo visual com marcas consistentes.

4. Adicione interesse visual com empilhamento de camadas

Combine cores, gradientes e imagens sólidos para criar profundidade - nenhum movimento necessário. Por exemplo, camada uma textura sutil sob uma sobreposição de cores translúcidas para dar ao seu design mais riqueza e complexidade.

5. Teste de capacidade de resposta móvel

Um fundo que parece incrível na área de trabalho pode não funcionar em telas menores. Com o Beaver Builder, você tem controle total sobre configurações responsivas para poder ajustar o posicionamento da camada, a escala ou até ocultar certas camadas no celular.

6. Destaque seções -chave com textura visual

Precisa chamar a atenção para uma seção de chamada para ação ou destaque? Use uma imagem texturizada abaixo de um gradiente para criar um interesse visual sutil. Essa técnica ajuda a destacar áreas importantes sem interromper o fluxo de design.

7. Use a opacidade para misturar camadas sem problemas

Ajuste a opacidade de cada camada de criar misturas perfeitas entre cores e imagens. As opacidades mais baixas suavizam as transições, permitindo que você construa desenhos em camadas que parecem naturais e coesos.

Casos de uso do mundo real

Procurando inspiração sobre como usar os antecedentes de várias camadas de maneira eficaz? Aqui estão algumas idéias de design do mundo real para você começar:

• Seções de heróis : Combine imagens com sobreposições de cores para uma introdução limpa e de alto impacto.
• Chamada de ações (CTAs) : use cores e texturas em negrito da marca para capturar instantaneamente a atenção.
• Destaques do blog : Aplique os fundos de gradiente e imagem para destacar os títulos.
• Bento Grids : Use texturas e cores em camadas atrás de cada bloco para criar profundidade e interesse visual.

Experimente essas idéias em seu próximo layout para criar páginas visualmente envolventes que deixam uma impressão duradoura.

Em seguida: camadas de fundo salvas

Chegando a uma atualização futura, você poderá salvar e reutilizar os antecedentes de várias camadas em todo o seu site. Isso tornará mais fácil manter os desenhos consistentes e reduzir a configuração repetitiva. Por enquanto, você tem a opção de salvar suas linhas, colunas e módulos para reutilização em outras partes do seu site.

Experimente os fundos de várias camadas hoje

O campo de fundo de várias camadas já está disponível no Beaver Builder 2.9. Esteja você projetando uma seção de heróis, fila de recursos ou caixa de chamada, esse recurso abre a porta para inúmeras possibilidades criativas - sem tocar uma linha de código. → Explore os documentos e comece.