Comment créer des onglets de défilement vertical dans WordPress avec Elementor

Les onglets de défilement vertical vous permettent d'afficher le contenu de l'onglet dans une grande disposition côte à côte. Les onglets restent empilés sur le côté gauche ou droit, tandis que le contenu de chaque onglet apparaît du côté opposé. Les visiteurs peuvent faire défiler les onglets pour explorer le contenu en eux.

Cela garde la page propre et les gens peuvent afficher beaucoup d'informations sans quitter la page actuelle. Non seulement vous pouvez afficher des textes, mais vous pouvez également afficher des images, des vidéos et des modèles dans des onglets de défilement vertical. Les utilisateurs peuvent cliquer ou appuyer sur un onglet pour voir le contenu lié à lui, tandis que les autres sections restent cachées.

Elementor est un constructeur de sites Web sans code populaire. Avec ce plugin, vous pouvez créer un site Web entier à partir de zéro en utilisant sa fonctionnalité de glisser-déposer. Dans cet article de tutoriel, nous vous montrerons comment créer des onglets de défilement vertical dans WordPress avec Elementor.

Cas d'utilisation des onglets de défilement vertical

Les onglets de défilement vertical vous aident à organiser une grande quantité de contenu dans un petit espace. Ils permettent aux visiteurs de passer à travers des sujets sans charger une nouvelle page. Cette disposition est facile à utiliser sur le bureau et le mobile. Jetons un coup d'œil à certains cas d'utilisation d'onglets de défilement vertical ci-dessous.

un. Détails du produit ou du service

Vous pouvez afficher de nombreuses descriptions de produits ou de services côte à côte. Chaque onglet peut contenir des spécifications, des prix, des fonctionnalités ou des avis. Les visiteurs peuvent rapidement comparer différentes options sans quitter la page.

né Questions fréquemment posées (FAQ)

Les onglets verticaux sont parfaits pour les FAQ. Vous pouvez regrouper des questions similaires sous un onglet et des réponses dans un autre. Les lecteurs peuvent faire défiler et cliquer uniquement sur les questions qui les intéressent.

c. Guides ou tutoriels étape par étape

Si vous souhaitez partager un processus avec de nombreuses étapes, les onglets verticaux gardent chaque étape claire. Les utilisateurs peuvent cliquer sur chaque onglet pour suivre le guide dans l'ordre. Cela rend l'apprentissage facile et maintient la page soignée.

d. Membres de l'équipe ou profils du personnel

Présentez votre équipe de manière professionnelle en donnant un onglet à chaque membre. Chaque onglet peut afficher une photo, un rôle et une biographie courte. Les visiteurs peuvent faire défiler la liste et découvrir tout le monde sans encombrement. Explorez certains des meilleurs exemples de pages d'équipe.

e. Portfolio ou vitrine du projet

Affichez votre travail ou vos projets dans des onglets verticaux pour économiser de l'espace. Chaque onglet peut afficher des images, des descriptions et des liens vers les détails. Cela aide les visiteurs à explorer de nombreux projets d'une seule page.

Comment créer des onglets de défilement vertical dans Elementor

La partie théorique est terminée. J'espère que vous avez maintenant une idée claire de l'onglet de défilement vertical et de ses cas d'utilisation. Nous allons couvrir la partie tutoriel maintenant. Nous expliquerons comment créer des onglets de défilement vertical avec Elementor sur WordPress dans cette section. Continuez à lire!

Pré-requis pour démarrer le tutoriel

Pour créer des onglets de défilement vertical sur WordPress avec Elementor, vous avez besoin des plugins suivants installés et activés sur votre site.

• Elementor gratuit
• Happyaddons gratuit
• Happyaddons pro

Remarque: vous avez besoin de HappyAddons Pro car Elementor n'a pas d'option intégrée pour créer des onglets de défilement. HappyAddons Pro propose un widget appelé Tabs Scroll qui vous permet de créer facilement des onglets de défilement vertical.

