Widget d'appel à l'action (Pro)

Les Widget d'appel à l'action est un outil pour créer de beaux cadres 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 passe la souris sur la boîte.

Le contenu

Photo

1. Peau: Choisissez un masque classique ou un masque de couverture
2. La conception: (Uniquement affiché pour le skin classique) Alignez l'image à gauche, à droite ou au-dessus de l'image

Oui Peau classique Vous choisissez les options suivantes sont disponibles:

Le contenu

1. Élément graphique: Choisissez parmi Aucun, Image ou Icône pour afficher un élément graphique au-dessus du titre de l'incitation à l'action
2. Si Image est sélectionné comme élément graphique:
   Choisissez une image: Sélectionnez ou téléchargez une image
   Taille de l'image: Définissez la taille de l'image, de la miniature à la pleine, ou définissez une taille personnalisée.
3. Si Icon est sélectionné comme élément graphique:
   Icône: Sélectionnez une icône dans la bibliothèque FontAwesome
   Regarder: Choisissez l'affichage par icônes par défaut ou sélectionnez Empilé ou Encadré.
4. description du titre: Choisissez le titre et la description qui apparaissent au début de la liste déroulante
5. Balise HTML de titre: Définit la balise HTML du titre sur H1-H6, Div ou Span
6. Bouton de texte: Saisissez le texte à afficher sur le bouton
7. Relier: Saisissez l'URL du lien du bouton. Cliquez sur l'engrenage Options de lien pour ajouter rel = nofollow au lien ou pour ouvrir le lien dans une nouvelle fenêtre.

Bandeau

Qualification: Saisissez le texte à afficher sur le ruban.

Style

Boîte

1. Hauteur min. - Réglez la hauteur minimale de toute la boîte
2. Alignement - Aligner le contenu à gauche, au centre ou à droite de la boîte
3. Position verticale - Alignez le contenu sur le haut, le centre ou le bas de la boîte
4. Farcis - Définir le remplissage du contenu

1. Largeur min.: Définit la largeur minimale de l'image
2. Hauteur min.: Définit la hauteur minimale de l'image

Le contenu

Qualification

1. Typographie: Définit les options de police pour le titre
2. Espacement: Définit la quantité d'espace entre le titre et la description

La description

1. Typographie: Définit les options de police pour le titre
2. Espacement: Définit la quantité d'espace entre la description et le bouton

Couleurs

1. Couleur de l'arrière plan: Choisissez la couleur d'arrière-plan
2. Couleur du titre: Choisissez la couleur du titre
3. Description Couleur: 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. Antécédents Couleur: Choisissez la couleur de l'arrière-plan du bouton
4. Couleur de la bordure: Choisissez la couleur de la bordure du bouton
5. Largeur de la bordure: Définit la largeur de la bordure
6. Rayon du bord: Définit le rayon de la bordure pour contrôler l'arrondi des coins

Bandeau

1. Couleur de l'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 régler la distance de bande.
4. Typographie: Définit les options de typographie pour le titre de la bande
5. Ombre de la boîte: Définit le paramètre d'ombre de la boîte pour le ruban

Effets de défilement

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 défilement: Choisissez l'animation de défilement de l'image: 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 configurés indépendamment pour Normal y Flotter Etat

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

Oui Couvrir la peau est choisi, les options suivantes sont disponibles:

Le contenu

1. Élément graphique: Choisissez parmi Aucun, Image ou Icône pour afficher un élément graphique au-dessus du titre de l'incitation à l'action
2. Si Image est sélectionné comme élément graphique:
   Choisissez une image: Sélectionnez ou téléchargez une image
   Taille de l'image: Définissez la taille de l'image, de la miniature à la pleine, ou définissez une taille personnalisée.
3. Si Icon est sélectionné comme élément graphique:
   Icône: Sélectionnez une icône dans la bibliothèque FontAwesome
   Regarder: Choisissez l'affichage par icônes par défaut ou sélectionnez Empilé ou Encadré.
4. description du titre: Choisissez le titre et la description qui apparaissent au début de la liste déroulante
5. Balise HTML de titre: Définit la balise HTML du titre sur H1-H6, Div ou Span
6. Bouton de texte: Saisissez le texte à afficher sur le bouton
7. Relier: Saisissez l'URL du lien du bouton. Cliquez sur l'engrenage Options de lien pour ajouter rel = nofollow au lien ou pour ouvrir le lien dans une nouvelle fenêtre.

Bandeau

Qualification: Saisissez le texte à afficher sur le ruban.

Style

Boîte

1. Hauteur min.: Définit la hauteur minimale de toute la boîte
2. Alignement: Aligne le contenu à gauche, au centre ou à droite de la boîte
3. Position verticale: Aligne le contenu sur le haut, le centre ou le bas de la boîte
4. Farci: Définit le remplissage du contenu

Le contenu

Qualification

1. Typographie: Définit les options de police pour le titre
2. Espacement: Définit 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éfinit les options de typographie pour le texte du bouton
3. Texte Couleur: Choisissez la couleur du texte du bouton
4. Antécédents Couleur: Choisissez la couleur de l'arrière-plan du bouton
5. Couleur de la bordure: Choisissez la couleur de la bordure du bouton
6. Largeur de la bordure: Définit la largeur de la bordure
7. Rayon du bord: Définit le rayon de la bordure pour contrôler l'arrondi des coins

Bandeau

1. Couleur de l'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 régler la distance de bande.
4. Typographie: Définit les options de typographie pour le titre de la bande
5. Ombre de la boîte: Sélectionnez le
   
   boîte ombre
   paramètres du ruban

Effets de défilement

Le contenu

1. Animation de défilement: Choisissez l'animation de défilement de l'image: 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éfinit 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

Antécédents

1. Animation de défilement: Choisissez l'animation de défilement de l'image: 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 déplacez le curseur
3. Filtres CSS: Définit le flou, la luminosité, le contraste et la saturation de l'image
4. Mode de mixage: (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éfinit la durée de l'effet de survol

Avancée

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