Développement low‑code du site de l’agence ADR
Développement d’un site à l’architecture complexe et aux animations ultra-fluides avec Elementor et GSAP.
Expertises
Développement low-code
Animations GSAP
Secteur
Évènementiel
Année
2026
L'agence ADR se développe et souhaitait moderniser son portfolio web. J'ai conçu l'intégration technique en développant des solutions sur-mesure pour reproduire fidèlement les maquettes avec des animations fluides.
L’agence ADR, en pleine croissance, souhaitait moderniser son portfolio en ligne pour lui donner un aspect plus élégant et dynamique. Elle a fait appel à 72DPI, qui assure déjà l’hébergement et la maintenance de son site depuis longtemps, pour intégrer cette nouvelle version. Spécialisée dans Elementor, 72DPI s’est toutefois heurtée à un obstacle : les maquettes fournies n’étaient pas directement compatibles avec cet outil.
C’est pourquoi Mathieu Garnero, de 72DPI, m’a sollicité pour l’accompagner dans le développement du site. L’objectif était de reproduire fidèlement les maquettes avec des animations fluides et soignées, tout en conservant l’environnement WordPress/Elementor.
"Un expert en web design utilisant Elementor"
Galerie animée, défilement horizontal, navigation alternative et thème sombre : des solutions techniques sur-mesure pour transformer la vision d'ADR en expérience digitale.
Une galerie de projet animée
La page d’accueil du nouveau site d’ADR immerge les visiteurs dans le portfolio de l’agence grâce à une galerie de projets animée. Deux colonnes défilent automatiquement dans des directions opposées, s’accélèrent au scroll et se figent au survol, offrant une navigation fluide et intuitive.
Une vue liste complexe
ADR souhaitait proposer une vue alternative de son portfolio : une liste dynamique avec les projets à gauche et leurs visuels qui s’affichent à droite au survol. Sur mobile, où le survol n’existe pas, j’ai développé une solution pour reproduire cet effet et préserver l’expérience imaginée.
Des fiches projets au scroll horizontal
Contrairement au reste du site, les fiches projet devaient proposer un défilement horizontal. Cette fonctionnalité n’étant pas native, j’ai conçu un template sur mesure permettant d’afficher les images et vidéos de chaque projet avec un défilement fluide au scroll.
Un thème sombre
En complément de ces personnalisations, ADR souhaitait proposer un thème sombre. J’ai développé cette fonctionnalité pour qu’elle détecte automatiquement les préférences de l’appareil, tout en offrant la possibilité de basculer manuellement via un switch intégré au site.
Une galerie Elementor boostée à GSAP
Les loop grids natives d’Elementor ne sont pas animables. Pour créer cette galerie dynamique tout en conservant les fonctionnalités de filtrage, j’ai construit la structure à partir d’éléments natifs que j’ai ensuite animés avec la librairie GSAP. Les loop grids sont clonées pour simuler un défilement infini, et le scroll natif est remplacé par un système personnalisé permettant aux deux colonnes de défiler en sens opposés (l’une vers le haut, l’autre vers le bas) avec de l’inertie pour une expérience fluide.
Un layout unique pour deux fonctionnements différents
L’affichage du portfolio en liste a représenté un défi d’intégration majeur. À partir d’éléments natifs et d’un code unique, j’ai combiné deux expériences radicalement différentes : sur desktop, une liste de projets à gauche affiche, au survol, l’image correspondante à droite ; sur mobile, la même liste se trouve dans la partie basse de l’écran et affiche l’image en haut lors de la sélection. Le survol n’existant pas sur mobile, j’ai développé un système qui détecte automatiquement le projet le plus proche du centre de l’écran pour le sélectionner.
Des fiches projets sur mesure
Les fiches projet, malgré leur apparence épurée, ont présenté plusieurs défis techniques. Au-delà de l’animation fluide d’apparition et du défilement horizontal au scroll, le template devait pourvoir afficher des vidéos à différents formats (16:9, 9:16 et 1:1) au sein de la galerie de médias. J’ai créé un shortcode 100% personnalisé permettant d’importer chaque média et texte via un ACF repeater field, de définir son format d’affichage et d’y associer des contenus.
Résultat : une fiche projet modulaire et entièrement personnalisable depuis l’interface WordPress, offrant un affichage original qui répond à tous les besoins exprimés par le client.
Un thème sombre presque natif
WordPress et Elementor ne proposent pas de système de thème light/dark natifs. Mais Elementor propose nativement un système de variables de couleurs. J’en ai donc tiré partie pour créer ce système de gestion de thème, en codant un système permettant de déterminer le thème appliqué au système et en appliquant un paramètre similaire au site. J’ai également créé un switch manuel, permettant de passer d’un thème à l’autre en ignorant le thème du système d’exploitation.
Prêt à concrétiser vos ambitions créatives ?
ADR dispose désormais d’un portfolio web qui reflète pleinement son expertise et son dynamisme. Chaque fonctionnalité a été développée sur-mesure pour dépasser les limitations natives d’Elementor, tout en préservant la flexibilité de gestion depuis WordPress. Grâce à des animations fluides pilotées par GSAP, un système de navigation alternatif, des fiches projet modulaires et un thème sombre adaptatif, l’agence bénéficie d’une vitrine digitale unique et performante qui valorise chaque projet avec élégance.
Points clés du projet :
- Galerie immersive : défilement automatique infini avec deux colonnes en sens opposés et inertie GSAP
- Navigation alternative : affichage en liste dynamique avec détection intelligente sur mobile
- Fiches projet personnalisées : défilement horizontal au scroll et gestion multi-formats vidéo (16:9, 9:16, 1:1)
- Système modulaire : shortcode ACF permettant une personnalisation totale depuis WordPress
- Expérience complète : thème sombre adaptatif avec détection automatique et switch manuel
Votre portfolio mérite une expérience qui reflète votre savoir-faire sans compromis techniques. Transformons vos contraintes en opportunités créatives.
Refonte webdesign de la page d'accueil et du portail des abonnés de Jurislogic
