Como adicionar designs criativos de plano de fundo à barra de rodapé inferior da Divi

A barra de rodapé inferior do Divi é uma parte pequena, mas significativa do seu site. E com certos layouts de página, pode ser necessário adicionar um toque final criativo a essa barra inferior.

Neste tutorial, vou mostrar como adicionar designs de plano de fundo personalizados para a barra de rodapé inferior do Divi. Ao remover a cor de fundo padrão da barra de rodapé inferior e adicionar alguma margem personalizada a uma seção, você pode aproveitar as configurações de design de uma seção para criar designs de fundo interessantes.

Vamos começar.

Uma espiada

Aqui está uma prévia de alguns projetos de exemplo que você pode construir com este tutorial.

Personalização da barra de rodapé inferior no personalizador de temas

Antes de adicionarmos fundos personalizados atrás de nossa barra de rodapé inferior, precisamos nos livrar da cor de fundo padrão que está sendo usada.

Vá para o personalizador de tema e navegue até Rodapé> Barra inferior. Em seguida, altere a cor do plano de fundo para ser completamente transparente.

Você pode não notar muitas mudanças na visualização porque ainda há uma cor de fundo do rodapé atrás da barra inferior. A cor de fundo do rodapé pode ser alterada em Rodapé> Layout, mas é uma boa ideia deixar essa cor de fundo ativa como um substituto. O plano de fundo personalizado será adicionado à barra inferior usando uma seção página a página. Portanto, ter esse plano de fundo garantirá que o conteúdo da barra inferior tenha um plano de fundo nas páginas que não possuem o plano de fundo personalizado.

Você também pode alterar a cor do texto da barra inferior e a cor do ícone social para branco se você planeja ter um fundo mais escuro. Isso garantirá que o conteúdo seja mais legível.

Criando o desenho do plano de fundo da seção para a barra inferior

Agora que a barra inferior do rodapé tem um fundo transparente, estamos prontos para projetar nosso fundo de seção e posicioná-lo atrás da barra.

Se ainda não o fez, crie uma nova página e escolha “Construir do zero”. Em seguida, insira um layout de uma coluna para a linha da seção.

Não há necessidade de adicionar um módulo à linha, pois só precisaremos da seção e da linha para os designs de fundo.

Em seguida, vá para as configurações de linha e adicione algum espaçamento da seguinte forma:

Margem personalizada: 0 px superior, 0 px inferior
Preenchimento personalizado (desktop): 80px superior, 80px inferior
Preenchimento personalizado (tablet): 100 px superior, 100 px inferior

Este espaçamento é necessário para dar alguma altura à nossa seção, preservando o espaço necessário para as divisórias de seção que iremos adicionar para o nosso desenho de fundo.

Agora, vá para as configurações da seção e atualize o espaçamento da seguinte forma:

Margem personalizada (desktop): -55px inferior
Margem personalizada (tablet): -94px inferior
Preenchimento personalizado: 0 px superior, 0 px inferior

A margem inferior de -55px puxa a barra inferior para a área da seção para que qualquer design que adicionarmos à nossa seção fique atrás da barra inferior. A barra inferior, por padrão, tem 54px de altura no desktop e cerca de 94px de altura no tablet. É por isso que você precisa de uma margem negativa maior para o tablet.

Livrar-se do preenchimento superior e inferior maximiza o espaço necessário para o divisor de seção que adicionaremos mais tarde.

Adicionando o divisor inferior

Em seguida, adicione um divisor inferior à seção para enquadrar o conteúdo do rodapé da seguinte maneira:

Estilo do divisor inferior: veja a captura de tela
Cor do divisor: # 121212
Altura do divisor: 120 px (desktop), 150 px (tablet), 150 px (smartphone)
Repetição horizontal do divisor: 0,9x (desktop), 0,5x (tablet), 0,5x (smartphone)
Divider Flip: vertical

No momento, o conteúdo da barra inferior (o texto e os ícones sociais) está sendo escondido atrás da divisória, embora a organização da divisória esteja definida para abaixo do conteúdo da seção. Isso ocorre porque o rodapé inferior não é tecnicamente uma parte do conteúdo da seção. Para corrigir isso, precisamos adicionar um índice z personalizado à nossa seção para que fique atrás do rodapé inferior.

