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.

Image[1]-Elementor Free Edition Tutoriels de création de pages de détail produit

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.

Image [2]-Elementor Free Edition Tutoriels de création de pages de détail produit

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.

Image [3]-Tutoriel de création d'une page de détail produit avec Elementor Free Edition

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.

Image [4]-Tutoriel de création d'une page de détail produit avec Elementor Free Edition

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é.

Image [5]-Tutoriel de création d'une page de détail produit avec Elementor Free Edition

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.

Image [6]-Elementor Free Edition Tutoriels de création de pages de détail produit

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.

Image [7]-Elementor Free Edition Tutoriels de création de pages de détail produit

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.

Image [8]-Tutoriel de création d'une page de détail produit avec Elementor Free Edition

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.

Image [9]-Tutoriel de création d'une page de détail produit avec Elementor Free Edition

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
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été rédigé par Little Lin
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