Images Animées (Bouton)

Sections

Images Animées (Bouton)

Ce tutoriel s'applique à la version la plus récente du Phantom Thème. Veillez à mettre à jour votre thème 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 +.

Premium & Master +

1°) Paramètres Généraux

 

  • Titre : Définir le Titre de la section
  • Seo du Titre : Définir le Hn du Titre de la section (de H1 à p)
  • Texte : Définir le texte descriptif de la section placé en dessous du titre
  • Afficher le séparateur : Afficher un une bordure horizontale entre les paramètres ci-dessus et le reste de la section
  • Couleur du Séparateur : Définir la couleur du séparateur
  • Largeur du séparateur : Définir la largeur du séparateur, celui-ci sera toujours centré en pourcentage
  • Épaisseur du Séparateur : Définir l'épaisseur du séparateur en pixel
  • Hauteur des Boxes : Définir la hauteur globale des blocs affichés. (La dimension recommandée de vos dépendra de ce paramètre

2°) Paramètre Bloc

1°) Largeur du bloc

Ce paramètre permet de gérer la largeur de chaque bloc indépendamment des autres.

Plusieurs exemples possibles :
  • 4 Blocs : Tous à 25 %
  • 3 Blocs : Tous à 33.33% ou par exemple 25% pour le 1er, 50% pour le 2ème et 25% pour le troisième

Choisissez ainsi votre disposition par de bloc par rapport à ces largeurs. Sur mobile, chaque bloc prendra 100% de largeur.

2°) Paramètre Globaux

  • Image : Définir l'image du bloc. Sachant que la hauteur des blocs se définit de manière générale en "rem", un "rem" = 16px, vous pouvez définir votre hauteur de 5rem en 5 rem. Pour une hauteur globale de 30rem > 480px sera la hauteur recommandées de votre image. Ensuite pour la largeur, définissez la en fonction de la proportion du bloc. Je recommande cependant des images carrées ou plus haute que large pour conserver un ratio adapté.
  • Lien : Définir le lien de redirection du bouton
  • Titre : Définir le titre du bloc affiché
  • Seo du Titre:  Définir le Hn du Titre de la section (de H2 à p)
  • Texte : Définir le texte du bloc
  • Texte du Lien : Définir le texte apparent dans le bouton. Pour afficher le bouton le paramètre Lien doit également être rempli

3°) Paramètres de disposition du bloc

  • Position du Titre : Définir la position verticale du titre en partant du haut du bloc (de 0 à 50%)
  • Position du Texte & Lien : Définir la position verticale du texte & du lien en partant du bas du bloc (de 0 à 50%)
  • Afficher Texte & Bouton seulement au survol: Permet de cacher le Texte et le Bouton lorsque le bloc n'est pas survolé (Bureau)
  • Souligner le Titre au survol : Fait apparaître un séparateur en dessous du titre avec une animation sur la largeur 
  • Réhausser le Titre au survol : Définir le réhaussement de 10% vers le haut du Titre lors du survol du bloc

4°) Couleurs

  • Couleur du Titre : Définir la couleur du Titre 
  • Couleur du Texte : Définir la couleur du Texte
  • Couleur de l'overlay : Définir la couleur de l'arrière plan du bloc
  • Opacité de l'overlay : Définir la transparence de l'overlay 
  • Couleur de l'overlay au survol : Définir la couleur de l'arrière plan du bloc au survol
  • Opacité de l'overlay au survol : Définir la transparence de l'overlay au survol
  • Taille du Titre : Définir la taille du Titre