Comment afficher ses billets de blog dans des colonnes ?

Etape 1 : Ouvrez l’éditeur de HTML/CSS code

Cliquez sur « Thème » en haut, puis cliquez sur ‘ »Modifier HTML/CSS » en bas à gauche.

Etape 2 : Ajoutez le code CSS

Sur la gauche, cliquez sur « main.less » (ou « main-styles.css » pour les thèmes plus anciens) pour accéder au fichier CSS de votre site. À droite, ajoutez le code ci-dessous au fichier CSS :

​/* Blog Live */
.wsite-blog-index #wsite-content {
display:flex;
flex-wrap:wrap;
}
.wsite-blog-index .blog-post {
width:50%;
padding:1em;
box-sizing:border-box;
}
/* Post Live */
.wsite-blog-post .blog-post {
width:100%;
}
/* Blog Editor */
.wsite-blog-index .blog-body {
display: flex;
flex-wrap: wrap;
}
/* Blog Post */
.wsite-blog-post .blog-body {
display:block;
flex-wrap:nowrap;
}
@media screen and (max-width:767px) {
.blog-post {
width:100%;
}
}

Etape 3 : Ajustez le code CSS

​Nous allons maintenant ajustez le code CSS selon le nombres de colonnes que vous souhaitez sur votre page de blog. Pour ce tutoriel, nous voulions que les articles apparaissent sur 2 colonnes, donc nous avons mis le code ci-dessous (prise de l’étape précédente) à 50% comme indiqué en bleu. Cela signifie que les billets de blog dans chaque rangée occupera 50% de la largeur totale allouée. Si vous voulez que vos billets de blog apparaissent 3 colonnes, définissez le code ci-dessous à 33,33 % . Si vous voulez 4 colonnes, définissez le code à 25%, et ainsi de suite. Cependant je vous conseille de rester raisonnable, pour un affichage optimal sur les petits écrans comme les smartphones n’allez pas au dessus de 3 colonnes.​.wsite-blog-index .blog-post {
width:50%;
padding:1em;
box-sizing:border-box;
}

Sauvegardez puis publier votre site. Vos articles sont désormais afficher dans plusieurs colonnes !
J’espère que ce nouveau tutoriel vous a plu, n’hésitez pas à me dire en commentaire quel tuto vous aimeriez voir sur le blog. Je vous ferais un article si votre demande rentre dans mes cordes, à bientôt les Angels !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut