AJOUT D'UNE TOUCHE ARTISTIQUE AUX "CATÉGORIES TAB"
MODULE "GALLERY FILTERABLE" DE DIVIDans le vaste monde de la personnalisation web, chaque ligne de code peut devenir une expression artistique.
Le script JavaScript que nous allons explorer aujourd’hui est un moyen de transformer visuellement les noms des catégories d’une galerie filtrable du module “Supreme Pro” de Divi, pour le site d’une Architecte d’Intérieur.
Affichage initial des onglets de catégories.
Les appellations ici correspondent aux “catégories” que j’ai établies dans la médiathèque de WordPress.
Le Contexte Artistique
Ce script a été spécialement conçu pour personnaliser les rubriques d’un site web dédié à l’architecture d’intérieur. Chaque catégorie représente une facette unique du travail de l’architecte, et le script vise à refléter cette diversité de manière visuelle.
Itération à travers les Catégories
Le script commence par sélectionner toutes les balises <li> à l’intérieur d’un élément avec la classe .GalleryIHD, chaque balise représentant une catégorie. La boucle forEach est utilisée pour itérer à travers chaque élément de la liste.
Transformation des Libellés
À l’intérieur de la boucle, une variable filtre est créée en extrayant la première partie du texte de chaque catégorie. La méthode split(" ") divise le texte en un tableau en utilisant l’espace comme séparateur.
Ensuite, un bloc switch est utilisé pour adapter visuellement chaque catégorie. Chaque cas représente une facette spécifique du travail de l’architecte, et le texte de la balise <li> est modifié en conséquence.
Ajout dans DIVI – Rubrique “L’intégration”
Pour intégrer ce script sur le site, il suffit de le placer dans la rubrique “l’intégration” de l’extension DIVI. Cela garantit que le code s’exécute harmonieusement avec le reste du site sans nécessiter des modifications complexes.
Résultat Final : Une Galerie Personnalisée et Artistique
Ce script JavaScript va bien au-delà de la simple modification visuelle. En personnalisant les libellés des catégories d’une galerie dédiée à l’architecture d’intérieur, il crée une expérience unique pour les visiteurs du site. Grâce à son intégration facile via la rubrique “l’intégration” de DIVI, il offre une personnalisation sans effort, démontrant comment la technologie peut être façonnée pour répondre aux besoins spécifiques d’un domaine aussi créatif que l’architecture d’intérieur. Chaque ligne de code devient ainsi une touche artistique, contribuant à l’élégance et à la fonctionnalité globale du site.
ique “l’intégration” de l’extension DIVI. Cela garantit que le code s’exécute harmonieusement avec le reste du site sans nécessiter des modifications complexes.
ATTENTION LE RENDU N’EST PAS VISIBLE DANS LE BUILDER !
Image du site d’IHD Isa Home Designer
Merci d’avoir pris le temps de parcourir cet article.
J’espère qu’il a pu vous être utile et vous offrir des conseils pratiques pour simplifier la création de votre site WordPress.
A bientôt !
Résultat Additionnel : Réorganiser les Boutons de Catégories de manière Alphabétique
Bien que le module actuel de Supreme Pro offre la possibilité de disposer les boutons par ordre croissant ou décroissant, cette fonctionnalité ne répondait pas pleinement à mes besoins spécifiques. Dans ma situation particulière, je souhaitais présenter les chantiers dans l’ordre “Avant”, “Rendu 3d”, “Pendant” et “Après”. Cependant, avec l’option “ordre croissant”, le bouton “Après” se positionnait avant le bouton “Avant”, ce qui est compréhensible mais ne correspondait pas à mes préférences.
Il devenait donc impératif d’apporter une nouvelle logique à ce module pour répondre à mes besoins spécifiques.
Dans le prochain tutoriel, nous explorerons comment ajuster ce code Javascript pour permettre à nos boutons d’être organisés dans l’ordre précis dont j’ai besoin, offrant ainsi une solution sur mesure pour ma présentation spécifique des chantiers.
