O módulo de blog do Divi não é muito versátil. Ele tem apenas dois layouts: fullwidth (com a imagem destacada na largura total e o post embaixo) e em grid (com 3 colunas, a imagem em cima e o post embaixo). Eu queria fazer um blog que tivesse a imagem ao lado do conteúdo do post. Procurei no Divi Den e achei esse módulo que estava na horizontal: https://unicorn.divi-den.com/blog/#3-6-blog-divi-layout-kit-unicorn. O módulo já vem com a classe “blog_3” incluída em Configurações Avançadas. Como eu queria a imagem maior do que está nesse módulo, tratei de alterar algumas coisas. O código ficou assim:
.blog_3 #blog-post-inline article {
width: 100% !important;
}
.blog_3 #blog-post-inline a.entry-featured-image-url {
max-width: 100% !important;
height: auto !important;
}
.blog_3 #blog-post-inline a.entry-featured-image-url img {
max-width: 500px !important;
height: auto !important;
}
@media all and (max-width: 980px) {
.blog_3 #blog-post-inline a.entry-featured-image-url {
margin: auto !important;
}
.blog_3 #blog-post-inline a.entry-featured-image-url img {
max-width: 100% !important;
}
}
.blog_3 #blog-post-inline .post-content p {
max-height: none !important;
}Mexi em algumas propriedades que haviam sido incluídas no módulo na aba Avançado > Customize CSS e acrescentei outras.
Titulo
margin-top: 1%;
font-size: 18px !important;
line-height: 127%;
padding-bottom: 17px;Meta da Publicacao
margin-bottom: 21px;Botao Ler Mais
margin-top: 10px;
float: right;
clear: none !important;Além disso, queria modificar o texto do botão “leia mais” para “Leia Mais >>”. Acrescentei o seguinte:
jQuery(function($){
$('.more-link').html('Leia Mais >>');
});É importante notar que em blogs com paginação, quando se muda de página, esse código não adianta, mas como o blog em questão não tinha paginação, não tive nenhum problema.
Aqui está blog na horizontal finalizado:
Customizações da página de login e painel administrativo do WordPress
Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o...
Esconder título na imagem em hover no Divi
O Divi tem uma coisa muita chata que é aparecer o atributo título das imagens quando passa o mouse em cima delas. Tentei resolver com CSS, mas o...
Aviso de Coming Soon quando não há posts no Blog no Elementor
O cliente queria um blog no site, mas não tinha nenhum conteúdo ainda para publicar, por isso, pediu para que aparecesse Coming Soon! no lugar dos...
Obs: no caso da desinstalação do plugin Divi Den Pro, somem também as folhas de estilo próprias, nesse caso “blog-unicorn-divi-layout-kit.css”. Para resolver isso é só copiar as regras referentes ao blog 3. Segue abaixo o código que precisa ser incluído para que o módulo funcione corretamente:
/* 3-6 Blog Divi Layout Kit Css Code */
.blog_3 article h2.entry-title img.avatar {
display: none !important;
}
.blog_3 article {
width: 47% !important;
margin-right: 6% !important;
float: left;
margin-bottom: 45px;
cursor: pointer;
position: relative;
}
.blog_3 article:nth-child(2n+2) {
margin-right: 0 !important;
}
.blog_3 a.entry-featured-image-url {
max-width: 224px;
float: left;
height: 212px;
overflow: hidden;
margin-right: 7%;
margin-bottom: 0 !important;
}
.blog_3 a.entry-featured-image-url img {
height: 100% !important;
width: auto !important;
max-width: none !important;
left: 50%;
transform: translate(-50%, 0);
position: relative;
}
.blog_3 .post-content {
line-height: 161%;
}
.blog_3 .post-content p {
max-height: 70px;
text-overflow: ellipsis;
overflow: hidden;
}
/*Hovers*/
.blog_3 article {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
position: relative;
}
.blog_3 article h2,
.blog_3 article .post-content,
.blog_3 article .post-meta,
.blog_3 article,
.blog_3 article .entry-featured-image-url,
.blog_3 article .entry-featured-image-url img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.blog_3 article:hover .entry-featured-image-url {
transform: rotate(-3deg);
}
.blog_3 article:hover .post-content,
.blog_3 article:hover .post-meta,
.blog_3 article:hover h2.entry-title {
-webkit-animation: fadeIn 1s infinite; /* Safari 4.0 - 8.0 */
animation: fadeIn 1s infinite;
animation-iteration-count: 1;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/*Responsive*/
@media only screen and (max-width: 1390px) {
.blog_3 article {
width: 100% !important;
margin-right: 0% !important;
margin-bottom: 40px;
}
.blog_3 a.entry-featured-image-url {
margin-right: 4.8%;
}
}
@media only screen and (max-width: 767px) {
.blog_3 a.entry-featured-image-url {
max-width: 160px;
height: 152px;
}
}
@media only screen and (max-width: 600px) {
.blog_3 a.entry-featured-image-url {
max-width: 100%;
height: auto;
width: 100%;
}
.blog_3 a.entry-featured-image-url img {
height: auto !important;
width: 100% !important;
max-width: 100% !important;
left: 0;
transform: translate(0, 0);
position: relative;
margin-bottom: 20px;
}
}
