Construire son site
en totale autonomie
Tous les guides au même endroit. Suivez-les dans l'ordre, ou piochez selon vos besoins. Chaque guide est un parcours pas à pas, avec exercices et checklists.
Commencez ici : l'hébergement O2switch
Nom de domaine, SSL, installation de WordPress avec wpTiger, sécurisation, façon parcours.
WordPress
La fondation : installer, configurer et piloter votre site.
Elementor
La mise en page visuelle sans code, avec les conteneurs Flexbox.
WooCommerce
Vendre en ligne : produits, panier, paiement, livraison.
Sécurité · AIOS
Protéger le site avec All-In-One Security.
Référencement · Yoast
Être trouvé sur Google avec Yoast SEO.
Cookies (bandeau)
Le bandeau de consentement obligatoire, conforme CNIL.
RGPD · web & mobile
Protéger les données, côté site et appli, avec un mémo-antisèche.
En vidéo
Deux vidéos pour démarrer : une introduction, et un tutoriel complet de A à Z.
O2switch · le QG de ton site
Bienvenue dans le cPanel : le poste de pilotage de ton hébergement. Avant WordPress, avant Elementor, tout commence ici. On avance façon parcours, une mission à la fois, un badge à chaque étape.
Mission 1 : Le Nom de Domaine
Pas de QG sans adresse. On commence par poser le NDD.
Réserver le domaine
Depuis l'espace client clients.o2switch.fr, commandez un domaine court en .fr ou .com.
Ou relier un domaine existant
Domaine acheté ailleurs ? Pointez ses DNS vers O2switch (serveurs de noms fournis par l'hébergeur).
Patienter la propagation
La mise en route des DNS peut prendre de quelques minutes à quelques heures. Normal.
Le cPanel est ton tableau de bord d'hébergement : domaines, e-mails, fichiers, bases de données, sécurité et outils maison (wpTiger, Tiger Protect…). Tout se fait en quelques clics, sans technique.
Mission 2 : Le bouclier SSL
Le cadenas https : gratuit, automatique, indispensable.
Ouvrir l'outil SSL
Dans le cPanel, section Sécurité → Let's Encrypt SSL.
Générer le certificat
Dans « Générer un nouveau certificat », sélectionnez votre domaine et lancez. C'est gratuit.
Renouvellement auto
Let's Encrypt se renouvelle tout seul : rien à refaire.
Après quelques minutes, https://votredomaine.fr doit afficher le cadenas. On forcera tout le site en https à la Mission 4.
Mission 3 : Installer WordPress avec wpTiger
L'outil maison d'O2switch qui crée et gère tes sites WordPress. (Vidéo en haut de page 👆)
Ouvrir wpTiger
Dans le cPanel, section Outils → wpTiger → « Gérer mon site ». Le 1ᵉʳ chargement peut être un peu long (l'outil scanne l'hébergement).
Créer le site WordPress
Lancez une installation : choisissez le domaine, la dernière version stable, le nom du site, et un compte admin (identifiant ≠ « admin », mot de passe fort).
Accéder à l'admin
Une fois installé, connectez-vous sur votredomaine.fr/wp-admin. La suite, c'est le Guide WordPress.
O2switch propose aussi Softaculous (installateur 1-clic générique). wpTiger va plus loin : il gère le cycle de vie du site (mises à jour, sauvegardes, SSL, sécurité, choix de version d'extension en cas de conflit). On privilégie wpTiger.
Mission 4 : Forcer le HTTPS
Le SSL est généré ; reste à imposer le https partout.
Dans wpTiger
Sélectionnez votre site → onglet SSL/TLS → cliquez sur « Forcer le site en https ».
Vérifier
Toute adresse en http:// doit basculer automatiquement en https://.
Après une migration, certaines images/ressources peuvent rester en http (« contenu mixte »). wpTiger gère le forçage ; si un cadenas reste « cassé », vérifiez les liens d'images codés en dur.
Mission 5 : Sécuriser le repaire
Deux niveaux : la sécurité de l'hébergeur, et celle de WordPress.
Côté hébergeur (O2switch)
- Tiger Protect / TigerGuard : protections serveur d'O2switch (anti-malware, surveillance). Activez-les.
- Sauvegardes wpTiger : sauvegardez le site avant toute manip importante, et planifiez des sauvegardes régulières.
- Options de sécurité wpTiger : ex. « Masquer les auteurs ».
Côté WordPress
La sécurisation fine se fait avec une extension dédiée : voir le Guide 4 · Sécurité AIOS (pare-feu, anti-force brute, 2FA, renommage de la page de connexion).
Certaines options de wpTiger et d'un plugin de sécurité (AIOS) font la même chose et peuvent entrer en conflit. Choisissez où vous gérez quoi, et ne doublonnez pas la même protection des deux côtés.
Bonus : La vitesse (LiteSpeed)
O2switch tourne sous serveur LiteSpeed : profitez-en.
Installez l'extension LiteSpeed Cache dans WordPress : cache serveur, optimisation des images et des fichiers. C'est le combo cache + hébergement le plus efficace chez O2switch, et un vrai bonus SEO.
Quête finale
Coche tes missions. À 100 % d'XP, ton hébergement est prêt, direction le Guide WordPress.
RGPD · web & mobile
Dès qu'un site ou une appli collecte la moindre donnée personnelle (un nom, un e-mail, une adresse IP…), le RGPD s'applique. Bonne nouvelle : pour un projet courant, l'essentiel tient en quelques réflexes. On les voit façon parcours, badge par badge, et tu repars avec un mémo-antisèche.
Mission 1 : Le RGPD en 1 minute
6 principes, et c'est l'esprit de toute la suite.
- Finalité : collecter pour une raison précise et annoncée.
- Minimisation : seulement les données vraiment nécessaires.
- Transparence : dire qui collecte quoi, pourquoi, combien de temps.
- Durée limitée : ne pas garder les données « pour toujours ».
- Sécurité : protéger les données (HTTPS, accès, mots de passe).
- Droits : permettre aux personnes d'agir sur leurs données.
Tout site ou appli qui traite des données de personnes dans l'UE, même un simple formulaire de contact ou un outil de statistiques. La donnée personnelle = tout ce qui permet d'identifier quelqu'un (nom, e-mail, téléphone, IP…).
Mission 2 : Sur un site web
Le socle de conformité d'un site vitrine ou e-commerce.
- Mentions légales : éditeur, hébergeur, contact.
- Politique de confidentialité : données collectées, finalités, durées, droits.
- HTTPS partout (voir le parcours O2switch).
- Bandeau cookies conforme : détaillé dans le guide Cookies (bandeau).
- Formulaires sobres et consentis (Mission 4).
- Registre des traitements : la liste de ce que vous collectez et pourquoi (utile même pour une TPE).
WordPress fournit un brouillon de politique de confidentialité : Réglages → Confidentialité. À compléter, pas à recopier tel quel.
Mission 3 : Sur une application mobile
Le mobile ajoute des règles spécifiques. Les voici simplement.
- Permissions (caméra, localisation, contacts…) : demandez-les au moment utile et expliquez pourquoi.
- Fiches de confidentialité des stores : App Store et Google Play imposent de déclarer les données collectées.
- SDK tiers & traceurs (analytics, pub) : soumis au consentement, comme les cookies sur le web.
- Données sur l'appareil : stockez le minimum, chiffrez le sensible.
- Suppression de compte : proposez un moyen simple de supprimer ses données.
Une PWA (comme cette app) suit surtout les règles du web. Dès qu'on collecte des données ou qu'on ajoute des traceurs, les mêmes principes s'appliquent.
Mission 4 : Formulaires & consentement
Là où la plupart des données sont collectées.
Collecter le minimum
Ne demandez que les champs réellement utiles à la finalité.
Annoncer la finalité
Une phrase claire : « Ces informations servent à vous recontacter. »
Consentement explicite
Case non pré-cochée + lien vers la politique de confidentialité.
Conserver la preuve
Garder une trace du consentement (date, version du texte).
L'inscription à une newsletter exige un consentement spécifique et un désabonnement facile dans chaque e-mail.
Mission 5 : Les droits des personnes
Ce que toute personne peut vous demander sur ses données.
- Accès : savoir quelles données vous détenez.
- Rectification : corriger une donnée fausse.
- Effacement : le « droit à l'oubli ».
- Opposition : refuser un traitement (ex. prospection).
- Portabilité : récupérer ses données.
Affichez une adresse (ex. contact@…) pour exercer ces droits, et répondez sous 1 mois. Un DPO n'est obligatoire que dans certains cas (traitements à grande échelle, données sensibles…).
Mission 6 : Sécurité & fuites
Protéger, et savoir réagir si ça tourne mal.
- HTTPS, mots de passe forts, mises à jour, sauvegardes (voir les parcours O2switch & AIOS).
- Accès limités : chacun n'accède qu'à ce dont il a besoin.
- En cas de fuite de données : notifier la CNIL sous 72 h, et informer les personnes si le risque est élevé.
Ce parcours vulgarise les grands principes. Pour votre situation précise (registre, DPO, analyse d'impact…), la référence est la CNIL (cnil.fr), et au besoin un professionnel du droit.
Mémo · l'antisèche RGPD
À garder sous la main. L'essentiel sur une page.
Finalité · Minimisation · Transparence · Durée limitée · Sécurité · Droits.
Mentions légales · Politique de confidentialité · HTTPS · Bandeau cookies conforme · Formulaires consentis · Registre des traitements.
Permissions au bon moment · Fiches de confidentialité des stores · Consentement des SDK/traceurs · Suppression de compte facile.
« Ai-je vraiment besoin de cette donnée ? » Si non → on ne la collecte pas. La meilleure donnée à protéger est celle qu'on n'a pas.
La CNIL propose « L'Atelier RGPD », un MOOC gratuit et ouvert à tous : vidéos, cas pratiques et une attestation de suivi par module. Parfait pour approfondir au-delà de cette antisèche.
La CNIL propose « L'Atelier RGPD », un MOOC gratuit et ouvert à tous : une vingtaine d'heures d'auto-formation en 6 modules, avec une attestation de suivi à la clé. Le complément idéal à ce parcours. Accéder au MOOC de la CNIL ↗
Checklist conformité (web + mobile)
WordPress de A à Z
Installer, configurer et piloter votre site par vous-même, de l'hébergement à la mise en ligne. Suivez les chapitres dans l'ordre.
Comprendre l'écosystème
Avant de cliquer, comprenez les 4 pièces du puzzle. C'est ce qui vous rendra vraiment autonome.
| Brique | Rôle | Analogie |
|---|---|---|
| Nom de domaine | Votre adresse (monentreprise.fr) | L'adresse postale |
| Hébergement | Le serveur qui stocke vos fichiers | Le terrain & la maison |
| WordPress | Le logiciel qui gère le contenu (CMS) | L'agencement intérieur |
| Base de données | Stocke textes, réglages, comptes | Les archives |
WordPress.org vs WordPress.com
- WordPress.org (celui qu'on utilise) : logiciel libre et gratuit, installé sur VOTRE hébergement. Contrôle total.
- WordPress.com : service hébergé, plus limité, avec abonnement. À ne pas confondre.
« Créer un site WordPress » de façon pro = toujours WordPress.org installé chez un hébergeur (O2switch, OVH…).
Installer WordPress
Domaine + hébergement + installation. ~30 min la première fois.
Réserver le nom de domaine
Court, mémorisable, en .fr ou .com. Souvent inclus la 1ʳᵉ année chez l'hébergeur.
Souscrire à l'hébergement
Formule mutualisée standard, suffisante pour un site vitrine. Vérifiez : PHP récent, SSL inclus, sauvegardes.
Installer WordPress en 1 clic
Dans l'espace client (cPanel), utilisez l'installateur auto (type Softaculous). Identifiant admin autre que « admin », mot de passe fort.
Activer le HTTPS (SSL)
Activez le certificat gratuit (Let's Encrypt), puis vérifiez le cadenas sur https://votresite.fr.
Se connecter
Allez sur votresite.fr/wp-admin et connectez-vous.
Jamais l'identifiant admin ni un mot de passe faible : c'est la 1ʳᵉ porte attaquée par les robots.
Installe WordPress, active le SSL, connecte-toi. Note dans un gestionnaire de mots de passe : URL de connexion, identifiant, mot de passe.
Les réglages essentiels
5 minutes qui évitent des heures de problèmes plus tard.
Réglages généraux
Réglages → Général : titre, slogan, fuseau (Paris), langue (Français).
Permaliens : le réglage clé
Réglages → Permaliens → « Titre de la publication ». URLs propres type votresite.fr/contact.
Commentaires
Pour un site vitrine, désactivez-les (Réglages → Commentaires) : source de spam.
Nettoyer la démo
Supprimez l'article « Bonjour tout le monde », la page « Exemple » et les extensions/thèmes inutiles.
À faire avant de créer vos pages : changer les permaliens après casse les anciens liens.
Le tableau de bord
Votre poste de pilotage, accessible via /wp-admin.
- Articles : le blog / les actualités.
- Médias : images et fichiers.
- Pages : les pages fixes.
- Apparence : thème, menus.
- Extensions : fonctionnalités.
- Utilisateurs : comptes & rôles.
- Réglages : configuration.
La barre noire en haut (une fois connecté) bascule entre l'admin et le site public en un clic.
Choisir & installer un thème
Avec Elementor, on choisit volontairement un thème minimaliste.
- Hello Elementor : ultra-léger, conçu pour Elementor. Idéal pour partir d'une base vierge et tout piloter au constructeur.
- Astra : léger, polyvalent, très répandu et bien documenté.
- OceanWP : riche en réglages prêts à l'emploi. Il s'accompagne de l'extension Ocean Extra qui débloque ses options avancées.
Le thème OceanWP est en place avec son compagnon Ocean Extra. Vous pouvez tester Hello Elementor ou Astra en parallèle : on n'active qu'un seul thème à la fois.
Les thèmes « tout-en-un » chargés (avec leur propre constructeur) : conflits fréquents avec Elementor.
Installer
Apparence → Thèmes → Ajouter, cherchez « Hello Elementor », installez puis activez.
Vérifier
Le site public doit être quasi vierge : normal, c'est Elementor qui habillera tout.
Un thème enfant permet d'ajouter du code sans le perdre aux mises à jour. À connaître pour les projets avancés.
Les extensions indispensables
Ajoutez UNIQUEMENT le nécessaire. Chaque extension = du poids et une surface d'attaque en plus.
Voici la pile installée sur l'environnement de démonstration de la formation. Certaines peuvent rester désactivées selon le projet : l'important est de savoir à quoi sert chacune.
| Extension | Rôle | Voir |
|---|---|---|
| Elementor | Constructeur de pages visuel | Guide 2 |
| PRO Elements | Débloque les fonctions « Pro » d'Elementor (Theme Builder…) | Guide 2 |
| Royal Elementor Addons | Widgets & modèles supplémentaires pour Elementor | Guide 2 |
| Ocean Extra | Options additionnelles du thème OceanWP | ch. 5 |
| Yoast SEO | Référencement : titres, méta, sitemap | Guide 5 |
| All-In-One Security (AIOS) | Sécurité : pare-feu, anti-force brute | Guide 4 |
| Royal Backup, Restore & Reset | Sauvegarde, restauration, réinitialisation | ch. 10 |
| CookieAdmin | Bandeau de consentement cookies (RGPD) | Guide 6 |
| Maintenance | Mettre le site en mode maintenance pendant les travaux | · |
Il ne s'ajoute que si vous vendez en ligne (Guide 3). Inutile de l'installer sur un simple site vitrine.
Installer
Extensions → Ajouter, cherchez, Installer puis Activer.
Configurer
La plupart ajoutent leur menu à gauche : suivez l'assistant.
Maintenir à jour
Mettez à jour régulièrement (après sauvegarde).
Moins d'extensions = site plus rapide et plus sûr. Désinstallez ce que vous n'utilisez pas.
Pages & Articles
La distinction la plus importante de WordPress.
| Pages | Articles | |
|---|---|---|
| Nature | Statique, intemporel | Daté, chronologique |
| Organisation | Hiérarchie parent/enfant | Catégories & étiquettes |
| Exemples | Accueil, À propos, Contact | Blog, actus, conseils |
Créer une page
Pages → Ajouter, titre, puis « Modifier avec Elementor ».
Définir l'accueil
Réglages → Lecture → « Une page statique » → votre page Accueil.
Structurer
Listez vos pages sur papier, créez-les vides, puis construisez.
Crée l'arborescence vide de ton site (4 à 6 pages) et définis ta page d'accueil.
La bibliothèque de médias
Vos images peuvent faire ou défaire la vitesse du site.
- Compresser AVANT l'envoi : < 200 Ko (Squoosh, TinyPNG).
- Format :
.webpde préférence. - Bonnes dimensions : pas de 5000 px pour afficher en 600 px.
- Texte alt : décrivez chaque image (accessibilité + SEO).
- Nommer :
plombier-agen-douche.webpplutôt queIMG_8421.jpg.
Noms de fichiers + alt incluant métier + ville renforcent le référencement local.
Menus & navigation
Court, clair, logique.
Créer le menu
Apparence → Menus, nommez-le « Menu principal ».
Ajouter les pages
Cochez vos pages → « Ajouter au menu », glissez pour réordonner.
Sous-menu
Décalez un élément vers la droite : il devient déroulant.
Emplacement
Cochez « Menu principal / en-tête » puis enregistrez.
Un menu efficace = 5 à 6 entrées. Mettez « Contact » en avant.
Utilisateurs & sécurité
Les rôles, puis 4 réflexes de base (la sécurité avancée = Guide 4).
| Rôle | Peut faire |
|---|---|
| Administrateur | Tout (1-2 personnes max) |
| Éditeur | Gérer tout le contenu |
| Auteur | Publier ses articles |
| Contributeur | Rédiger sans publier |
| Abonné | Profil / lecture |
- Mises à jour régulières.
- Mots de passe forts + 2FA.
- Sauvegardes testées.
- Limiter les tentatives de connexion.
Un site « qu'on ne touche plus » devient vulnérable faute de mises à jour. La maintenance n'est pas optionnelle.
SEO local : les fondations
Le minimum vital (détail complet dans le Guide 5 · Yoast).
Titres & méta-descriptions
Sur chaque page, via le plugin SEO : titre (~60 car.) et méta (~155 car.) avec métier + ville.
Titres Hn
Un seul H1 par page, puis H2/H3 structurés.
Sitemap
Généré automatiquement par le plugin SEO.
Search Console
Vérifiez le site, soumettez le sitemap, suivez l'indexation.
Google Business Profile
Fiche complète (horaires, photos, avis) → Google Maps & pack local.
Fiche Google Business Profile + avis clients pèsent souvent plus que le site dans les résultats de proximité.
Checklist de mise en ligne
Le contrôle final avant d'ouvrir au public.
Elementor de A à Z
Mettre en page votre site au pixel près, sans code, avec les Conteneurs Flexbox : la méthode moderne.
Installer & activer Elementor
Prérequis : WordPress + thème léger (Guide 1).
Installer
Extensions → Ajouter → « Elementor » → Installer + Activer. Le gratuit suffit pour un site vitrine.
Vérifier les conteneurs Flexbox
Actifs par défaut depuis la 3.6. Vérifiez : Elementor → Réglages → Fonctionnalités.
Ouvrir l'éditeur
Sur une page → « Modifier avec Elementor ».
Gratuit : conteneurs + widgets de base + responsive. Pro : Theme Builder, widgets avancés, formulaires, pop-ups.
Elementor y est accompagné de PRO Elements (débloque les fonctions Pro, voir ch. 10) et de Royal Elementor Addons (widgets et modèles en plus, voir ch. 5).
L'interface en profondeur
Maîtriser l'éditeur = gagner des heures.
- Panneau gauche : widgets et réglages de l'élément sélectionné.
- Canvas (droite) : l'aperçu réel, en direct.
- Barre du bas : la plus utile (ci-dessous).
| Icône | Fonction |
|---|---|
| ☰ Réglages | Réglages de la page |
| ↹ Navigateur | Structure arborescente : Ctrl/Cmd + I |
| ↺ Historique | Revenir en arrière |
| ▢ Mode réactif | Ordinateur / tablette / mobile |
| Publier | Mettre en ligne |
Ctrl/Cmd+Z annuler · Ctrl/Cmd+C/V copier-coller un élément · Ctrl/Cmd+I navigateur · Ctrl/Cmd+E chercher un widget.
Les réglages globaux
L'étape que les débutants sautent : et regrettent. À faire AVANT de construire.
Menu ☰ → Réglages du site. Vous définissez l'identité visuelle une seule fois, appliquée partout.
Couleurs globales
Principale, Secondaire, Texte, Accent. Utilisez-les partout au lieu de codes « en dur ».
Polices globales
Typographie des titres (H1→H4) et du corps.
Identité
Logo, favicon, fond par défaut.
Changez une couleur globale → tout le site se met à jour. Du bleu au vert en 30 secondes au lieu de 3 heures.
Configure tes 4 couleurs et 2 polices avant toute construction.
Les Conteneurs Flexbox
Le cœur d'Elementor moderne. Comprenez ça et tout devient simple.
Le conteneur est une boîte qui organise vos widgets. On imbrique des conteneurs à l'infini. Il remplace l'ancien Section → Colonne.
| Réglage | À quoi ça sert |
|---|---|
| Direction | Empiler en colonne (vertical) ou en ligne (horizontal) |
| Justifier | Répartition sur l'axe principal |
| Aligner | Alignement sur l'axe secondaire |
| Écart (gap) | Espace entre éléments |
| Retour à la ligne | « Envelopper » : passe à la ligne si besoin |
Direction colonne = empile (idéal mobile). Direction ligne = côte à côte (3 services, 4 logos). On bascule en un clic.
- Plus léger : moins de code → plus rapide → meilleur SEO.
- Plus souple : imbrication illimitée.
- Meilleur responsive : on inverse direction/ordre par appareil.
Vous croiserez des sites en sections/colonnes. Un bouton « Convertir » les passe en conteneurs. Construisez le neuf en conteneurs.
Crée un conteneur avec 3 titres. Passe la direction Colonne ↔ Ligne, joue avec Justifier et Écart.
Les widgets essentiels
Les briques de contenu. 3 onglets chacun : Contenu · Style · Avancé.
| Widget | Usage |
|---|---|
| Titre | H1/H2/H3 : choisissez la balise (SEO) |
| Éditeur de texte | Paragraphes |
| Image / Galerie | Visuels (pensez compression) |
| Bouton | Appel à l'action avec lien |
| Icône / Liste d'icônes | Listes de services |
| Séparateur / Espacement | Rythmer la mise en page |
Réglez la balise HTML (H1, H2…) en plus de la taille. La balise compte pour le SEO ; la taille n'est qu'esthétique.
Sur la démo, l'extension Royal Elementor Addons ajoute de nombreux widgets et modèles (grilles, onglets, formulaires, listes de prix…). Pratique, mais n'activez que ce que vous utilisez vraiment pour ne pas alourdir les pages.
L'onglet Avancé : le vrai contrôle
De « ça marche » à « c'est pro ». Présent sur tout élément.
| Section | Réglages |
|---|---|
| Marge / Remplissage | Espace externe (margin) et interne (padding) |
| Positionnement | Largeur, alignement, position absolue (avancé) |
| Arrière-plan | Couleur, dégradé, image : avec survol |
| Bordure | Arrondis, ombre portée |
| Mouvement | Animations d'entrée, effets au défilement |
| Responsive | Masquer/afficher selon l'appareil |
90 % d'une mise en page soignée tient à la maîtrise des marges et remplissages. margin (dehors) vs padding (dedans) : c'est ce qui sépare l'amateur du pro.
Construire une page d'accueil
La pratique complète, section par section.
Section Héros
Conteneur pleine largeur, fond image/couleur. Dedans : Titre (H1), sous-texte, Bouton. Tout centré.
Section Services
Conteneur en ligne avec 3 conteneurs-enfants (Icône + Titre + Texte). « Envelopper » pour le mobile.
Section À propos
Conteneur en ligne : Image à gauche, Titre + Texte à droite.
Section Témoignages / Preuve
Avis clients ou logos. Renforce la confiance.
Section CTA
Fond contrasté, titre fort, bouton « Contactez-moi ».
Publier & vérifier
Publiez, relisez en aperçu ordinateur ET mobile.
Construisez d'abord pour l'ordinateur, puis ajustez le mobile. Nommez vos conteneurs dans le Navigateur.
Construis ta page d'accueil complète avec ces 5 sections. C'est l'exercice qui valide ton autonomie.
Le responsive en profondeur
+60 % du trafic est mobile. Une page non vérifiée sur mobile est une page ratée.
Basculer en mode réactif
Icône ▢ → Tablette ou Mobile.
Ajuster par appareil
Police, marges, alignements : réglables par appareil. Une modif mobile n'affecte que le mobile.
Direction des conteneurs
Sur mobile, passez les conteneurs « ligne » en « colonne » pour empiler.
Masquer/afficher
Avancé → Responsive : masquez les éléments lourds inutiles sur mobile.
Avant CHAQUE publication : textes lisibles ? boutons cliquables ? rien qui déborde ?
Modèles & bibliothèque
Travaillez une fois, réutilisez partout.
- Bibliothèque Elementor : blocs et pages prêts à insérer.
- Enregistrer comme modèle : clic droit sur un conteneur réussi.
- Mes modèles : Modèles → Modèles enregistrés.
- Kits : sites complets à importer puis adapter.
Créez un bloc « CTA Contact » impeccable, enregistrez-le, réutilisez-le partout.
Le Theme Builder (Pro)
Concevoir les parties communes : en-tête, pied de page, modèles. Nécessite la Pro.
- En-tête : logo + menu, sur toutes les pages.
- Pied de page : coordonnées, liens, mentions.
- Modèle d'article : la mise en page de tous les articles d'un coup.
- Conditions d'affichage : où chaque modèle s'applique.
Sans Pro, en-tête/pied viennent du thème (ou de plugins gratuits dédiés). Le Theme Builder reste le confort de la Pro.
L'extension PRO Elements débloque ces fonctions (Theme Builder, widgets avancés…) sans Elementor Pro. À savoir : c'est une redistribution communautaire sous licence GPL, sans support ni mises à jour officiels d'Elementor. Parfait pour apprendre et tester ; pour un site client en production, l'Elementor Pro officiel reste le choix le plus sûr.
Checklist avant publication
Le contrôle qualité Elementor, page par page.
WooCommerce la boutique
Transformez votre site WordPress en boutique en ligne : produits, panier, paiement, livraison. WooCommerce est l'extension e-commerce gratuite la plus utilisée au monde.
Comprendre WooCommerce
Une extension gratuite qui ajoute toute la machinerie d'une boutique à WordPress.
WooCommerce ajoute : un catalogue de produits, un panier, un tunnel de commande, la gestion des paiements, des commandes et des clients.
WordPress installé (Guide 1). L'extension est gratuite ; certains modules (paiement, livraison avancée) peuvent l'être ou payants selon vos besoins.
Une boutique sollicite plus le serveur qu'un site vitrine. Si le catalogue grossit, prévoyez un hébergement un peu plus costaud.
Installer & configurer
L'assistant de configuration fait 80 % du travail initial.
Installer l'extension
Extensions → Ajouter → « WooCommerce » → Installer + Activer.
Suivre l'assistant
Renseignez : pays (France), adresse de la boutique, secteur, type de produits (physiques / numériques).
Devise
Réglez sur Euro (€) et le format d'affichage des prix.
Pages auto-créées
WooCommerce crée les pages Boutique, Panier, Commande, Mon compte. On y revient au chapitre 5.
Un nouveau menu WooCommerce et un menu Produits apparaissent à gauche : tout se pilote de là.
Les réglages clés
WooCommerce → Réglages : 5 onglets à connaître.
| Onglet | Ce qu'on y règle |
|---|---|
| Général | Adresse de la boutique, pays de vente, devise |
| Produits | Unité de poids/dimensions, gestion des stocks, avis |
| TVA | Taux de TVA, affichage prix HT/TTC (voir ch. 8) |
| Expédition | Zones et tarifs de livraison (ch. 7) |
| Paiements | Moyens de paiement actifs (ch. 6) |
Si vous bénéficiez de la franchise en base de TVA (art. 293 B CGI), désactivez la TVA et affichez les prix sans TVA. En cas de doute sur votre régime, vérifiez auprès d'un comptable.
Créer un produit
Le cœur de la boutique. Produits → Ajouter.
Titre & description
Nom clair + description détaillée (argument de vente + SEO).
Type de produit
Simple (un seul article) ou variable (tailles, couleurs… = des variations).
Prix
Prix normal, et éventuellement prix promo (avec dates).
Image & galerie
Une image principale + une galerie. Compressez-les (Guide 1, ch. 8).
Catégories & étiquettes
Pour ranger et filtrer le catalogue.
Stock (inventaire)
Activez la gestion de stock, renseignez la quantité et un UGS/SKU (référence).
Publier
Le produit apparaît dans la boutique.
Crée 3 produits (dont un variable), avec image, prix, catégorie et stock.
Les pages de la boutique
WooCommerce les crée automatiquement. Sachez à quoi elles servent.
| Page | Rôle |
|---|---|
| Boutique | Le catalogue / la grille de produits |
| Panier | Récapitulatif avant paiement |
| Commande (Checkout) | Coordonnées + paiement |
| Mon compte | Espace client (commandes, adresses) |
Elementor (surtout la Pro) propose des widgets WooCommerce pour personnaliser la fiche produit et la grille boutique. En gratuit, le rendu vient du thème + WooCommerce.
Les moyens de paiement
WooCommerce → Réglages → Paiements.
- Carte bancaire : via une passerelle type Stripe ou PayPal (extension dédiée). C'est l'essentiel pour vendre.
- PayPal : paiement par compte PayPal ou CB.
- Virement bancaire : manuel, sans frais, mais nécessite un suivi.
- Paiement à la livraison / chèque : selon votre activité.
Le paiement CB exige un site en HTTPS (SSL) et une passerelle conforme (PCI-DSS, gérée par Stripe/PayPal). Ne stockez jamais les numéros de carte vous-même.
La livraison
WooCommerce → Réglages → Expédition.
Créer une zone
Ex. « France métropolitaine », « Union européenne ».
Définir les tarifs
Forfait fixe, gratuit au-dessus d'un montant, ou selon le poids.
Retrait sur place
Option utile pour un commerce local : « click & collect ».
La livraison gratuite à partir d'un montant augmente souvent le panier moyen.
TVA & obligations légales
Vendre en ligne impose des mentions spécifiques. Vue d'ensemble : pas un avis juridique.
- CGV (conditions générales de vente) : obligatoires pour la vente en ligne.
- Droit de rétractation : 14 jours pour les particuliers (avec exceptions).
- Mentions légales & politique de confidentialité : obligatoires (voir Guide 6).
- Prix TTC affichés clairement pour les particuliers, frais de livraison indiqués avant paiement.
Je ne suis pas juriste. Pour des CGV et un régime de TVA adaptés à votre situation, appuyez-vous sur des modèles fiables et, au besoin, un professionnel du droit ou un comptable.
Tester une commande
Avant d'ouvrir : passez une vraie commande de bout en bout.
Mode test du paiement
Stripe/PayPal proposent un mode test (sandbox) avec des cartes fictives. Activez-le.
Parcours complet
Ajoutez au panier → commandez → payez (test) → vérifiez l'e-mail de confirmation.
Vérifier la commande
Dans WooCommerce → Commandes, la commande test doit apparaître.
Repasser en mode réel
Désactivez le mode test une fois validé. Faites un dernier achat réel de faible montant pour confirmer.
Checklist boutique
Avant d'encaisser le premier euro.
Sécurité avec AIOS
All-In-One Security (AIOS) est une extension de sécurité gratuite et complète : pare-feu, protection contre les attaques par force brute, verrouillage de la connexion, et un score de sécurité qui vous guide pas à pas.
Pourquoi sécuriser, dès le 1ᵉʳ jour
Un site WordPress neuf est attaqué par des robots en quelques heures. Ce n'est pas paranoïaque, c'est la norme.
WordPress fait tourner une part énorme du web : c'est donc la cible n°1 des attaques automatisées. La majorité visent la page de connexion (essais de mots de passe en masse) et les extensions/thèmes non à jour.
Sécurité ET sauvegardes. AIOS protège ; une sauvegarde permet de tout restaurer si malgré tout ça tourne mal. Les deux, jamais l'un sans l'autre.
Si vous ne deviez activer que 4 choses, ce serait celles-ci :
- Changer l'accès admin : renommer l'URL de connexion (ch. 5) et bannir l'identifiant « admin » (ch. 6).
- Bloquer la force brute : verrouillage après X tentatives échouées (ch. 4).
- Activer le pare-feu : filtrer le trafic malveillant (ch. 7).
- Changer le préfixe de la base de données : déjouer les injections SQL automatisées (ch. 8).
Installer AIOS
Extension gratuite, éditée par l'équipe d'UpdraftPlus.
Installer
Extensions → Ajouter → cherchez « All-In-One Security » (AIOS) → Installer + Activer.
Ouvrir le menu WP Security
Un nouveau menu « WP Security » apparaît à gauche : tout s'y passe.
Faites une sauvegarde complète du site. Certains réglages de sécurité peuvent, mal configurés, vous bloquer temporairement l'accès.
Le score de sécurité
AIOS attribue des points à chaque protection activée. Votre boussole.
Le tableau de bord affiche un score de sécurité : plus vous activez de protections, plus il monte. L'objectif n'est pas le 100 % à tout prix, mais d'activer les protections clés sans casser le site.
AIOS classe souvent les réglages en Basic / Intermediate / Advanced. Avancez palier par palier, en testant le site après chaque activation.
Sécuriser la connexion
La protection la plus rentable : bloquer les attaques par force brute.
Verrouillage des connexions (Login Lockdown)
Bloque une adresse IP après X tentatives échouées. Réglez par ex. 3-5 essais, verrouillage de 60 min.
Déconnexion automatique
Déconnecte les sessions inactives après un délai.
Alertes par e-mail
Soyez notifié des verrouillages : vous voyez l'activité suspecte en temps réel.
Notez votre propre IP avant de durcir les réglages, pour pouvoir vous débloquer si besoin via l'hébergeur.
Cacher la page de connexion
Les robots ciblent /wp-login.php et /wp-admin. Déplacez la porte.
AIOS permet de renommer l'URL de connexion (ex. votresite.fr/mon-acces-secret). Les robots qui tapent l'URL standard tombent sur du vide.
Mémorisez et notez la nouvelle URL de connexion. Si vous l'oubliez, vous ne pourrez plus accéder à l'admin facilement.
Comptes utilisateurs
AIOS détecte les faiblesses de comptes.
- Détecter l'identifiant « admin » : AIOS signale et aide à le changer.
- Forcer les mots de passe forts : outil intégré d'évaluation.
- Identifiant ≠ pseudo affiché : ne laissez pas le nom de connexion apparaître publiquement.
Un mot de passe long (12+ caractères, aléatoire) + un identifiant non devinable = l'essentiel de la protection de connexion.
Le pare-feu (firewall)
Filtre le trafic malveillant. Puissant : donc à activer prudemment.
Activer par paliers
Commencez par le niveau basique, testez le site, puis montez progressivement.
Protections complémentaires
Blocage des requêtes suspectes, limitation des bots, protection des fichiers sensibles.
Tester après chaque cran
Vérifiez que le site, les formulaires et la boutique fonctionnent toujours.
Un pare-feu trop agressif peut bloquer des fonctions légitimes (paiement, formulaire). Montez doucement, testez, et gardez une sauvegarde sous la main.
Préfixe de la base & surveillance
Une protection trop souvent oubliée : changer la « syntaxe » (le préfixe) de la base de données.
Changer le préfixe de la base de données
Par défaut, WordPress nomme ses tables avec le préfixe wp_ (ex. wp_users, wp_options). Les attaques automatisées : notamment les injections SQL : misent sur ce préfixe connu. En le remplaçant par un préfixe aléatoire (ex. x7k2_), AIOS coupe l'herbe sous le pied à une grande partie de ces attaques.
Sauvegarder d'abord
Impératif : une sauvegarde complète de la base avant l'opération.
Lancer le changement
Dans AIOS, l'outil de sécurité de la base de données génère un nouveau préfixe et renomme les tables automatiquement.
Vérifier le site
Parcourez le site public ET l'admin : tout doit fonctionner normalement.
Le renommage des tables touche le cœur du site. Toujours avec une sauvegarde fraîche sous la main, et de préférence sur un site neuf ou mis en maintenance.
Surveillance & nuisances
- Détection de changement de fichiers : alerte si des fichiers sont modifiés à votre insu (signe d'intrusion).
- Protection contre le spam de commentaires : réduit drastiquement le spam.
- Blocage des bots / robots malveillants.
Double authentification (2FA)
Le verrou supplémentaire le plus efficace.
La 2FA exige, en plus du mot de passe, un code temporaire (appli type Google Authenticator) pour se connecter. Même si un mot de passe fuite, le compte reste protégé.
Activez la 2FA au moins sur les comptes Administrateur. C'est le meilleur rapport effort/sécurité.
Checklist sécurité
Le socle à valider sur chaque site.
Référencement avec Yoast SEO
Yoast SEO est l'extension de référencement la plus utilisée. Elle vous guide page par page avec une analyse en feux tricolores, gère les titres, méta-descriptions et le sitemap.
À quoi sert Yoast
Yoast ne « fait » pas le référencement : il vous outille pour bien le faire.
- Renseigner le titre SEO et la méta-description de chaque page.
- Analyser le contenu selon une requête cible.
- Générer le sitemap XML automatiquement.
- Gérer les données structurées et le partage sur les réseaux.
Yoast est un assistant. Le référencement repose surtout sur un contenu utile, une bonne structure, la vitesse, et : en local : la fiche Google Business Profile (Guide 1, ch. 11).
Installer & configurer
Un assistant de configuration pose les bases en quelques minutes.
Installer
Extensions → Ajouter → « Yoast SEO » → Installer + Activer.
Assistant de configuration
Indiquez si le site représente une organisation ou une personne, le nom, le logo, et vos profils réseaux.
Connexion Search Console (optionnel)
Pour remonter certaines données d'indexation directement dans WordPress.
N'installez jamais deux extensions SEO en même temps (Yoast + Rank Math par ex.) : elles entrent en conflit. Choisissez-en une.
Réglages & modèles de titres
Définissez la structure des titres une fois pour toutes.
Dans les réglages Yoast, configurez le modèle de titre (ex. %%title%% %%sep%% %%sitename%%) et le séparateur. Vous évitez ainsi de tout saisir manuellement.
Intégrez naturellement votre ville/zone dans le nom du site et les titres des pages clés (« Plombier à Agen : … »).
Optimiser une page : le métabox Yoast
Sous chaque page/article, le bloc Yoast pilote tout.
Requête cible (focus keyphrase)
Le mot-clé sur lequel vous voulez être trouvé (ex. « rénovation cuisine Villeneuve-sur-Lot »).
Aperçu Google (snippet)
Yoast montre comment la page apparaîtra dans Google. Ajustez le titre SEO (~60 car.).
Méta-description
~155 caractères, attractifs, incluant la requête cible. C'est votre « pub » dans les résultats.
Slug (URL)
Court et descriptif : /renovation-cuisine.
Lire l'analyse SEO
Les fameuses pastilles vert / orange / rouge.
Yoast vérifie notamment si la requête cible est présente :
- dans le titre SEO et le premier paragraphe ;
- dans l'URL (slug) ;
- dans au moins un sous-titre (H2/H3) ;
- dans le texte alternatif d'une image ;
- avec une densité raisonnable (sans bourrage) ;
- avec des liens internes/externes.
Le vert est un guide, pas une fin. Un texte bourré de mots-clés pour « faire vert » se lit mal et peut nuire. Écrivez pour l'humain d'abord.
L'analyse de lisibilité
Un bon contenu SEO est d'abord un contenu lisible.
- Phrases courtes et paragraphes aérés.
- Sous-titres réguliers pour structurer.
- Voix active plutôt que passive.
- Mots de transition pour fluidifier.
Ces conseils valent surtout pour les articles de blog. Sur une page vitrine courte, restez naturel.
Sitemap & indexation
Aider Google à découvrir toutes vos pages.
Activer le sitemap XML
Yoast le génère automatiquement (souvent votresite.fr/sitemap_index.xml).
Search Console
Soumettez l'URL du sitemap dans la Google Search Console.
Maîtriser l'indexation
Pour une page que vous ne voulez pas dans Google (mentions légales…), réglez-la en noindex dans Yoast.
Yoast ajoute automatiquement un balisage schema (fil d'Ariane, type de contenu) qui aide Google à comprendre vos pages.
Partage sur les réseaux sociaux
Soignez l'aperçu quand un lien est partagé.
Dans le métabox Yoast, onglet réseaux sociaux, définissez l'image de partage (Open Graph), le titre et la description affichés sur Facebook, LinkedIn, etc.
Sans image définie, un lien partagé peut afficher un visuel aléatoire ou rien. Une belle image de partage augmente les clics.
Les erreurs à éviter
Les pièges classiques qui plombent le référencement.
- Deux extensions SEO actives en même temps.
- Titres dupliqués sur plusieurs pages.
- Méta-descriptions vides ou identiques partout.
- Bourrage de mots-clés pour « faire vert ».
- Contenu trop court ou copié.
- Oublier de soumettre le sitemap à la Search Console.
Checklist SEO
À passer sur chaque page importante.
Cookies & RGPD
Le bandeau de consentement n'est pas optionnel : c'est une obligation légale (RGPD + règles CNIL). Voici comment le mettre en place correctement, sans se tromper sur les pièges les plus fréquents.
L'obligation légale
Pourquoi tout site qui dépose des cookies non essentiels doit demander le consentement.
En France et dans l'UE, le RGPD et la directive ePrivacy imposent de recueillir le consentement préalable de l'internaute avant de déposer des cookies non strictement nécessaires (mesure d'audience, publicité, réseaux sociaux, vidéos externes…). L'autorité de référence est la CNIL.
| Type de cookie | Consentement ? |
|---|---|
| Strictement nécessaires (panier, session, sécurité) | Non requis (exemptés) |
| Mesure d'audience (Analytics) | Requis (sauf configuration exemptée stricte) |
| Publicité / marketing | Requis |
| Réseaux sociaux, vidéos YouTube/Maps | Requis |
Je ne suis pas juriste : ce guide vulgarise les principes. Pour votre cas précis, la référence officielle est la CNIL (cnil.fr).
Les règles d'un bandeau conforme
Un simple « En continuant, vous acceptez » ne suffit PAS. Les critères CNIL :
- Refuser aussi facilement qu'accepter : un bouton « Tout refuser » dès le premier écran, au même niveau que « Tout accepter ».
- Pas de cases pré-cochées : le consentement doit être un acte positif.
- La navigation ne vaut pas consentement : scroller ou cliquer ailleurs ≠ accepter.
- Choix granulaire : pouvoir accepter par catégorie (statistiques, marketing…).
- Rien ne se dépose avant le choix : les traceurs attendent le « oui ».
- Pouvoir changer d'avis : un moyen de revenir sur son consentement à tout moment.
- Conserver la preuve du consentement.
Si « Tout refuser » est plus difficile à trouver ou à cliquer que « Tout accepter », votre bandeau n'est pas conforme.
Choisir un outil de consentement (CMP)
Une extension dédiée gère tout : bandeau, catégories, blocage, preuve.
On utilise une CMP (Consent Management Platform). Sur l'environnement de formation, c'est CookieAdmin – Cookie Consent Banner (par Softaculous) qui est installé : il configure facilement un bandeau de consentement avec prise en charge RGPD / CCPA. D'autres CMP existent (Complianz, CookieYes, Axeptio, Tarteaucitron…) ; comparez-les selon la conformité CNIL, le blocage automatique des scripts, le français et le tarif.
Choisissez une CMP capable de bloquer automatiquement les scripts tiers avant consentement (chapitre 5). C'est le point qui fait vraiment la conformité.
Installer & configurer
Le parcours est similaire d'une extension à l'autre.
Installer la CMP
Extensions → Ajouter → votre extension de consentement (sur la démo : CookieAdmin) → Installer + Activer.
Scanner les cookies
L'outil détecte les cookies/traceurs présents (Analytics, YouTube, pixels…).
Définir les catégories
Nécessaires / Statistiques / Marketing. Décrivez-les en français clair.
Régler le bandeau
Activez « Tout accepter » et « Tout refuser » au même niveau, plus « Personnaliser ».
Ajouter le moyen de revenir
Un petit bouton/lien permanent (« Gérer les cookies ») en pied de page.
Ouvre ton site en navigation privée : le bandeau s'affiche-t-il ? « Refuser » est-il aussi visible qu'« Accepter » ? Le lien « Gérer les cookies » est-il présent ?
Bloquer les scripts AVANT consentement
Le point le plus souvent raté : et le plus important.
Afficher un joli bandeau ne sert à rien si Google Analytics, YouTube ou un pixel publicitaire se chargent quand même dès l'arrivée. La CMP doit empêcher ces scripts de s'exécuter tant que l'internaute n'a pas accepté.
- Google Analytics / Tag Manager
- Vidéos YouTube & Google Maps intégrées
- Pixels Meta (Facebook), LinkedIn, etc.
- Polices ou widgets externes qui traceraient l'utilisateur
Les bonnes CMP gèrent ce blocage automatiquement. Vérifiez via les outils de développement du navigateur (onglet réseau) qu'aucun traceur ne part avant le clic « Accepter ».
Les pages légales obligatoires
Le bandeau n'est qu'une partie. Trois pages sont attendues.
| Page | Contenu |
|---|---|
| Mentions légales | Identité de l'éditeur, hébergeur, contact |
| Politique de confidentialité | Quelles données, pourquoi, droits RGPD |
| Politique de cookies | Liste des cookies et finalités (souvent générée par la CMP) |
WordPress propose un générateur de base de politique de confidentialité : Réglages → Confidentialité. À compléter et adapter : ce n'est qu'un point de départ.
Cas de la mesure d'audience
Analytics est le traceur le plus courant. Deux approches.
- Avec consentement : Analytics ne se charge qu'après acceptation (via la CMP). Simple et conforme, mais on perd les visiteurs qui refusent.
- Mesure d'audience exemptée : certaines solutions configurées de façon stricte (selon les critères CNIL) peuvent être exemptées de consentement. Plus technique.
Pour démarrer simplement et rester conforme : laissez la CMP conditionner Analytics au consentement. Vous affinerez ensuite si la mesure d'audience est stratégique.
Checklist conformité
Le minimum pour un site conforme côté cookies.