Refonte d’un site Web avec Elementor Pro et ACF (Advanced Custom Fields)

La Librairie des Marais, librairie indépendante à Villefranche-sur-Saône, a confié la refonte de son site Internet à Spiwee Informatique. Un projet qui a été l’occasion d’utiliser deux puissants plugins WordPress: Elementor Pro et Advanced Custom Field (ACF).

Un projet de refonte d’un site internet est toujours un projet un peu complexe si des éléments du site d’origine doivent être conservés. Dans le cas de la Librairie des Marais, il fallait migrer de nombreux articles existants, rédigés sous l’éditeur WordPress Gutenberg. De plus, cet éditeur allait continuer à être utilisé pour les articles sur le nouveau site.

La maquette du site, réalisée par la graphiste Cécile Caramelli, Ahlabelleidée!, présentait un design mettant en avant les différents thèmes du site (Evènements, Coups de cœur, Actus de la Culture) avec chacun leur propre visuel, en page d’accueil et dans leur détail.

, 

Pour répondre à cette demande, la technique utilisée est la suivante:

• Thème : Hello Elementor avec un thème enfant
• Editeur de Page : Elementor Pro
• Champs personnalisés : Advanced Custom Field
• Du css pour enrichir le design, du code PHP pour mettre en place une fonctionnalité spécifique 

Quelles principales fonctionnalités spécifiques à la version Pro de Elementor ont été utilisées ?

Elementor Pro permet de créer des modèles, donc des mises en pages normalisées pour, en particulier, des catégories d’articles. 
Parmi ces modèles, il est possible de créer des “boucles”, c’est à dire des modèles qu’on peut ensuite intégrer dans des Carrousels de Boucle (ce qui défile) ou des Grilles de Boucle, une mise en page de plusieurs éléments en lignes et en colonnes. Si vous regardez la page d’accueil de la Libraire des Marais, c’est ce type de composants que vous retrouvez.

Ces différents termes sont un peu complexes mais lorsque l’on créé des sites sous WordPress, c’est assez magique car on obtient une très grande liberté de mise en page. Liberté mélangée à de la rigueur: image, titre et texte sont présentés à l’internaute de la façon définie selon la catégorie d’article.

Pourquoi coupler Elementor Pro et Advanced Custom Fields ?

Afin d’obtenir cette homogénéité pour chaque grande catégorie du site, c’est à dire d’avoir des modèle spécifiques aux différents articles,  tout en continuant de les rédiger sous Gutenberg, Advanced Custom Fields (ACF) permet de mettre dans les articles des champs personnalisés  tels que date, horaire, image. Ils sont ensuite intégrés à un modèle Elementor qui générera la page web sur le site.

ACF est un plugin utilisé très souvent couplé avec le la programmation PHP. Mais, grâce à Elementor Pro, tout s’intègre via l’interface, pas de lignes de code ! Puissant, simple à utiliser dans les modèles.
Pour le projet de la Librairie des Marais, il a fallu juste mettre un peu les mains dans le cambouis pour une demande particulière : trier les Evènements selon leur date et non pas la date de création de l’article. Un peu de code PHP a été implémenté pour cette fonctionnalité dans le thème enfant mais cela s’est révélé relativement simple à mettre en place. 

Un projet de refonte qui a donc été passionnant pour utiliser toutes ces techniques.

Je remercie toute l’équipe de la Librairie des Marais, Bertrand, Islem et Marie, pour leur patience, leur accueil et leur dynamisme durant tout le projet.

Je remercie aussi Cécile Caramelli, avec qui nous formons une équipe graphisme/technique depuis déjà quelque temp et franchement, un vrai plaisir de travailler ensemble.

Je vous laisse découvrir le site de la Librairie des Marais et je pense que vous oublierez rapidement les lignes ci-dessus franchement techniques et obscures pour vous plonger dans des lectures plus distrayantes.

Si vous avez des projets pour votre site internet, quelques informations sur la page Création d’un site Internet.