Ce que vous saurez faire
Ce tutoriel vous guide pas a pas pour creer un theme WordPress sur mesure adapte aux besoins specifiques d’une PME africaine, en utilisant un builder visuel professionnel sans coder une seule ligne. A la fin de cette formation, vous saurez choisir le bon builder selon votre projet, installer un theme parent compatible, configurer une charte graphique coherente, construire un header et un footer reutilisables, modeliser une page d’accueil, des pages internes et des templates dynamiques pour le blog. Vous repartirez avec un site rapide, responsive, conforme aux attentes du marche senegalais (chargement sous 3 secondes en 4G, lecture confortable sur smartphone Tecno ou Infinix, formulaire WhatsApp integre). Le builder visuel divise par 4 le temps de creation par rapport au code pur tout en offrant un controle total sur le design. Budget approximatif : 65 000 FCFA pour la licence builder + 25 000 FCFA pour un theme parent premium.
Etape 1 : Choisir le bon builder visuel selon votre projet
Quatre builders dominent le marche : Elementor Pro, Divi, Bricks Builder, Breakdance. Pour une PME senegalaise, le meilleur compromis est Bricks Builder. Pourquoi ? Performance superieure (Lighthouse 90+ par defaut), code propre sans bloat, licence a vie disponible (149 dollars une fois), prise en main rapide. Si vous debutez vraiment, commencez par Elementor Pro : interface plus intuitive, communaute francophone enorme, tutoriels gratuits abondants. Evitez Divi pour les sites professionnels : trop de shortcodes alourdissent les pages. Pour un budget serre, Elementor version gratuite suffit pour un site vitrine simple. Comparez sur Builder.io ou Wpbuilders.com, prenez votre decision et achetez la licence sur le site officiel uniquement (jamais en versions nulled : risque de malware).
Etape 2 : Preparer un theme parent compatible et leger
Un builder visuel a besoin d’un theme parent qui ne se met pas en travers. Trois choix valides : Hello Theme (gratuit, optimise pour Elementor), GeneratePress (gratuit ou Premium 59 dollars, fonctionne avec tous les builders), Astra (gratuit ou Pro 49 dollars, le plus utilise au monde). Allez dans Apparence > Themes > Ajouter > tapez le nom du theme > Installer > Activer. Pour Bricks, achetez et telechargez le fichier zip sur bricksbuilder.io > Apparence > Themes > Ajouter > Televerser un theme > selectionnez le zip > Installer maintenant > Activer. Verifiez que le theme parent affiche bien les pages sans casse. Desinstallez tous les autres themes pour eviter les conflits.
Etape 3 : Configurer la charte graphique globale
Avant de construire la moindre page, definissez vos variables de design. Allez dans Bricks > Settings > Theme Styles > cliquez sur le crayon. Section Colors : ajoutez vos 5 couleurs principales avec un nom et un code hexadecimal. Exemple pour une PME senegalaise : Primary #006B3F (vert drapeau), Secondary #FCD116 (jaune drapeau), Dark #1A1A1A, Light #F8F8F8, Accent #E31B23. Section Typography : choisissez 2 polices via Google Fonts. Recommandation Senegal : Inter pour le corps de texte (lisible sur petit ecran) + Poppins pour les titres (moderne, africain-friendly). Definissez les tailles : H1 48px desktop / 32px mobile, H2 36/24, H3 24/20, paragraphe 16/15. Sauvegardez. Toutes vos pages utiliseront automatiquement ces variables : modification ulterieure sans toucher chaque page.
Etape 4 : Creer un header reutilisable
Allez dans Bricks > Templates > Add New > Type Header > Title "Header principal" > Edit with Bricks. Conditions d’affichage : selectionnez "Entire Website". Construisez la structure : Section > Container Flex Row Space-Between Align-Center Padding 16px 5%. A gauche : insertion d’une Image (logo de l’entreprise, hauteur 50px, lien vers l’accueil). A droite : Nav Menu > selectionnez le menu "Principal" cree dans Apparence > Menus. Ajoutez un bouton "Demander un devis" couleur Primary, padding 12px 24px, border-radius 6px, lien vers /contact. Activez le mode sticky : Section > Style > Layout > Position Sticky > Top 0 > Z-index 999. Testez sur Tablette et Mobile. Sur mobile, activez le hamburger menu : Nav Menu > Mobile Breakpoint 768px.
Etape 5 : Construire un footer professionnel
Bricks > Templates > Add New > Type Footer > Title "Footer principal" > Conditions Entire Website. Structure en 4 colonnes (Container Grid 4 colonnes desktop, 2 colonnes tablette, 1 colonne mobile). Colonne 1 : logo + texte de presentation 80 mots + reseaux sociaux (Facebook, LinkedIn, WhatsApp). Colonne 2 : Liens rapides (Accueil, Services, A propos, Blog, Contact). Colonne 3 : Coordonnees (adresse Plateau Dakar, telephone +221 33 XXX XX XX, email contact@entreprise.sn, NINEA, RCCM). Colonne 4 : Formulaire newsletter avec champ email et bouton "S’abonner". Sous-section barre inferieure : copyright "© 2026 Entreprise. Tous droits reserves. – Mentions legales – Politique de confidentialite". Sauvegardez et verifiez l’affichage sur le frontend.
Etape 6 : Modeliser la page d’accueil section par section
La page d’accueil suit une structure eprouvee. Hero section : Container plein ecran, image de fond ou video, titre H1 percutant "Solutions IT pour PME senegalaises", sous-titre 18px, deux boutons (CTA principal "Demander un devis" + CTA secondaire "Voir nos realisations"). Section Confiance : 6 logos de clients references en grille horizontale. Section Services : 3 ou 6 cartes avec icone, titre, description courte, lien "En savoir plus". Section Temoignages : carrousel de 3 a 5 avis clients avec photo, nom, fonction, citation. Section Realisations : grille de 6 projets recents avec image de couverture et lien. Section CTA finale : fond couleur Primary, titre blanc, bouton contraste fort. Construisez chaque section dans Bricks avec les containers, sauvegardez frequemment.
Etape 7 : Sauvegarder les sections en blocs reutilisables
Plutot que de reconstruire la meme section dans chaque page, sauvegardez-la une fois et reutilisez-la. Sur une section deja construite, clic droit > Save as Template > Type Section > Title descriptif "CTA Final Vert". Le bloc est sauvegarde dans la bibliotheque. Sur une nouvelle page, cliquez sur le bouton + > onglet Templates > selectionnez votre bloc > Insert. Toute modification ulterieure du template se repercute automatiquement sur toutes les pages qui l’utilisent. Sauvegardez ainsi vos sections recurrentes : CTA final, bandeau temoignages, section equipe, formulaire de contact, section partenaires. Vous gagnez 70 pour cent de temps sur les pages suivantes.
Etape 8 : Creer un template de page interne dynamique
Pour les pages services, creez un template unique qui s’adapte au contenu. Bricks > Templates > Add New > Type Single > Title "Template Page Service". Conditions : Post Type Pages > Specific Pages : selectionnez la page parent "Services". Structure type : Hero avec breadcrumb (Accueil > Services > Nom du service) + titre dynamique {post_title} + image dynamique {featured_image}. Section description : champ {post_content} pour afficher le contenu de l’editeur. Section "Pourquoi nous choisir" : 4 arguments en grille. Section processus : 5 etapes numerotees avec icones. Section tarifs : tableau comparatif 3 formules en FCFA. Section FAQ : accordeon avec 6 questions frequentes. Section CTA : bouton "Discuter de mon projet sur WhatsApp" vers wa.me/221XXXXXXXX.
Etape 9 : Creer un template d’article de blog
Bricks > Templates > Add New > Type Single > Title "Template Article Blog" > Conditions : Post Type Posts. Structure : header avec image a la une plein ecran 600px de haut + overlay sombre 40 pour cent + titre H1 blanc centre + meta (auteur, date, temps de lecture, categorie). Layout deux colonnes desktop, une colonne mobile : colonne principale 70 pour cent (contenu de l’article), colonne sidebar 30 pour cent (sommaire automatique, articles relatifs, formulaire newsletter). Sous le contenu : section "A propos de l’auteur" avec photo, bio 80 mots, liens reseaux sociaux. Section "Articles similaires" : 3 articles de la meme categorie. Section commentaires natifs WordPress. Boutons de partage Facebook, LinkedIn, WhatsApp avec liens partage natifs (pas de plugin lourd).
Etape 10 : Optimiser le responsive sur tous les ecrans
Au Senegal, 78 pour cent du trafic vient du mobile. Testez chaque page sur 3 breakpoints. En haut de l’editeur Bricks, cliquez sur l’icone Tablette > verifiez que les containers passent de 4 a 2 colonnes > ajustez les paddings (passer de 80px a 40px). Cliquez sur l’icone Mobile > verifiez que tout passe en 1 colonne > reduisez les tailles de titre (H1 a 32px), ajustez les boutons en pleine largeur. Pour les images : Image > Style > Width 100% > Height auto. Pour les videos : utilisez l’embed responsive avec ratio 16:9. Testez sur de vrais appareils : Tecno Spark 10 (ecran 6.6 pouces), iPhone 13, iPad. Utilisez Chrome DevTools > F12 > icone Toggle Device Toolbar pour simuler differents ecrans.
Etape 11 : Integrer un formulaire de contact WhatsApp
Au Senegal, WhatsApp est le canal prefere. Sur votre page contact, ajoutez un formulaire classique (Bricks Form Element) qui envoie aussi un message WhatsApp. Champs : Nom, Email, Telephone, Service interesse (selecteur), Message. Apres soumission, redirigez vers wa.me/221XXXXXXXX?text=Bonjour, je viens de remplir votre formulaire concernant… Ajoutez aussi un bouton flottant WhatsApp permanent en bas a droite. Bricks > Templates > Add New > Type Section > Conditions Entire Website. Container Position Fixed > Bottom 20px Right 20px Z-index 999. Icone WhatsApp 60x60px sur fond vert #25D366 > lien wa.me/221XXXXXXXX. Animation pulse douce pour attirer l’attention sans agressivite.
Etape 12 : Optimiser les performances avec un cache et la compression
Un site lent perd 50 pour cent des visiteurs apres 3 secondes. Installez WP Rocket (49 dollars) ou alternative gratuite LiteSpeed Cache si votre hebergeur utilise LiteSpeed (Hostinger, LWS). Activez : cache pages, minification CSS et JS, lazy loading images, deferred JavaScript, preload des polices Google. Compressez vos images avant import : tinypng.com (gratuit jusqu’a 500 images par mois) reduit le poids de 70 pour cent sans perte visible. Convertissez en WebP : plugin Imagify ou Smush. Verifiez le score sur PageSpeed Insights : objectif minimum 80 sur mobile et 90 sur desktop. Si le score chute, identifiez les ressources bloquantes dans l’onglet Diagnostic et resolvez les unes apres les autres.
Etape 13 : Sauvegarder le site et exporter le theme
Avant de mettre en ligne, sauvegardez tout. Installez UpdraftPlus > Settings > UpdraftPlus Backups > Backup Now > cochez Database et Files > lancez. Telechargez les fichiers zip generes sur votre disque local. Exportez les templates Bricks : Bricks > Templates > selectionnez tous > Export > telechargez le fichier JSON. Pour reutiliser le theme sur un autre projet client, exportez aussi : Apparence > Customize > Export, et la base de donnees via phpMyAdmin (cPanel > phpMyAdmin > Export > Quick > SQL). Stockez ces sauvegardes sur Google Drive professionnel et un disque dur externe : double securite. Programmez UpdraftPlus pour une sauvegarde automatique hebdomadaire vers Google Drive ou Dropbox.
Etape 14 : Mettre en production et surveiller
Quand tout est valide en local ou sur un sous-domaine de developpement (dev.entreprise.sn), basculez sur le domaine principal. Modifiez les URLs dans la base de donnees avec le plugin Better Search Replace : Tools > Better Search Replace > Search for : https://dev.entreprise.sn > Replace with : https://entreprise.sn > Selectionnez toutes les tables > Run Search/Replace. Configurez Google Search Console et Google Analytics 4. Soumettez le sitemap : entreprise.sn/sitemap.xml. Surveillez les erreurs 404 dans Search Console > Pages > Pourquoi les pages ne sont pas indexees. Verifiez chaque semaine pendant 1 mois le bon fonctionnement, le temps de chargement, l’absence d’erreurs PHP dans les logs hebergeur.
Erreurs
Eviter : empiler 3 builders en meme temps (Elementor + Divi + WPBakery sur le meme site detruit les performances). Ne pas modifier le code du theme parent directement (toute mise a jour ecrasera vos modifications). Ne jamais sauter l’etape charte graphique (vous passerez 3 fois plus de temps a corriger les couleurs sur chaque page). Ne pas utiliser plus de 3 polices differentes (lourdeur visuelle et performance degradee). Ne pas oublier de tester sur de vrais smartphones africains (les emulateurs ne reproduisent pas tout). Refuser les themes premium piratees ou nulled (90 pour cent contiennent du malware ou des backdoors). Eviter les animations excessives qui ralentissent la navigation 4G. Ne pas oublier les mentions legales et la politique de confidentialite (obligation legale au Senegal selon la loi sur les donnees personnelles).
Checklist
Builder visuel choisi et licence achetee sur le site officiel. Theme parent leger installe (Hello, GeneratePress, Astra ou Bricks). Charte graphique configuree dans Theme Styles avec 5 couleurs et 2 polices. Header reutilisable cree avec logo, menu, bouton CTA, mode sticky. Footer professionnel cree avec 4 colonnes et coordonnees completes. Page d’accueil construite avec 6 sections strategiques. Sections recurrentes sauvegardees en templates reutilisables. Template page service cree avec champs dynamiques. Template article blog cree avec sidebar et partage social. Responsive teste sur 3 breakpoints (desktop, tablette, mobile). Formulaire de contact avec redirection WhatsApp configure. Bouton flottant WhatsApp visible sur toutes les pages. Plugin de cache installe et configure (WP Rocket ou LiteSpeed). Images compressees et converties en WebP. PageSpeed Insights superieur a 80 sur mobile. Sauvegarde complete telechargee sur disque local et cloud. Mise en production realisee avec verification des URLs. Search Console et Analytics 4 configures avec sitemap soumis.