Personnaliser le plugin Digiforma avec Elementor et CSS custom

Vous avez installé le plugin Digiforma, synchronisé votre catalogue, paramétré les couleurs et l’apparence. Techniquement, tout fonctionne : vos formations s’affichent, le formulaire accepte les inscriptions, la synchronisation tourne chaque jour. Mais visuellement, quelque chose cloche. Vos pages formation ne ressemblent pas au reste de votre site. Le design est propre mais générique, la typographie n’est pas la vôtre, les boutons ont leur style par défaut, et le rendu manque de cette touche qui fait la différence entre un site qui fonctionne et un site qui convertit.

Pour aller plus loin, il faut sortir des réglages natifs et passer à deux leviers puissants : l’édition Elementor des fiches formation et la personnalisation CSS via un child theme. Ce guide vous explique comment combiner les deux pour un rendu vraiment professionnel.

L’essentiel à retenir : le paramétrage natif du plugin Digiforma se limite aux couleurs et à quelques textes. Pour vraiment aligner vos pages formation sur votre charte graphique, il faut (1) activer Elementor sur le post type Formations dans les réglages Elementor, (2) créer un template dynamique avec Elementor Pro, et (3) ajouter du CSS custom via un child theme WordPress pour surcharger les styles du plugin. Les trois niveaux combinés permettent une personnalisation totale sans casser les mises à jour.

Pourquoi personnaliser le plugin Digiforma ?

Le plugin est livré avec un design propre et fonctionnel, pensé pour être utilisable immédiatement par n’importe quel organisme de formation. Le problème : il est pensé pour tous, donc il ne ressemble à personne.

Pour un site vitrine qui joue sur l’image et la qualité perçue, c’est un vrai enjeu :

• Vos pages accueil et services ont été soignées, designées, alignées sur votre charte
• Vos pages formations générées par le plugin ont l’air plaquées, avec une typographie différente, des boutons génériques, une mise en page rigide
• Le visiteur ressent cette rupture inconsciemment : confiance en baisse, taux de conversion qui chute

Quand on investit dans le SEO et dans l’acquisition, laisser les fiches formation au rendu par défaut revient à saboter son propre travail : le trafic arrive sur des pages qui n’inspirent pas la même qualité que le reste du site.

Les limites du paramétrage natif

Dans les Réglages du plugin, section Apparence, vous pouvez modifier :

• Les couleurs : fonds, boutons, textes, accents
• L’arrondi des coins des éléments
• L’image de bannière et le bandeau de chiffres
• Les marges d’entête et le breakpoint mobile

Ce que vous ne pouvez pas changer via les réglages natifs :

• La typographie (police, taille, espacements)
• La grille de présentation (nombre de colonnes, gouttières, ordre des blocs)
• Les hover effects, animations, transitions
• Les composants spécifiques (témoignages, FAQ, CTA custom, comparateurs, tabs)
• La structure de chaque fiche formation (ordre des sections, contenu additionnel)
• Le responsive fine-tuné sur tous les breakpoints

Le tour du paramétrage natif se boucle en 30 minutes. Tout ce qui vient après se joue avec Elementor et CSS.

Niveau 1 : exploiter au maximum les réglages natifs

Avant de toucher au code, assurez-vous d’avoir tiré tout le jus des réglages. Beaucoup de personnalisations évitables en CSS se règlent déjà dans l’admin :

1. Alignez les couleurs exactes de votre charte (codes HEX précis, pas d’approximations)
2. Choisissez un arrondi cohérent avec vos boutons et cartes existants (4, 8, 12 ou 16 px généralement)
3. Uploadez une bannière d’archive de qualité (1920×500 px, format WebP compressé)
4. Remplissez le bandeau de chiffres avec vos 4 KPIs les plus parlants (apprenants, formations, formateurs, satisfaction)
5. Activez l’affichage des sessions et des formateurs pour enrichir vos fiches

Pour chaque formation individuelle, vous pouvez aussi enrichir le contenu côté Digiforma : ajouter des objectifs détaillés, des prérequis, des modalités pédagogiques, des indicateurs de résultats. Tout ce contenu remonte automatiquement dans le plugin et nourrit le SEO.