Une fois que ces plugins sont prêts sur votre site, suivez le tutoriel expliqué ci-dessous.

Étape 01: Ouvrez une page avec Elementor

Ouvrez simplement une page avec Elementor où vous souhaitez créer des onglets de défilement vertical.

Étape 02: Faites glisser et déposez le widget des onglets de défilement sur la toile

Trouvez le widget des onglets de défilement sur le panneau Elementor. Faites glisser et déposez-le sur le canevas Elementor.

Le widget des onglets de défilement est livré avec un contenu par défaut. Une fois le widget ajouté à la toile, vous verrez ce contenu par défaut.

Étape 03: Commencez à ajouter du contenu aux onglets

Vous pouvez ajouter du contenu au widget des onglets de défilement et styliser la mise en page à bien des égards. Explorez-les dans cette étape.

# Ajouter un titre au widget des onglets de défilement

Chaque section Web doit avoir un titre qui indique clairement quel type de contenu il contient. Ainsi, vous devez écrire un titre pour la section Widget Tabs Scroll.

Allez dans Content> Tabs Content> Titre . Vous obtiendrez l'espace pour écrire un titre. Vous pouvez voir que nous avons écrit un titre, «Élégant Watch Insights».

# Écrivez une description du widget

Écrivez sous le titre, vous pouvez écrire une description du widget. Si la description n'est pas nécessaire, vous pouvez simplement le supprimer.

# Ajouter du contenu aux onglets

Emmenez votre curseur dans un onglet et cliquez dessus. Cela élargira l'onglet et vous permettra d'ajouter du contenu.

# Écrivez un titre pour l'onglet

Vous devez écrire un titre pour chaque onglet . Une fois l'onglet élargi, vous obtiendrez une boîte sous le texte NAV. Ici, vous pouvez écrire un titre pour l'onglet.

# Modifiez l'icône de l'onglet

Vous pouvez supprimer l'icône si elle n'est pas nécessaire. Mais pour modifier l'icône, cliquez sur l'icône que vous pouvez voir sous l'icône NAV.

La bibliothèque d'icônes sera ouverte instantanément. Choisissez une icône que vous aimez et appuyez sur le bouton d'insertion .

Vous pouvez voir que l'icône a été modifiée.

# Ajouter du contenu à l'onglet via l'éditeur

Chaque onglet vous permet d'ajouter deux types de contenu. Vous pouvez choisir d'utiliser l' éditeur ou le modèle .

Sélectionnons d'abord l'option Editor .

En utilisant cet éditeur, vous pouvez ajouter tout type de texte et d'images, qui sera instantanément affiché sur la toile de l'onglet respectif.

# Modifiez la couleur d'arrière-plan du contenu à onglets

Pour mieux mettre en surbrillance le contenu dans l'onglet, vous pouvez modifier sa couleur d'arrière-plan, donc il s'aligne bien avec tout le contenu que vous avez ajouté à l'onglet.

# Ajouter du contenu à l'onglet via le modèle

Comme indiqué ci-dessus, le widget vous permet d'ajouter du contenu à l'onglet via l'éditeur et le modèle. Voyons maintenant comment ajouter du contenu à l'aide de modèles.

Choisissez l'option de modèle dans le type de contenu . Si vous avez déjà des modèles pré-conçus enregistrés sur votre site, cette option conviendra.

Cliquez sur l' icône déroulante Suivant pour choisir le modèle . Ensuite, sélectionnez le modèle que vous souhaitez afficher dans l'onglet.

Vous pouvez voir que notre modèle souhaité est déjà ajouté à l'onglet.

De la même manière, ajoutez du contenu à tous les onglets du widget des onglets de défilement.

Étape 04: Configurer les paramètres du widget des onglets de défilement

Une fois la partie de contenu terminée, développez la section Paramètres .

Vous pourrez modifier la largeur du panneau Navigator et la hauteur du panneau de contenu, y compris divers ajustements d'alignement, à partir de cette section.

