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
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um Divi produto WooCommerce
- Como alterar a cor do menu entre as páginas no Divi
- Recursos que você não conhece sobre o Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário no 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:
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
Em CSS personalizado, insira "gridcard" na caixa de texto CSS ID. Será uma forma de personalizarmos apenas este módulo de blog.
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:
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:
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:
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:
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.
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.
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:
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:
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
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um produto Divi WooCommerce
- Como alterar a cor do menu entre as páginas Divi
- Como personalizar as grades de um blog com Divi
- Como usar o editor Divi papel em WordPress
- Como criar um controle deslizante Divi em tela cheia
- Como mudar a cor dos menus entre as páginas Divi
- Recursos que você provavelmente não conhece sobre o Divi
- Como usar o Divi Builder no WordPress
- Como usar o módulo de rolagem de vídeo Divi
- Como usar o módulo Divi Builder Flip
- Como adicionar um módulo de depoimento no Divi Builder
- Como usar o módulo de texto Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário Divi
- Como usar o módulo Divi Social Media
- Como usar o módulo de loja no tema WordPress Divi
- Como usar o módulo da barra lateral Divi
- Como usar o módulo Divi Price Table
- Como usar o módulo de título das publicações Divi
- Como adicionar um módulo de vídeo do Divi
- Como usar o módulo de navegação do artigo
- Como usar o módulo de pesquisa Divi
- Como usar o módulo de carteira Divi
- Como usar o módulo person no Divi Builder
- Como usar o módulo de carteira com filtro Divi
- Como usar o módulo deslizante de largura total
- Como usar o módulo de imagem do Divi Builder
- Como usar o módulo de navegação de largura total do Divi Builder
- Como usar o módulo da galeria de imagens
- Como usar o módulo de placa de largura total do Divi Builder
- Como usar o módulo de portfólio de largura total Divi
- Como usar o módulo de cabeçalho Divi de largura total
- Como usar o módulo do contador Divi
- Como usar o controle deslizante de artigos no Divi Builder
- Como usar o módulo Divi Email Optin
Bom dia ! Você sabe se é possível modificar o número de colunas deste objeto Blog?
Eu gostaria que cada cartão fosse exibido na largura total. OBRIGADO !
Bom Dia,
Tentei exibir os posts do blog em "grid" com o id "gridcard" mas não funcionou. Pode me ajudar ?
Bonsoir,
Desculpe pelo atraso na resposta.
Você pode reformular seu pedido, por favor?
Bom Dia,
Sou realmente um iniciante, mas graças aos tutoriais online consegui construir um blog bacana.
Sério, obrigado por este aqui porque eu só tive que copiar os códigos e tudo correu perfeitamente, estou muito feliz com o resultado.
Mais uma vez obrigado, tenha um bom dia 🙂
Eu imploro. Obrigado por nos ler.
Bonsoir,
o blog DIVI, ao lado do nome do autor, coloca a preposição "de" (por exemplo, Stefano). Gostaria de saber se é possível mudar para "de"
Bom Dia,
Sim, é possível alterar este elemento com Divi.
Olá Thierry
Super tutorial
Gostaria de saber se é possível aumentar o tamanho da imagem em destaque
Eu gostaria de aplicar este estilo ao meu blog
obrigado
Bom Dia,
Sim é possivel.
Bom Dia,
Como posso otimizar este layout para celular (tablet)? Não tenho um Schabrettmuster, mas cores diferentes para cada postagem do blog, em uma ordem específica. Claro, isso muda quando você muda para o celular e as cores não são mais associadas às postagens certas ...
Alguém tem uma ideia aqui?
Bom Dia,
Infelizmente, não.
Bom Dia,
Obrigado por este artigo! Eu também gostaria de modificar o "leia mais" no final 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
Oi 🙂 Para alterar o texto do botão “leia mais”, isso acontece em Configurações do blog > Estilo > Leia mais texto. Você pode modificar a tipografia e o texto do "leia mais". No entanto, não sei como fazer um botão com isso. Boa configuração!
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
Bonsoir,
Nosso blog é traduzido automaticamente do francês. Portanto, convido você a escolher o idioma francês no widget de idioma localizado na barra superior do nosso blog e o código CSS correto será exibido.
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:
Oi,
70 outros idiomas.
Olá
Obrigado pelo artigo. Tenho uma grade de apresentação (Divi Theme) tenho miniaturas (fotos) para a apresentação dos artigos, por outro lado quando clico para ter acesso ao artigo, a imagem é mostrada em tamanho grande no início do 'artigo. Existe uma maneira de torná-lo do mesmo tamanho da miniatura ou excluí-lo da visualização do post.
obrigado
Patrick
Bonsoir,
Desculpe, mas o nosso suporte divi está limitado aos nossos tutoriais. Entre em contato com o SVP da Eleganthemes.
Bonjourn, super artigo
Tento a sorte aqui, às vezes passamos semanas em torno de um assunto sem encontrar a resposta, quando o mesmo assunto faz sentido para os outros.
Procuro, portanto, a solução para montar um post grid, composto apenas de visuais, mas de alturas diferentes, para ser mais explícito, que um em cada dois visuais tenha o dobro da altura do visual ao lado.
Uma idéia?
Julien
Olá Julian,
Recomendo que você entre em contato com a equipe DIVI. É mais conveniente neste caso.
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