Le widget Appel à l’action est un outil permettant de créer de magnifiques boîtes qui combinent une image, du texte et un bouton. Le widget utilise des animations et des effets CSS pour créer des interactions utilisateur, qui apparaissent lorsque l’utilisateur survole la boîte.

Contenu

Image

  1. Peau : choisissez la peau classique ou la peau de couverture
  2. Disposition :  (uniquement affiché pour le skin classique) Alignez l’image à gauche, à droite ou au-dessus de l’image

Si Classic Skin est choisi, les options suivantes sont disponibles:

Contenu

  1. Élément graphique : choisissez entre Aucun, Image ou Icône pour afficher un élément graphique au-dessus du titre de l’appel à l’action
  2. Si l’image est sélectionnée comme élément graphique:
    Choisissez une image : sélectionnez ou téléchargez une image
    Taille d’image : définissez la taille de l’image, de la miniature à la taille complète, ou définissez une taille personnalisée.
  3. Si Icône est sélectionné comme élément graphique:
    Icône : Sélectionnez une icône dans la bibliothèque FontAwesome.
    Vue : choisissez la vue par icône par défaut ou sélectionnez Empilé ou Encadré.
  4. Titre et description : choisissez le titre et la description qui apparaissent à l’avant du flip box
  5. Balise HTML du titre: définissez la balise HTML du titre sur H1-H6, Div ou Span
  6. Texte du bouton : saisissez le texte à afficher sur le bouton
  7. Lien : saisissez l’URL du lien du bouton. Cliquez sur le rouage Options de lien pour ajouter rel = nofollow au lien ou pour ouvrir le lien dans une nouvelle fenêtre.

Ruban

Titre : saisissez le texte à afficher sur le ruban.

Style

Boîte

  1. Min. Hauteur – Définissez la hauteur minimale de toute la boîte
  2. Alignement – Alignez le contenu à gauche, au centre ou à droite de la boîte
  3. Position verticale – Alignez le contenu en haut, au centre ou en bas de la boîte
  4. Padding – Définit le remplissage du contenu

Image

  1. Min. Largeur : définissez la largeur minimale de l’image
  2. Min. Hauteur : définissez la hauteur minimale de l’image

Contenu

Titre

  1. Typographie : définissez les options de typographie pour le titre
  2. Espacement : définissez la quantité d’espace entre le titre et la description

La description

  1. Typographie : définissez les options de typographie pour le titre
  2. Espacement : définissez la quantité d’espace entre la description et le bouton

Couleurs

  1. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan
  2. Couleur du titre: choisissez la couleur du titre
  3. Couleur de la description: choisissez la couleur de la description
  4. Couleur du bouton: choisissez la couleur du bouton

Bouton

  1. Taille : sélectionnez la taille du bouton, de très petit à très grand
  2. Couleur du texte : choisissez la couleur du texte du bouton
  3. Couleur d’ arrière-plan : choisissez la couleur d’arrière-plan du bouton
  4. Couleur de la bordure : choisissez la couleur de la bordure du bouton
  5. Largeur de la bordure : définir la largeur de la bordure
  6. Rayon de la bordure : définissez le rayon de la bordure pour contrôler l’arrondi des coins

Ruban

  1. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan du ruban
  2. Couleur du texte : choisissez la couleur du texte du ruban
  3. Distance : déplacez le curseur entre 0 et 50 pour définir la distance du ruban.
  4. Typographie : définissez les options de typographie pour le titre du ruban
  5. Ombre de boîte : définissez les paramètres d’ombre de boîte pour le ruban

Effets de survol

  1. Animation séquencée : choisissez si l’animation des éléments de texte apparaît en séquence ou en une seule fois
  2. Animation de survol : choisissez l’animation de survol pour l’image: effectuez un zoom avant ou arrière, ou déplacez-vous vers la gauche, la droite, le haut ou le bas

