Si vous utilisez Thèmes WoodMartLorsque l'on crée un site web de commerce électronique haut de gamme et que l'on souhaite présenter le mélange de styles ou la combinaison de collections d'un produit, une page Lookbook est le moyen idéal de le faire. Elle renforce le ton de la marque et offre aux visiteurs un moyen plus intuitif de voir à quoi ressembleraient les produits dans un scénario réel.
Voici un guide pratique sur la façon de créer un site web beau et fonctionnel avec WoodMart. Lookbook ou la page d'affichage du catalogue.
![图片[1]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611094307490-image.png)
Étape 1 : Préparer le contenu de la page et les images
Avant de se salir les mains, il convient de se préparer :
- Images de scènes ou de modèles de produits de haute qualité
- Liens vers les produits pour chaque image
- Court texte d'introduction (facultatif)
La présentation visuelle est au cœur du Lookbook, et la qualité des images détermine l'impression générale de qualité de la page.
Etape 2 : Créer une nouvelle page et activer Elementor ou WPBakery
WoodMart prend en charge deux types de constructeurs de pages :Elementor répondre en chantant WPBakery. Si vous utilisez Elementor, vous pouvez :
- Allez dans WordPress Backend → Pages → Add New Page
![图片[2]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611095241663-image.png)
- Nommez-le "Lookbook" ou "Matching Catalogue".
- Cliquez sur "Edit with Elementor" ou "Edit with WPBakery" pour accéder à l'interface de visualisation.
![图片[3]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611093901884-image.png)
Étape 3 : Ajouter un module Lookbook avec les éléments exclusifs de WoodMart
WoodMart Il existe plusieurs widgets intégrés permettant de créer des Lookbooks, tels que
- Lookbook Image Hotspot Module
Ce module vous permet d'ajouter des clics multiples sur une image, chaque hotspot pouvant être lié au produit correspondant. Il est couramment utilisé dans les "vêtements de mannequins", les "scènes de ménage" et d'autres affichages.
![图片[4]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611181037592-image.png)
- Faites glisser l'élément Lookbook Hotspot
- Chaque hotspot peut être rempli avec le nom du produit, une courte description et des liens de saut.
![图片[5]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611095812903-image.png)
- Télécharger une photo de style ou de modèle
- Cliquez sur Add Hotspot pour ajuster la position.
![图片[6]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611182352864-image.png)
- Grille de produits + module de scénarios
Une bannière peut être insérée au milieu de la page avec la liste des produits en dessous pour créer un sentiment de disparité visuelle.
![图片[7]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611100452541-image.png)
- Module de combinaison image + bouton
Convient aux catalogues cloisonnés, tels que le "secteur des vêtements pour hommes", le "secteur des accessoires", etc.
![图片[8]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611102644323-image.png)
Étape 4 : Mise en place d'un affichage réactif
Les pages du Lookbook ont tendance à être plus riches en images et en points d'accès.mobileL'adaptation est très importante. Nous vous suggérons de passer à la vue "Tablette" et "Mobile" en haut de l'éditeur et de vérifier si chaque module s'affiche correctement l'un après l'autre. En particulier la position du hotspot, qui doit parfois être ajustée sur un petit écran.
![图片[9]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611103032442-image.png)
Étape 5 : Ajouter des boutons de navigation ou des fils d'Ariane
Pour améliorer l'expérience de saut de page, vous pouvez ajouter un bouton "Retour au centre commercial" ou "Voir tous les produits" en haut de la page afin d'éviter que les utilisateurs ne se perdent après avoir parcouru le Lookbook.
![图片[10]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611103334786-image.png)
Si WoodMart'snavigation en fil d'Ariane(fil d'Ariane), il est recommandé de placer la page du Lookbook dans la sectionMenu de navigation principalmiles, ce qui permet aux visiteurs de le trouver plus facilement.
Étape 6 : Publier et tester les liens de saut
Après avoir terminé le contenu de la page, cliquez sur "Publier" et prévoyez l'effet dans le frontend.
![图片[11]-WoodMart 教程:创建 Lookbook 搭配展示页面](https://www.361sale.com/wp-content/uploads/2025/06/20250611105009993-image.png)
Concentrez-vous sur la vérification des points suivants :
- Si chaque hotspot saute correctement
- L'image se charge-t-elle sans problème ?
- La page s'affiche-t-elle clairement sur les téléphones portables ?
Conseil : Comment augmenter les conversions de Lookbook ?
- Ajoutez la mention "Acheter maintenant" au bas de chaque image.boutonsou lien
- Ajouter un délaiÉtiquettes promotionnelles(par exemple, "nouveaux produits", "chauds", "réduction limitée dans le temps")
- Utilisez une page Lookbook avec la génération de leads par les médias sociaux pour inciter les utilisateurs à cliquer.
résumés
La création d'une page de Lookbook dans WoodMart n'est pas compliquée, la clé réside dans la conception visuelle et les liens avec les produits. Préparez des matériaux de qualité et utilisez à bon escient les fonctions dynamiques et les liens vers les produits pour donner à votre marque un aspect et une impression plus professionnels, ainsi que pour stimuler la croissance de votre entreprise.taux de conversion.
Si vous souhaitez créer des effets Lookbook plus complexes, tels que des balayages horizontaux, des arrière-plans vidéo, etc,fenêtre contextuelleLe thème WoodMart offre également un support solide pour les achats et plus encore.
Lien vers cet article :https://www.361sale.com/fr/58824/L'article est protégé par le droit d'auteur et doit être reproduit avec mention.






















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

Pas de commentaires