Créer une mise en page 3 colonnes responsive sur une page blanche

Pour créer une mise en page sur 3 colonnes avec des div, c'est très simple, il vous suffit de créer une page blanche, sur >Pages puis >Ajouter une page ensuite vous devez cliquer sur le bouton source de l'éditeur.

Puis copier/coller le code suivant

---------

<div class="wrapperok">
<section class="columnsok">

<div class="columnok">
Contenu de la colonne 1
</div>

<div class="columnok">
Contenu de la colonne 2
</div>

<div class="columnok">
Contenu de la colonne 3
</div>

</section>
</div>

-----------

Vous pouvez ensuite modifier les zones contenues des colonnes par vos informations, puis enregistrer votre page.

Vous devez ensuite aller dans la rubrique >Paramètres et >Expert Mode puis copier/coller le code suivant

----------

<style>

.wrapperok {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 20px auto;
}

.columnsok {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}

.columnok {
flex: 1;
margin: 2px;
padding: 10px;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }

}

@media screen and (max-width: 980px) {
.columnsok .columnok {
margin-bottom: 5px;
flex-basis: 40%;
&:nth-last-child(2) {
margin-right: 0;
}
&:last-child {
flex-basis: 100%;
margin: 0;
}
}
}

@media screen and (max-width: 680px) {
.columnsok .columnok {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}

</style>

----------


Cette réponse a-t-elle été utile ?