O módulo Divi Blog possui uma opção de layout na forma de uma grade útil para as postagens do seu blog. O modelo de grade organiza as postagens do seu blog em caixas ou mapas que simplificam a visibilidade dos itens em uma tela em comparação com a visualização padrão.

As configurações do módulo Blog permitem que você personalize o design geral de sua rede. Você pode facilmente fazer com que todos os seus cartões tenham a mesma cor de fundo, fonte, margens, etc. No entanto, as opções de estilo são limitadas ao design da grade como um todo, o que torna isso difícil aplicar designs múltiplos ou diferentes aos mapas dentro da grade.

Hoje vou mostrar como direcionar e aplicar mais de um estilo nas cartas que compõem a grade. seu blog usando CSS personalizado. Mostrarei como aplicar um estilo diferente a cada cartão, para criar um efeito xadrez. Também mostrarei como estilizar cada cartão de maneira diferente por linha e como direcionar qualquer cartão individual.

Então, estes são 4 exemplos de como personalizar seu blog, incluindo alguns efeitos de foco que você pode usar. Ao final deste tutorial, você será capaz de criar designs incríveis para seu blog.

Outros tutoriais sobre o tema Divi

Vamos começar.

Configuração de layout de grade para o seu blog

Antes de começar com o design das placas do módulo de blog, verifique se você tem pelo menos artigos 12 já criados com uma imagem na caixa.

Depois que suas mensagens forem criadas, crie uma nova página. Na sua nova página, implante o módulo do blog em uma coluna de largura total em uma parte padrão:

Configurando o layout de um blog divi

Clique para editar as configurações do módulo Blog. Em Configurações gerais, altere as seguintes configurações:

  • Disposição: Grelha (Grade)
  • Número de artigos: 12
  • Mostrar imagem em destaque: SIM
  • Botão Leia mais: ON

Configuração da grade Divi

Em CSS personalizado, insira "gridcard" na caixa de texto CSS ID. Será uma forma de personalizarmos apenas este módulo de blog.

Divisão css do cartão de grade

Salve as alterações

Como entender o layout "Grade" do blog

Agora que você tem sua grade blog no lugar, é importante compreender a estrutura do layout da grade de modo que você pode localizar mapas do módulo blog que deseja personalizar.

A grade do blog é configurada com um layout de três colunas. A seguir, é apresentada uma ilustração da grade do blog com artigos do blog 12 divididos em três colunas:

Apresentação do layout da grade divi

Os cartões de ingresso do blog são ordenados de cima para baixo em cada uma das colunas. Portanto, se você quiser fornecer um número para eles, precisará contar 1 a 4 em cada comprimento, de cima para baixo:

Contar artigos divi

Como você conhece a ordem numérica de cada cartão de blog em cada coluna, também pode identificar cada cartão como um número ímpar ou par da seguinte maneira:

Divi de número par e ímpar

Exemplo desenhos portão

Exemplo n ° 1: Projeto de uma grade "quadriculada"

Para este primeiro exemplo, vou direcionar todos os cartões ímpares no módulo de blog (cartões 1 e 3) na primeira coluna, dando-lhes uma cor de fundo cinza escuro. Para fazer isso, vá para "Divi → Opções de tema" e adicione o seguinte CSS na caixa de texto CSS personalizada:

#gridcard .Column: first-child artigo: nth-child (ímpar) {background: #333; }

Aqui está um resumo do que este código faz:

#gridcard = o id de todo o módulo do blog

.column: first-child = selecione a primeira coluna no módulo do blog

post: enésimo filho (ímpar) = seleciona todos os itens ímpares (ou cartões) na coluna

Juntando tudo, isso seleciona os cartões de numeração ímpar na primeira coluna do módulo de blog com o ID "gridcard".

Em seguida, adicione o seu texto branco que vai no fundo escuro, adicionando o seguinte CSS:

#gridcard .Column: primeira criança artigo: enésimo-criança (ímpar) .entry-título, #gridcard .Column: primeira criança artigo: enésimo-criança (ímpar) .POST-meta, #gridcard .Column: primeira criança artigo: nth-child (ímpar) .post-meta um, #gridcard .Column: first-child artigo: nth-child (ímpar) .POST-content p {color: #ffffff; }

Este código tem como alvo todos os elementos de texto nos cartões do módulo do blog (incluindo título, post meta, post meta links e conteúdo do artigo) e dá-lhes a cor branca.

Aqui está o resultado:

Personalização de grade divis ímpar

A próxima etapa na criação de nosso layout de tabuleiro de xadrez é direcionar os cartões de numeração ímpar na terceira coluna e aplicar o plano de fundo cinza escuro e o texto branco como você fez na primeira coluna. Adicione o seguinte CSS na caixa de texto CSS personalizado:

#gridcard .column: artigo do último filho: enésimo filho (ímpar) {background: # 333; } #gridcard .column: artigo do último filho: nth-child (ímpar) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- artigo filho: enésimo filho (ímpar). pós-meta a, #gridcard .coluna: artigo último filho: enésimo filho (ímpar). pós-conteúdo p {cor: #ffffff; }

Este código visa a "última" coluna (nesse caso, a terceira coluna é a última coluna) com o elemento de apelido "último filho".

Para a segunda coluna (ou no meio), direcione até cartas para completar o efeito xadrez. Para fazer isso, precisamos adicionar o seguinte CSS:

#gridcard .column: enésimo filho (2) artigo: enésimo filho (par) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (mesmo) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff; }

Agora vá verificar a página do blog para ver o layout do tabuleiro de damas dos cartões de módulo Blog.

Layout de divisão de grade quadriculada

Exemplo 2: Adicionando efeitos de flutuação com o layout quadriculado

Depois de saber como direcionar os cartões de módulo de blog, você pode alterar qualquer um dos elementos dentro do cartão de forma criativa.

Para este exemplo, usarei o layout quadriculado e, desta vez, alterarei as imagens apresentadas de mapas em cinza escuro para preto e branco ao passar o mouse sobre o mapa. E vou tornar as imagens da primeira página dos cartões brancos mais brilhantes quando passar o mouse sobre o cartão. Para fazer isso, adicione o seguinte CSS na área CSS personalizado (certifique-se de desativar ou cortar o outro código para que não seja incompatível com o novo):

#gridcard .column: artigo do primeiro filho: nth-child (ímpar), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (par) {plano de fundo: # 333; } #gridcard .column: artigo do primeiro filho: nth-child (ímpar) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- artigo filho: nth-child (ímpar) .post-meta a, #gridcard .column: artigo primeiro filho: nth-child (ímpar) .post-content p, #gridcard .column: artigo último filho: n-child (ímpar) .entry-title, #gridcard .column: último-filho artigo: n-th-child (odd) .post-meta, #gridcard .column: last-child article: n-th-child (ímpar) .post-meta a , #gridcard .column: artigo do último filho: nth-child (ímpar) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. coluna: nth-child (2) article: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (mesmo) .post-meta a, #gridcard .column : artigo enésimo filho (2): enésimo filho (par). pós-conteúdo p {cor: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -artigo infantil: n-ésimo filho (ímpar): hover img {-webkit-filter: grayscale (1); filtro: tons de cinza (1); } #gridcard .column: nth-child (2) article: nth-child (ímpar): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -artigo infantil: enésimo filho (par): hover img {-webkit-filter: brilho (1.5); filtro: brilho (1.5); }

Você também pode adicionar um efeito de inversão nas cartas para que, quando você passar o mouse sobre as cartas brancas, elas fiquem cinza escuro, e quando você passar o mouse sobre as cartas cinza escuro, elas fiquem brancas.

Adicione o seguinte CSS e mais CSS acima:

