Lors de la construction d'un site web WordPress, nous avons besoin de créer un modèle simple de page détaillée de produit afin de mieux afficher les détails du produit et le contenu général de l'article. Dans cet article, nous allons présenter en détail comment utiliser Elementor pour créer ce type de modèle de page détaillée de produit, et partager les idées de mise en ?uvre et les étapes spécifiques qui s'y rapportent.

Fractionnement des pages et mise en page

Avant de commencer la création, nous devons diviser la page. Une page détaillée de produit standard peut être divisée en deux parties : la partie supérieure peut être divisée en deux parties (gauche et droite), et la partie inférieure est également divisée en deux parties (gauche et droite). En divisant la page de cette manière, nous pouvons mieux moduler la conception et la mise en page.

Créer des modèles de pages de détails de produits avec Elementor

1. créer des modèles d'articles uniques

étape 1Pour ce faire, vous devez vous connecter au backend de votre site WordPress à partir de [Modèle]>[Constructeur de thèmesdans le constructeur de thèmes Elementor.

étape 2: Passer à [Poste uniqueet cliquez sur [Ajouter un nouveau]Ajouter un nouveau modèle de page de détail de l'article.

étape 3Après l'avoir ajouté, vous accéderez automatiquement à la page d'édition du modèle avec une fenêtre contextuelle présentant les modèles recommandés par Elementor. Vous pouvez choisir d'importer le modèle et de le modifier, ou vous pouvez désactiver la recommandation de modèle et créer et modifier la page détaillée de l'article par vous-même.

étape 4Après avoir fermé le modèle de recommandation, vous verrez une fenêtre d'édition Elementor vide.

2. éditer et configurer les modèles de pages de détail des articles

Nous créerons des modèles en fonction de nos besoins réels et de notre expérience personnelle, les étapes suivantes peuvent être utilisées comme référence. Après avoir ma?trisé Elementor, vous pouvez créer différents styles de modèles en fonction de vos besoins.

étape 5Module d'ajout de titre : Module d'ajout de titre

• Placez le module du titre de l'article en haut du modèle.
• Ajoutez d'abord unSection.

• mettre en placeSection(utilisé comme expression nominale)Rembourrage Hautrépondre en chantantLe bas est à 50pxAutour de0px.

• Ajoutez la balise Heading à la section, définissez sa balise HTML sur H1 et définissez-la comme étant centrée.

• Définissez le titre de l'élément Heading sur le Post Title du contenu dynamique, de sorte que le contenu de la balise H affiche le titre approprié en fonction de l'article.

étape 6: Mise en place d'un fil d'Ariane pour la navigation

• Ajoutez un fil d'Ariane sous le titre. Vous pouvez utiliser l'élément de fil d'Ariane de WooCommerce s'il est installé ; sinon, vous pouvez utiliser l'élément de fil d'Ariane de RankMath.

• Centrer le contenu de l'élément du fil d'Ariane et modifier les couleurs du texte et des liens.

étape 7Section de l'en-tête : Définition de l'arrière-plan de la section de l'en-tête

• Réglez l'arrière-plan sur le contenu dynamique pour afficher automatiquement l'image vedette de l'article.
• Réglez la position de l'image sur Centre et Centré, la répétition sur Pas de répétition et la taille sur Couverture.
• Ajoutez une incrustation à l'arrière-plan pour que le texte s'affiche clairement. Définissez la couleur et la transparence de l'arrière-plan de l'incrustation.

étape 8: Ajouter une barre latérale

• Ajouter une nouvelle section sous le module Titre.
• Réglez l'espacement entre le haut et le bas de la section à 50 px et entre la gauche et la droite à 0 px.
• Ajoutez un élément de recherche à la petite colonne de gauche, définissez l'arrière-plan de l'entrée sur blanc et l'arrière-plan du bouton sur la couleur du style du thème.
• Ajoutez l'élément Heading, définissez le titre sur Categories et la balise HTML sur Span, et définissez également la police sur bold.
• Créez une liste de catégories d'articles avec le plugin IKS MENU et ajoutez-la à la barre latérale sous la forme d'un shortcode.
• Ajouter un formulaire de demande de renseignements dans la barre latérale.

étape 9Ajouter la partie du corps des détails de l'article

• Ajoutez un élément Post Content sur le c?té droit de la barre latérale, cet élément récupérera automatiquement le contenu de l'article.
• Ajoutez un élément Post Info pour afficher la catégorie et la date de l'article.
• Ajoutez un élément de partage social au bas de l'article pour activer la fonctionnalité de partage de l'article.
• Ajout de l'élément Progress Tracker pour réaliser la fonction de changement de page de l'article, ce qui est pratique pour les utilisateurs pour passer à l'article suivant.

étape 10Modifier le style et le motif du modèle : Modifier le style et le motif du modèle

• Enfin, le style et le style de l'ensemble du modèle sont ajustés, les détails sont embellis, de sorte qu'ils sont plus en accord avec le style de conception général du site.

résumés

Ci-dessus se trouve le guide détaillé pour créer des modèles de pages détaillées de produits faciles à utiliser en utilisant Elementor et l'éditeur Gutenberg. En divisant raisonnablement la structure de la page et en utilisant les puissantes fonctionnalités d'Elementor et de l'éditeur Gutenberg, vous pouvez facilement obtenir une conception modulaire et un modèle pour les pages de détail des produits. J'espère que cet article pourra vous aider à mieux comprendre et utiliser ces outils pour atteindre vos objectifs de conception de site web.

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 : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.