Les éléments suivants peuvent être définis indépendamment pour les états Normal et Hover

  1. Couleur de superposition : choisissez la couleur de superposition de l’image
  2. Filtres CSS : définissez le flou, la luminosité, le contraste et la saturation de l’image
  3. Mode de fusion: (pour l’état normal) Définissez un mode de fusion
  4. Durée de transition (ms) : (Pour l’état de survol) Définissez la durée de l’effet de survol

Si Cover Skin est choisi, les options suivantes sont disponibles:

Contenu

  1. Élément graphique : choisissez entre Aucun, Image ou Icône pour afficher un élément graphique au-dessus du titre de l’appel à l’action
  2. Si l’image est sélectionnée comme élément graphique:
    Choisissez une image : sélectionnez ou téléchargez une image
    Taille d’image : définissez la taille de l’image, de la miniature à la taille complète, ou définissez une taille personnalisée.
  3. Si Icône est sélectionné comme élément graphique:
    Icône : Sélectionnez une icône dans la bibliothèque FontAwesome.
    Vue : choisissez la vue par icône par défaut ou sélectionnez Empilé ou Encadré.
  4. Titre et description : choisissez le titre et la description qui apparaissent à l’avant du flip box
  5. Balise HTML du titre: définissez la balise HTML du titre sur H1-H6, Div ou Span
  6. Texte du bouton : saisissez le texte à afficher sur le bouton
  7. Lien : saisissez l’URL du lien du bouton. Cliquez sur le rouage Options de lien  pour ajouter rel = nofollow au lien ou pour ouvrir le lien dans une nouvelle fenêtre.

Ruban

Titre : saisissez le texte à afficher sur le ruban.

Style

Boîte

  1. Min. Hauteur : définissez la hauteur minimale de toute la boîte
  2. Alignement : alignez le contenu à gauche, au centre ou à droite de la boîte
  3. Position verticale : alignez le contenu en haut, au centre ou en bas de la boîte
  4. Padding : définissez le remplissage du contenu

Contenu

Titre

  1. Typographie : définissez les options de typographie pour le titre
  2. Espacement : définissez la quantité d’espace entre le titre et la description

Couleurs

  1. Couleur du titre: choisissez la couleur du titre
  2. Couleur du bouton: choisissez la couleur du bouton

Bouton

  1. Taille : sélectionnez la taille du bouton, de très petit à très grand
  2. Typographie : définissez les options de typographie pour le texte du bouton
  3. Couleur du texte : choisissez la couleur du texte du bouton
  4. Couleur d’ arrière-plan : choisissez la couleur d’arrière-plan du bouton
  5. Couleur de la bordure : choisissez la couleur de la bordure du bouton
  6. Largeur de la bordure : définir la largeur de la bordure
  7. Rayon de la bordure : définissez le rayon de la bordure pour contrôler l’arrondi des coins

Ruban

  1. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan du ruban
  2. Couleur du texte : choisissez la couleur du texte du ruban
  3. Distance : déplacez le curseur entre 0 et 50 pour définir la distance du ruban.
  4. Typographie : définissez les options de typographie pour le titre du ruban
  5. Box Shadow : définissez le  boîte ombre  paramètres du ruban

Effets de survol

Contenu

  1. Animation de survol : choisissez l’animation de survol pour l’image: effectuez un zoom avant ou arrière, ou déplacez-vous vers la gauche, la droite, le haut ou le bas
  2. Durée de l’animation : définissez le temps nécessaire à l’animation pour se terminer
  3. Animation séquencée : choisissez si l’animation des éléments de texte apparaît en séquence ou en une seule fois

Contexte

  1. Animation de survol : choisissez l’animation de survol pour l’image: effectuez un zoom avant ou arrière, ou déplacez-vous vers la gauche, la droite, le haut ou le bas
  2. Couleur de superposition : choisissez la couleur de superposition pour normal et survol
  3. Filtres CSS : définissez le flou, la luminosité, le contraste et la saturation de l’image
  4. Mode de fusion: (pour l’état normal) Définissez un mode de fusion pour l’image
  5. Durée de transition (ms) : (Pour l’état de survol) Définissez la durée de l’effet de survol

Avancée

Définissez les options avancées applicables à ce widget

est-ce que cela