Diaporama

Sections

Diaporama

Ce tutoriel s'applique à la version la plus récente du Phantom Thème. Veillez à mettre votre thème à jour en suivant le tutoriel vidéo disponible sur votre Espace Client.

Chaque paramètre énoncé dans le pack Classique se retrouvera dans le Pack Premium et Master +.

Chaque paramètre énoncé dans le Pack Premium se retrouvera dans le Pack Master +.

Classique & Premium

1°) Paramètres Image Général

  • Hauteur de la diapositive (Écran supérieur à 500 pixels) : 
    • Petite : Définir la hauteur générale du diaporama sur 430 pixels 
    • Grande : Définir la hauteur générale du diaporama sur 600 pixels 
    • Pleine Hauteur d'écran : Définir la hauteur générale du diaporama sur 950 pixels 
    • Adapter à la 1ère image : Ce paramètre définir la hauteur générale du diaporama sur tout type d'écran en fonction de la hauteur de la 1ère image. Cette hauteur se redéfinira automatiquement suivant la taille de l'écran (le paramètre Hauteur du Diaporama Mobile devient alors inutilisé).
  • Hauteur du diaporama Mobile (Écran inférieur à 500 pixels): Permet de définir la hauteur générale du diaporama pour écran mobile (sauf si le paramètre Hauteur de la diapositive > Adapter à la 1ère image  est sélectionné)
  • Rotation automatique des diapositives :  Permet de faire défiler automatiquement les diapositives
  • Cacher le bouton Play/Pause : Activé, cela cachera les boutons d'action sur le défilement du diaporama
  • Changer de diapositive toutes les : Choisir la vitesse de défilement des diapositives

2°) Style du Diaporama

  • Style de la navigation :
    • Compteur numéroté (texte) :

    • Compteur en points :

  • Style des flèches :
    • Par défaut :

    • Sur les côtés :

    • Icônes sur les côtés : 

  • Style de transitions :
    • Glisser :

    • Fondu :

 

3°) Taille des polices

  • Tailles du Titre : Définir la taille des titres des diapositives sur des écrans supérieurs à 500 pixels
  • Tailles du Pré-Titre : Définir la taille des pré-titres des diapositives sur des écrans supérieurs à 500 pixels
  • Tailles du Sous-Titre : Définir la taille des sous-titres des diapositives sur des écrans supérieurs à 500 pixels
  • Tailles du Titre (Mobile) : Définir la taille des titres des diapositives sur des écrans inférieurs à 500 pixels
  • Tailles du Pré-Titre (Mobile) : Définir la taille des pré-titres des diapositives sur des écrans inférieurs à 500 pixels
  • Tailles du Sous-Titre (Mobile) : Définir la taille des sous-titres des diapositives sur des écrans  inférieurs à 500 pixels
  • Afficher le Texte sous l'image (Mobile) : 
    • Cochée :

    • Décochée : 

 

4°) Bloc

1°) Paramètre Image

  • Image : Définir l'image sur les dimensions d'écran supérieures à 500 pixels. 
Comment définir la taille de mon image bureau ?

Pour cela, référez-vous tout d'abord à la hauteur choisie pour le diaporama : 

      • Pour la Hauteur de la diapositive > Petite : Taille recommandée de 1600x430px (Si parallax : 1600x700px)
      • Pour la Hauteur de la diapositive > Grande : Taille recommandée de 1600x600px (Si parallax : 1600x900px)
      • Pour la Hauteur de la diapositive > Pleine Hauteur d'écran : Taille recommandée de 1600x950px (Si parallax : 1600x1250px)
      • Pour la Hauteur de la diapositive > Adapter à la 1ère image : Taille recommandée de 1600px de largeur. Vis à vis de la hauteur, tout dépend du rendu visuel que vous souhaitez, à savoir que la hauteur du diaporama se fixera sur le ratio de votre 1ère image (ex : 1600x900px > Ratio de 1600/900 = 1,77...) pour toutes tailles d'écran
  • Recadrage de l'image : 
    • Couvrir : L'image remplira la zone disponible afin de couvrir toute la surface, quitte à ce qu'une partie de l'image soit ne sois pas affichée

    • Contenir : Suivant les dimensions de l'image, celle-ci sera affichée de manière à ce que sa plus grande longueur (largeur ou hauteur) remplisse l'espace disponible. Ceci implique forcément l'autre longueur ne remplisse pas l'espace

  • Image Mobile : Définir l'image sur les dimensions d'écran inférieures à 500 pixels. 
Comment définir la taille de mon image mobile ?

