🟢Image texte explorateur
La section IMAGE TEXTE EXPLORATEUR permet de présenter jusqu'à 5 images accessibles depuis des onglets.
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'effectuer la mise à jour.
AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, commander une licence SHOPIWEB PREMIUM.
COMMENT AJOUTER LA SECTION
Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > IMAGE TEXTE EXPLORATEUR. 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
Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de l'écran.
Image d'arrière plan : Pour afficher une image en arrière plan de votre section IMAGE TEXTE EXPLORATEUR, cliquez sur SÉLECTIONNER UNE IMAGE. Ensuite, une fois l'image ajoutée, ajustez le niveau d'intensité et de flou souhaité à l'aide des deux curseurs du dessous. Cette option est facultative.
Si vous n'avez pas choisi l'option précédente qui est d'ajouter une image comme arrière plan, 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 dans votre couleur à 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.
Largeur d'image sur ordinateur : Selon la largeur de votre section, souhaitez-vous que l'image prenne 25%, 50% ou 75% de la section ? Choisissez la largeur d'image sur ordinateur en cliquant sur le bouton correspondant. La section étant optimisée pour l'affichage mobile, cette dernière s'ajustera automatiquement pour les utilisateurs consultant votre boutique depuis leur smartphone.
Disposition du texte (bureau) : Cliquez sur le bouton GAUCHE ou DROITE pour faire apparaître l'explorateur d'images dans la partie droite ou gauche de la section. Cette option n'est valable que pour les utilisateurs consultant votre site depuis un ordinateur. Depuis un mobile, la section s'ajustera automatiquement au format vertical de l'écran en plaçant les deux parties de section l'une au dessus de l'autre.
Images
Image orientation : Quel est le format des images que vous mettez dans votre section IMAGE TEXTE EXPLORATEUR ? Sélectionnez le format correspondant (Carré, Paysage ou Portrait).
Recadrage de l'image : Selon le format choisi, souhaitez-vous que l'attention de l'internaute soit attirée vers le Haut, le Centre, le Bas, la Gauche ou la Droite de l'image ? Cliquez sur l'option souhaitée. Pour laisser votre image par défaut, cliquez sur Centre.
Bordure : Il est possible de créer une bordure sur vos images. Choisissez donc sa couleur, sa taille et l'ombre.
Texte
Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ?
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 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.
Contenu caché
Pour les longs textes, il est possible d'en cacher une partie que l'utilisateur pourra faire apparaître en cliquant sur un bouton. Activez cette fonctionnalité en cochant l'option.
À partir de... : Ajustez la taille du contenu affiché en pixels à l'aide du curseur.
Couleur du fondu : Pour un affichage design du texte et éviter l'arrêt brutal du bloc de texte, sélectionnez la couleur du fondu en fonction de votre couleur d'arrière plan. Pour un effet de fondu réussi, nous vous recommandons de sélectionner la même couleur que celle choisie pour votre arrière plan.
Texte (voir plus) : Si vous développez votre boutique sur le marché français, vous pouvez laissez le texte par défaut. Et si vous développez votre boutique sur un marché étranger, vous pouvez traduire facilement le bouton permettant à l'utilisateur d'afficher tout le bloc texte et le coller dans ce champ dédié.
Texte (voir moins) : Idem que pour le réglage précédant mais cette fois-ci, pour réduire le bloc texte après lecture.
Bouton
Pour afficher un bouton à la section IMAGE TEXTE EXPLORATEUR, écrivez le texte du bouton dans le champ TEXTE DU BOUTON (laissez ce champ vide si vous ne souhaitez pas mettre de bouton). Dans le champ suivant, 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.
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 DES IMAGES
Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section IMAGE TEXTE EXPLORATEUR. Vous pouvez ajouter jusqu'à 5 ITEMS (images).
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. IMAGE 6 (Image bouton pour chaque lien permettant d'afficher l'image de l'item) (La section IMAGE TEXTE EXPLORATEUR permet d'afficher une image en plus du bouton d'accès aux items)
Image bouton : Cette option est facultative. Elle vous permet d'ajouter une image au bouton permettant d'afficher l'image (idéal pour les tutoriels étape par étape).
Titre bouton : Écrivez l'appel à l'action permettant à l'utilisateur d'afficher l'item (image).
Félicitations, vous avez réussi à ajouter et personnaliser la section IMAGE TEXTE EXPLORATEUR du thème SHOPIWEB PREMIUM.
L'ASTUCE
IMAGE TEXTE EXPLORATEUR permet de réduire le nombre de sections de votre page car elle rend accessible 5 images d'un simple clic. Elle apporte de l'interactivité à un tutoriel étape par étape et améliore ainsi l'expérience utilisateur de votre boutique e-commerce.
LA VIDÉO
Dernière mise à jour
