Atualize sua página de blog Divi com um plano de fundo projetado para o layout de grade

Criar um layout de grade para o seu blog é uma ótima maneira de organizar suas postagens. Divi torna isso extremamente fácil com o Módulo de Blog. Em apenas alguns segundos, você pode implantar um layout de grade de blog em funcionamento em sua página. E você pode até mesmo utilizar as várias configurações de design para personalizar a aparência da grade do seu blog de várias maneiras. Mas hoje, estou levando as coisas a outro nível.

Neste tutorial, vou mostrar como você pode criar várias camadas de fundo para enquadrar sua grade de blog de três colunas com um design bonito e simétrico. Felizmente, você pode usar essas técnicas de design para criar uma página de blog que certamente impressionará.

Vamos começar.

Inscreva-se no nosso canal no Youtube

Sneak Peak do design de layout de grade

Aqui está uma prévia do design.

Começando

Tudo que você precisa é Divi para este tutorial. Depois de ter o Divi Theme instalado e ativo, crie uma nova página e dê-lhe um título. Em seguida, implante o Visual Builder. Selecione “Choose a Premade Layout” e então carregue o Therapist Blog Page Layout em sua página e publique-o.

Certifique-se de ter pelo menos 6 postagens de blog com conteúdo e imagens em destaque. Do contrário, as postagens do blog não aparecerão na página.

Agora você está pronto para começar a editar.

Adicione a primeira camada de fundo à seção

O design personalizado será adicionado à segunda seção do layout que contém o módulo de blog. Para criar nossa primeira camada de fundo, vamos definir o estilo das configurações da seção da seguinte maneira:

Cor de fundo: # 5873dd
Preenchimento personalizado (desktop): 4vw superior, 4vw inferior, 7vw esquerdo
Preenchimento personalizado (tablet): 0vw esquerdo

O padding esquerdo 7vw personalizado basicamente desloca o conteúdo da seção (a linha) para uma aparência única. Se você quer tudo de bom e centrado para o seu design, pode deixar isso de fora.

Adicione a segunda e a terceira camadas de fundo à linha

A segunda e a terceira camadas de plano de fundo serão criadas adicionando uma cor de plano de fundo a toda a linha e, em seguida, um gradiente de plano de fundo à coluna dentro da linha.

Abra as configurações de linha e atualize o seguinte:

Cor de fundo: rgba (255,255,255,0,3)
Cor esquerda do fundo da coluna 1: rgba (255,255,255,0,0)
Cor direita do fundo da coluna 1: rgba (255,255,255,0,3)
Direção do gradiente da coluna: 90 graus
Posição inicial da coluna: Posição inicial da coluna: 33,3%
Posição final da coluna: 0%

Observe que estou usando uma cor branca com 30% de opacidade para criar um grau consistente de cores de sobreposição brancas que permitem que o fundo da seção azul apareça. À medida que cada cor se sobrepõe, o usuário vê uma versão 30% mais clara do fundo da seção azul. Dessa forma, se você quiser alterar o esquema de cores do layout, tudo o que você precisa fazer é alterar a cor de fundo da seção.

Definir a posição inicial do gradiente da coluna para 33,3% garante que o gradiente será dividido entre a primeira e a segunda coluna da grade do meu blog. Mas isso não parecerá correto inicialmente porque ainda precisamos dar à nossa linha uma largura personalizada de 100%, entre outras coisas.

Largura personalizada: 100%
Largura da calha: 4
Preenchimento personalizado: 4% superior, 4% inferior

O preenchimento personalizado expõe as camadas verticalmente para adicionar ao design geral.

Salvar configurações.

Adicionando a quarta camada de plano de fundo ao nosso módulo de blog

É aqui que tudo se encaixa. A quarta e última camada será um gradiente de fundo adicionado ao nosso módulo de blog. Então, com o espaçamento exato adicionado, o módulo de blog se alinhará perfeitamente com nossas camadas de fundo. Também adicionarei alguns ajustes de estilo aos cartões de blog para adicionar alguns toques finais.

Vá para as configurações do módulo de blog e atualize o seguinte:

Cor de fundo do bloco de grade: rgba (255,255,255,0,7)

Para adicionar o gradiente de fundo, você pode ir até as configurações de linha e copiar o gradiente de fundo da coluna 1 e, em seguida, voltar às configurações do blog e colá-lo usando as opções de clique com o botão direito.

Em seguida, atualize o seguinte:

Posição inicial: 66,6%

Margem personalizada: 4% superior, 4% inferior
Preenchimento personalizado: 4% superior, 4% inferior, 4% esquerdo, 4% direito

Como você pode ver, o valor de comprimento de 4% é usado para dar espaçamento igual ao nosso design. E há mais neste valor de 4% do que aparenta. Se você se lembrar, definimos nossa linha para ter uma largura de medianiz personalizada de 4. No Divi, se você adicionar um módulo de blog com um layout de grade a uma linha com uma largura de medianiz 4, as colunas da grade do seu blog serão separadas horizontalmente por 8% de margem. Portanto, adicionar 4% de preenchimento esquerdo e direito ao módulo criará o espaçamento exato de que precisamos.

Neste ponto, concluímos o design do plano de fundo. Confira o que temos até agora.

Agora, tudo o que precisamos fazer é adicionar alguns toques finais ao módulo do blog.

Toques Finais

Na guia de design das Configurações do módulo de blog, atualize o seguinte:

Cor do corpo do texto: rgba (0,0,0,0.8)
Meta Cor do Texto: rgba (0,0,0,0.5)
Estilo de fonte de paginação: sublinhado
Cor do sublinhado da paginação: rgba (166.221.217,0.39)
Cor do texto da paginação: #ffffff
Tamanho do texto de paginação: 3vw (desktop), 40px (tablet), 30px (smartphone)

Se quiser dar ao seu design um pouco mais de textura, você pode adicionar fundos divisores à sua seção.

Parte superior da divisória: Veja a captura de tela
Cor do divisor: rgba (88.115.221,0.5)
Altura do divisor: 32vw
Repetição horizontal do divisor: 0,3X

Parte inferior da divisória: veja a captura de tela
Cor do divisor: rgba (88.115.221,0.5)
Altura do divisor: 43vw
Repetição horizontal do divisor: 0,3X

Agora veja o resultado final…

Design Responsivo

As camadas que enquadram as colunas da grade são dimensionadas perfeitamente em todos os tamanhos de navegadores de desktop.

Embora as camadas de fundo não se ajustem a duas colunas no tablet e uma coluna no smartphone, o resultado ainda é muito simétrico e fornece um design de grade quebrado sutil que funciona bem.

Aqui está como ficará no celular ...

Pensamentos finais

Essa técnica de plano de fundo em camadas é realmente uma maneira de criar a impressão de ter planos de fundo de três colunas, onde na verdade há apenas uma coluna (já que o módulo de blog fica em uma coluna). Claro que isso é possível fazer em CSS personalizado no nível do módulo do blog, mas achei que seria mais útil fornecer uma solução criativa usando o Divi Builder. E variações do design também podem ser usadas como pano de fundo para outro conteúdo.

Tentei explicar o raciocínio por trás de alguns dos estilos usados ​​neste tutorial, mas se você tiver dúvidas, sou todo ouvidos. E, para aqueles de vocês que desejam incrementar o layout da grade do seu blog, espero que este post dê pelo menos algumas dicas de design para fazer exatamente isso.

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

Saúde!