Ir para o conteúdo principal

Como personalizar as grades com um Divi blogue

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 de blog permitem personalizar o design geral da sua rede. Você pode facilmente garantir 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 dificulta a aplicação de desenhos múltiplos ou diferentes para os cartões dentro da grade.

Hoje, vou mostrar como direcionar e aplicar mais de um estilo aos cartões que compõem a grade do seu blog usando CSS personalizado. Vou mostrar como aplicar um estilo diferente um ao outro no mapa, para criar um efeito quadriculado. Também mostrarei como estilizar cada mapa de maneira diferente por linha e mostrarei como segmentar qualquer mapa individual.

Portanto, este é um exemplo do 4 sobre como personalizar seu blog, incluindo alguns efeitos de foco que você pode usar. No final deste tutorial, você poderá criar designs incríveis para o 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
  • Mostre a figura na cabeça: SIM
  • Botão Leia mais: ON

Configuração da grade Divi

Em CSS personalizado, digite "gridcard" na caixa de texto ID do CSS. Essa será uma maneira de personalizar apenas este módulo do blog.

Gridcard css divi

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

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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 do blog em cada coluna, também é possível 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 # 1: Projetando uma grade quadriculada

Neste primeiro exemplo, direcionarei todos os cartões ímpares do módulo de blog (cartões 1 e 3) na primeira coluna, fornecendo a eles 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 personalizado:

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

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

#gridcard = a identificação de todo o blog módulo

.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

Coloque tudo junto, isso seleciona os cartões numerados ímpares na primeira coluna do módulo do blog com o ID da placa de grade.

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; }

Esse código segmenta todos os elementos de texto nos cartões de módulo do blog (incluindo título, metas de artigo, meta links de artigo e conteúdo do artigo) e atribui a eles a cor branca.

Aqui está o resultado:

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Personalização de grade divis ímpar

O próximo passo na criação do layout quadriculado é direcionar os cartões ímpares numerados na terceira coluna e aplicar o plano de fundo cinza escuro e o texto em branco, como você fez na primeira coluna. Adicione o seguinte CSS na caixa de texto CSS personalizado:

#gridcard .column: artigo do último filho: nth-child (ímpar) {background: #333; } #gridcard .Column: artigo last-child: nth-child (ímpar) .entry-título, #gridcard .Column: artigo last-child: nth-child (ímpar) .POST-meta, #gridcard .Column: de último artigo filho: n-filho (ímpar) .post-meta, #gridcard .coluna: artigo do último filho: n-filho (ímpar) .post-content p {color: #ffffff; }

Este código refere-se à coluna "last" (nesse caso, a terceira coluna é a última coluna) com o elemento pseudo "último filho".

Para a segunda coluna (ou no meio), segmente as cartas pares para concluir o efeito quadriculado. Para fazer isso, precisamos adicionar o seguinte CSS:

#gridcard .column: artigo nth-child (2): n-filho (par) {segundo plano: #333; } #gridcard .Column: nth-child artigo (2): nth-child (mesmo) .entry-título, #gridcard .Column: nth-child artigo (2): nth-child (mesmo) .post-meta # gridcard .Column: nth-child (2) artigo: nth-child (mesmo) .post-meta tem #gridcard .Column: nth-child (2) artigo: nth-child (mesmo) .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 foco com o layout quadriculado

Depois de saber como direcionar os mapas do módulo do blog, você poderá modificar um dos elementos dentro do mapa de forma criativa.

Neste exemplo, vou usar o layout do tabuleiro de damas e, desta vez, vou mudar as imagens para um dos cartões cinza-preto e branco ao passar o mouse sobre o mapa. E farei as imagens em um dos cartões brancos mais brilhantes ao passar o mouse sobre o mapa. Para fazer isso, adicione o seguinte CSS na caixa CSS personalizada (desative ou corte o outro código para que ele não seja incompatível com o novo):

