🟢Accordeon visuel

COMMENT AJOUTER LA SECTION

• Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > ACCORDÉON VISUEL. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

COMMENT PERSONNALISER LA SECTION

Général

• Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN à condition d'avoir choisi une couleur foncé.

• Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.

• Alignement du texte : Préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ?

En-tête de la section

• Légende image : Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.

• Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne pas en mettre. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.

• Titre overlay : Écrire le titre à afficher en tant que "Titre overlay" (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.

• Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.

• Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

Images

• Hauteur images (px) : Réglez la taille en pixels des images de l'accordéon ou laissez celle par défaut. Cette option ne concerne que l'affichage sur ordinateur car depuis un smartphone, l'ajustement se fait automatiquement.

• Afficher la première image développée : Cocher cette option pour que, par défaut, le premier accordéon soit ouvert. Cela invite l'utilisateur à consulter votre contenu et à comprendre comment fonctionne la section.

• Couleur des images : Choisissez la couleur qui viendra créer un effet de flou au-dessus de l'image de l'accordéon lorsque celui-ci est fermé. Ajustez ensuite l'opacité et le flou entre la couleur choisie et l'image à l'aide des deux options suivantes : opacité, flou images.

• Couleur des textes : Choisissez la couleur d'affichage des textes de l'accordéon lorsque celui-ci est fermé.

• Poids de la police : Préférez-vous que ce titre apparaisse en poids normal ou en Bold (gras) ? Sélectionnez l'option qui vous convient.

• Bordure de l'image : Il est possible de créer une bordure sur vos images. Choisissez donc sa couleur, sa taille et l'ombre à l'aide des options : Bordure de l'image, Couleur de la bordure, Largeur de la bordure, Ombre.

Animation

• Effet d'animation : Sélectionnez l'une des 43 animations disponibles dans le thème SHOPIWEB PREMIUM avec laquelle la section apparaîtra à l'écran de l'utilisateur.

• Vitesse d'animation : Réglez à présent la vitesse à laquelle cette animation va s'effectuer.

Espacement de la section

• Padding supérieur : Ajoutez de l'espace à l'intérieur du HAUT de la section.

• Padding inférieur : Ajoutez de l'espace à l'intérieur du BAS de la section.

• Marge supérieure : Ajoutez de l'espace à l'extérieur du HAUT de la section.

• Marge inférieure : Ajoutez de l'espace à l'extérieur du BAS de la section.

COMMENT AJOUTER UN INTERCALAIRE À L'ACCORDÉON VISUEL

• Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section ACCORDÉON VISUEL. Vous pouvez ajouter jusqu'à 8 ITEMS (images avec titres et descriptions).

• Une fois l'item ajouté, sélectionnez-le pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

Item

• Image : Cliquez sur SÉLECTIONNER UNE IMAGE puis, choisissez-en une depuis votre bibliothèque de contenu ou importez-en une depuis votre ordinateur.

• Titre de l'image : Écrivez le titre qui apparaîtra sur l'intercalaire lorsque celui-ci sera fermé.

• Icône : Affichez un icône au bas de l'intercalaire lorsque celui-ci est fermé. Coller le code de l'icône au format SVG dans ce champs. Vous pouvez faire votre sélection depuis la bibliothèque gratuite Bootstrap Icons (voir la vidéo explicative disponible au bas de cette page). Cette option est facultative. Vous pouvez faire le choix de ne pas mettre d'icône.

• Largeur de l'icône svg : Si vous avez collé un code SVG dans le champs précédent, ajustez sa taille d'affichage en pixels en faisant glisser le curseur.

Contenu

• Titre : Écrivez le titre qui apparaîtra lorsque l'intercalaire sera ouvert. Balise titre (SEO) : Réglez maintenant la balise SEO de ce titre. Vous pouvez laisser le réglage par défaut en "h3".

• Taille du titre : Sélectionnez la taille d'affichage du titre de l'intercalaire lorsque celui-ci est ouvert. De préférence, optez pour un titre de taille inférieur à celui de la section pour respecter la hiérarchie visuelle.

• Description : Écrivez la description de votre intercalaire lorsque celui-ci est ouvert. Ajustez ensuite sa taille à l'aide de l'option suivante : Taille de description.

Bouton

• Pour afficher un bouton à votre intercalaire lorsque celui-ci est ouvert, écrivez le texte du bouton dans le champs TEXTE DU BOUTON (laissez ce champs vide si vous ne souhaitez pas mettre de bouton). Dans l'option suivante, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

Félicitations, vous avez réussi à ajouter et personnaliser la section ACCORDÉON VISUEL du thème SHOPIWEB PREMIUM.

L'ASTUCE

ACCORDÉON VISUEL permet de réduire le nombre de sections de votre page. Par exemple, la section IMAGE TEXTE EXPLORATEUR rend accessible 5 images d'un simple clic. Par contre, ACCORDÉON VISUEL rend accessible 8 images avec son titre et sa description dans une seule et même section. Elle améliore ainsi l'expérience utilisateur de votre boutique e-commerce.

LA VIDÉO