Niveau 2 : activer Elementor sur le post type Formations

C’est l’étape que la plupart des utilisateurs ne trouvent pas seuls, et qui change pourtant complètement la donne.

La manipulation Elementor dans les réglages

Par défaut, Elementor ignore le custom post type Formations créé par le plugin. Si vous essayez d’éditer une fiche avec Elementor, le builder ne se lance pas. Beaucoup pensent alors que Elementor est incompatible. C’est faux. Il faut simplement activer la prise en charge manuellement :

1. Admin WordPress → Elementor → Réglages
2. Onglet Général
3. Section Types de contenu (ou Post Types en anglais)
4. Cochez Formations
5. Sauvegardez

Vous pouvez également cocher Formateurs et Catégories de formations si vous voulez personnaliser aussi ces templates. Une fois sauvegardé, chaque fiche formation peut être éditée avec Elementor comme n’importe quelle page.

Créer un template dynamique avec Elementor Pro

Éditer chaque fiche une par une n’est pas tenable si vous avez 20, 50 ou 100 formations. Avec Elementor Pro, vous pouvez créer un template dynamique qui s’applique automatiquement à toutes les fiches formation, en tirant les données depuis les champs Digiforma :

1. Templates → Theme Builder → Single Formation
2. Cliquez sur Ajouter nouveau
3. Choisissez une structure de départ ou partez de zéro
4. Utilisez les widgets dynamiques (titre, contenu, image, ACF) pour tirer les informations des champs Digiforma
5. Designez la page comme vous voulez : hero personnalisé, programme en accordéon, sessions en cards, formateurs en slider, FAQ, CTAs multiples
6. Publiez et appliquez aux conditions Formations → All

Ce template devient alors la nouvelle base visuelle de toutes vos fiches. Quand vous ajoutez une formation côté Digiforma, elle reprend automatiquement le design de votre template. Vous gardez la scalabilité du plugin tout en ayant un rendu sur-mesure.

Niveau 3 : CSS custom via child theme

Elementor gère les templates, mais certains éléments restent générés automatiquement par le plugin : le listing catalogue (la page qui liste toutes vos formations), les filtres de recherche, la pagination, le formulaire d’inscription. Pour personnaliser ces zones, il faut passer par le CSS.

Pourquoi utiliser un child theme

Si vous ajoutez du CSS directement dans votre thème parent ou dans les paramètres globaux d’Elementor, vos modifications seront écrasées à la prochaine mise à jour du thème. La bonne pratique WordPress consiste à créer un child theme : un mini-thème qui hérite du parent mais qui reste protégé des mises à jour.

Dans le child theme, vous ajoutez :

• Un fichier style.css avec vos règles CSS personnalisées
• Éventuellement des overrides de templates du plugin (voir plus bas)
• Un fichier functions.php pour des fonctions WordPress custom si nécessaire

La plupart des thèmes premium (GeneratePress, Astra, Kadence, Blocksy) proposent un child theme prêt à l’emploi téléchargeable en quelques clics.

Les classes CSS du plugin à cibler

Le plugin Digiforma utilise des classes CSS préfixées qui permettent de cibler précisément chaque élément. Quelques zones typiques à personnaliser :

Les classes exactes peuvent varier selon la version du plugin. Inspectez votre rendu avec les outils développeur de votre navigateur (F12 sur Chrome) pour identifier précisément les sélecteurs à cibler.

Les overrides de templates

Pour des modifications structurelles (pas juste visuelles), vous pouvez surcharger les templates PHP du plugin. Le principe : vous copiez le template d’origine depuis /wp-content/plugins/digiforma/templates/ vers /wp-content/themes/votre-child-theme/digiforma/, puis vous le modifiez.

WordPress charge automatiquement la version du child theme si elle existe. Ces overrides survivent aux mises à jour du plugin tant que la structure des données ne change pas.

Attention : cette approche demande des compétences PHP et WordPress. Mal faite, elle peut casser des fonctionnalités ou bloquer des futures mises à jour. En cas de doute, privilégiez le CSS ou les templates Elementor.