#gridcard .Column: first-child artigo: nth-child (ímpar) #gridcard .Column: artigo last-child: nth-child (ímpar) #gridcard .Column: nth-child (2) Item: nth-child (par) {fundo: #333; } #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: primeiro- artigo filho: nth-child (ímpar) .post-meta tem #gridcard .Column: artigo de primeira criança: nth-child (ímpar) .post-content p #gridcard .Column: artigo last-child: nth-child (ímpar) .entry-título, #gridcard .Column: artigo last-child: nth-child (ímpar) .POST-meta, #gridcard .Column: artigo last-child: nth-child (ímpar) tem .POST-meta , #gridcard .Column: artigo last-child: nth-child (ímpar) .post-content .Column p #gridcard: nth-child (2) artigo: nth-child (mesmo) .entry-título, #gridcard. coluna: enésimo-criança item (2): enésimo-criança (mesmo) .POST-meta, #gridcard .Column: enésimo-criança item (2): enésimo-criança (mesmo) .post-meta um, #gridcard .Column : nth-child (2) artigo: nth-child (mesmo) .post-content p {color: # fff; } #gridcard .Column: nth-child (2) Item: nth-child (mesmo): hover img, #gridcard .Column: first-child artigo: nth-child (ímpar): hover img, #gridcard .Column: última artigo-filho: enésimo-criança (ímpar): pairar {-webkit img-filtro: escala de cinzentos (1); filtro: escala de cinza (1); } #gridcard .Column: nth-child (2) Item: nth-child (ímpar): hover img, #gridcard .Column: first-child artigo: nth-child (mesmo): hover img, #gridcard .Column: última artigo-filho: enésimo-criança (mesmo): pairar {-webkit img-filtro: brilho (1.5); filtro: brilho (1.5); }

Você também pode adicionar um efeito invertido em cartões para que, quando você passe o mouse sobre os cartões brancos, eles se tornem cinza escuro e, quando você passe o mouse sobre os cartões mais escuros, eles fiquem brancos.

Adicione o seguinte CSS e mais CSS acima:

#gridcard .Column artigo #gridcard .Column seção img {-webkit-transição: todos 0.8s; -moz-transition: todos os 0.8s; transição: todos os 0.8s; } #gridcard .Column: first-child artigo: nth-child (ímpar): hover, #gridcard .Column: artigo last-child: nth-child (ímpar): hover, #gridcard .Column: nth-child (2) artigo: n-filho (par): hover {background: #fff; } #gridcard .Column: primeira criança artigo: enésimo-criança (ímpar): pairar .entry-título, #gridcard .Column: primeira criança artigo: enésimo-criança (ímpar): pairar .POST-meta, #gridcard. coluna: artigo de primeira criança: enésimo-criança (ímpar): pairar .post-meta tem #gridcard .Column: primeira criança artigo: enésimo-criança (ímpar): pairar .post-teor de p #gridcard .Column: artigo last-child: nth-child (ímpar): hover .entry-título, #gridcard .Column: artigo last-child: nth-child (ímpar): hover .POST-meta, #gridcard .Column: último item-filho : nth-child (ímpar): hover .post-meta tem #gridcard .Column: artigo last-child: nth-child (ímpar): hover .post-content .Column p #gridcard: nth-child (2) artigo: nth-child (mesmo): hover .entry-título, #gridcard .Column: nth-child (2) Item: nth-child (mesmo): hover .POST-meta, #gridcard .Column: nth-child ( 2) artigo: nth-child (mesmo): hover .post-meta tem #gridcard .Column: nth-child (2 artigo): nth-child (mesmo): hover .post-content p {color: #333; } #gridcard .Column: first-child artigo: nth-child (mesmo): hover, #gridcard .Column: artigo last-child: nth-child (mesmo): hover, #gridcard .Column: nth-child (2) artigo: n-filho (ímpar): hover {background: #333; } #gridcard .Column: primeira criança artigo: enésimo-criança (mesmo): pairar .entry-título, #gridcard .Column: artigo de primeira criança: enésimo-criança (mesmo): pairar .POST-meta, #gridcard. coluna: primeira criança artigo: enésimo-criança (mesmo): pairar .post-meta tem #gridcard .Column: artigo de primeira criança: enésimo-criança (mesmo): pairar .post-teor de p #gridcard .Column: artigo last-child: nth-child (mesmo): hover .entry-título, #gridcard .Column: artigo last-child: nth-child (mesmo): hover .POST-meta, #gridcard .Column: último item-filho : nth-child (mesmo): hover .post-meta tem #gridcard .Column: artigo last-child: nth-child (mesmo): hover .post-content p #gridcard .Column: nth-child (2) artigo: nth-child (ímpar): hover .entry-título, #gridcard .Column: nth-child item (2): nth-child (ímpar): hover .POST-meta, #gridcard .Column: nth-child ( 2) artigo: nth-child (ímpar): hover .post-meta tem #gridcard .Column: nth-child (2 artigo): nth-child (ímpar): hover .post-content p {color: # fff; }

Agora vá ver o efeito em seu blog.

Personalizando as grades ao pairar divi

Exemplo # 3: Personalize mapas de linhas

Para o terceiro exemplo, aplicarei o mesmo plano de fundo escuro e texto em branco para os cartões nas outras linhas (e não na coluna). Para fazer isso, você precisa direcionar todos os cartões pares em cada uma das colunas. Vá para o tema "Divi → Opções" e desative ou exclua qualquer código CSS anterior que você adicionou desde o início deste tutorial. Em seguida, adicione o seguinte CSS:

artigo #gridcard: nth-child (mesmo) {background-color: #333; } Artigo #gridcard: enésimo-criança (mesmo) .entry-título, artigo #gridcard: enésimo-criança (mesmo) .POST-meta, artigo #gridcard: enésimo-criança (mesmo) .post-meta uma, secção #gridcard : n-filho (par) .post-content p {color: #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 escolher um cartão específico. Para fazer isso, você deve encontrar o ID do item exclusivo atribuído automaticamente a cada um dos seus cartões. Neste exemplo, estou usando o navegador Chrome.

Vá para a página que exibe seu módulo de blog e clique com o botão direito em um de seus cartões. Na caixa de opção exibida, selecione "Inspecionar" (alguns navegadores podem ter "Inspecionar elemento" ou algo semelhante) Isso implementará a janela Ferramentas do desenvolvedor que exibe o html e o css do seu Na página da Web, localize a tag do artigo que envolve o artigo e anote o ID do artigo atribuído a ele. Esse é o seletor que você precisa usar para segmentar seu cartão individual. clique com o botão direito e clique em inspecionado para encontrar o ID pós-3466.

Como abaixo:

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

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; } # Pós-título .entry 3466, 3466 # pós .post-meta, # pós-3466 .post-meta um, # pós-3466 .post-content p {color: # fff; }

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

É isso aí!

Considerações finais

Estes são apenas alguns exemplos dos vários estilos diferentes que você pode realizar usando esse tipo de segmentação CSS dos cartões dos módulos do Blog. Você não precisa mais manter o mesmo estilo para cada cartão. Você pode projetá-los como desejar.

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

Outros tutoriais Divi

Este artigo contém comentários 20

  1. Bom Dia,
    Sou realmente iniciante, mas graças aos tutoriais on-line, consigo criar um bom blog.
    Realmente, obrigado por este, porque eu só tive que copiar os códigos e tudo correu perfeitamente, estou encantado com o resultado.
    Mais uma vez obrigado, tenha um bom dia 🙂

  2. Olá Thierry
    Super tutorial
    Eu gostaria de saber se é possível aumentar o tamanho da imagem para o
    Eu gostaria de aplicar este estilo ao meu blog
    obrigado

  3. Bom Dia,
    Como posso otimizar esse layout para celular (tablet)? Eu não tenho um Schabrettmuster, mas cores diferentes para cada postagem do blog, em uma ordem específica. Claro, isso muda quando nos movemos para o celular e as cores não são mais associadas a boas postagens ...
    Alguém tem uma ideia aqui?

  4. Bom Dia,

    Obrigado por este artigo! Eu também gostaria de modificar o "leia mais" na parte inferior dos artigos.
    Você poderia nos dar exemplos de código CSS para alterar o texto e colocá-lo em um belo botão centralizado, por exemplo?

    En vous remerciant.
    Sophie

  5. Cuándo lo pones in the CSS, por ejemplo:
    #gridcard .Column: arte do primeiro filho: nth-child (impar) {background: #333; }

    da erro como o seigue: Espera-se uma FUNÇÃO ou IDENT após o cólon na linha 1, col 18

    lembranças

    1. Bonsoir,

      Nosso Blog é traduzido automaticamente do francês. Convido você a escolher o idioma francês no widget de idiomas localizado na barra de topo do nosso blog e o código CSS correto será exibido.

    2. Você escreveu um artigo mal escrito, de preferência a ser escrito: um livro de primer hijo: nenhuma arte do primer hijo:

      Você escreveu um artigo com erro de ortografia, deve ser: artigo sobre o primeiro filho: não a arte do primeiro filho:

  6. Olá
    Obrigado pelo artigo. Tenho uma apresentação em grade (Theme Divi) Tenho miniaturas (fotos) para a apresentação dos artigos, por outro lado, quando clico para ter acesso ao artigo, a imagem aparece em tamanho grande no início do artigo. Existe uma maneira de atribuir o mesmo tamanho da miniatura ou excluí-la na visualização do artigo?
    obrigado
    Patrick

  7. Bonjourn, super artigo
    Eu tento a minha sorte, às vezes nos voltamos a um assunto por semanas sem encontrar a resposta, enquanto o mesmo assunto é lógico para outros.

    Então, estou procurando a solução para colocar uma grade de postagem, composta apenas de imagens, mas alturas diferentes, para ser mais explícita, que um visual em dois tem o dobro da altura do lado visual ao lado.

    Uma idéia?

    Julien

  8. Grande tutorial! Vou testar ca neste fim de semana para o meu site.
    você tem uma solução para remover os extratos nas grades?
    Merci à vous
    Sofhy

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
16 ações
ação7
chilrear2
Enregistrer7