Lors de l'élaboration de la page d'affichage des produits, de nombreuses personnes souhaitent obtenir l'effet "cliquer sur différentes étiquettes pour afficher différents contenus", tels que la "description du produit", les "spécifications", "l'évaluation de l'utilisateur". Ce type de module est plus professionnel et permet aux visiteurs de parcourir rapidement les informations clés. Si vous utilisez la version gratuite d'Elementor, vous pouvez également le faire facilement.

Ce billet vous guidera à travers le processus de création d'un site web propre, beau et commutable.onglet (d'une fenêtre) (informatique)styleDétails du produit ModuleIl convient à tout utilisateur de WordPress et ne nécessite aucun code à écrire.

Pourquoi utiliser le module Tags sur les pages détaillées des produits ?

Lors de l'affichage d'un contenu complexe ou comportant plusieurs paragraphes, un seul long paragraphe est redondant et difficile à lire. Le module de changement d'onglet regroupe différentes catégories de contenu afin d'améliorer la clarté visuelle et l'expérience interactive :

• Une structure plus claireLes visiteurs peuvent trouver rapidement les sections qui les intéressent, telles que les descriptions de produits ou les avis d'utilisateurs.
• économiser de l'espace sur la pageLe contenu est présenté de manière hiérarchique par le biais d'onglets, de sorte qu'il n'occupe pas toute la page en une seule fois.
• Fonctionnement naturel et intuitifLes utilisateurs ont l'habitude de cliquer sur des onglets pour passer d'un contenu à l'autre.

Le widget Tabs est déjà intégré dans la version gratuite d'Elementor, il n'est donc pas nécessaire de passer à la version Version Proet il n'est pas nécessaire d'installer des plug-ins tiers pour obtenir cette fonctionnalité.

Module de changement d'onglet avec Elementor Free Edition Tabs Widget

La version gratuite d'Elementor Onglets Utilisateurs du support du moduleLiberté d'ajouter plusieurs éléments d'étiquetagePar défaut, une structure de départ est affichée, mais vous pouvez personnaliser le nombre d'étiquettes et le contenu des titres en cliquant sur le bouton "Ajouter un élément" dans l'écran d'édition. Par défaut, une structure de départ est affichée, mais les utilisateurs peuvent cliquer sur le bouton "Ajouter un élément" dans l'interface d'édition pour personnaliser le nombre d'étiquettes et le contenu des titres. Voici le déroulement de l'opération :

Ajouter le module Onglets et catégoriser le contenu

• Ouvrez l'éditeur de pages de votre site web et cliquez sur le constructeur de pages Elementor.
• Dans le champ de recherche du panneau de gauche, tapez Ongletsvolonté Onglets Le widget est glissé dans la page.

• Par défaut, deux onglets sont affichés (Onglet #1 et Onglet #2), que vous pouvez remplacer par les noms des éléments dont vous avez réellement besoin, par exemple :
  • Tab #1 → Introduction
  • Tab #2 → Spécifications
  • Tab #2 → évaluation

• Cliquez sur le bouton "Ajouter un élément" pour continuer à ajouter des catégories de contenu telles que "Foire aux questions".

Le module Elementor Tabs affiche par défaut l'ongletpremier élémentonglet (d'une fenêtre) (informatique)Cela signifie que si vous voulez que l'utilisateur voie l'"introduction" en premier lorsqu'il ouvre la page, il vous suffit de le faire. En d'autres termes, si vous voulez que l'utilisateur voie l'"introduction" en premier après avoir ouvert la page, il vous suffit de.. :

• Définir "Introduction" comme premier élément de la liste des balises ;
• Les autres onglets, tels que "Spécification" et "évaluation", seront affichés c?te à c?te sous forme d'onglets, et vous pourrez parcourir le contenu correspondant en cliquant sur le commutateur.

Suggestions de styles d'onglets

Bien que la version gratuite ait des fonctionnalités limitées, vous pouvez toujours effectuer des optimisations simples sur les styles d'onglets dans Elementor :

• Dans l'onglet Styles :
  • Modifier la police, la couleur et la taille du titre ;
  • Ajuster l'arrière-plan ou la bordure de la barre d'onglets ;
  • Définir la couleur de mise en évidence des étiquettes dans l'état actif pour améliorer l'orientation visuelle ;

• Si vous souhaitez que les étiquettes soient plus proches d'un bouton, vous pouvez également utiliser la fonctionCSS personnalisé(ou des cours à thème) pour l'embellissement.

Conseils avancés (pour les pages de commerce électronique)

Le module Onglets d'Elementor convient à la présentation d'informations statiques. Si vous souhaitez placer un contenu plus complexe sous chaque onglet (par exemple, des listes d'évaluation dynamiques, des spécifications de produits variables, etc :

• Utilisation imbriquée d'autres widgetsAjouter des composants tels que du texte, des images, des listes, des boutons, etc. à la zone de contenu de l'étiquette ;

• Incorporer les shortcodes de produits de WooCommerceUtilisation du module d'évaluation avec le module d'évaluation intégré de WooCommerce [woocommerce_reviews] et d'autres codes courts ;

• Améliorer la typographie avec le module SectionLe contenu de chaque onglet doit être typographiquement indépendant et hiérarchisé.

Lacunes et évolutivité

même si Elementor Free EditionIl offre une fonctionnalité de base de changement d'étiquette, mais peut se sentir limité pour répondre à des besoins plus avancés tels que des animations plus interactives, des étiquettes graphiques mixtes, des légendes d'ic?nes, des appels de données dynamiques, et ainsi de suite.

Vous pouvez envisager de l'associer aux plugins d'extension suivants pour en améliorer la fonctionnalité :

• Addons essentiels pour Elementor
• Happy Addons
• Premium Addons
• Element Pack Lite

La plupart de ces plugins proposent des widgets Tabs/Accordion plus riches en fonctionnalités, ainsi que des versions gratuites pour les utilisateurs avancés.

résumés

Avec le widget Tabs de la version gratuite d'Elementor, vous pouvez rapidement construire une page d'accueil.Module d'onglet de page détaillée de produit clair, utile et sans plugin.

Cette approche est particulièrement adaptée aux vendeurs individuels, aux petites marques ou aux sites web basés sur le contenu, et permet une expérience d'affichage de haute qualité sans nécessiter de développement supplémentaire ou l'achat d'une version professionnelle du plugin.

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.