🟢Multi-images avec texte
La section MULTI-IMAGES AVEC TEXTE vous permet de présenter les détails de votre produit à l'aide d'un ensemble de 5 images qui se mettent en mouvement.
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, commandez une licence SHOPIWEB PREMIUM.
COMMENT AJOUTER LA SECTION
Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > MULTI-IMAGES AVEC TEXTE. 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
Il est possible d'afficher une image en arrière plan de la section. Cliquez sur Sélectionner une image puis sur l'image de votre choix. Les deux réglages suivant : Opacité et Flou, vous permettent de régler l'intensité de l'opacité et de k'effet flou que vous désirez créer sur l'image d'arrière plan. Pour ne pas mettre d'image en arrière pla, passez à l'étape suivante.
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.
Largeur d'image sur ordinateur : Selon la largeur de votre section, souhaitez-vous que les images prennent 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.
Alignement de l'image (bureau) : Depuis un ordinateur, de quel côté souhaitez-vous que les images apparaissent ? À droite ou à gauche ? Sélectionnez l'option souhaitée. La section étant optimisée pour mobile, les images se mettront au-dessus du texte.
Alignement du texte - mobile : Depuis un smartphone, préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ? Sélectionnez l'option de votre choix.
Alignement du texte - bureau : Depuis un ordinateur, préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ? Sélectionnez l'option de votre choix.
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.
É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
Si vous le souhaitez, il est possible d'ajouter un Appel à l'action à votre section MULTI-IMAGES AVEC TEXTE. Inscrivez le texte, sélectionnez le lien vers lequel sera redirigé l'utilisateur et terminez par la couleur du bouton ainsi que sa taille.
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 UNE IMAGE
Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER IMAGE sous la section MULTI-IMAGES AVEC TEXTE.
Une fois l'image ajoutée, sélectionnez-là pour afficher les options de personnalisation dans la colonne située à droite de l'écran.
Image
Sélectionnez-la depuis votre bibliothèque ou importez-en une. Ajustez ensuite sa taille en pixels à l'aide des options suivantes : Largeur et hauteur de l'image.
Bordure de l'image : Souhaitez-vous qu'un contour apparaisse autour de l'image ? Sélectionnez la bonne option. Si vous avez optez pour un contour, choisissez ensuite sa couleur ainsi que la taille de sa largeur à l'aide des deux options suivantes. Ombre : Pour afficher une ombre derrière l'image, sélectionnez l'intensité souhaitée à l'aide du menu déroulant. Il est aussi possible de ne pas en mettre en sélectionnant "Aucune".
Recommencez la même procédure pour chaque image de la section.
Félicitations, vous avez réussi à ajouter et personnaliser la section MULTI-IMAGES AVEC TEXTE du thème SHOPIWEB PREMIUM.
L'ASTUCE
Cette section est idéale pour mettre en valeur les différents détails d'un produit. En première image, mettez la photo générale de votre produit. Puis, pour les quatre images suivantes, sélectionnez celles qui attirent l'attention sur les détails du produit. En scrolant, le mouvement d'éclaté d'images de la section attirera l'attention du visiteur vers les éléments importants de votre produit. La section MULTI-IMAGES AVEC TEXTE renforce ainsi l'effet persuasif de votre page de vente.
LA VIDÉO
Dernière mise à jour