# Ajuster la largeur du panneau de navigation

Le widget des onglets de défilement contient deux parties - le panneau Navigator (panneau de navigation) et le panneau de contenu .

Vous pouvez modifier la largeur du panneau Navigator en faisant glisser l'échelle sous cette option. En outre, vous pouvez ajuster sa position et son alignement. Le processus est affiché dans le clip vidéo ci-dessous.

# Ajuster la hauteur du panneau de commande

De la même manière, ajustez la hauteur du panneau de commande. Confirmez également que le contenu est correctement aligné verticalement.

Étape 05: styliser le widget des onglets de défilement

Venez à l' onglet Style . Définissons d'abord une couleur d'arrière-plan pour le panneau Navigator .

# Personnaliser la typographie du contenu du panneau de navigation

Mettez à jour la typographie, une par une, pour chaque contenu que vous avez ajouté au panneau Navigator. Vous pouvez modifier la famille des polices, la taille, le poids, la hauteur des lignes, etc., au besoin.

# Styliser les onglets

En ajoutant un type de bordure, une largeur de bordure, un rembourrage, une couleur de bordure, un rayon de bordure, une couleur de texte et une couleur d'arrière-plan, vous pouvez styliser les onglets et les présenter comme l'image suivante. J'espère que vous pouvez le faire vous-même.

De la même manière, développez et stylisez le contenu lié au panneau de contenu et à la section de défilement.

Étape 06: Optimisez le widget des onglets de défilement pour le téléphone mobile

Pour optimiser le widget de la taille de l'écran mobile, accédez au mode portrait mobile sur la barre supérieure.

Vous verrez que les onglets Navigator apparaissent en haut par défaut.

# Ajustez la hauteur du panneau de contenu pour les appareils mobiles

La hauteur existante peut ne pas être suffisante pour le panneau de contenu. Dans ce cas, vous devez augmenter la hauteur afin que tout le contenu dans l'onglet puisse être parfaitement vu sur la taille des écrans mobiles.

Étape 07: Optimisez le widget des onglets de défilement pour les tablettes

De même, passez au mode Portrait Tablet pour optimiser le contenu d'un affichage optimal sur les tailles d'écran de tablette.

Vous pouvez voir dans le clip vidéo ci-dessous que le widget a déjà l'air bien sur l'écran de la tablette. Donc, nous n'avons pas besoin de le modifier de toute façon.

Étape 08: Aperçu du widget des onglets de défilement

Venez à la page Aperçu et vérifiez si le widget fonctionne bien ou non. Vous pouvez voir que le widget fonctionne bien de notre côté.

Ainsi, vous pouvez créer des onglets de défilement vertical dans WordPress avec Elementor.

Final à retenir!

Les onglets de défilement vertical sont un moyen intelligent de garder une page Web soignée tout en partageant beaucoup d'informations. Ils ont laissé les visiteurs trouver ce dont ils ont besoin sans sauter sur de nouvelles pages. Après avoir suivi les étapes ci-dessus, vous pouvez facilement concevoir ces onglets avec Elementor et HappyAddons Pro.

Cela donne à votre site un aspect moderne et améliore la façon dont les utilisateurs explorent votre contenu. Cependant, lors de la création de cette section, gardez à l'esprit quelques meilleures pratiques. Utilisez des titres clairs pour chaque onglet afin que les utilisateurs sachent à quoi s'attendre. Assurez-vous que le texte, les images et les vidéos sont légers afin que la page se charge rapidement.

Vérifiez la conception sur différentes tailles d'écran et ajustez l'espacement des utilisateurs mobiles. Gardez les couleurs et les polices cohérentes avec le style de votre site afin que les onglets se mélangent naturellement avec le reste du design. Ces petits détails aident à créer une expérience professionnelle fluide pour chaque visiteur.

Apprenez à concevoir un flip box dans WordPress avec Elementor.