#gridcard .column article, #gridcard .column article img {-webkit-transaction: all 0.8s; -moz-transição: todos os 0.8s; transição: todos os 0.8s; } #gridcard .column: artigo do primeiro filho: nth-child (odd): hover, #gridcard .column: last-child article: nth-child (odd): hover, #gridcard .column: n-child (2) artigo: enésimo filho (par): hover {background: #fff; } #gridcard .column: artigo do primeiro filho: enésimo filho (ímpar): hover .entry-title, #gridcard .column: artigo do primeiro filho: nth-child (ímpar): hover .post-meta, #gridcard. coluna: artigo do primeiro filho: nth-child (ímpar): hover .post-meta a, #gridcard .column: artigo do primeiro filho: nth-child (ímpar): hover .post-content p, #gridcard .column: artigo do último filho: n-ésimo filho (ímpar): hover .entry-title, #gridcard .column: artigo do último filho: n-ésimo (ímpar): hover .post-meta, #gridcard .column: artigo do último filho : nth-child (odd): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) artigo: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) artigo: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: artigo do primeiro filho: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) artigo: enésimo filho (ímpar): hover {background: # 333; } #gridcard .column: artigo do primeiro filho: enésimo filho (par): hover .entry-title, #gridcard .column: artigo do primeiro filho: nth-child (par): hover .post-meta, #gridcard. coluna: artigo do primeiro filho: n-ésimo filho (par): hover .post-meta a, #gridcard .column: artigo do primeiro filho: enésimo filho (par): hover .post-content p, #gridcard .column: artigo do último filho: n-ésimo filho (par): hover .entry-title, #gridcard .column: artigo do último filho: n-ésimo (par): hover .post-meta, #gridcard .column: artigo do último filho : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) artigo: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artigo: nth-child (ímpar): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (ímpar): hover .post-content p {color: #fff; }

Agora vá ver o efeito no seu blog.

Personalizando as grades ao pairar divi

Exemplo # 3: Personalize mapas de linhas

Para o terceiro exemplo, vou aplicar o mesmo fundo escuro e texto branco aos cartões em todas as linhas (não em colunas). Para fazer isso, você precisa direcionar todos os cartões pares em cada uma das colunas. Vá para “Divi → Opções” do tema e certifique-se de desabilitar ou remover qualquer código CSS anterior que você adicionou desde o início deste tutorial. Em seguida, adicione o seguinte CSS:

artigo #gridcard: n-ésimo filho (par) {background-color: # 333; } #gridcard artigo: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : n-ésimo filho (par). pós-conteúdo p {cor: #fff; }

Aqui está o que o resultado:

Resultado da configuração por linha divi

Exemplo # 4: Projetando um mapa de grade específico

Alguns de vocês podem querer escolher um cartão específico. Para fazer isso, você precisa encontrar o ID do item exclusivo que é atribuído automaticamente a cada um dos seus cartões. Para este exemplo, estou usando o navegador Chrome.

Vá para a página que exibe o módulo do seu blog e clique com o botão direito em um dos seus cartões. Na caixa de opções que aparece, selecione "Inspecionar" (alguns navegadores podem ter "Inspecionar item" ou algo semelhante. Isso implantará a janela Ferramentas do desenvolvedor que exibe o html e o css para o seu página da Web. Encontre a tag de artigo que envolve seu artigo e anote o ID do artigo atribuído a ela. Este é o seletor que você deve usar para direcionar seu cartão individual. Para meu exemplo, tenho clicado com o botão direito e inspecionado para encontrar o id "pós-3466".

Como abaixo:

Modificação de um único artigo

Para atingir este cartão CSS para dar-lhe um fundo cinzento com uma fonte branca, você deve usar o seguinte CSS:

# post-3466 {background: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Agora o mapa tem esse estilo específico aplicado a ele.

Isso é tudo!

Considerações finais

Esses são apenas alguns exemplos dos muitos estilos diferentes que você pode realizar usando esse tipo de segmentação CSS de cartões de módulo de blog. Você não precisa mais manter o mesmo estilo para cada cartão. Você pode projetá-los como quiser.

Se você tiver dúvidas ou sugestões, não hesite em oferecer-lhes para mim.

[vc_row center_row=”sim”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Ralway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriais” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]BAIXE O PLANILHAS DIVI[/vcex_button][/vc_column][/vc_row]

Outros tutoriais Divi