Personnaliser le haut de la page d'accueil
Cette page vous donne des exemples de code HTML pour personnaliser le haut de votre page d'accueil
Ce code peut être recopié dans le source HTML au début de votre page d'accueil
Une image simple, en 100%
Il faut simplement insérer une image en haut de la zone de texte.
Au minimum, pour que le rendu soit de bonne qualité il faut que cette image ait une largeur de 1920 pixels
Attention si vous insérez l'image avec l'éditeur de texte il ne faut pas renseigner la largeur et la hauteur
<img src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" />
Une image en 100%, avec une accroche en texte riche
Voici le texte à insérer
En vue mobile, l'image reste en 100%
<div class="landing-img"> <div class="accroche"> <div class="container"> <div class="shadow message"> <h2>Bienvenue sur notre boutique</h2> <p><a class="btn" href="/bv.stp?ACTION=ACCUEIL">Commander</a></p> </div> </div> </div> <img src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" /></div>
Un carrousel, avec plusieurs zones défilantes en 100%
Vous pouvez copier ce code, puis modifier les images dans l'éditeur de texte, sans renseigner les dimensions.
<div class="pnl-carrousel" data-autoplay="true" data-autoplay-timeout="9000" data-controls="false" data-items="1" data-slideby="page"> <div><img alt="" src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" /></div> <div><img alt="" src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" /></div> </div>
Des contenus différents en vue desktop ou mobile
Vous pouvez utiliser les classes css hide_mobile et display-mobile pour identifier des zones qui seront affichées, ou pas, en vue mobile.
L'exemple ci-dessous affiche une image avec accroche en vue desktop, et une image simple en vue mobile
<div class="display-mobile"> <img src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" /> </div> <div class="landing-img hide_mobile"> <div class="accroche"> <div class="container"> <div class="shadow message"> <h2>Bienvenue sur notre boutique</h2> <p><a class="btn" href="/bv.stp?ACTION=ACCUEIL">Commander</a></p> </div> </div> </div> <img src="https://cdn.socleo.org/media/A1469723372149/template1-2-1.jpg" /></div>