Comment faire le thème Divi vedette Images plus petites sur votre Page de Blog

Tout d’abord je tiens à remercier Eileen Lonergan pour me pointant dans la bonne direction avec son excellent post – Comment faire le thème Divi vedette Images plus petites sur votre Page de Blog. S’il vous plaît jeter un oeil à l’original pour obtenir plus d’information.

Malheureusement ou pas, le thème de la Divi utilise des images vignettes énormes lors de l’affichage de votre blog ou lorsque vous utilisez le module de blog dans le générateur de Divi.

Comme Eileens, mon client voulait avoir blog post inscription pour avoir plus d’un look traditionnel avec des images plus petites sur la gauche et le texte sur la droite.

Pour ce faire, vous devez allez dans votre panneau d’Options de thème Divi, dans la région CSS, placez ce code :

.et_pb_post {
    margin-bottom: 100px;
}
.et_pb_post a img {
    height: auto;
    float: left;
    width: 200px;
    left: 0;
    margin-right: 14px;
    margin-bottom: 10px;
}
@media only screen and (max-width: 980px) {
    .et_pb_post a img {
        float:none;
        width:100%;
        height: 300px;
    }
}

La majorité du code ci-dessus est le même que Eileen avait mis au point avec seulement quelques modifications.

• La plupart des postes avait très peu de texte si ils est apparu décalés à travers l’écran. Ajout de la ligne 2 (margin-bottom : 100px;) dans le code ci-dessus a résolu ce problème.
• J’ai changé la ligne 9 légèrement, de padding-right : 14px ; à la margin-right : 14px;. À l’aide de rembourrage ont bien fonctionné pour le module de blog Divi mais a laissé un écart entre l’image et le cadre sur la grille de blog normal. En utilisant une marge a résolu le problème.

Tout le reste de l’avis sur le post de Eileen est exactement le même.

Heureusement, j’ai maintenant un client très heureux.