Avoir un footer en colonne sur e-monsite

Ne fonctionne qu'avec les versions Pro d'e-monsite.

Afin de réaliser notre template de footer sur colonne, nous allons utiliser le framework CSS et JS d'e-monsite : EMS Framework !

Il fonctionne (comme la plupart des framework) en système de grille, c'est à dire avec des lignes (.row) et des colonnes (.column).

Dans notre exemple nous allons recréer le footer d'EMS Tricks en 4 colonnes.

Sachant cela voici le code HTML à coller dans Réglages > Zones éditables > Zone en bas de votre site :

<div class="row">
    <div class="column column12"></div>
</div>
<hr />
<div class="row">
    
    <div class="column column3 flex-col flex-center">
        <div class="flex-col flex-center">
            <img alt="Mon logo de site" height="auto" src="le_lien_de_mon_image" width="200px" />
        </div>
    </div>

    <div class="column column3">
        <p class="footer-title">Ma première colonne</p>

        <div class="flex-col-dir">
            <a href="url_de_mon_lien">Un lien</a> 
            <a href="url_de_mon_lien">Un lien</a> 
            <a href="url_de_mon_lien">Un lien</a>
        </div>
    </div>

    <div class="column column3">

        <div class="flex-col-dir">
        <p class="footer-title">Ma deuxième colonne</p>
            <a href="url_de_mon_lien">Un lien</a>
            <a href="url_de_mon_lien">Un lien</a>
            <a href="url_de_mon_lien">Un lien</a>
        </div>
    </div>

    <div class="column column3">
        <p class="footer-title">Ma troisièm colonne</p>
        <a href="url_de_mon_lien">Un lien</a>
    </div>

</div>

<hr />
<div class="row">
    <div class="column column12"></div>
</div>

N'oubliez pas de remplacer les valeurs par les votres ou à modifier la structure en rajoutant ou en supprimant des liens !

Comme vous pouvez le remarquer, nous utilisons les class du framework d'e-monsite, mais nous avons également rajouté les notres afin de personnaliser un peu plus ce footer tout en restant minimaliste !

On vous donne notre code CSS mais à vous de personnaliser comme vous le souhaitez votre footer !

Voici le code CSS à coller dans les zones prévues à cet effet :

/*Class de mise en page*/
    .flex-center {
    align-items: center;
    }
    .flex-col {
    display: flex;
    }
    .flex-col-dir {
    display:flex;
    flex-direction: column;
}
/*Le style des traits*/
    #bottom-site hr {
    border-top: 1px solid #f9c543;/*Changer la couleur*/
    }
/*La couleur du texte*/
    #bottom-site a {
        color: rgb(152, 152, 152);
    }
    #bottom-site a:hover {
        color: #fff;
    }
/*Les titres de colonnes*/
    #bottom-site .footer-title {
        font-size: 17px;
        color: #f9c543;
    }

Et voilà notre template de footer est complet ! Montrez nous les votre en nous les envoyant ici ! On a hâte de les voir ! :)