Migration du site internet d’une PME vers WordPress Divi

Innovateur au service des entreprises depuis plus de 20 ans, la PME SCAN Center met son expérience et son savoir-faire au service de ses clients pour les accompagner dans leur transformation numérique. L'entreprise propose une offre complète aux entreprises pour répondre à leurs besoins de numérisation de leurs documents.

Secteur

Service

Localisation

Planning

5 semaine(s)

Période

mars 2021
Objectifs
 Le challenge

Adaptation d'un template divi aux besoins web d'une PME 

SCAN Center a pris contact avec l'agence web O'Aka 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 ;

O'Aka 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.

Illustration d'un homme en train de scanner des documents
Enseigne SCAN Center à Ajaccio en Corse

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 O'Aka ont mis en place un dispositif d'accompagnement flexible afin que O'Aka puisse répondre aux besoins du client au fur-et-à-mesure que le projet avance. Au travers d'un forfait conseil / formation, O'Aka a pu former l'équipe marketing digital de SCAN Center à la prise en main de Divi dès la conception du projet.

O'Aka 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. ;
capture d'écran du visuel buider Divi

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.

capture vidéo des presets Divi

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é, O'Aka 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, O'Aka 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 O'Aka. 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.

Favicon de SCAN Center Ajaccio

Sébastien CLOATRE

Chargé de Marketing Digital

En résumé

L'Agence web O'Aka 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, O'Aka 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.

On en parle ensemble ?

Nous nous ferons un plaisir d'échanger avec vous sur votre projet digital. Afin de simplifier la gestion de votre demande, veuillez compléter le formulaire. Nous reprendrons rapidement contact avec vous.

Nous utilisons Mailchimp comme plateforme marketing. En remplissant ce formulaire, vous acceptez que O'Aka prenne contact avec vous dans le cadre d'une démarche commerciale et que vos informations seront transférées vers Mailchimp pour qu'elles puissent être traitées par nos soins. A tout moment, vous aurez la possibilité de vous désinscrire de notre base de données via les procédures qui vous seront transmises. En savoir plus sur le traitement des données par Mailchimp ou le traitement des données par O'Aka.

Nous utilisons Mailchimp comme plateforme marketing. En remplissant ce formulaire, vous acceptez que O'Aka prenne contact avec vous dans le cadre d'une démarche commerciale et que vos informations seront transférées vers Mailchimp pour qu'elles puissent être traitées par nos soins. A tout moment, vous aurez la possibilité de vous désinscrire de notre base de données via les procédures qui vous serons transmises. En savoir plus sur le traitement des données par Mailchimp ou le traitement des données par O'Aka.

Le A Coeur blanc et transparent de la marque Alsace

O'Aka, Implantée au coeur de l'Alsace

Pin It on Pinterest