Pour cela, référez-vous tout d'abord à la hauteur mobile choisie pour le diaporama : 

      • Si la Hauteur de la diapositive > Adapter à la 1ère image est sélectionnée  : Taille recommandée de 1600px de largeur. Vis à vis de la hauteur, tout dépend du rendu visuel que vous souhaitez, à savoir que la hauteur du diaporama se fixera sur le ratio de votre 1ère image (Ex : 1600x900px > Ratio de 1600/900 = 1,77...) pour toutes tailles d'écran
      • Sinon : Taille recommandée de 500px de largeur. Pour la hauteur, cela dépendra de la Hauteur du diaporama Mobile que vous aurez définit au préalable. Fixe votre hauteur d'image sur celle-ci de manière à obtenir un résultat adéquat, et ce pour toutes vos diapositives.
  • Recadrage de l'image sur Mobile : Même chose que sur Pc
  • Position de l'image : Ce paramètre intervient lorsque l'image ne peut être affichée entièrement dans l'espace disponible. (Ex: vous définissez Hauteur de la diapositive > Petite ce qui signifie que votre diaporama est fixé à 430 pixels, mais votre image possède 800 pixels de hauteur. Grâce à ce paramètre vous pourrez définir si il faut afficher le haut / le centre / le bas de l'image. Même chose pour la largeur)

  • Afficher l'image avec un effet Parallax : L'effet parallax se traduit par un affichage progressif de l'image lors du défilement de la page. Pour qu'il fonctionne, votre taille de diaporama DOIT être plus petite que la hauteur de votre image. Dans le cas contraire, celle-ci ne remplira tout l'espace visible lors du défilement et un arrière-plan de la couleur de votre section apparaîtra. Ainsi, lorsque cette option est activée, assurez-vous de définir une image possédant + ou - 400 à 500 pixels de plus que la hauteur du diaporama.
  • Lien de l'image : Permet de rendre l'image cliquable en redirigeant vers le lien choisit

2°) Textes

  • Texte avant Titre : Définir un texte avant le titre de la diapositive 

  • Titre : Définir le titre de la diapositive

  • Seo du Titre : Définir le Hn du titre de la diapositive (allant de H1 à p)
  • Sous-Titre : Définir le sous-titre de la diapositive 

 

3°) Couleurs

  • Couleur du Pré-titre : Définir la couleur du Pré-Titre de la diapositive
  • Couleur du Titre :  Définir la couleur du Titre de la diapositive
  • Couleur du Sous-Titre : Définir la couleur du Sous-Titre de la diapositive
  • Arrière plan du Contenu : Définir la couleur de l'arrière plan englobant à la fois les Textes et les Boutons
  • Opacité Arrière plan Contenu : Définir la transparence de l'Arrière plan du Contenu
  • Épaisseur Arrière Plan Contenu : Définir le padding (marge interne entre l'arrière plan et son contenu) équivalent pour chaque côté 
  • Arrière plan Texte : Définir la couleur de l'arrière plan englobant uniquement les Textes 
  • Opacité Arrière plan Textes : Définir la transparence de l'Arrière plan du Textes
  • Épaisseur Arrière Plan Textes : Définir le padding (marge interne entre l'arrière plan et son contenu) équivalent pour chaque côté 

 

4°) Boutons 

  • 1er Bouton : Le style du bouton sera celui du bouton primaire
  • 2ème Bouton : Le style du bouton sera celui du bouton secondaire
  • Textes (1er & 2ème boutons) : Définir le texte affiché dans le bouton
  • Liens (1er & 2ème boutons) : Définir le lien de redirection du bouton

Remarque : Laissez les champs Textes et Boutons vides permettra de ne pas afficher d'encadré de contenu superposé à l'image

5°) Disposition

  • Alignement vertical du contenu : Définir la position du contenu de la diapositive sur l'axe vertical
  • Position du Texte : Définir la position du contenu de la diapositive sur l'axe horizontal
  • Alignement du Texte : Définir l'alignement du texte
  • Largeur du Contenu : Définir la largeur du contenu, 100% étant la taille totale disponible du diaporama 

 

  

 Master +

1°) Vidéo

Remarque : Lorsque vous changez un paramètre, ceux-ci ne sont pas encore intégré de manière à se recharger automatiquement. Il faudra donc recharger le cadre en faisant un clic droit sur la zone (prend moins de temps) pour voir vos modifications prendre effet :

  • Vidéo Youtube : Définir le lien de votre vidéo Youtube à afficher sur la diapositive
  • Couleur du bouton : Définir la couleur du bouton Play / Pause

  • Vidéo Lecture Auto : Définir si la vidéo doit se lancer automatiquement au chargement de la page
  • Afficher la vidéo en pleine largeur : Définir si la vidéo doit s'adapter à la largeur disponible du diaporama
  • Vidéo en boucle : Définir si la vidéo doit se jouer en boucle une fois terminée
  • Afficher le bouton Play / Pause : Définir si le bouton Play / Pause doit être affiché (utile lorsque le paramètre N'afficher que la vidéo est coché)
  • N'afficher que la vidéo : Définir si les Images, les Textes et les Boutons doivent s'afficher
  • Cacher le texte quand la vidéo est jouée :