Cercle info (plus)

Cercle info (plus) dispose des Icônes autour d’un cercle et au survol, l’information apparaît au centre du cercle.

Une fois l’élément “Cercle info (plus)” glissé en place, vous pouvez commencer à personnaliser l’élément. La fenêtre de paramètres s’ouvre automatiquement.

Items de cercle d’info

• Éditer votre item de cercle d’info( vous pouvez en ajouter autant que vous le désirez)

Une nouvelle boîte de configuration ouvre

Général

• Titre : Écrivez votre texte

Description – Ceci est le contenu qui apparaîtra à l’intérieur du cercle

• Boite de texte : Écrivez votre texte

Appel à l’action – AAA

• Lien AAA : Aucun/e, À l’icône, Dans la description, Les deux

Si vous choisissez « À l’icône », il faut choisir le lien et sa cible.

Si vous choisissez  » Dans la description » ou  » Les deux », il faut aussi choisir si l’AAA est un texte ou un bouton et le configurer.

Style du cercle d’information

• Type d’arrière-plan :  Par défaut, Couleur, Image

Pour couleur

• Couleur d’arrière-plan : Choisissez la couleur
• Opacité de couleur d’arrière-plan : Écrivez un chiffre en pourcentage

Pour Image

• Photo : Sélectionner l’image
• Position de l’arrière-plan : Choisissez parmi plusieurs options
• Répéter l’arrière-plan : Ne pas répéter, Tout répéter, Répéter horizontalement, Répéter Verticalement
• Grandeur de l’arrière-plan : Contenu, Couverture, Initial, par défaut

Image/Icône

• Icône : Choisissez une icône

Couleurs

• Couleur d’icône : Choisissez la couleur
• Couleur d’arrière-plan de l’icône : Choisissez la couleur
• Dégradé : Oui, Non

Couleurs active de l’icône

• Couleur de l’icône au Survol/Activé : Choisissez la couleur
• Couleur de l’arrière-plan de l’icône au Survol/Activé : Choisissez la couleur

Typographie AAA

Typographie AAA

• Police : Choisissez votre police
• Taille de la police : choisissez la taille de la police en pixel
• Interligne : Choisissez l’espace entre les lignes
• Transforme : Défaut, Lettres majuscules, Lettres minuscules, Première Lettre de chaque mot en majuscule
• Espace entre les lettres : Choisissez l’espace entre les lettres
• Couleur : Choisissez la couleur

Sauvegarder vos configurations

Général

Général

• Lecture automatique : Oui, Non
• Interval de lecture automatique (disparaît si on choisi non) : Écrire un chiffre en seconde
• Largeur de Zone de contenu : Plein(e), Personnalisé
• Personnaliser la largeur du contenu (disparaît si on choisi Plein(e)) : Écrire le chiffre en pourcentage
• Action pour afficher le contenu : Survol, Clique
• Évitement de la structure adaptative : Activé ou Désactivé
• Mesure pour l’évitement de la structure (disparaît si on choisi désactivé) : Écrire en pixel le chiffre voulu

Style

Vignette

• Position de la première Vignette : Écrire un chiffre en degré
• Taille de la vignette Icône/image : Écrire un chiffre en pixel
• Taille Icône/image Adaptative : Écrire un chiffre en pixel
• Animation d’une vignette active : Choisir parmi une grande variété d’option
• Animation de vignette quand une page charge  : Choisir parmi une grande variété d’option

Styles de vignette

• Style de vignette : Cercle, Carré, Personnalisé (si vous choisissez personnalisé, vous devrez choisir les coins)
• Style de la bordure : Aucun/e, Continue, Tirets, Pointillée, Double

Zone d’information

• Marges intérieures de contenu : Écrire les dimensions en pixel
• Info Icône/image : Désactivé, Simple, Personnalisé
• Couleur d’arrière-plan : Choisissez la couleur
• Opacité de la couleur de l’arrière-plan : Écrivez un chiffre en pourcentage

Si vous choisissez simple, il faudra configurer la taille et la couleur de l’icône.

Si vous choisissez personnalisé, vous aurez d’autres options à configurer.

• Taille de l’arrière-plan des Icônes/Images : Écrire le chiffre en pixel
• Coins rond des bordures d’Icônes/Images : Écrire le chiffre en pixel
• Style de bordure de l’Icônes/Images : Aucun/e, Continue, Tirets, Pointillée, Double

Séparateur

• Style du Séparateur : Aucun/e, Continue, Tirets, Pointillée, Double
• Épaisseur du séparateur : Écrire le chiffre en pixel
• Largeur du séparateur : Écrire le chiffre en pourcentatge
• Couleur du séparateur : Choisissez la couleur

Connecteur

• Style de ligne  : Aucun/e, Continue, Tirets, Pointillée, Double
• Épaisseur de la ligne : Écrire le chiffre en pixel
• Couleur de ligne : Choisissez la couleur

Arrière-plan du cercle info

• Type d’arrière-plan : Aucun/e, Couleur, Image

Si couleur est choisi, vous devrez choisir sa couleur et son opacité.

Si Image est choisi, vous devrez choisir une image, sa position et si elle répète

Typographie

Titre

• Tag : Choisissez de H1 à H6, div, p, span
• Police : Choisissez votre police
• Taille de la police : choisissez la taille de la police en pixel
• Interligne : Choisissez l’espace entre les lignes
• Couleur : Choisissez la couleur
• Transforme : Défaut, Lettres majuscules, Lettres minuscules, Première Lettre de chaque mot en majuscule
• Espace entre les lettres : Choisissez l’espace entre les lettres
• Marges du haut : Écrire le chiffre en pixel
• Marges de bas : Écrire le chiffre en pixel

 Description

• Police : Choisissez votre police
• Taille de la police : choisissez la taille de la police en pixel
• Interligne : Choisissez l’espace entre les lignes
• Couleur du texte de description : Choisissez la couleur
• Transforme : Défaut, Lettres majuscules, Lettres minuscules, Première Lettre de chaque mot en majuscule
• Espace entre les lettres : Choisissez l’espace entre les lettres
• Marges du haut : Écrire le chiffre en pixel
• Marges de bas : Écrire le chiffre en pixel

Avancé

• Marges extérieuresDu haut, du bas, de gauche, de droite, les quatre côtés sont configurables indépendamment l’un de l’autre.  L’ajustement des marges extérieures permet de créer des espaces entre les différentes rangées et de modifier la largeur d’affichage indépendamment des configurations du thème.
• Présentation adaptative
  La présentation adaptative permet de contrôler l’affichage d’une rangée selon le type d’appareil à partir duquel on accède au site.
• Visibilité : Choisissez à quel type d’utilisateur vous désirez que le contenu soit visible
• Animation
  Style : Choisissez le type d’animation. Essayez-les et sélectionnez celle qui vous convient.
  Délai : Choisissez en seconde, le délai avant que l’animation ne débute.
• Sélecteur HTML