Tutoriels de création de pages de détails de produits pour la version gratuite d'Elementor

Pour ceux qui commencent à créer un site web, la création d'une page de détail d'aspect professionnel et affichant clairement les informations relatives au produit est une étape très importante. Bien qu'il s'agisse d'une Elementor Free EditionIl n'y a pas de composants WooCommerce exclusifs comme dans la version Pro, mais avec la bonne approche, vous pouvez toujours utiliser la version gratuite pour créer une page produit clairement structurée et visuellement conviviale.

图片[1]-Elementor 免费版产品详情页制作教程

Cet article vous guidera pas à pas dans la création d'une page détaillée de produit, adaptée à la présentation d'un seul produit, à l'introduction d'un cours, à la création d'une petite image de marque et à d'autres besoins.

Préparation de la structure de la page

Ouvrez le backend de WordPress et ajoutez une nouvelle page. Sélectionnez "Edit with Elementor" comme méthode d'édition.

图片[2]-Elementor 免费版产品详情页制作教程

Une fois que vous avez saisi la visualisation, réfléchissez à ce qui doit figurer sur cette page produit. En général, il s'agit des éléments suivants

  • Image principale du produit
  • Chlorure de diéthylammonium
  • brève introduction
  • Points forts de la fonction
  • Les détails de l'image montrent
  • Boutons de prix ou d'orientation (par exemple, acheter, contacter, réserver, etc.)

structure des pagesIl est recommandé de les disposer dans l'ordre suivant : haut→ bas, afin de faciliter le défilement des visiteurs.

Insérer la zone d'information de l'en-tête

Ajoutez une section à colonne unique, puis faites glisser le composant "Image" et insérez l'image principale de votre produit, qu'il s'agisse d'une vue de face de haute qualité ou d'une image en direct. Ajoutez ensuite un composant "Titre" avec le nom du produit et un composant "Éditeur de texte" pour résumer le produit en quelques phrases.

图片[3]-Elementor 免费版产品详情页制作教程

Entre les trois, il est recommandé d'ajouter des marges internes ou d'ajuster la taille de la police pour donner au contenu un aspect plus aéré.

Mise en place d'une zone d'exposition pour les caractéristiques des produits

Créez une autre section et divisez-la en deux colonnes.

图片[4]-Elementor 免费版产品详情页制作教程

Continuez à placer des images de produits sur la gauche, comme un zoom local, des scénarios d'utilisation du produit et un texte de présentation sur la droite.

Vous pouvez énumérer 3 à 5 arguments de vente dans un titre et un graphique, ou utiliser une "liste d'icônes" pour améliorer la lisibilité.

图片[5]-Elementor 免费版产品详情页制作教程

Si vous craignez que la page soit trop monotone, vous pouvez mettre en place des modules décalés, tels que "image à gauche + texte à droite" puis "image à droite + texte à gauche", afin de créer une impression de rythme visuel.

Ajouter une image ou une vidéo détaillée

La zone suivante peut être une image de détail horizontale séparée, ou une vidéo d'introduction peut être insérée. YouTubeIl est très facile de le prévisualiser en y collant directement l'adresse.

图片[6]-Elementor 免费版产品详情页制作教程

Ajout d'un bouton de guidage

Lorsqu'un visiteur consulte le contenu du produit, ce dont il a le plus besoin, c'est d'une action claireboutonsPar exemple, "Acheter maintenant", "Nous contacter", "Aller au Petit livre rouge pour en savoir plus", etc. Vous pouvez utiliser le module de bouton pour définir la taille, la couleur et le style des coins arrondis afin de les rendre suffisamment accrocheurs sur la page.

图片[7]-Elementor 免费版产品详情页制作教程

Si vous n'avez pas l'intention d'accéder à la fonctionnalité de commerce électronique, vous pouvez vous connecter directement à WeChat, à des formulaires ou à des centres commerciaux externes.

Adaptation mobile

Une fois la page terminée, n'oubliez pas de passer en mode "responsive" pour vérifier comment elle se présente sur les téléphones mobiles et les tablettes. Si le texte est trop long, l'image trop grande ou si les boutons n'ont pas de sens, vous pouvez les ajuster en fonction des différents appareils.

图片[8]-Elementor 免费版产品详情页制作教程

La version gratuite d'Elementor vous permet de personnaliser la taille de la police, les marges et l'alignement sur différents appareils.Optimisation mobile.

Enregistrer comme modèle

L'enregistrement de pages ou d'articles en tant que modèles pour faciliter l'édition de pages détaillées sur les produits peut s'avérer efficace.

图片[9]-Elementor 免费版产品详情页制作教程

Recommandations relatives à l'inspection avant la mise en circulation

  • Assurez-vous que toutes les images se chargent correctement et qu'elles sont de la bonne taille.
  • Que le saut de lien fonctionne ou non
  • Le titre et la description du contenu sont complets et clairs.
  • Si la page se charge de manière fluide (essayez de télécharger des images en JPG, compressées)

Un texte concisPage de détail du produitLa structure ne doit pas être trop complexe, mais elle doit permettre aux utilisateurs de comprendre rapidement la valeur du produit et de savoir exactement ce qu'il faut faire ensuite. En utilisant la version gratuite d'Elementor, bien que les composants soient limités, une bonne utilisation de la mise en page et des modules de base permet également d'obtenir un effet de page très professionnel.


Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
客服微信
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : [email protected]
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
本文作者:托尼屎大颗
LA FIN
Si vous l'aimez, soutenez-le.
félicitations136 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires