Sélectionner une page

Vous avez peut être remarqué que l’affichage de mes articles sur la page d’accueil est plutôt simpliste. Pour arriver à ce résultat, j’ai simplement modifié quelques paramètres CSS sur mon module « BLOG » disponible dans le DIVI builder.

Voici donc un petit tutoriel pour arriver au même résultat !

NB : Pour changer la traduction « Lire Plus » ou « Read More » – Consultez cette article.

Ajoutez le CSS dans votre Thème Enfant

Copier le code ci-dessous et venez le coller dans votre feuille de style « style.css » de votre thème enfant.

/*---------------------------------*/
/*---MODULE BLOG - CUSTOMISATION---*/
/*---------------------------------*/

/* Cacher l'excerpt (résumé) */
.blog-grid-home .et_pb_post p {
    display: none !important;
}

/* Optimiser le padding autour du titre */
.blog-grid-home .et_pb_blog_grid .et_pb_post {
    padding: 10px 20px 15px 20px;
}

/* Customisation du lien "Read More" */
.blog-grid-home .et_pb_post a.more-link {
    text-transform:capitalize;
    font-weight: 600;
    color: black;
    background: white;
    float: left;
    border: solid 1px;
    border-color: #d8d8d8 !important;
    padding: 3px 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    transition: 0.5s ease-out;
}

/* Hover : Customisation du lien "Read More" */
.blog-grid-home .et_pb_post a.more-link:hover {
    background: #d8d8d8;
}

Ajoutez la classe CSS dans votre Module BLOG

Ouvrez le module de BLOG sur lequel vous souhaitez réaliser ces modifications. Cliquez ensuite sur personnaliser CSS et indiquez la class suivante : blog-grid-home

Changer la class CSS sur le module de BLOG du thème wordpress DIVI

Voilà, votre module « BLOG » devrait maintenant ressembler à celui de la page d’accueil de Divi Rocket ! À vous de venir faire vos modifications pour obtenir le résultat escompté.

N’hésitez pas à partager vos réalisations et me poser vos questions.