🟢Média navigation
La section MÉDIA NAVIGATION permet d'afficher 4 images et/ou vidéos avec description, accessible à l'aide d'un menu dédié.
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'effectuer la mise à jour.
![Capture d'écran de la section MÉDIA NAVIGATION depuis la boutique de démonstration demo.shopiweb.fr](https://www.docs.shopiweb.fr/~gitbook/image?url=https%3A%2F%2F2019301892-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FU04y3nhEi7BOPySOeTqn%252Fuploads%252FxT3yLWVeOTGWCt1rjXQg%252FIMAGE1_Media_Navigation.png%3Falt%3Dmedia%26token%3D38bc9a60-40ad-4855-98de-6da75ba0c925&width=768&dpr=4&quality=100&sign=9db56f43&sv=1)
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 en passant par ce lien.
COMMENT AJOUTER LA SECTION
![Capture d'écran de l'interface de personnalisation du thème SHOPIWEB PREMIUM, depuis laquelle vous pouvez ajouter une section MÉDIA NAVIGATION](https://www.docs.shopiweb.fr/~gitbook/image?url=https%3A%2F%2F2019301892-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FU04y3nhEi7BOPySOeTqn%252Fuploads%252FaZE5hRZUXvDbILJE6N53%252FIMAGE2_Media_Navigation.png%3Falt%3Dmedia%26token%3Decf74def-d794-4792-9a47-354d56197a7b&width=768&dpr=4&quality=100&sign=e1cab6f6&sv=1)
Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > MÉDIA NAVIGATION. 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
Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
Sélectionnez le TYPE D'ARRIÈRE PLAN souhaité (Couleur prédéfinie, dégradé personnalisé)
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).
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.
Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit centré ou à gauche ?
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 à 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.
Souhaitez-vous que vos visuels (images ou vidéos) aient un contour ? Si oui, de quelle couleur et de quelle taille le voulez-vous ? Réglez-les à l'aide des options de personnalisation suivantes.
Concernant la navigation d'un onglet à un autre, souhaitez-vous qu'il y est une bordure ? Si oui, de quelle couleur et de quelle taille souhaitez-vous l'avoir ? Réglez ces options.
Sélectionnez la taille de l'ombre souhaitée qui apparaîtra derrière vos visuels, ou AUCUNE OMBRE si vous n'en voulez pas.
Terminez les réglages de la section par les espacements. Les PADDINGS permettent d'ajouter de l'espace à l'intérieur de la section. Les MARGES permettent d'ajouter de l'espace à l'extérieur de la section.
Les réglages de la section sont terminés. Maintenant, ajoutez autant d'onglets que nécessaires selon vos besoins.
COMMENT AJOUTER UN ONGLET DE MÉDIA NAVIGATION
![Capture d'écran de l'interface de personnalisation du thème SHOPIWEB PREMIUM, depuis laquelle vous pouvez ajouter jusqu'à 4 onglets par section MÉDIA NAVIGATION](https://www.docs.shopiweb.fr/~gitbook/image?url=https%3A%2F%2F2019301892-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FU04y3nhEi7BOPySOeTqn%252Fuploads%252FaHosRS7ucSNUTbjxh7fA%252FIMAGE3_Media_Navigation.png%3Falt%3Dmedia%26token%3D2464ee34-b601-4725-b3d8-dd3d405803f9&width=768&dpr=4&quality=100&sign=3c376a76&sv=1)
Sélectionnez la section MÉDIA NAVIGATION depuis la colonne située à gauche de l'écran. Juste en dessous, vous verrez un lien AJOUTER ONGLET. Cliquez dessus pour ajouter votre premier onglet de section MÉDIA NAVIGATION. Vous pouvez en ajouter 4 maximum.
Une fois le premier onglet ajouté, les options de personnalisation s'affichent dans la colonne à droite de l'écran.
COMMENT PERSONNALISER UN ONGLET DE MÉDIA NAVIGATION
Une fois l'onglet ajouté, sélectionnez-le pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
IMAGE : Ajouter une image si c'est une image que vous souhaitez afficher. Pour présenter une vidéo, passez à l'étape suivante.
VIDÉO : Importez la vidéo en cliquant sur SÉLECTIONNER UNE VIDÉO. Cocher AUTOPLAY pour que la vidéo se lance automatiquement. Cocher LOOP pour que la vidéo tourne en boucle. Cocher MUTE pour enlever le son de la vidéo. Cocher CONTRÔLES pour afficher le lecteur de la vidéo afin que les utilisateurs puissent faire pause ou avancer la vidéo.
Pour afficher un icône au format SVG, coller le code dans le champ dédié. Cliquez sur BOOTSTRAP ICONS pour accéder à une bibliothèque gratuite d'icônes SVG.
Écrivez le titre souhaité pour votre onglet.
Écrivez la description en lien avec l'image ou la vidéo de l'onglet, ou bien supprimez le texte pour ne rien afficher. Ensuite, réglez la taille du texte de votre description.
Recommencez la procédure pour chacun de vos onglets.
L'ASTUCE
La section MÉDIA NAVIGATION permet de réduire la longueur de vos pages. C'est une section 4 en 1. Elle est idéale pour remplacer une suite de sections IMAGE TEXTE ou VIDÉO TEXTE. Elle apporte une touche supplémentaire d'interactivité à votre boutique en ligne ce qui vient améliorer l'engagement de vos visiteurs.
LA VIDÉO
Dernière mise à jour