Adaptation d'un template divi aux besoins web d'une PME
SCAN Center a pris contact avec l'agence web oaka pour effectuer la refonte de son site internet eZ Publish. La solution technique WordPress et le thème Divi de Elegant themes avaient déjà été identifiés comme la solution retenue par le client. 3 points d'attention ont ainsi été soulevés pour la refonte de ce site sous WordPress :
- Co-construction avec l'équipe marketing digital du client ;
- Réalisation du site dans un délai de 4 à 6 semaines ;
- Maintien du trafic et des urls indexées ;
oaka revient sur ce projet collaboratif sous la forme d'une étude de cas et vous présente quelques uns des dispositifs de Divi que nous avons utilisé pour mettre en place ce site internet.
Co-Construction du site web avec l'équipe Marketing digital pour gagner du temps et faciliter la prise en main de l'administration
Une expression de besoins bien préparée
L'équipe marketing de SCAN Center avait préalablement défini la solution technique WordPress et le thème graphique Divi de Elegant themes. Une sélection de quelques templates Divi avait également été identifiée.
Ainsi, lors des premiers ateliers de travail, l'équipe projet a rapidement pu déterminer le template Divi retenu et les variables graphiques à ajuster. Cela a permis de clarifier efficacement le périmètre fonctionnel, le chiffrage et le planning du projet.
Un travail d'équipe dès le début du projet
SCAN Center et oaka ont mis en place un dispositif d'accompagnement flexible afin que oaka puisse répondre aux besoins du client au fur-et-à-mesure que le projet avance. Au travers d'un forfait conseil / formation, oaka a pu former l'équipe marketing digital de SCAN Center à la prise en main de Divi dès la conception du projet.
oaka a également aidé SCAN Center à saisir quelques contenus du site internet en fonction des difficultés rencontrées et du planning de l'équipe en charge de l'intégration des contenus.
L'utilisation d'un template existant de Divi
Le fait de partir d'un template existant de Divi permet de poser un design éprouvé et d'éviter de se heurter à la page blanche. Véritable gain de temps et de budget. En contrepartie, la structure des pages ne sera pas une création originale de bout en bout.
Par défaut, c'est donc le comportement et l'affichage du template sélectionné qui seront appliqués. On peut ainsi concentrer du temps sur quelques adaptations graphiques et les véritables spécificités souhaitées. L'adaptation du template Divi à la charte web du client va permettre de se différencier des autres sites.
Exemple de modifications permettant de personnaliser un template graphique Divi :
- l'adaptation des couleurs principales et des polices ;
- la personnalisation des contenus : charte rédactionnel, champ sémantique, etc. ;
- le traitement visuels : cadrage des photos, filtres graphiques, suite de pictogrammes, etc. ;
Adaptation du template graphique Divi pour la migration du site internet WordPress de SCAN Center
La mise en place d'un design System Divi
Utilisation des composants Divi : l'utilisation d'un template Divi a permis de capitaliser sur les styles du template déjà appliqués aux 50 modules natifs de Divi proposés par Elegant themes. Après analyse des typologies de contenus de l'ancien site, nous nous sommes uniquement concentrés sur une sélection de modules jugés les plus intéressants pour ce projet afin d'en ajuster les styles.
Utilisation des presets Divi : grâce aux presets, nous avons créé toutes les variantes graphiques nécessaires pour chaque module ! L'équipe marketing digital a ainsi la capacité de mettre en page rapidement les contenus tout en ayant la possibilité de modifier massivement les styles de ses modules.
Changement du style d'un bouton grâce aux presets Divi sur le site internet de SCAN Center
Utilisation de la bibliothèque Divi : Sur la base du template Divi sélectionné, oaka a adapté plus de 20 compositions identifiées comme pertinentes et les a intégré dans la bibliothèque Divi. Une page "Guide de styles" réservée à l'équipe SCAN Center en charge de l'administration du site a également été créée afin de regrouper toutes les compositions de la bibliothèque. Cela facilite grandement la sélection de la bonne composition et de retrouver le nom associé dans la bibliothèque afin de l'intégrer dans le Divi Builder.
Création des gabarits de page avec le thème Builder Divi
Afin d'optimiser et uniformiser la structure des pages d'un même type de contenus, oaka a exploité, dans le Thème Builder de Divi, le Design System mis en place. Des modèles de page ont ainsi été défini pour définir le design de tous les types de contenus : pages éditoriales, témoignages, listings, etc.
Pour illustrer cela, tous les témoignages du site SCAN Center sont ainsi composés de la même structure :
- une entête de page avec l'image à la une en arrière plan, l'affichage dynamique des catégories, un titre et une description contrôlés par des presets spécifiques, etc. ;
- une zone libre (Divi Builder) pour structurer le contenu à partir des compositions de la bibliothèque ou de compositions sur-mesures en fonction des besoins du webmaster ;
- une section spécifique à ce gabarit de page proposant des fonctionnalités de partage ;
- une section globale (commune à tout le site) qui remonte dynamiquement les 3 derniers témoignages ;
SCAN Center garde ainsi la main sur les fonctionnalités présentent sur chaque gabarit de page et maitrise le style graphique global du site internet. De plus, l'équipe marketing digital de SCAN Center a la possibilité de faire évoluer ces gabarits de page en un seul et même endroit, le Thème Builder de Divi.
Nous avons confié la migration d'un ancien site professionnel à l'agence oaka. Disponible, rapide et sympathique, la réalisation du projet s'est déroulé dans un laps de temps + court que prévu. Le résultat est tout simplement parfait et correspond en tout point (si ce n'est plus) à la commande.
Je recommande fortement.
Sébastien CLOATRE
Chargé de Marketing Digital
En résumé
L'Agence web oaka a apporté son expertise technique à SCAN Center pour mettre en oeuvre les bonnes pratiques de Divi. Un environnement technique sain a été mis en place pour permettre à l'équipe marketing digital de SCAN Center de saisir les contenus et de faire évoluer plus facilement la mise en page du site WordPress.
Enfin, en collaborant étroitement dès le départ, oaka et SCAN Center ont pu réaliser la refonte d'un site eZ Publish sous WordPress dans le temps imparti et mettre en place une stratégie de redirection d'urls afin de capitaliser sur le trafic existant.