Composants sur-mesure à envisager

Au-delà du design pur, la personnalisation permet d’ajouter des composants qui n’existent pas nativement dans le plugin. Quelques idées qui fonctionnent bien sur les sites formation :

• Bloc témoignages anonymisés par formation (extrait d’évaluations Qualiopi)
• Calculateur de prise en charge (CPF, OPCO, Pôle Emploi) avec redirection vers le formulaire
• Timeline pédagogique visuelle pour les formations longues
• Comparateur de formations pour les organismes avec plusieurs niveaux (débutant / avancé / expert)
• Téléchargement de programme PDF contre saisie d’email (lead magnet)
• Bloc FAQ spécifique avec schema FAQ pour enrichir le SEO
• Vidéo de présentation du formateur intégrée dans la fiche

Chacun de ces composants peut être développé comme un widget Elementor custom, un template dynamique, ou un bloc Gutenberg réutilisable. Le choix dépend de votre stack technique.

Maintenir la personnalisation lors des mises à jour

Une personnalisation bien faite doit survivre aux mises à jour du plugin et du thème. Quelques règles à respecter :

• Toute modification dans un child theme, jamais dans le parent ou directement dans le plugin
• Overrides de templates uniquement quand le CSS ne suffit pas, avec commentaires pour documenter ce qui a été changé
• Templates Elementor exportés régulièrement en JSON pour les sauvegardes
• Tests après chaque mise à jour majeure du plugin sur un environnement de staging avant production
• Documentation des modifications dans un fichier CUSTOMIZATIONS.md à la racine du child theme

Cette rigueur permet de capitaliser sur vos personnalisations année après année sans devoir tout refaire à chaque mise à jour. Pour un accompagnement professionnel qui applique ces bonnes pratiques, notre service de personnalisation du plugin Digiforma prend en charge l’ensemble du chantier avec un code propre et maintenable.

Faut-il obligatoirement Elementor Pro pour personnaliser ?

Non, la version gratuite d’Elementor permet d’éditer les fiches formation individuellement une fois la prise en charge du post type activée. En revanche, pour créer un template dynamique qui s’applique automatiquement à toutes les fiches, la version Pro est nécessaire. Pour un organisme avec un catalogue évolutif, c’est un investissement rapidement amorti.

Peut-on personnaliser sans aucune compétence technique ?

Le paramétrage natif et l’édition Elementor basique sont accessibles sans code. En revanche, le CSS custom et les overrides de templates demandent des bases HTML / CSS / PHP. Si vous n’avez pas ces compétences en interne, un accompagnement par une agence spécialisée est la solution la plus rapide. Notre équipe EVICO prend en charge l’ensemble de la personnalisation dans le cadre d’une prestation d’intégration.

Les mises à jour du plugin cassent-elles la personnalisation ?

Si elle est bien faite (child theme, CSS propre, overrides documentés), la personnalisation survit aux mises à jour sans accroc dans la grande majorité des cas. Les mises à jour qui changent la structure HTML de fond (rare) peuvent nécessiter des ajustements mineurs. Un test sur environnement de staging avant chaque mise à jour majeure est recommandé.

Combien de temps prend une personnalisation complète ?

Cela dépend de l’ampleur. Une personnalisation CSS basique pour aligner sur la charte graphique se fait en 1 à 2 jours. Une personnalisation complète avec template Elementor sur-mesure, composants custom et responsive fine-tuné prend plutôt 1 à 2 semaines. Contactez-nous pour en savoir plus si vous voulez un devis précis.

Personnaliser le plugin Digiforma transforme un outil fonctionnel en véritable levier de conversion. Un catalogue aligné sur votre charte, des fiches formation enrichies, des composants sur-mesure : c’est ce qui fait la différence entre un site qui affiche des formations et un site qui les vend. Pour un accompagnement professionnel sur cette personnalisation, notre équipe spécialisée dans l’intégration Digiforma WordPress gère l’ensemble du chantier, du paramétrage initial aux composants custom. Contactez-nous pour en savoir plus.