Chez Papinou - Skins GuppY

 
Vous êtes ici :   Accueil » Diaporama responsive en header
    Imprimer la page...
Texte à méditer :   GuppY 6 ???   Il y a moins bon mais c'est plus cher ! ! !   
Texte à méditer :   S'il n'y a pas de solution, c'est qu'il n'y a pas de problème. Devise Shadok   
Texte à méditer :   Utilisateur de GuppY, je suis membre de l' asso freeGuppY ... et vous ? ? ?   
Texte à méditer :   Pourquoi vouloir compliquer ?  Essayez GuppY 6  tout simplement  !!!   
Texte à méditer :   N'oubliez pas de protéger l'accès à  l'admin de GuppY 6.   
Texte à méditer :   Votre premier réflexe après le téléchargement de GuppY 6 ?   Lire la documentation  ! ! !   

Contact

Diaporama responsive en header

Pour mettre un diaporama responsive en header de votre site, voici le code que j'ai utilisé dans une boite libre:
 

<div style="text-align:center;width:100%;margin:0 auto;">
<div class="fotorama" data-arrows="false" data-autoplay="8000" data-nav="false" data-ratio="1920/540" data-shuffle="true" data-transition="crossfade" data-width="100%">
<!-- ↑ The same as data-ratio="16/9" or data-ratio="1.3333333333". -->
<img src="skins/skn5_papinou04/img/header00.jpg" /> 
<img src="skins/skn5_papinou04/img/header01.jpg" /> 
<img src="skins/skn5_papinou04/img/header02.jpg" /> 
<img src="skins/skn5_papinou04/img/header03.jpg" /> 
<img src="skins/skn5_papinou04/img/header04.jpg" /> 
<img src="skins/skn5_papinou04/img/header05.jpg" /></div>
</div>



J'ai mis six images dans le répertoire img d'une skin, attention à ne pas ralentir l'affichage des pages de votre site, à optimiser vos images pour les alléger au maximum, à refaire les liens <img src="skins/skn5_papinou04/img/header00.jpg" /> correspondant à vos images.boite_header.jpg

Vous devez modifier  data-ratio="1920/540" pour correspondre à votre largeur de site. pour un site en 1024px, vous pouvez mettre data-ratio="1000/280", pour un site en 1280px, ce sera data-ratio="1280/350", en 1600px data-ratio="1600/400", bien sur vous pouvez diminuer la hauteur du bandeau suivant vos images.

Une obligation :  toutes vos images doivent avoir la même taille pour la cohérence de l'ensemble.

Pour cette boite libre FB8518 sur mon site, je n'affiche pas le titre, elle a pour titre: §header.

Pour l'affichage de la boite libre sur votre page, vous devez la sélectionner dans config boites sur la première ou la seconde ligne pour Boites en haut, suivant votre configuration.
 


En suivant ce tutoriel, vous devez avoir le même affichage que sur mon site.

Pour toutes les questions concernant cet article, merci de poster sur mon forum, rubrique Plugins, forks, astuces GuppY.
 


Date de création : 11/09/2015 @ 15:11
Dernière modification : 14/01/2021 @ 21:35
Catégorie : Astuces GuppY - GuppY 5
Page lue 11854 fois