Il est parfois nécessaire de créer un modèle de page de détail de produit simple afin de différencier les détails du produit de la page de détail de l'article normal. Dans cet article, nous allons expliquer comment utiliser le modèleElementor et l'éditeur GutenbergRéalisez ce type de création de modèle de page détaillée de produit et partagez les idées de mise en œuvre et les étapes concrètes qui s'y rapportent.

Fractionnement des pages et mise en page

Avant de commencer à les créer, nous devons créer la pageéléments inséparables fragmentés.. Une page détaillée de produit standard peut être divisée enParties supérieure et inférieureLa partie supérieure peut être divisée en deux parties, l'une gauche et l'autre droite, et la partie inférieure est également divisée en deux parties, l'une gauche et l'autre droite. En divisant la page de cette manière, nous pouvons mieux modulariser 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

1. Nouveau modèle: Utilisation de l'interface d'ElementorConstructeur de thèmescréez un nouveau modèle d'article unique.
2. Faire la première moitié: :
   • Ajouter unConteneurLa structure est composée de deux colonnes égales à gauche et à droite.
   • Pour définir l'image d'arrière-plan du conteneur, utilisez la fonctionnalité Dynamic Label pour sélectionner Featured Image comme image d'arrière-plan et les paramètres de style pour la remplacer.
   • Colonne de gauche : ajouter le module "Post Title", le fil d'Ariane de navigation (peut être utilisé)Rank Math SEOpeut-êtreSlim SEOetc. fournis par des plugins), ainsi que deux modules de boutons. Le bouton WeChat peut être configuré comme une fenêtre contextuelle permettant de cliquer sur le code QR.
   • Barre latérale droite : ajouter un module "Featured Image".
3. Faire la deuxième moitié: :
   • Ajouter un conteneur, à nouveau divisé en deux colonnes, la colonne de gauche ayant une largeur d'environ 75%.
   • Colonne de gauche : Faites glisser le module Post Content pour appeler le contenu de l'article. Vous pouvez également ajouter des modules tels que page flipping et sharing.
   • Colonne de droite : insérer un module de recherche, un module de titre, appeler les articles ou produits récents.

Après la production, publiez le modèle et appliquez-le à tous les articles ou à des catégories spécifiques. De cette manière, lorsque nous définissons différents titres de produits (articles), images vedettes et descriptions détaillées, le contenu des produits change automatiquement, le format est fixe et uniforme, et il est plus facile à utiliser.

2. l'insertion du contenu de l'article

Au lieu d'écrire des billets directement dans Elementor, il est recommandé d'appeler le contenu normal des billets en insérant le module Post Content. De cette façon, nous pouvons continuer à écrire du contenu en utilisant l'éditeur Gutenberg dans le backend de WordPress, ce qui est plus pratique et plus efficace.

Création de modèles de page de détail produit avec l'éditeur Gutenberg

Les fonctionnalités de l'éditeur Gutenberg continuent de s'améliorer grâce à l'extension de l'interface de l'éditeur Gutenberg.plug-in (composant logiciel)Vous pouvez obtenir de puissantes fonctionnalités de construction de pages. Les deux prochaines idées de mise en œuvre sont partagées.

Idée 1 : L'approche simple

Cette méthode est similaire à la rédaction régulière d'articles, sans qu'il soit nécessaire de créer des modèles fixes ou d'utiliser les fonctions de personnalisation des modèles du plugin.

1. Installation du plugin d'amélioration GutenbergEn tant queBlocs Kadencepeut-êtreChangement de capetc.

2. Faire la première moitié: :
   • Créez un nouvel article et ajoutez le module ROW à l'aide de l'éditeur Gutenberg, divisé en deux colonnes.
   • Colonne de gauche : ajouter respectivement le module de titre, le module de navigation avec fil d'Ariane et le module de bouton. Les boutons popup peuvent être créés avec le module Popup de Greenshift.
   • Barre latérale droite : insérez le module de couverture fourni avec WordPress et définissez l'image vedette.
3. Faire la deuxième moitié: :
   • Ajoutez un module ROW. Si le thème dispose déjà d'une fonctionnalité de barre latérale, composez directement le contenu du produit ; sinon, définissez la barre latérale manuellement.
4. Fonction de copie rapide: :
   • Installez un plugin de réplication tel que Yoast Post.
   • Lors de l'ajout d'un nouveau produit, il suffit de cliquer sur Clone ou Quick Draft en regard de [Modèle de produit] dans la liste des articles et de modifier le texte et l'image.

Cette méthode, qui peut sembler fastidieuse, fonctionne en conjonction avecPlugin de copieIl est très pratique et une utilisation régulière permet d'améliorer considérablement l'efficacité.

Idée 2 : Méthodes avancées

Cette méthode nécessite l'utilisation de la fonctionFonction des crochetsActuellementAstra ProetKadence ProetBlocksy Proetc. prennent en charge cette fonction.

1. Nouveau modèle de crochets: Spécifie que l'application doit être appliquée à la catégorie d'articles souhaitée.
2. Faire la première moitié: :
   • Créez un nouveau module ROW divisé en deux colonnes, ajoutez un module de titre, de navigation par fil d'Ariane et de boutons à gauche ; ajoutez un module de couverture à droite et définissez-le comme image vedette.
3. Faire la deuxième moitié: :
   • Insérez le module Post Content, fourni avec WordPress.
   • En fonction de la situation réelle, si le thème dispose déjà d'une fonction de barre latérale, il n'est pas nécessaire d'en créer une supplémentaire ; sinon, il faut la diviser manuellement en deux colonnes, le côté droit faisant office de barre latérale.

Cette approche est plus avancée et plus flexible, et convient aux projets qui nécessitent une personnalisation plus détaillée.

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 templée des pages de détail des produits.