Avoir un footer en colonne sur e-monsite
- Par ems-tricks
- Le 19/06/2017
- Dans Tricks CSS pour site e-monsite
- 7 commentaires
Après plusieurs demandes de votre part, EMS Tricks a le plaisir de vous montrer comment avoir un footer (pied de page) en colonne !
Utilisation d'EMS Framework
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 !
Des class et du CSS
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 ! :)
css webdesign articles responsive footer colonnes e-monsite
Articles similaires
-
Personnaliser la hauteur du menu de navigation
EMS Tricks vous donne la solution pour personnaliser à ses souhaits la hauteur du menu de navigation des thèmes Smart d'e-monsite.
-
Aligner les boutons "Lire la suite" pour les articles du blog
L'apparence des blocs du blog changent en fonction du contenu et le bouton "Lire la suite" les suit ! Voici comment toujours aligner ce bouton avec EMS Tricks !