Na guia avançada, adicione o seguinte snippet CSS personalizado ao elemento principal:

z-index: 0;

Agora o conteúdo da barra de rodapé ficará acima de sua seção e você tem um belo design de fundo que enquadra a barra de rodapé.

E ele se ajustará bem no celular também.

Com esta estrutura básica no lugar, você tem um bom design de seção para construir. Com isso em mente, vá em frente e salve esta seção em sua biblioteca para que você possa usar essa estrutura como um ponto de partida para explorar os designs agora.

Agora você está pronto para explorar novos designs. Você pode alterar o divisor inferior para estilos e cores diferentes para criar incontáveis ​​designs de quadro de fundo. Pode ser necessário adicionar o ajuste da altura do divisor e os valores de repetição horizontal, dependendo do estilo de divisor escolhido.

Aqui estão alguns exemplos.

Usando o divisor superior com um gradiente de fundo personalizado

Usar uma única divisória inferior como design de quadro de fundo para o rodapé inferior é um pouco limitante. Mas se você usar um divisor superior como design de moldura, poderá usar um gradiente de fundo personalizado para sua seção. Isso abrirá novas portas para explorar.

Vá para as configurações de seção e defina o estilo do divisor inferior como nenhum. Em seguida, adicione um gradiente de plano de fundo como plano de fundo da seção.

Agora você pode adicionar um estilo de divisor superior à sua seção para criar uma nova aparência.

Aqui estão alguns exemplos de projetos possíveis apenas alterando o fundo gradiente e o estilo do divisor.

Combinando divisores com gradientes de fundo para um design de moldura de borda multicolorida

Agora é hora de aumentar o nível. Lembre-se de que existem muitas possibilidades para a criação de designs de fundo exclusivos em seções e linhas. Portanto, neste último exemplo, vou mostrar como combinar esses recursos para criar um design totalmente exclusivo.

Para iniciar este design, vá em frente e use a seção que você salvou em sua biblioteca clicando para adicionar uma nova seção no construtor visual, selecionando adicionar da guia da biblioteca e escolhendo o layout da seção.

Assim que a seção for adicionada à página, estamos prontos para personalizá-la.

Para começar, vá para as configurações da seção e atualize o seguinte:

Cor do gradiente de fundo à esquerda: # 29c4a9
Cor do gradiente de fundo à esquerda: # 2b87da

Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 0%

Agora adicione um divisor superior da seguinte forma:

Estilo do divisor superior: veja a captura de tela
Cor da divisória: #ffffff
Altura do divisor: 120 px (desktop), 150 px (tablet), 150 px (smartphone)
Repetição horizontal do divisor: 0,9x (desktop), 0,5x (tablet), 0,5x (smartphone)
Divider Flip: vertical

Essas configurações de Divisor refletem completamente o divisor inferior, de modo que ele crie uma borda ao redor do divisor inferior. Como o próprio divisor é branco, isso deixa a impressão de que o gradiente de fundo é uma extensão do divisor inferior.

Agora vá para as configurações de linha e adicione um gradiente de fundo da seguinte maneira:

Cor do gradiente de fundo à esquerda: # df52ff
Cor do gradiente de fundo à esquerda: # 2b87da

Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 0%

Para equalizar a largura de cada segmento de cor para seu plano de fundo, dê à linha uma largura personalizada de 50%.

Aqui está o design final!

Pensamentos finais

Ter um design de plano de fundo personalizado para a barra de rodapé inferior do Divi pode ser uma adição refrescante à sua página. Basta algumas personalizações em uma seção localizada na parte inferior da página. Infelizmente, o design é limitado a uma única página e não pode ser aplicado em todo o site. É por isso que a cor de fundo do rodapé é usada como alternativa. Mas depois de salvar a seção em sua biblioteca, você pode facilmente soltá-la em qualquer página que desejar. Você pode até adicionar a qualquer um de nossos layouts predefinidos para ser usado em seu próximo projeto. Tudo o que você precisa fazer é adicionar a seção ao final da página. Esperançosamente, você vai achar isso útil.

Além disso, você pode estar interessado em enquadrar seu menu de navegação usando uma técnica semelhante.

Estou ansioso para ouvir de você nos comentários.

Saúde!