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;
}
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 !