Ir para o conteúdo principal

Como personalizar as grades com um Divi blogue

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]

O módulo do blog de Divi tem uma opção de layout na forma de uma grade útil para suas postagens de 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 exibição padrão.

As configurações do módulo Blog permitem que você personalize o design geral da sua rede. Você pode facilmente certificar-se de que todas as suas cartas têm 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 difícil a aplicação de projetos múltiplos ou diferentes para os cartões dentro da grade.

Hoje, mostrarei como segmentar e aplicar mais de um estilo aos cards que compõem a grade do seu blog usando CSS personalizado. Mostrarei a você como aplicar um estilo diferente a cada outro mapa para criar um efeito xadrez. Também mostrarei como estilizar cada mapa de maneira diferente por linha e mostrarei como segmentar qualquer mapa individual.

Portanto, esses são exemplos de 4 sobre como personalizar seu blog, incluindo alguns efeitos de foco que você pode usar. No final deste TutorielVocê será capaz de 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 dos cartões de módulo do 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. Em sua nova página, implante o módulo de blog em uma coluna de largura total em uma parte padrão:

Clique para alterar 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 foto na cabeça: SIM
  • Botão Leia mais: ON

Em CSS personalizado, insira "gridcard" na caixa de texto CSS. Esta será uma maneira de personalizar apenas este módulo de blog.

Salve as alterações

Como entender o layout "Grid" para o 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 páginas colunas. A seguir, uma ilustração da grade do blog com artigos do blog 12 divididos em três colunas:

Divi: O melhor tema WordPress de todos os tempos!

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

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

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

Exemplo desenhos portão

Example # 1: Criando uma grade quadriculada

Para este primeiro exemplo, vou direcionar todos os cartões ímpares do 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 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: n-filho (ímpar) = seleciona todos os itens ímpares (ou cartões) na coluna

Coloque tudo junto, isso seleciona os cartões ímpares numerados na primeira coluna do módulo do blog com o ID da 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 tem como alvo todos os elementos de texto nos cartões de módulos do blog (incluindo título, metas de artigo, meta links de artigos e conteúdo do artigo) e atribui a eles a cor branca.

Aqui está o resultado:

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. [FREE]

O próximo passo na criação do nosso layout xadrez é direcionar os cartões ímpares numerados na terceira coluna e aplicar o 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: 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" (Neste caso, a terceira coluna é a última coluna) com o elemento pseudo "último filho".

Para a segunda coluna (ou no meio), direcione as cartas pares para completar o efeito xadrez. 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.

Exemplo # 2: Adicionando efeitos de focalização com o layout xadrez

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

Para este exemplo, vou usar o layout do tabuleiro de damas e, dessa vez, alterarei as imagens para um dos cartões cinza escuro em preto-e-branco ao passar o mouse sobre o mapa. E vou fazer as imagens para um dos cartões brancos mais brilhantes quando passar o mouse sobre o mapa. Para fazer isso, adicione o seguinte CSS na caixa CSS personalizada (certifique-se de desabilitar ou recortar o outro código para que 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 de reversão às cartas, de modo que, quando você passa o mouse sobre as cartas brancas, elas se tornem cinza escuro e, quando você passa o mouse sobre as cartas mais escuras, elas ficam brancas.

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.

Exemplo # 3: Personalize mapas de linhas

Para o terceiro exemplo, vou aplicar o mesmo fundo escuro e texto branco para os cartões em cada outra linha (e não na coluna). Para fazer isso, você precisa segmentar todas as cartas pares em cada uma das colunas. Vá para o tema "Divi → Opções" e certifique-se de desabilitar ou excluir qualquer código CSS anterior que você tenha adicionado 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:

Example # 4: Criando 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 Google 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ções que aparece, selecione "Inspecionar" (alguns navegadores podem ter "Inspect Element" ou algo similar. Esta vai rolar a janela de ferramentas de desenvolvimento que exibe tanto o HTML e CSS do seu web page. Localize a seção tag que envolve o seu artigo e observe a identificação do item atribuído a ele. é a chave que você deve usar para atingir o seu cartão individual. para o meu exemplo, eu clique com o botão direito e clique em inspecionado para encontrar o ID pós-3466.

Como abaixo:

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í!

Últimos pensamentos

Estes são apenas alguns exemplos dos muitos estilos diferentes que você pode realizar usando esse tipo de segmentação CSS dos cartões de módulo do 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.

Outros tutoriais Divi

Este artigo contém comentários 12
  1. 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?

  2. 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

  3. 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:

  4. 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 eu clico para ter acesso ao artigo, a imagem aparece em grande no início do artigo. artigo. Existe uma maneira de dar o mesmo tamanho que a miniatura ou excluí-la na visão do artigo?
    obrigado
    Patrick

  5. 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

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
23 ações
ação14
chilrear2
Enregistrer7
Whatsapp