Design WordPress & Gutenberg : tous nos guides et tutoriels https://www.heto-agency.fr/guides/ressources/design/ Créer un site web & des vidéos qui vous ressemblent Mon, 23 Feb 2026 23:32:31 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9.1 https://www.heto-agency.fr/wp-content/uploads/2026/01/cropped-logo.v10-1-100x100.png Design WordPress & Gutenberg : tous nos guides et tutoriels https://www.heto-agency.fr/guides/ressources/design/ 32 32 Forminator upload failed : disque serveur plein (solution) https://www.heto-agency.fr/forminator-erreur-televersement-disque-sature/ https://www.heto-agency.fr/forminator-erreur-televersement-disque-sature/#respond Mon, 23 Feb 2026 23:32:12 +0000 https://www.heto-agency.fr/?p=5837 Forminator upload failed : disque serveur plein (solution) Vous avez créé un formulaire Forminator, et vous avez incorporé à l’intérieur un module qui permet de joindre des fichiers, des photos, etc., sous différents formats (PDF, PNG, JPG, etc.).   Tout allait pour le mieux jusqu’à ce que vos visiteurs tombent sur un problème de téléversement. […]

The post Forminator upload failed : disque serveur plein (solution) appeared first on HETO Agency.

]]>

Forminator upload failed : disque serveur plein (solution)

Vous avez créé un formulaire Forminator, et vous avez incorporé à l’intérieur un module qui permet de joindre des fichiers, des photos, etc., sous différents formats (PDF, PNG, JPG, etc.).

 

Tout allait pour le mieux jusqu’à ce que vos visiteurs tombent sur un problème de téléversement. Au moment de soumettre le formulaire, un message s’affiche du type :

 

“Une erreur est apparue lors du téléversement, veuillez réessayer ultérieurement.”

 

Ce qui est particulièrement problématique.

 

Cela bloque votre conversion, surtout si vous travaillez en prestation de service et que ce formulaire est le principal moyen de contact entre vous et vos visiteurs.

 

Nous allons voir tout ce qui englobe ce problème d’upload, ainsi que comment régler le souci de Forminator qui refuse les téléversements pour cause de disque serveur plein.

Table des matières

Comprendre l’erreur “Upload failed” sur Forminator

L’erreur “Upload failed” ou “Erreur lors du téléversement” apparaît dans la majorité des cas lorsque vous utilisez un champ de téléversement de fichier dans votre formulaire.

 

Concrètement, un visiteur joint son fichier dans le champ prévu à cet effet. À partir de là, deux cas peuvent se présenter.

 

Soit les informations sont traitées directement, et l’erreur apparaît immédiatement sur le champ d’upload.
Soit votre formulaire est configuré pour envoyer les informations au moment où l’utilisateur clique sur “Envoyer”, et le message d’erreur apparaît alors juste après cette action.

 

Il faut comprendre que tant que vous n’avez pas de champ pour joindre des fichiers, mais uniquement des champs classiques comme : texte, adresse e-mail, numéro de téléphone, message simple, etc., il n’y aura généralement aucun problème.

 

Mais dès que WordPress doit recevoir un fichier, le stocker dans le dossier uploads, l’enregistrer correctement ou sauvegarder le formulaire sur le serveur, alors le problème peut apparaître.

Pourquoi le disque serveur peut être plein ?

Cela peut dépendre de plusieurs cas de figure.

 

Premièrement, si votre serveur devient plein d’un seul coup, ou si la situation paraît anormale. Par exemple, un cas que nous avons déjà rencontré : un site qui passe de 3 Go à 256 Go en une semaine. Ce n’est clairement pas normal.

 

Dans ce cas précis, nous sommes face à une erreur évidente ou à un problème majeur, comme une sauvegarde défaillante, un script bloqué ou une génération massive de fichiers.

 

Un autre cas de figure possible est une accumulation progressive au fil du temps de fichiers de sauvegarde ou de fichiers très volumineux. Cela peut saturer le serveur petit à petit.

 

Cependant, il faut être honnête : remplir 250 Go simplement avec un site classique reste rare. Pour en arriver là progressivement, il faudrait publier des images très mal optimisées, stocker des vidéos lourdes directement sur le serveur, ou accumuler des archives inutiles pendant des années.

 

Dans la majorité des cas, une explosion rapide de l’espace disque indique plutôt un problème technique qu’une simple utilisation normale du site.

Comment vérifier si votre disque est plein

Avant de modifier quoi que ce soit, il faut d’abord vérifier si votre espace disque serveur est réellement saturé.

 

Beaucoup pensent que le problème vient du plugin, alors que dans la majorité des cas, il suffit simplement de vérifier l’état de l’hébergement.

 

La manière la plus simple de vérifier l’espace utilisé et celui qu’il vous reste est de vous rendre chez votre hébergeur, comme OVH ou Hostinger.

 

Sur le panel principal de votre site, vous avez dans la majorité des cas une barre ou une section qui vous indique l’espace restant.

 

Par exemple, chez OVH, avec l’offre Pro, nous disposons de 250 Go pour un site. Avec une offre multisite, il est également possible de voir directement l’espace total utilisé et l’espace disponible.

Tableau de bord d’hébergement affichant les informations générales du site, avec un focus sur l’espace disque utilisé par rapport à la capacité totale disponible.

Comment vérifier l’espace sur son disque de manière précise avec le SSH, le Terminal macOS ou Windows

Premièrement, ouvrez votre Terminal sur macOS ou sur Windows. Nous allons adapter la procédure en fonction de votre système d’exploitation.

 

Le guide sera présenté sur macOS, mais le principe restera exactement le même sur Windows.

 

Premièrement, ouvrez votre Terminal.

Fenêtre de terminal ouverte au premier plan, prête à recevoir des commandes, affichée par-dessus une interface d’administration en arrière-plan.

Ensuite, saisissez la commande suivante :

				
					ssh votre_user@votre_hebergement.ovh

Vous pouvez retrouver ces informations directement sur OVH, dans la section « FTP / SSH » de votre espace client.

Interface d’hébergement web affichant les paramètres FTP et SSH du site, avec les informations de connexion au serveur, les ports utilisés et la gestion des accès utilisateurs.

Nous entrons donc notre commande, puis nous appuyons sur « Entrer ».

Fenêtre de terminal affichant une commande de connexion SSH vers un serveur distant, prête à être exécutée.

Entrez ensuite le mot de passe de votre serveur.

 

Si rien ne s’affiche, même pas des étoiles pour représenter votre mot de passe, c’est totalement normal. Dans le Terminal, rien ne s’affiche lorsque vous tapez votre mot de passe.

 

Les lettres sont bien prises en compte, même si vous ne les voyez pas (ce qui n’est pas très pratique pour vérifier si vous vous trompez).

Fenêtre de terminal demandant le mot de passe après une tentative de connexion SSH à un serveur distant.

Une fois le mot de passe entré, nous pouvons voir que nous sommes bien connectés, avec un message qui s’affiche du type « Welcome to OVH ».

 

Nous voyons également apparaître la ligne de commande (souvent en violet chez OVH), où sont affichées différentes informations serveur, comme la version de PHP, l’environnement actif ou d’autres détails techniques.

Si rien ne s’affiche après le message « Welcome to OVH », ou si la session SSH se déconnecte immédiatement après la connexion, cela signifie généralement qu’il y a un problème de configuration côté serveur. Dans ce cas, il faudra ouvrir un ticket auprès de votre hébergeur et expliquer simplement que vous essayez d’accéder à votre serveur via SSH depuis votre Terminal, en précisant votre identifiant SSH, et que la connexion ne reste pas active. Dans la majorité des cas, il s’agit d’un accès SSH non activé, d’un problème de droits utilisateur ou d’une restriction liée à votre offre d’hébergement.

Fenêtre de terminal affichant une connexion SSH établie avec succès à un serveur distant, avec l’invite de commande prête à recevoir des instructions.

Ensuite, entrez la commande suivante :

				
					cd www

La commande cd (change directory) permet d’entrer dans un répertoire précis.

 

Dans notre cas, nous avons exécuté la commande pour accéder au dossier /www. Une fois la commande validée, nous pouvons voir sur la ligne de commande (souvent en violet chez OVH) que /www s’est ajouté à la fin du chemin. Cela prouve que nous sommes bien positionnés dans ce répertoire.

 

Cette commande fonctionne aussi bien sur macOS que sur Windows, à condition que vous utilisiez un environnement SSH basé sur Linux, ce qui est le cas dans la grande majorité des hébergements mutualisés ou serveurs classiques.

 

Important : les commandes que nous exécutons ici sont des commandes Linux. Elles fonctionneront uniquement si votre serveur distant est sous Linux, ce qui est généralement le cas chez OVH, Hostinger, etc.
Si votre serveur est sous un autre environnement (ce qui est rare en hébergement web classique), les commandes pourraient être différentes.

Fenêtre de terminal montrant la navigation vers le répertoire www sur le serveur distant, avec l’invite de commande positionnée dans ce dossier et prête pour les prochaines commandes.

Ensuite nous allons nous servir de la commande

				
					du -h --max-depth=1 | sort -hr
Cette commande sert à analyser précisément ce qui prend de la place dans le répertoire où vous vous trouvez.Voici ce qu’elle fait concrètement :
 
  • du signifie disk usage : cela permet de calculer la taille des dossiers

 

  • -h affiche les tailles en format lisible par un humain (Ko, Mo, Go)

 

  • --max-depth=1 limite l’analyse au premier niveau de dossiers (cela évite d’avoir des centaines de lignes inutiles)

 

  • | sort -hr trie les résultats par taille décroissante, du plus lourd au plus léger

 

En résumé, cette commande permet de voir immédiatement quels sont les dossiers les plus volumineux dans votre répertoire actuel.
Fenêtre de terminal affichant l’analyse de l’espace disque dans le dossier www, avec une commande listant la taille des sous-répertoires et un classement du plus volumineux au plus léger pour identifier les éléments qui occupent le plus d’espace.

Pour la suite, nous allons vous laisser continuer à procéder, car le processus peut être propre à chacun.

 

En effet, certains auront par exemple une accumulation anormale de backups à un endroit précis, d’autres un fichier de logs trop volumineux, ou encore un dossier spécifique qui consomme énormément d’espace disque.

 

Ce qu’il faut noter, c’est qu’il faut jouer avec la commande cd ainsi qu’avec la commande du -h –max-depth=1 | sort -hr.

 

Si vous voyez par exemple que dans votre répertoire wp-content vous avez 200 Go, faites cd wp-content, appuyez sur Entrer, puis réexécutez la commande du -h –max-depth=1 | sort -hr.

 

Et répétez cette étape avec le répertoire le plus volumineux.

 

Le but est de descendre progressivement dans l’arborescence jusqu’à identifier précisément le dossier ou le fichier trop lourd.

 

Ensuite, pour supprimer le fichier, vous pouvez d’abord revérifier sa taille exacte afin d’être certain qu’il s’agit du bon élément avec la commande :

				
					du -h nom-du-fichier.ext

Une fois que le fichier volumineux est confirmé, vous pouvez utiliser cette commande pour le supprimer.

				
					rm nom-du-fichier.ext

Vérifier le fichier debug.log (cause très fréquente)

Un autre cas très courant de disque serveur plein est le fichier debug.log.

 

Lorsque le mode debug de WordPress est activé (WP_DEBUG = true), toutes les erreurs, notices et warnings sont enregistrés dans un fichier situé ici :

 

wp-content/debug.log

 

Si votre site génère beaucoup d’erreurs (plugin mal configuré, thème instable, conflit technique), ce fichier peut grossir très rapidement.

 

Nous avons déjà vu des debug.log dépasser plusieurs gigaoctets en quelques jours seulement.

Comment régler le problème

Premièrement, vous pouvez supprimer le fichier :

 

rm debug.log

 

WordPress recréera automatiquement le fichier si le mode debug reste activé.

 

Mais attention : supprimer le fichier ne règle pas la cause.

 

Il faut ensuite vérifier votre fichier wp-config.php et chercher ces lignes :

 

define(‘WP_DEBUG’, true);
define(‘WP_DEBUG_LOG’, true);

 

Si votre site est en production, il est fortement recommandé de passer :

 

define(‘WP_DEBUG’, false);

Sinon le fichier continuera de se remplir.

Fenêtre d’édition du fichier wp-config.php affichant la désactivation du mode debug et de l’enregistrement des logs, avec les constantes correspondantes définies sur false.

Pourquoi debug.log peut bloquer Forminator

Si le fichier debug.log devient trop volumineux, il peut :

 

  • Saturer votre espace disque

 

  • Empêcher WordPress d’écrire de nouveaux fichiers

 

  • Bloquer les uploads

 

  • Provoquer l’erreur “Upload failed”

 

Et dans ce cas encore une fois, ce n’est pas Forminator le problème, mais bien le manque d’espace disque causé par un fichier de logs mal maîtrisé.

Comment éviter que le problème revienne

Si votre disque serveur s’est rempli une fois, il peut se remplir à nouveau.

 

Voici les bonnes pratiques à mettre en place :

 

Surveiller régulièrement votre quota disque chez votre hébergeur.

 

Ne pas stocker vos sauvegardes localement pendant des mois.
Idéalement, configurez votre plugin de sauvegarde pour envoyer les fichiers vers :

 

  • Google Drive

 

  • Dropbox

 

  • Un stockage externe

 

Pensez également à vérifier les plugins de logs ou les systèmes qui génèrent des fichiers comme debug.log, des logs d’erreurs, ou des rapports automatiques. Certains plugins de sécurité, de monitoring ou de statistiques peuvent créer des fichiers volumineux s’ils ne sont pas correctement configurés.

 

Évitez également de stocker des vidéos lourdes directement sur votre serveur.

 

Optimisez vos images avant upload afin de limiter la consommation d’espace disque.

 

Un minimum de surveillance permet d’éviter que l’erreur “Upload failed” ne réapparaisse à cause d’un serveur saturé.

Un disque plein bloque les téléversements, mais peut aussi empêcher les mises à jour, les sauvegardes, voire provoquer des instabilités plus larges sur votre site.

 

La solution est donc simple dans son principe :

 

Identifier ce qui prend de la place,
Supprimer les fichiers volumineux inutiles,
Et mettre en place de bonnes pratiques pour éviter que cela ne se reproduise.

 

Que ce soit une accumulation de sauvegardes, un debug.log trop lourd, des logs mal configurés ou un dossier uploads mal maîtrisé, le plus important est de comprendre que l’espace disque est une ressource limitée.

 

En gardant un œil régulier sur votre hébergement, vous éviterez que ce type d’erreur ne bloque à nouveau vos formulaires, et donc vos conversions.

The post Forminator upload failed : disque serveur plein (solution) appeared first on HETO Agency.

]]> https://www.heto-agency.fr/forminator-erreur-televersement-disque-sature/feed/ 0 Elementor vs Divi vs Bricks vs Gutenberg : comment choisir ? (Guide d’information 2026) https://www.heto-agency.fr/elementor-vs-divi-vs-bricks-vs-gutenberg/ https://www.heto-agency.fr/elementor-vs-divi-vs-bricks-vs-gutenberg/#respond Sun, 22 Feb 2026 19:02:32 +0000 https://www.heto-agency.fr/?p=5818 Elementor vs Divi vs Bricks vs Gutenberg : comment choisir ? (Guide d’information 2026) Aujourd’hui, lorsque nous créons un site sur WordPress, plusieurs solutions existent pour construire les pages. Entre Elementor, Divi, Bricks et Gutenberg, le choix peut rapidement devenir compliqué.   Chaque outil fonctionne différemment, n’a pas la même philosophie, ni les mêmes avantages. […]

The post Elementor vs Divi vs Bricks vs Gutenberg : comment choisir ? (Guide d’information 2026) appeared first on HETO Agency.

]]>

Elementor vs Divi vs Bricks vs Gutenberg : comment choisir ? (Guide d’information 2026)

Aujourd’hui, lorsque nous créons un site sur WordPress, plusieurs solutions existent pour construire les pages. Entre Elementor, Divi, Bricks et Gutenberg, le choix peut rapidement devenir compliqué.

 

Chaque outil fonctionne différemment, n’a pas la même philosophie, ni les mêmes avantages. Il est donc important de comprendre leurs différences avant de faire un choix qui va impacter toute la structure de votre site.

 

Ce guide a pour objectif de vous aider à comprendre les forces et les limites de chaque solution, afin de choisir celle qui correspond réellement à votre projet.

Table des matières

Quel constructeur est le plus simple à utiliser ?

C’est souvent la première question que se posent les utilisateurs.

 

La simplicité dépend du niveau de départ. Pour un débutant complet, un constructeur en glisser-déposer visuel sera plus rassurant qu’un éditeur plus technique.

 

Certains outils privilégient la prise en main rapide, avec une interface intuitive et peu de complexité au départ. D’autres offrent plus de contrôle, mais demandent un petit temps d’adaptation.

 

Il est donc important d’évaluer honnêtement votre niveau actuel. Un outil trop complexe peut ralentir votre progression, tandis qu’un outil trop limité peut vous frustrer rapidement.

Quel constructeur est le plus performant ?

La question de la performance revient constamment.

 

Il faut comprendre que la vitesse d’un site ne dépend pas uniquement du constructeur choisi. Elle dépend aussi :

 

 

 

  • Du nombre d’extensions installées

 

  • De la structure globale des pages

 

Certains constructeurs génèrent un code plus léger que d’autres. Mais un site mal structuré restera lent, quel que soit l’outil utilisé.

 

Il faut donc voir la performance comme un ensemble, et non comme une simple comparaison entre plugins.

Est-ce que je pourrai changer de constructeur plus tard ?

C’est une question importante, et la réponse est simple : oui, mais pas sans conséquences.

 

Lorsque vous construisez tout votre site avec un constructeur, vous devenez dépendant de lui. Si vous décidez de changer plus tard, il faudra souvent reconstruire une partie des pages.

 

Ce n’est pas impossible, mais cela représente du temps et parfois un coût.

 

Il faut donc choisir un constructeur en pensant au long terme, pas uniquement à l’installation du jour.

Ai-je vraiment besoin d’un constructeur de pages ?

Beaucoup installent un constructeur par réflexe. Pourtant, tous les projets n’en ont pas besoin.

 

Un site orienté blog ou contenu peut parfaitement fonctionner avec une solution native plus légère.

 

Un site marketing, avec des landing pages, des popups et des éléments dynamiques, aura besoin d’un outil plus flexible.

 

Il faut donc adapter l’outil au projet, et non l’inverse.

Gutenberg : la base native de WordPress

Logo Gutenberg : symbole ornemental encadrant une lettre « G », représentant l’éditeur de blocs natif de WordPress, Gutenberg.

Gutenberg est l’éditeur natif intégré à WordPress. Il fonctionne avec un système de blocs : bloc texte, bloc image, bloc colonnes, bloc bouton, etc.

 

Son principal avantage est la légèreté. Comme il est intégré directement dans WordPress, il génère un code propre et optimisé. Il n’ajoute pas de surcouche lourde.

 

En 2026, Gutenberg a énormément évolué. Il permet maintenant :

 

  • La gestion des patterns (modèles de sections réutilisables)

 

  • L’édition complète du site via le Full Site Editing (FSE)

 

  • La personnalisation globale des styles

 

  • L’intégration native avec la majorité des thèmes modernes

 

Cependant, même s’il est plus puissant qu’avant, il reste moins intuitif pour créer des mises en page très complexes. Pour obtenir un rendu marketing avancé, il faut souvent ajouter des extensions de blocs supplémentaires.

 

Gutenberg est particulièrement adapté pour :

 

  • Les blogs

 

  • Les sites orientés contenu

 

  • Les projets où la performance est prioritaire

 

  • Les personnes qui veulent rester 100 % dans l’écosystème WordPress

 

Il est moins adapté si vous souhaitez créer facilement des landing pages avancées, des effets dynamiques ou des tunnels marketing complets.

Elementor : la flexibilité grand public

Logo Elementor : icône représentant un « E » stylisé à l’intérieur d’un carré arrondi, correspondant au constructeur de pages WordPress Elementor.

Elementor est aujourd’hui le constructeur le plus utilisé. Il s’est imposé grâce à son interface en glisser-déposer, simple et visuelle.

 

Son grand avantage est sa prise en main rapide. Même sans compétence technique, il est possible de créer des pages professionnelles.

 

Avec la version gratuite, vous pouvez :

 

  • Structurer des pages personnalisées

 

  • Ajouter des sections et colonnes

 

  • Gérer les espacements

 

  • Adapter le design pour mobile

 

Avec la version Pro, vous accédez à :

 

  • Le Theme Builder

 

  • La modification du header et du footer

 

  • Les popups

 

  • Les formulaires intégrés

 

  • Le contenu dynamique

 

  • L’intégration marketing avancée

 

Elementor propose également une bibliothèque de templates prêts à l’emploi, ce qui permet de gagner du temps.

 

Son point de vigilance reste la performance. Si le site est surchargé d’animations, d’effets ou d’extensions, il peut devenir plus lourd. Mais avec une bonne structure et un hébergement correct, Elementor reste performant.

 

Elementor est idéal pour :

 

  • Les sites vitrines

 

  • Les sites marketing

 

  • Les freelances

 

  • Les agences

 

  • Les utilisateurs non techniques

 

C’est souvent le meilleur compromis entre simplicité, puissance et accessibilité.

Divi : l’écosystème fermé et structuré

Logo Divi : icône circulaire avec un « D » stylisé au centre, représentant le constructeur de pages WordPress Divi.

Divi est à la fois un thème et un constructeur intégré. Il fonctionne comme un environnement complet.

 

Contrairement à Elementor, Divi est davantage pensé comme une solution “tout-en-un”. Vous installez Divi et vous travaillez entièrement dans son écosystème.

 

Il propose :

 

  • Un grand nombre de layouts prédéfinis

 

  • Un constructeur visuel intégré

 

  • Une gestion globale des styles

 

  • Un système de modules personnalisables

 

Divi a longtemps été très populaire grâce à son modèle économique attractif (paiement annuel ou à vie).

 

Cependant, il peut générer un code plus lourd que Gutenberg ou Bricks. Il est aussi parfois perçu comme moins moderne dans sa structure technique.

 

Divi convient particulièrement :

 

  • Aux utilisateurs qui veulent une solution clé en main

 

  • À ceux qui aiment travailler avec des modèles prêts à l’emploi

 

  • Aux projets rapides à mettre en place

 

Il est moins pertinent pour des projets nécessitant une performance extrême ou une architecture très personnalisée.

Bricks : la performance et la précision

Logo Bricks : icône représentant la lettre « b » stylisée, correspondant au constructeur de thème WordPress Bricks.

Bricks est un constructeur plus récent, mais il a rapidement gagné en crédibilité.

 

C’est un thème constructeur orienté vers la performance, la propreté du code et la flexibilité avancée.

 

Bricks génère un code plus léger que la majorité des constructeurs classiques. Il offre également un système plus proche d’une logique de développeur, avec un contrôle précis sur la structure.

 

Il permet :

 

  • Une personnalisation avancée des éléments

 

  • Une gestion fine des conditions d’affichage

 

  • Une excellente optimisation des performances

 

  • Un système dynamique puissant

 

Bricks est particulièrement apprécié par :

 

  • Les développeurs

 

  • Les freelances techniques

 

  • Les agences orientées performance

 

  • Les projets sur mesure

 

Il peut cependant demander un peu plus de compréhension technique qu’Elementor.

Comparaison globale : ce qu’il faut réellement retenir

Maintenant que nous avons vu chaque solution en détail, il est important de prendre un peu de recul.

 

Chaque outil est capable de créer un site professionnel en 2026. La différence ne se joue plus uniquement sur le design, mais sur :

 

  • La philosophie de construction

 

  • Le niveau de contrôle

 

  • La performance

 

  • La facilité de maintenance

 

  • L’adaptabilité à long terme

 

Gutenberg mise sur l’intégration native et la légèreté.
Elementor mise sur la flexibilité et l’accessibilité.
Divi propose un écosystème complet et structuré.
Bricks privilégie la performance et le contrôle technique.

 

Le bon choix dépend donc moins de la popularité que de votre besoin réel.

Quel outil choisir concrètement en 2026 ?

Si votre priorité est la création de contenu, la rédaction d’articles et le référencement naturel, une solution native et légère reste cohérente.

 

Si vous voulez un site professionnel, visuel, avec une grande liberté de mise en page sans compétence technique avancée, un constructeur visuel complet sera plus adapté.

 

Si vous aimez les environnements structurés avec de nombreux modèles prêts à l’emploi, une solution tout-en-un peut vous faire gagner du temps.

 

Si vous recherchez performance, propreté du code et contrôle avancé, un constructeur plus technique sera plus intéressant.

 

Le choix doit être aligné avec votre projet, votre niveau, et votre vision à moyen terme.

Un constructeur influence la manière dont vous construisez vos pages, la facilité avec laquelle vous les modifiez, et la manière dont votre site évoluera dans le temps.

 

Il est donc important de ne pas choisir par réflexe, mais de réfléchir à votre besoin réel.

 

Un blog simple n’a pas besoin d’un outil complexe.
Un site marketing avancé ne doit pas être limité par un outil trop basique.

 

Le bon constructeur est celui qui correspond à votre stratégie, pas celui qui fait le plus de bruit sur internet.

The post Elementor vs Divi vs Bricks vs Gutenberg : comment choisir ? (Guide d’information 2026) appeared first on HETO Agency.

]]> https://www.heto-agency.fr/elementor-vs-divi-vs-bricks-vs-gutenberg/feed/ 0 Elementor : ce qu’il faut savoir avant de l’installer et comment l’installer étape par étape https://www.heto-agency.fr/installer-elementor-etape-par-etape/ https://www.heto-agency.fr/installer-elementor-etape-par-etape/#respond Thu, 19 Feb 2026 23:55:00 +0000 https://www.heto-agency.fr/?p=5775 Elementor : ce qu’il faut savoir avant de l’installer et comment l’installer étape par étape Elementor est aujourd’hui le constructeur de pages le plus utilisé sur WordPress. Ce n’est pas un hasard.   Il permet de créer des pages en glisser-déposer, sans toucher au code, tout en gardant un contrôle très précis sur le design. […]

The post Elementor : ce qu’il faut savoir avant de l’installer et comment l’installer étape par étape appeared first on HETO Agency.

]]>

Elementor : ce qu’il faut savoir avant de l’installer et comment l’installer étape par étape

Elementor est aujourd’hui le constructeur de pages le plus utilisé sur WordPress. Ce n’est pas un hasard.

 

Il permet de créer des pages en glisser-déposer, sans toucher au code, tout en gardant un contrôle très précis sur le design.

 

Mais avant de l’installer, il est important de comprendre ce que cela implique réellement pour votre site.

 

Un constructeur de pages n’est pas un simple plugin. Il change votre manière de travailler, votre organisation, et parfois même la structure complète de votre site.

Table des matières

Pourquoi Elementor est devenu aussi populaire ?

Si Elementor s’est autant développé, c’est parce qu’il répond à un besoin très clair : permettre à n’importe qui de créer un site professionnel sans passer par un développeur.

 

Il est à la fois intuitif, visuel, rapide à prendre en main et compatible avec la majorité des thèmes WordPress. Sa version gratuite permet déjà de faire beaucoup, ce qui le rend accessible à tous.

 

Avec Elementor, nous pouvons structurer nos pages, gérer précisément les espacements, modifier les couleurs, travailler les typographies, ajouter des blocs dynamiques, et visualiser immédiatement le résultat. Ce mélange de simplicité et de puissance explique clairement son succès.

Elementor et la performance

La question de la performance revient souvent.

 

Un constructeur de pages ajoute forcément du code supplémentaire, ce qui peut impacter la vitesse si le site est mal optimisé. Cependant, dans la majorité des cas, Elementor ne pose aucun problème si nous restons raisonnables.

 

Un site peut ralentir si nous multiplions les animations, si nous ajoutons trop d’effets visuels, si nous surchargeons nos pages, ou si notre hébergement est limité. Ce n’est donc pas l’outil en lui-même qui pose problème, mais la manière dont il est utilisé.

 

Un site bien structuré, avec un design propre et cohérent, reste performant même avec Elementor.

Elementor et le SEO

Concernant le référencement, Elementor ne bloque rien. Il permet de structurer correctement les titres, les contenus et les différentes sections d’une page.

 

Cependant, il ne fait pas le SEO à notre place. Il ne remplace pas une stratégie de contenu, et il ne compense pas un site lent ou mal optimisé. Un site construit avec Elementor peut très bien se positionner sur Google, à condition de respecter les bases.

La dépendance à Elementor

C’est un point important à comprendre avant installation.

 

Lorsque vous construisez toutes vos pages avec Elementor, vous devenez dépendant de lui.

 

Si vous le désinstallez un jour, votre mise en page sera impactée.

 

Cela ne veut pas dire qu’il ne faut pas l’utiliser.
Cela veut simplement dire qu’il faut être conscient de ce choix.

 

Un constructeur de pages est un outil structurant. Il devient une base de votre site.

L’écosystème Elementor

Elementor ne fonctionne pas seul.

 

Autour de lui, il existe tout un écosystème :

 

  • Des thèmes optimisés pour Elementor

 

  • Des extensions complémentaires

 

  • Des packs de widgets supplémentaires

 

  • Des templates prêts à l’emploi

 

  • Des outils marketing compatibles

 

C’est ce qui en fait une solution complète.

 

Mais attention : plus vous ajoutez d’extensions, plus vous devez rester vigilant sur la performance et la stabilité.

Avis sur Elementor

Comme dit au début de cet article / guide, Elementor est le constructeur de pages le plus connu et le plus installé. Si ce n’est pas le plugin le plus installé de tout l’écosystème WordPress, il en fait clairement partie, ce qui en fait un véritable mastodonte.

 

Avec plusieurs millions d’activations sur des sites, Elementor est noté 4,5/5 sur plus de 7 000 avis, ce qui en fait un très bon plugin, largement apprécié par la communauté.

 

Nous retrouvons également de nombreuses vidéos tutoriels, directement proposées par l’équipe qui l’a conçu, afin d’aborder au mieux cet outil et d’en comprendre toutes les possibilités.

 

Elementor est aujourd’hui un mastodonte qui n’a plus besoin de faire ses preuves, tant la révolution qu’il a apportée sur le marché des constructeurs de pages a été importante.

Comment installer et connecter Elementor

Pour ce faire, rendez-vous dans « Extensions > Ajouter une extension », puis tapez ensuite dans la barre de recherche : « Elementor ».

Page Extensions → Ajouter une extension avec une recherche par mot-clé “elementor”, affichant les extensions liées à Elementor dans les résultats.

Ensuite, une fois que le plugin apparaît, cliquez sur « Installer maintenant », puis pensez bien à activer le plugin après le chargement.

 

Si vous avez trouvé le plugin sur internet et que vous l’avez au format ZIP, ou si plus tard vous souhaitez passer à la version Pro, nous vous expliquons comment téléverser un fichier ZIP dans notre guide « Comment installer un plugin », qui contient une section dédiée au téléversement.

Fiche du plugin Elementor Website Builder dans les résultats de recherche des extensions, avec le bouton Installer maintenant, la note, le nombre d’installations actives, la date de dernière mise à jour et les informations de compatibilité.

Une fois le plugin Elementor installé, vous serez redirigé vers une page vous proposant de connecter votre compte Elementor.

 

Elementor peut fonctionner en version gratuite sans licence Pro, mais la connexion à un compte est fortement recommandée. Elle permet d’accéder à la bibliothèque de modèles, aux templates, ainsi qu’à certaines fonctionnalités supplémentaires.

 

En revanche, si vous utilisez la version Pro, la connexion au compte et l’activation de la licence sont obligatoires.

 

Dans ce guide, nous allons partir du principe que vous n’avez pas encore de compte. Nous allons donc cliquer sur « Create Account », qui se situe en haut à droite, afin de créer notre compte et continuer la configuration.

Écran d’Elementor demandant de connecter un compte pour activer l’espace de travail complet, avec le bouton Connect your account, l’option Continue as a Guest, et le bouton Create Account en haut à droite.

Après cela, une page s’ouvre pour créer un compte, soit avec Google, Facebook, Apple, ou directement via une adresse e-mail.

 

Google est généralement la solution la plus simple et la plus rapide. Pour l’exemple, nous allons donc choisir Google.

Fenêtre d’inscription Compte Elementor proposant différentes méthodes de connexion : Google, Facebook, Apple ou e-mail, avec un lien pour se connecter à un compte existant et une mention concernant la vérification et la sécurité (reCAPTCHA).

Après avoir accepté toutes les conditions de Google, les options de confidentialité, etc., nous arrivons sur une page qui nous demande si le compte affiché est bien celui que nous voulons connecter.

 

Si le compte affiché est le bon, cliquez sur « Connect ».

 

Si ce n’est pas le cas et que vous vous êtes trompé de compte, cliquez sur « Switch User », juste en dessous de l’adresse e-mail, afin de sélectionner le bon compte.

Fenêtre Elementor – Connect to Template Library demandant de connecter le site au compte Elementor, affichant le site et l’utilisateur sélectionné, avec le bouton Connect pour autoriser la liaison et accéder au tableau de bord My Elementor.

Une fois votre Elementor connecté, vous avez le choix entre « Build without limits » et « Instant online presence ».

 

La différence entre les deux est simple.

 

« Build without limits » vous permet de partir d’une base plus libre, avec un contrôle plus large sur la structure et le design de votre site. C’est l’option idéale si vous souhaitez construire votre site vous-même, étape par étape, et personnaliser chaque élément.

 

« Instant online presence », à l’inverse, est une option plus rapide. Elle propose une configuration assistée avec des modèles prédéfinis, afin de mettre un site en ligne plus rapidement, avec moins de personnalisation au départ.

 

Pour l’exemple, nous allons choisir « Build without limits ».

 

Si vous ne souhaitez pas choisir pour le moment, vous avez la possibilité de passer cette étape en cliquant sur « Skip » en bas à droite.

 

Si vous choisissez une option, sélectionnez-la puis cliquez sur « Select Theme » afin de continuer.

Étape Choose Theme de l’assistant Elementor permettant de choisir un thème (Hello Theme ou Hello Biz), avec le bouton Select theme pour confirmer le choix et l’option Skip pour passer cette étape.

Nous arrivons ensuite sur une page que les équipes d’Elementor ont mise en place pour vous proposer la version premium.

 

Pour passer cette étape, rien de plus simple. Il suffit de sélectionner n’importe quel paramètre, puis de cliquer sur « Upgrade Now ». Une page s’ouvrira alors, vous présentant les différents prix et les différentes offres Pro.

 

Si vous ne souhaitez pas passer à la version premium, fermez simplement cette page et revenez sur la page précédente d’Elementor.

 

En revanche, si vous souhaitez prendre la version premium, prenez le temps d’analyser les différentes offres, comparez les licences, puis procédez à l’achat si cela correspond à votre besoin.

 

Une fois revenu sur la page Elementor, vous verrez que vous serez automatiquement passé à l’étape suivante de la configuration.

Étape Choose Features de l’assistant Elementor permettant de sélectionner des fonctionnalités supplémentaires (Theme Builder, Custom Code & CSS, Image optimization, WooCommerce Builder, etc.), avec le bouton Upgrade Now pour passer à une offre supérieure.

Nous arrivons donc sur une page intéressante. Vous pouvez choisir soit de partir d’une feuille blanche en cliquant sur « Edit a blank page with the Elementor editor », soit de choisir un template déjà conçu, ou encore d’importer le vôtre en cliquant sur « Choose a professionally-designed template or import your own ».

 

Vous avez également la possibilité d’utiliser la fonctionnalité IA en cliquant sur « Create a professional site in minutes using AI ».

 

Attention toutefois : l’IA d’Elementor n’est pas entièrement incluse dans la version gratuite. Certaines fonctionnalités sont limitées et peuvent nécessiter des crédits supplémentaires ou un plan payant pour être utilisées pleinement.

 

Si vous ne souhaitez sélectionner aucune des trois options, cliquez sur « Skip ».
Sinon, choisissez l’une des options et vous serez redirigé directement vers l’environnement correspondant.

Écran final de l’assistant Elementor proposant trois façons de commencer : modifier une page vierge, choisir ou importer un modèle, ou créer un site avec l’IA, avec une option pour passer l’étape.

Ce guide a simplement pour objectif, dans un premier temps, de comprendre Elementor, ainsi que son installation et sa connexion.

 

Dans d’autres guides, nous verrons plus en détail comment comprendre l’interface d’Elementor, ainsi que toutes les fonctionnalités qu’il propose.

Les différences notables entre la version Pro et les différentes offres payantes

Avant toute chose, il est important de comprendre un point essentiel : lorsqu’on parle de version Pro, on parle des fonctionnalités avancées d’Elementor.

 

Mais lorsqu’on parle des offres payantes, on parle des licences proposées par Elementor, avec des différences principalement liées au nombre de sites, au niveau de support et à certains services supplémentaires.

 

Autrement dit, la version Pro correspond aux fonctionnalités, tandis que les offres payantes correspondent au type d’abonnement que vous choisissez.

Ce que permet réellement la version Pro

La version Pro d’Elementor débloque des fonctionnalités avancées qui ne sont pas disponibles dans la version gratuite.

 

Elle permet notamment :

 

  • De modifier le header et le footer

 

  • D’utiliser le Theme Builder

 

  • De créer des popups

 

  • D’ajouter des formulaires intégrés

 

  • D’utiliser des widgets avancés

 

  • De créer des templates dynamiques

 

  • D’accéder à des options marketing plus poussées

 

C’est donc la version Pro qui permet d’avoir un contrôle global sur toute la structure du site, et pas seulement sur les pages individuelles.

 

Si vous souhaitez personnaliser entièrement votre site sans dépendre de votre thème, la version Pro devient presque indispensable.

Les différentes offres payantes : quelle différence ?

Une fois que vous décidez de passer à la version Pro d’Elementor, vous devez choisir parmi plusieurs offres payantes.

 

Ces offres ne débloquent pas toutes des fonctionnalités différentes. La majorité des fonctionnalités principales restent identiques, mais certaines différences existent selon le plan choisi.

 

Voici comment comprendre ces offres simplement.

  • L’offre Essential est la plus accessible.

    Elle permet d’utiliser Elementor Pro sur 1 seul site.

    Elle donne accès à une partie des widgets Pro, au Theme Builder, au Dynamic Content et au Form Builder.

    En revanche, certaines fonctionnalités comme le Popup Builder, le Custom Code & CSS, les options eCommerce ou encore les fonctionnalités liées à l’IA ne sont pas incluses.

    C’est une formule adaptée si vous avez un site simple, sans besoin marketing avancé.


  • L’offre Advanced Solo concerne toujours 1 seul site, mais elle débloque davantage de fonctionnalités.

    Elle inclut plus de widgets Pro, le Popup Builder, le Custom Code & CSS ainsi que les fonctionnalités eCommerce.

    En revanche, les fonctionnalités liées à l’IA avancée ne sont pas incluses dans ce plan.

    Cette offre est plus adaptée à un site professionnel, avec des besoins plus complets.



  • L’offre Advanced fonctionne exactement comme Advanced Solo en termes de fonctionnalités, mais elle permet une activation sur 3 sites.

    C’est donc une offre pensée pour les freelances, les agences, ou les personnes qui gèrent plusieurs projets.


    Les fonctionnalités restent les mêmes que la formule Advanced Solo, la différence se situe principalement sur le nombre de sites.



  • L’offre One est présentée comme la formule la plus complète proposée par Elementor. Elle inclut l’ensemble des widgets Pro, le Theme Builder, le Dynamic Content, le Popup Builder, ainsi que le Custom Code & CSS et les fonctionnalités eCommerce.

    Elle donne également accès aux fonctionnalités liées à l’IA, à l’optimisation d’image et à l’accessibilité du site, ce qui en fait une solution beaucoup plus globale que les autres plans.

    Cette offre comprend aussi des crédits mensuels IA, permettant d’utiliser les outils basés sur l’intelligence artificielle sans limitation immédiate.

    C’est donc l’offre la plus complète, pensée pour ceux qui souhaitent exploiter tout l’écosystème Elementor avec un maximum de fonctionnalités et sans restriction.

Tableau comparatif des offres Elementor présentant quatre formules (Essential, Advanced Solo, Advanced et One) avec leurs tarifs mensuels facturés annuellement, le nombre de sites inclus et les fonctionnalités disponibles, ainsi qu’un bouton d’achat pour chaque offre.

Quelle offre choisir ?

Le choix dépend uniquement de votre besoin.

 

Si vous avez un site simple, l’offre Essential peut suffire.

 

Si vous avez besoin de popups, de code personnalisé ou d’options eCommerce, il faudra au minimum une offre Advanced.

 

Si vous gérez plusieurs sites, l’offre Advanced (3 sites) est plus logique.

 

Et si vous souhaitez utiliser pleinement les fonctionnalités liées à l’IA, à l’optimisation d’image et à l’accessibilité, alors l’offre One est la plus adaptée.

Nous n’avons pas encore vu en détail comment utiliser tous les widgets ou comment construire une page complète, ce sera l’objectif des prochains guides.

 

Ici, l’idée était surtout de poser les bases. Comprendre qu’Elementor n’est pas juste un plugin que l’on installe sans réfléchir, mais un vrai constructeur de pages qui va influencer toute la structure de votre site.

 

Dans les prochains guides, nous entrerons beaucoup plus dans le concret : comprendre l’interface, utiliser les widgets, structurer correctement une page et exploiter les fonctionnalités avancées.

The post Elementor : ce qu’il faut savoir avant de l’installer et comment l’installer étape par étape appeared first on HETO Agency.

]]> https://www.heto-agency.fr/installer-elementor-etape-par-etape/feed/ 0 Comment personnaliser la page de connexion WordPress. (Guide visuel 2026) https://www.heto-agency.fr/personnaliser-page-connexion-wordpress/ https://www.heto-agency.fr/personnaliser-page-connexion-wordpress/#respond Thu, 05 Feb 2026 22:50:25 +0000 https://www.heto-agency.fr/?p=4009 Comment personnaliser la page de connexion WordPress (Guide visuel 2026) Tous les jours, ou du moins à chaque fois que vous arrivez sur votre site pour le modifier, vous êtes confronté à la page de connexion WordPress : un logo WordPress par défaut, des champs pour se connecter, rien de très personnel. Ce n’est pas […]

The post Comment personnaliser la page de connexion WordPress. (Guide visuel 2026) appeared first on HETO Agency.

]]>

Comment personnaliser la page de connexion WordPress (Guide visuel 2026)

Tous les jours, ou du moins à chaque fois que vous arrivez sur votre site pour le modifier, vous êtes confronté à la page de connexion WordPress : un logo WordPress par défaut, des champs pour se connecter, rien de très personnel.

Ce n’est pas forcément très professionnel, surtout si un visiteur, un client ou un collaborateur tombe dessus. Même pour vous, l’expérience n’est pas très valorisante.

À l’inverse, arriver sur une interface de connexion personnalisée, avec le logo et les couleurs de son entreprise, apporte une image plus professionnelle et plus cohérente avec votre marque.

Table des matières

Pourquoi modifier sa page de connexion alors que personne ne la voit ?

C’est une question que les débutants, entre autres, se posent souvent. Ce qu’il faut comprendre, c’est que oui, vous pouvez changer votre URL de connexion afin de ne plus avoir le fameux wp-login. Et dans certains cas, cela devient plus qu’utile :

  • La crédibilité auprès de vos clients : imaginons que vous vendez un site à un client. Vos clients passeront par cette page et la verront régulièrement. La personnaliser leur montre que votre solution est sur mesure, adaptée à leur site, et évite qu’ils voient le logo WordPress basique à chaque connexion. Arriver sur une interface aux couleurs de leur entreprise renforce votre sérieux et votre professionnalisme.

  • La qualité globale du site : lorsque vous créez un site, rien ne doit être laissé au hasard. Personnaliser votre page de connexion montre à vos clients que vous maîtrisez votre outil. Et si ce site est pour vous-même, l’état d’esprit reste le même : un créateur préfère toujours un site soigné et cohérent, même dans les zones non accessibles aux visiteurs.

  • Une “sécurité par l’anonymat” : supprimer les logos et références officielles de WordPress permet de masquer légèrement la technologie utilisée, même si elle reste détectable via les pages du site. Cela permet aussi de créer une première barrière contre les robots qui ciblent spécifiquement les pages de connexion standards.

Pourquoi utiliser "Custom Login Page Customizer"

Car c’est un plugin qui offre de nombreuses possibilités de personnalisation de la page de connexion, tout en restant simple à prendre en main.
La création se fait facilement et permet de modifier l’épaisseur des champs, les bordures et les arrondis, les couleurs, l’arrière-plan, bref, tout ce qui touche à l’apparence de l’interface de connexion.

Il est également possible d’activer ou de désactiver certains modules selon vos besoins. Par exemple, vous pouvez supprimer les liens “mot de passe perdu” ou “se souvenir de moi”, afin de garder une page plus épurée, plus cohérente avec votre site, et parfois même un peu plus sécurisée.

L’idée reste la même : avoir une page de connexion WordPress personnalisée, propre, professionnelle, et surtout adaptée à votre usage ou à celui de vos clients, sans complexité inutile.

Avis "Custom Login Page Customizer"

Ce plugin est apprecié de la communauté wordpress, les statisitues ne menttent pas, il est actuellement installé sur plus de 90 000 site, avec une note de 5/5 sur plus de 400 avis ce qui le place en plugin de confiance à installer 

J'ai essayé plusieurs autres plug-ins de connexion personnalisés, mais celui-ci est celui qui me convient le mieux. Les paramètres de base sont faciles à configurer et il est encore plus facile de le personnaliser et de le modifier par la suite. Je l'utilise sur différents sites avec différents thèmes et je n'ai rien à redire, il mérite donc une note rare de 5 étoiles de ma part.

Earl_D

Comment installer "Custom Login Page Customizer"

Pour commencer rendez-vous dans l’administration de votre site, « Extensions > Ajouter une extension », tapez dans la barre de recherche « Custom Login Page Customizer »

Page “Ajouter des extensions” de WordPress avec une recherche effectuée pour “Custom Login Page Customizer”, affichant les résultats incluant LoginPress, Custom Login Page Customizer et Elementor, avec le champ de recherche et le menu Extensions visibles.

Ensuite, cliquez sur « Installer maintenant » sur le plugin nommé « Custom Login Page Customizer », puis pensez bien à activer le plugin après l’installation.

Résultats de recherche des extensions WordPress dans l’interface d’administration, mettant en avant le plugin “Custom Login Page Customizer” avec le bouton “Installer maintenant”, aux côtés d’autres extensions populaires comme LoginPress et Elementor.

Comprendre l’interface du plugin Login Customizer

Une fois sur le plugin, vous arrivez sur la page d’accueil, où plusieurs onglets sont disponibles.

Nous sommes actuellement dans l’onglet « Settings ». L’onglet « Customizer » est, lui, dédié à la personnalisation de la page de connexion : c’est ici que nous irons par la suite pour modifier l’interface de connexion.

Les onglets « Help » et « Contactez-nous » ne nous seront pas utiles durant ce guide.

Page des réglages du plugin Login Customizer dans l’administration WordPress, montrant les options de connexion : activation de “Remember Me”, choix du mode de connexion (nom d’utilisateur et/ou adresse e-mail), gestion du sélecteur de langue et suppression des paramètres lors de la désinstallation du plugin.

Dans la partie à côté, vous pouvez retrouver plusieurs options sous forme de cases à cocher ou à sélectionner. Elles relèvent avant tout du choix de chacun, selon l’usage du site :

  • Auto remember me : permet de cocher automatiquement « Remember me » lors de la connexion. Cela évite de ressaisir le mot de passe à chaque nouvelle session.

  • Login order : permet de choisir la méthode de connexion de l’utilisateur : soit avec un identifiant (exemple : admin1234), soit directement avec son adresse e-mail.

  • Language switcher : sur la page de connexion, il existe généralement une option pour changer la langue de l’interface. Cela dépend de votre public. Dans notre cas, le site vise une communauté francophone, nous allons donc la désactiver. De plus, ce n’est pas très esthétique.

  • Delete all settings : cette option permet de supprimer tous les paramètres du plugin au moment de sa désinstallation.

Écran des paramètres du plugin Login Customizer dans le tableau de bord WordPress, affichant les options de connexion : mémorisation automatique (“Remember Me”), méthode d’identification (nom d’utilisateur ou email), suppression du sélecteur de langue et réinitialisation des réglages lors de la désinstallation.

Nous allons maintenant personnaliser la page de connexion. Pour cela, cliquez sur « Customizer ».

Page des réglages du plugin Login Customizer dans le tableau de bord WordPress, avec options de connexion comme “Remember Me”, méthode d’identification (nom d’utilisateur ou email), suppression du sélecteur de langue et paramètres de désinstallation.

Comment personnaliser la page de connexion WordPress

Une fois sur la page de personnalisation, vous retrouvez sur la partie de gauche les différentes sections de personnalisation du site. Celle qui nous intéresse dans ce cas précis est « Login Customizer ».

Sur la partie de droite, vous avez la prévisualisation de la page de connexion. Elle s’adapte en temps réel en fonction de vos réglages.

Cliquez donc sur « Login Customizer ».

Personnalisation du site WordPress via le Customizer avec accès au Login Customizer et aperçu de la page de connexion administrateur.

Nous arrivons donc dans l’onglet de personnalisation de « Login Customizer ». Nous allons voir ensemble, pas à pas et dans l’ordre, les différentes options, afin de créer une page de connexion digne de ce nom.

Interface du plugin Login Customizer dans WordPress avec menu de personnalisation et aperçu du formulaire de connexion admin.

Dans l’onglet « Templates », vous pouvez retrouver des styles déjà prédéfinis, d’où le nom template.
Dans notre cas, nous allons sélectionner le template numéro 3, avec le fond bleu (nous changerons le fond par la suite).

Sélection d’un template de page de connexion WordPress dans le plugin Login Customizer, avec aperçu du formulaire de login.

Dans l’onglet « Background », nous allons pouvoir personnaliser le fond : la couleur, mais aussi ajouter une image de fond.

Dans notre cas, nous allons utiliser un fond en #f9f9f9, ainsi qu’une image en lien avec notre direction artistique.

À vous de choisir des codes couleurs et des images qui correspondent à votre business ou à celui de votre client.

Écran de personnalisation du fond de la page de connexion WordPress avec arrière-plan bleu et formulaire de login.

Une fois l’image uploadée, vous pouvez choisir la taille du fond, soit standard, soit personnalisée.
Vous pouvez également définir la répétition du fond ainsi que la position de l’image.

Personnalisation de l’arrière-plan de la page de connexion WordPress avec Login Customizer : choix de la couleur ou d’une image de fond, réglage de la taille, de la répétition et de la position de l’arrière-plan.

Dans l’onglet « Logo », nous allons pouvoir ajouter le logo, comme indiqué dans le titre. Il est également possible de désactiver l’affichage du logo (point A).

  • B : vous pouvez modifier la largeur du logo. Pour une gestion simple et propre, mettez 100 %.

  • C : pour la hauteur du logo, sélectionnez l’unité en pixels (px). Il faudra ensuite adapter la valeur en fonction de votre logo.
    En général, si votre logo fait 1000, 2000 ou 3000 pixels, il faudra ajuster par paliers de 100.
    Dans notre cas, une hauteur de 100 px est optimale, mais pour un autre logo, 200 ou 300 px peuvent être nécessaires.

  • D : cette option permet de gérer l’espace sous le logo, c’est-à-dire la distance entre le logo et le formulaire de connexion.

  • E : il s’agit de l’URL de redirection vers laquelle vous serez envoyé lorsque vous cliquerez sur le logo.

Personnalisation du logo sur la page de connexion WordPress avec Login Customizer : ajout du logo HETO Agency, réglage de la largeur, hauteur, espacement inférieur et URL de redirection du logo vers le site officiel.

Dans la section « Form », nous pouvons modifier l’arrière-plan de la zone qui contient les champs de connexion.

Il est possible de régler la couleur du container, ainsi que sa largeur et sa hauteur (dans notre cas, nous allons laisser les paramètres de base).

Le padding correspond à la marge interne, c’est-à-dire la distance entre les bords du container et les champs.

Le radius permet d’arrondir plus ou moins les angles. Dans cet exemple, nous avons choisi un radius de 15 afin d’obtenir un léger arrondi.

Enfin, le box shadow permet d’ajouter une ombre au container. Il est également possible de modifier la couleur de l’ombre affichée en dessous.

Personnalisation du formulaire de connexion WordPress avec Login Customizer : réglages de l’arrière-plan, largeur, hauteur, padding, rayon des coins et ombre portée, avec aperçu du formulaire “Log In” sur la page de connexion HETO Agency.

Dans la section « Fields », nous allons personnaliser les champs de connexion, à savoir l’identifiant et le mot de passe.

La première option concerne “Remember me”. Dans notre cas, nous l’avons désactivée afin de supprimer la case “Se souvenir de moi” et de garder une interface plus épurée.

La largeur des champs, réglée sur 100 %, leur permet d’occuper toute la largeur du formulaire, pour un rendu plus moderne et plus lisible.

La taille de la police, définie sur 24 px, améliore le confort de lecture, notamment sur les écrans plus grands.

Border Width gère l’épaisseur de la bordure des champs. Ici, une valeur légère suffit pour structurer le champ sans surcharger le design.
Il est également possible de modifier la couleur de la bordure afin de l’adapter à la charte graphique du site.

Le Radius, réglé ici sur 15, apporte un léger arrondi aux champs, pour un rendu plus doux et plus moderne.

L’option Disable Box Shadow, activée dans cet exemple, supprime l’ombre autour des champs, ce qui donne un design plus plat et minimaliste.

Enfin, les paramètres margin et padding servent à ajuster les espacements externes et internes.
Le margin gère l’espace autour des champs, tandis que le padding définit la distance entre le texte et les bords du champ, améliorant ainsi le confort d’utilisation.

Comme toujours, l’objectif reste de trouver le bon équilibre entre design, lisibilité et cohérence avec l’identité visuelle du site ou de celui du client.

Personnalisation du formulaire de connexion WordPress avec Login Customizer : réglages de l’arrière-plan, largeur, hauteur, padding, rayon des coins et ombre portée, avec aperçu du formulaire “Log In” sur la page de connexion HETO Agency.

En descendant dans la section « Fields », nous retrouvons d’autres options de personnalisation, cette fois-ci plus orientées sur les couleurs et les textes.

L’option Background permet de changer la couleur de fond des champs de connexion. C’est ici que nous pouvons harmoniser les champs avec la palette de couleurs du site.

Le Text Color correspond à la couleur du texte saisi dans les champs, c’est-à-dire ce que l’utilisateur tape (identifiant et mot de passe). Il est important de choisir une couleur bien lisible, surtout sur un fond clair.

Le Label Color permet de modifier la couleur des labels, comme Username ou Password, afin de garder une cohérence visuelle avec le reste de l’interface.

Enfin, le Label Font Size ajuste la taille de la police des labels. Dans cet exemple, 14 px offre un bon équilibre entre lisibilité et discrétion.

Comme pour le reste, l’objectif est de garder une interface claire, lisible et cohérente avec l’identité visuelle du site, sans surcharger inutilement la page de connexion.

Personnalisation avancée du bouton de connexion WordPress dans Login Customizer : réglages des marges, padding, rayon des bordures, couleurs de fond et de texte, avec aperçu du bouton “Log In” rose sur la page de connexion HETO Agency.

En continuant dans la section « Button », nous retrouvons des options plus avancées pour affiner encore le rendu du bouton de connexion.

L’option Background définit la couleur de fond du bouton. Dans cet exemple, nous avons choisi un bleu, en cohérence avec l’identité visuelle du site.

Background (Hover) correspond à la couleur du bouton au survol. C’est un détail, mais il apporte un vrai retour visuel lors du passage de la souris.

Le Button Size est réglé sur Custom, ce qui nous laisse un contrôle total sur la taille du bouton.

La largeur, définie sur 100 %, permet au bouton d’occuper toute la largeur du formulaire, pour un rendu plus moderne et plus accessible.

La hauteur, réglée à 35 px, offre un bon compromis entre visibilité et discrétion.

La taille de la police, fixée à 13 px, reste lisible sans prendre trop de place.

Le Text Color définit la couleur du texte du bouton. Il est important de conserver un contraste suffisant entre le texte et le fond.

Enfin, le padding ajuste l’espace interne du bouton, ici légèrement travaillé sur les côtés afin d’aérer le texte et d’améliorer le confort de lecture.

Personnalisation du bouton de connexion dans le plugin WordPress Login Customizer : réglages de couleur de fond, effet hover, largeur, hauteur, taille de police et padding, avec aperçu du bouton “Log In” sur la page de connexion HETO Agency.

En continuant dans la section « Button », nous retrouvons des options plus avancées pour affiner encore le rendu du bouton de connexion.

Border Width gère l’épaisseur de la bordure. Ici, une valeur de 1 suffit pour créer un léger contour, sans alourdir le design.

Border sert à définir la couleur de la bordure du bouton. L’idéal est de rester cohérent avec la couleur de fond ou avec la charte graphique du site.

Border (Hover) correspond à la couleur de la bordure au survol. Un détail subtil, mais qui apporte un retour visuel supplémentaire lors de l’interaction.

Shadow Spread contrôle la diffusion de l’ombre autour du bouton. Réglé sur 0, il permet de conserver un rendu propre et discret.

Box Shadow ajoute une ombre sous le bouton, avec la possibilité d’en ajuster la couleur pour créer un léger effet de profondeur, ou de la désactiver pour un style plus flat.

Enfin, Text Shadow applique une ombre au texte du bouton. À utiliser avec parcimonie, car un effet trop marqué peut nuire à la lisibilité.

Réglages de style des champs de formulaire dans le plugin WordPress Login Customizer : taille de police, padding, largeur et couleur de bordure, ombre et effet hover, avec aperçu du formulaire de connexion personnalisé HETO Agency.

Dans la section « Other », nous retrouvons les derniers réglages liés aux liens et aux textes situés sous le formulaire de connexion.

Disable Lost Password? supprime le lien « Mot de passe oublié ». C’est utile pour garder une page plus épurée et limiter les points d’entrée, surtout lorsque l’accès est réservé à des utilisateurs précis.

Disable Privacy Policy? masque le lien vers la politique de confidentialité sur la page de connexion. À activer ou non selon vos obligations légales.

Disable “Back to Website”? enlève le lien de retour vers le site, ce qui permet de garder l’utilisateur concentré uniquement sur la connexion.

La Font Size ajuste la taille du texte de ces liens. Ici, 14 px reste lisible sans attirer trop l’attention.

Le Text Color définit la couleur du texte affiché sous le formulaire.

Enfin, le Text Color (Hover) gère la couleur au survol, ajoutant un retour visuel discret.

Paramètres “Other” du plugin WordPress Login Customizer permettant de désactiver mot de passe oublié, politique de confidentialité et lien “Retour au site”, avec réglages de taille et couleur du texte, aperçu du formulaire de connexion personnalisé HETO Agency.

Nous terminons avec la section « Custom CSS & JavaScript », qui s’adresse principalement aux utilisateurs un peu plus avancés.

La partie Custom CSS donne la possibilité d’ajouter nos propres règles CSS afin d’aller encore plus loin dans la personnalisation. C’est ici que nous pouvons affiner des détails précis qui ne sont pas disponibles via les options classiques du plugin, comme le style des champs, les bordures ou certains comportements visuels spécifiques.

Dans l’exemple affiché, le CSS est utilisé pour modifier l’apparence des champs en ajoutant une bordure inférieure, dans un style plus minimaliste.

La section Custom JavaScript, quant à elle, permet d’injecter du JavaScript personnalisé sur la page de connexion. Cela peut servir à ajouter des interactions, déplacer des éléments ou modifier le comportement de certains composants selon nos besoins.

Cette partie n’est pas obligatoire pour obtenir une page de connexion propre et professionnelle, mais elle reste très utile si nous souhaitons un rendu totalement sur mesure ou l’intégration de fonctionnalités spécifiques.

Si nous ne maîtrisons pas le CSS ou le JavaScript, il est tout à fait possible de laisser ces champs vides, sans aucun impact négatif sur le reste de la configuration.

Éditeur WordPress Login Customizer affichant du CSS et JavaScript personnalisés pour styliser le formulaire de connexion, avec aperçu du login WordPress brandé HETO Agency.

Bonus : pour modifier la couleur du trait qui apparaît juste en dessous lors de la sélection d’un champ, il suffit de modifier la partie du code montrée ci-dessous.

Après cela, la couleur sera automatiquement mise à jour.

Interface WordPress Login Customizer affichant du CSS et JavaScript personnalisés, avec mise en surbrillance de la couleur (#3773f6) appliquée aux champs du formulaire de connexion HETO Agency.

Cliquez ensuite sur « Publier », puis rendez-vous sur votre page de connexion habituelle.

Interface du plugin WordPress Login Customizer montrant les options de personnalisation (templates, fond, logo, formulaire, boutons) avec aperçu du formulaire de connexion personnalisé HETO Agency et bouton “Publier”.

Et voilà, nous nous retrouvons avec une page de connexion à nos couleurs, dans notre style et en accord avec notre direction artistique, bien plus professionnelle que la page de connexion de base, qui reste très basique.

Page de connexion HETO Agency avec formulaire d’identification (email, mot de passe) et bouton « Se connecter ».

vous savez maintenant comment personnaliser la page de connexion WordPress pour la rendre plus professionnelle, plus cohérente avec votre identité visuelle et parfois même plus sécurisée.

Que ce soit pour changer le logo, les couleurs, l’arrière-plan ou améliorer l’expérience utilisateur, cette page est souvent négligée alors qu’elle donne une première impression importante, surtout pour un site professionnel ou un espace réservé à des clients.

Comme toujours, l’objectif n’est pas d’en faire trop, mais d’avoir une page propre, claire et alignée avec votre site. D’autres articles sont disponibles (et à venir) pour aller encore plus loin dans la personnalisation et l’optimisation de votre site WordPress.

The post Comment personnaliser la page de connexion WordPress. (Guide visuel 2026) appeared first on HETO Agency.

]]> https://www.heto-agency.fr/personnaliser-page-connexion-wordpress/feed/ 0 Forminator WordPress : Comment créer des formulaires pros et sans spam (Guide Visuel 2026) https://www.heto-agency.fr/comment-creer-des-formulaires-pros-et-sans-spam/ https://www.heto-agency.fr/comment-creer-des-formulaires-pros-et-sans-spam/#respond Sun, 01 Feb 2026 19:11:46 +0000 https://www.heto-agency.fr/?p=2821 Forminator WordPress : Comment créer des formulaires pros et sans spam (Tuto 2026) Dans l’article précédent, nous avons abordé le sujet de l’installation de Site Kit by Google afin de consulter nos statistiques directement depuis notre tableau de bord WordPress. Dans cet article, nous allons voir comment installer, configurer et créer un formulaire professionnel, plus […]

The post Forminator WordPress : Comment créer des formulaires pros et sans spam (Guide Visuel 2026) appeared first on HETO Agency.

]]>

Forminator WordPress : Comment créer des formulaires pros et sans spam (Tuto 2026)

Dans l’article précédent, nous avons abordé le sujet de l’installation de Site Kit by Google afin de consulter nos statistiques directement depuis notre tableau de bord WordPress. Dans cet article, nous allons voir comment installer, configurer et créer un formulaire professionnel, plus ou moins complexe, avec Forminator.

Au cours de la vie de votre site, vous serez amené à entrer en contact avec vos visiteurs. C’est là que les plugins de création de formulaires deviennent utiles. Ils permettent de concevoir des formulaires personnalisés, d’ajouter des conditions sur certains champs et de bénéficier d’un suivi clair des soumissions. Dans certains cas, il est aussi possible d’intégrer des moyens de paiement.

Nous allons donc voir dans cet article comment créer un formulaire avec Forminator, tout en évitant le spam grâce à la configuration de reCAPTCHA.

Table des matières

Pourquoi utiliser Forminator plutôt qu’un autre plugin de formulaire ?

Le plugin Forminator est une référence en matière de plugin pour créer des formulaires. De par son interface user-friendly, il est facilement accessible et, comparé à ses concurrents, une majorité de ses fonctionnalités sont gratuites, ce qui est un point très important quand on connaît le prix auquel les autres les proposent.

En plus de son interface d’administration propre et intuitive, il permet de créer des formulaires visuellement qualitatifs sans trop se prendre la tête, là où d’autres demandent plus de temps et de compréhension. On peut ajouter des champs conditionnels, gérer les réponses, créer des quiz, des sondages, ou même intégrer des paiements, le tout sans devoir toucher au code.

Pour finir, l’extension Forminator n’est pas un gouffre de performance. C’est un plugin plutôt léger et optimisé qui, bien configuré, ne vient pas faire de l’ombre à la vitesse de vos pages ni à votre optimisation globale. Et avec des options comme reCAPTCHA ou l’anti-spam intégré, vous gardez des formulaires propres, sans être envahi par les robots.

Qu'est il possible de créer avec Forminator

Que vous vouliez créer un simple formulaire de contact ou un formulaire plus complexe pour récupérer des informations dans le cadre d’une offre d’emploi, d’une demande de devis ou autre, Forminator embarque de nombreuses possibilités et fonctionnalités pour mener à bien votre mission.

Forminator intègre un système de conditions qui permet d’adapter les champs affichés en fonction des actions de l’utilisateur. Il offre aussi une bonne flexibilité au niveau de l’envoi des e-mails, même si certaines fonctionnalités avancées (qui restent dispensables), comme la génération de PDF, sont disponibles uniquement dans la version payante.

Vous pouvez également créer des formulaires multi-pages, avec chaque section bien catégorisée, ce qui rend les formulaires longs plus agréables à remplir. Une grande liberté de personnalisation au niveau des couleurs, des formes et des conteneurs est aussi possible, afin d’adapter le design à votre site.

Vous pouvez aussi créer des sondages, des quiz, et utiliser des fonctionnalités de calcul, très utiles par exemple pour des devis automatiques ou des estimations.

Quel est l'avis des utilisateurs sur Forminator ?

Forminator, fort de ses fonctionnalités, a su se faire une place parmi d’autres plugins comme Fluent Forms ou Bit Form. Le plugin est actuellement installé sur plus de 600 000 sites WordPress et affiche une note proche de 5/5 pour plus de 2 000 avis, ce qui montre qu’il plaît énormément aux utilisateurs.

Dans les avis, les bénéfices souvent mis en avant sont la gratuité de la majorité des fonctionnalités, une interface utilisateur claire, l’absence de vraies limites dans la création des formulaires et la simplicité de mise en place.

Une extension surprenante, il semble vraiment que seule votre imagination peut limiter ses utilisations. De nombreuses fonctionnalités telles que la prise de paiements, le calendrier… le tout gratuitement. Je ne peux pas croire que tout ce dont j’ai besoin est là-dedans, cela suscite la créativité et rend amusant le travail sur un site web.

araca

Comment installer Forminator sur WordPress

Pour commencer l’installation de Forminator et créer ensuite vos propres formulaires, rendez-vous dans « Extensions > Ajouter une extension ».

Dans la barre de recherche de WordPress, tapez « Forminator », puis attendez que les résultats se chargent.

Recherche du plugin Forminator dans le répertoire des extensions WordPress pour installer le constructeur de formulaires

Cliquez sur « Installer maintenant », puis pensez à activer le plugin par la suite.
(Si vous avez trouvé le plugin sur Internet et que vous l’avez en format .ZIP, vous pouvez consulter notre article « Comment installer un plugin » pour voir comment l’installer via un fichier .ZIP.)

Installation du plugin Forminator Forms depuis le répertoire des extensions WordPress avec le bouton Installer maintenant

Vous arrivez sur la page nommée « Extensions ». Vous pouvez y voir le plugin Forminator ; cliquez sur « Tableau de bord ».

Plugin Forminator activé dans WordPress avec accès au tableau de bord pour créer des formulaires

Comment créer un formulaire de contact avec Forminator

Vous pouvez retrouver :

  • A – Ici, vous avez accès à la documentation. Si vous rencontrez un problème ou avez un doute sur une configuration, cliquez à cet endroit.

  • B – Vous pouvez commencer avec des modèles (templates) déjà prêts. Certains sont payants, mais l’extension en propose plusieurs de base. Ils ne sont pas forcément très complexes, mais pour une utilisation simple (formulaire de contact, demande d’information, etc.), cela fait largement l’affaire.

Dans notre cas, nous allons cliquer sur « START FROM SCRATCH ».

Tableau de bord Forminator dans WordPress pour créer un formulaire avec modèles ou démarrer depuis zéro

Vous êtes normalement redirigé vers « Forminator > Formulaires ». C’est dans cette section que nous allons pouvoir créer notre propre formulaire.

  • A – Vous avez la possibilité d’ajouter, à différents endroits, des blocs (champs) qui vont composer votre formulaire : adresse, texte court, texte long, numéro de téléphone, cases à cocher, etc.

  • B – Ici, vous pouvez modifier le nom de votre formulaire pour mieux le classer parmi les autres. Vous pouvez également voir l’état du formulaire : brouillon, publié, etc.

  • C – Vous trouverez l’option prévisualiser, qui ouvre une fenêtre avec votre formulaire afin de vérifier l’apparence, les champs et le bon fonctionnement de ce dernier.

Vous avez aussi l’option publier, qui sert également après chaque modification. En effet, à chaque changement, il faudra cliquer sur ce bouton pour enregistrer et mettre à jour le formulaire. Les trois petits points vous permettent de :

  • Créer un nouveau formulaire

  • Copier le code court (shortcode) pour l’intégrer dans vos pages

  • Sauvegarder votre formulaire sur le cloud

  • Voir les soumissions avec les données remplies par les utilisateurs

  • Consulter les rapports des soumissions

  • Réinitialiser les données de suivi

  • Dupliquer votre formulaire

  • Exporter le formulaire pour l’utiliser sur un autre site

  • Vous avez également la documentation de nouveau à votre disposition.

Vous avez bien évidemment la possibilité de supprimer le formulaire à cet endroit.

Éditeur de formulaire Forminator dans WordPress avec bouton Ajouter des champs et options Prévisualiser et Publier

Nous allons d’abord créer les champs de notre formulaire. Nous verrons ensuite comment personnaliser la partie e-mail ainsi que l’apparence.

Rendez-vous dans « Insert Form Fields ».

Ajout de champs dans un formulaire Forminator via le bouton Insert Form Fields dans l’éditeur WordPress

Une fenêtre apparaît avec de nombreux champs disponibles à ajouter.

Dans notre optique de créer un formulaire basique pour cet exemple, nous allons sélectionner le minimum nécessaire.

Vous pouvez sélectionner, dans cet ordre : Nom, E-mail, Texte court, Texte long.

Cliquez ensuite sur « Ajouter des champs ».

Sélection des champs de formulaire dans Forminator WordPress avec options Nom, Email, Téléphone, Texte et autres champs personnalisés

Nous nous retrouvons avec 4 blocs, ceux précédemment importés. En cliquant sur la roue dentée à côté de chaque élément, nous allons pouvoir les configurer.

Modification des paramètres d’un champ dans un formulaire Forminator via l’icône engrenage pour éditer, dupliquer ou supprimer le champ

Dans la page de personnalisation de notre champ, nous avons d’abord son identifiant. Celui-ci nous permettra par la suite de cibler ce champ dans les e-mails afin de récupérer les informations saisies par l’utilisateur.

Nous retrouvons ensuite plusieurs onglets comme les réglages, la mise en forme et la visibilité, qui peuvent servir notamment à mettre en place des conditions d’affichage.

L’option Unique / Expand permet, avec un seul bloc, de demander plusieurs informations au visiteur, comme le prénom, le nom de famille, etc.

Le libellé correspond au titre affiché au-dessus du champ pour le visiteur.

Le texte indicatif est le texte qui apparaît à l’intérieur du champ lorsqu’il est vide (exemple : « Écrivez votre nom »). La description, elle, s’affiche sous le titre du champ pour apporter une précision supplémentaire.

Pour la suite, cliquez sur « Réglages ».

Personnalisation du champ Nom dans Forminator avec modification du libellé, texte indicatif et description du champ

Dans les réglages, la plupart du temps le champ est indiqué comme facultatif, ce qui signifie que les personnes peuvent l’envoyer sans le remplir. Ce n’est pas l’idéal ; nous allons donc le passer en obligatoire.

Une fois cela fait, un champ nommé « message d’erreur » apparaît. C’est le message qui s’affichera si l’utilisateur tente d’envoyer le formulaire sans avoir rempli ce champ. Forminator vous demande donc d’ajouter un message d’erreur, par exemple :

[ Ce champ est obligatoire. Veuillez saisir une réponse ]

 

Les sections mise en forme et visibilité ne nous intéressent pas pour un formulaire de cette taille. Cliquez donc sur « Appliquer ».

Activation de l’option champ obligatoire dans Forminator avec personnalisation du message d’erreur du champ

De même pour le champ adresse e-mail, vous avez la possibilité d’activer une vérification d’e-mail en demandant au visiteur de saisir son adresse deux fois afin d’éviter les erreurs.

Pour le reste, le principe est le même : pensez bien à définir ce champ comme obligatoire.

Cliquez sur « Appliquer »

Configuration du champ Email dans Forminator avec option de confirmation d’adresse email et bouton Appliquer

Faites de même pour le premier et le deuxième champ texte. Dans ce cas précis, le premier servira à demander à l’utilisateur le sujet du message, et le deuxième correspondra au contenu du message. Nous allons donc modifier le libellé de ces deux champs et les rendre obligatoires.

Comme pour le champ Nom, rendez-vous sur la roue dentée > Field Labels > Libellé, puis modifiez le texte avec celui souhaité.

Ajout des champs Sujet et Message dans un formulaire de contact Forminator sur WordPress

Modifier l'apparence de son formulaire sur Forminator

Maintenant que notre formulaire de contact est prêt, nous allons lui donner une certaine apparence. Pour cela, rendez-vous dans « Forminator > Apparence ».

Accès aux paramètres d’apparence du formulaire dans Forminator pour personnaliser le design et le style

Vous voilà dans Apparence. À gauche de cette page, nous avons une prévisualisation du formulaire, ce qui est utile pour voir en temps réel les modifications que nous apportons.

À droite, vous trouverez plusieurs sections. Cliquez sur « Style » et, si ce n’est pas déjà fait, cochez « Par défaut » ou choisissez un style qui vous convient. Forminator propose plusieurs styles prédéfinis, mais vous avez aussi la possibilité de ne pas en appliquer et de tout configurer manuellement via des sections comme Couleurs, Layouts et Espacements, afin d’adapter parfaitement le formulaire à votre design.

Aperçu du design du formulaire Forminator avec choix du style visuel et personnalisation des couleurs, polices et mise en page

Pour aller plus loin dans la personnalisation, nous voulons que notre formulaire ait les bords arrondis. Rendez-vous dans « Forminator > Apparence > Layout and Spacing ». Descendez jusqu’à la section « Champ conteneur », cliquez sur Personnaliser, puis modifiez le rayon (par exemple 15). Les bords de votre formulaire seront alors arrondis.

Personnalisation avancée du style du formulaire Forminator avec réglage des bordures, rayons d’angle et espacements des champs

Si vous le souhaitez, vous pouvez aller plus loin dans la personnalisation, notamment avec les couleurs et les polices, qui permettent, comme leur nom l’indique, de modifier l’apparence des champs. Nous allons prendre l’exemple de la section Couleurs, les autres fonctionnant de la même façon.

Déroulez le menu « Couleurs » dans « Forminator > Apparence > Couleurs ». Pensez à cocher « Personnaliser les couleurs » si vous voulez régler ces paramètres vous-même. Ensuite, plusieurs options s’affichent pour la personnalisation, comme les messages de réussite, les conteneurs du formulaire, et bien d’autres éléments visuels.

Personnalisation des couleurs du formulaire Forminator avec modification des éléments comme le conteneur, messages de succès et erreurs

Par exemple, si vous cliquez sur Conteneur et que vous modifiez la couleur de l’arrière-plan, vous verrez immédiatement le changement dans la prévisualisation. À cette étape, ce sont surtout vos goûts et le rendu que vous souhaitez obtenir qui vont vous guider.

Pensez bien à enregistrer après avoir effectué les modifications.

Modification de la couleur d’arrière-plan du formulaire dans Forminator via l’outil de sélection de couleur personnalisé

Cliquez sur la flèche de retour à côté de « Apparence » pour revenir en arrière.

Retour au menu Apparence du formulaire Forminator après personnalisation des couleurs

Dans la section Comportement, nous allons configurer ce qu’il se passe lorsque l’utilisateur envoie le formulaire.

Au niveau de Après la soumission, choisissez « Message en ligne. » C’est le plus simple pour un formulaire de contact. Vous pouvez laisser le message par défaut ou mettre par exemple : [ Merci de nous avoir contacté, nous reviendrons vers vous sous peu. ]

Dans Méthode, laissez AJAX coché. Cela permet d’envoyer le formulaire sans recharger la page, ce qui est plus propre et plus fluide pour l’utilisateur.

Pour la Validation, laissez la validation lors de la soumission. Cela suffit pour un formulaire de contact classique, pas besoin d’activer la validation en direct.

Réglages du comportement d’envoi du formulaire Forminator avec message après soumission, méthode AJAX et options de validation activées

Dans Indicateur de soumission, cochez « Afficher l’icône de chargement. » Cela montre que le formulaire est en train d’être envoyé, surtout si le site met un peu de temps à répondre.

Partie Remplissage automatique : utile seulement si les utilisateurs ont un compte sur votre site. Pour un simple formulaire de contact, vous pouvez laisser désactivé.

Partie Sécurité, très importante : cochez « Protection Honeypot », c’est un piège anti-spam invisible.Cochez aussi Akismet si vous avez le plugin installé.

Ne cochez pas « soumission connectée uniquement », sinon seules les personnes inscrites pourront envoyer le formulaire.

Paramètres avancés du comportement Forminator avec indicateur de soumission, remplissage automatique et protection anti-spam Honeypot activée

Dans « Durée de vie », laissez sur Aucun pour que le formulaire soit toujours actif.

Dans la partie « Rendu », cochez « Charger le formulaire avec AJAX » et « Empêcher la mise en cache » pour éviter les problèmes avec les plugins de cache.

L’option « Enregistrer et continuer » n’est pas nécessaire pour un formulaire de contact simple, vous pouvez la laisser désactivée.

Une fois terminé, cliquez sur « PUBLISH CHANGES »

Options avancées Forminator avec durée de vie du formulaire, chargement AJAX, prévention du cache et bouton Publish Changes visible

Configurer les notifications par e-mail dans Forminator

Pour les notifications par e-mail, rendez-vous dans la section « Notifications par e-mail », puis cliquez sur la barre nommée « E-mail de l’administration ».

Section notifications par email de Forminator avec notification administrateur configurée et bouton Publish Changes en haut à droite visible

En arrivant sur cette fenêtre, nous sommes dans la section « E-mail », c’est ici que l’on modifie tout ce qui concerne le libellé, qui sert de repère entre vos différentes notifications.

Ensuite, nous avons l’objet de l’e-mail, c’est ce que vous allez recevoir dans votre boîte mail. Comme nous avons des champs dédiés dans notre formulaire, nous pouvons utiliser leurs ID (cliquez sur le + pour les insérer). Par exemple : « Nouveau message depuis « Votre-site » de {name-1} pour {text-1} ». Cela permet d’avoir directement les informations importantes visibles dès la réception du mail.

En dessous, nous avons le corps du message, c’est là où toutes les informations envoyées par l’utilisateur apparaîtront. Vous pouvez garder la structure par défaut en la traduisant, ou faire quelque chose de plus propre et personnalisé, par exemple :

—–

Nouveau message de {name-1}

Sujet : {text-1}
Contenu : {textarea-1}

——

Tout dépend de vos besoins et des champs présents dans votre formulaire. Si vos ID sont différents, pensez bien à les modifier ici.

Pour la suite, cliquez sur Destinataires pour définir l’adresse e-mail qui recevra les messages.

La section Avancé peut aussi être utile, notamment pour définir le Reply-To, c’est-à-dire l’adresse de réponse. Cela permet que lorsque vous cliquez sur “Répondre” dans votre boîte mail, la réponse parte directement vers l’adresse e-mail saisie par l’utilisateur dans le formulaire, et non vers l’adresse technique du site.

La partie Conditions ne nous intéresse pas dans ce cas précis. Elle servira surtout pour des formulaires plus complexes avec des envois différents selon les réponses. Un article dédié à la création de formulaires avancés, quiz et sondages sera fait par la suite.

Fenêtre d’ajout de notification email ouverte avec onglet Email actif, objet dynamique du formulaire et éditeur du message avec insertion des champs.

Ensuite, entrez l’adresse e-mail sur laquelle vous souhaitez recevoir les messages.

Pour la suite, rendez-vous dans « Avancé ».

Onglet Avancé ouvert, routage des emails activé et adresse destinataire configurée.

Pour finir, allez dans « E-mail de réponse » et mettez {email-1} (ou l’ID du champ où le visiteur renseigne son adresse e-mail). Cela permettra que, lorsque vous cliquez sur Répondre, votre message parte directement vers l’utilisateur. Sinon, vous répondrez à votre propre adresse.

Pensez aussi à bien mettre, dans l’e-mail de l’expéditeur, votre adresse e-mail, et dans Nom, le nom que vous souhaitez voir apparaître comme expéditeur.

Cliquez sur « AJOUTER »

Onglet Avancé ouvert, champ E-mail de réponse configuré avec {email-1} et paramètres d’expéditeur disponibles.

Comment activer ReCaptcha sur WordPress

Allez sur le site de Google reCAPTCHA, connectez-vous avec votre compte Google, puis remplissez les informations demandées.

Indiquez un libellé pour vous repérer parmi vos clés API reCAPTCHA.
Choisissez l’option « Sur la base d’un score (v3) ».
Entrez ensuite votre nom de domaine.

Donnez aussi un nom de projet, puis cliquez sur Envoyer.

Formulaire d’enregistrement Google reCAPTCHA v3 avec champs libellé, type basé sur un score (v3) sélectionné et domaines à ajouter.

Vous allez arriver sur une page avec vos API

Clés reCAPTCHA générées avec clé du site et clé secrète affichées pour intégration côté client et serveur.

Allez dans « Forminator > Réglages > reCAPTCHA », puis entrez vos deux clés (clé du site et clé secrète).

Onglet reCAPTCHA v3 sélectionné, champs clé du site et clé secrète affichés pour configuration des clés API.

Retournez ensuite dans votre formulaire, ajoutez un champ reCAPTCHA, puis descendez jusqu’à « Type de reCAPTCHA » et sélectionnez reCAPTCHA v3.

Si vous avez bien renseigné les clés dans Forminator > Réglages > reCAPTCHA, alors la protection reCAPTCHA v3 sera active et votre formulaire sera protégé contre les bots (dans notre cas, il n’est pas actif car nous n’avons pas ajouté les clés).

Pensez bien à cliquer sur « Appliquer », puis sur « Publier les modifications » du formulaire.

Type reCAPTCHA v3 sélectionné dans le champ CAPTCHA, message indiquant que les clés API doivent être ajoutées dans les réglages globaux.

Voilà, vous savez maintenant comment créer un formulaire complet avec Forminator, le personnaliser, configurer les notifications par e-mail et surtout le protéger contre le spam avec reCAPTCHA.

Avec ces bases, vous pouvez déjà mettre en place des formulaires de contact propres et professionnels, adaptés à votre site et à vos visiteurs. Et comme vous l’avez vu, Forminator permet d’aller encore beaucoup plus loin : conditions, formulaires multi-pages, quiz, sondages, paiements, etc.

D’autres guides seront disponibles pour approfondir ces fonctionnalités plus avancées. En attendant, vous avez maintenant tout ce qu’il faut pour créer des formulaires efficaces, sécurisés et bien intégrés à votre site WordPress.

The post Forminator WordPress : Comment créer des formulaires pros et sans spam (Guide Visuel 2026) appeared first on HETO Agency.

]]> https://www.heto-agency.fr/comment-creer-des-formulaires-pros-et-sans-spam/feed/ 0 Comment installer un thème WordPress en 2 minutes (Guide Visuel 2026) https://www.heto-agency.fr/comment-installer-un-theme-wordpress-en-2-minutes-guide-visuel-2026/ https://www.heto-agency.fr/comment-installer-un-theme-wordpress-en-2-minutes-guide-visuel-2026/#respond Sun, 25 Jan 2026 22:06:36 +0000 https://www.heto-agency.fr/?p=986 Comment installer un thème WordPress (guide étape par étape) Premièrement, vous aurez besoin d’un hébergement. Si ce n’est pas le cas et que vous souhaitez héberger votre site de test gratuitement, allez voir notre article sur « Comment installer et configurer localWP »   « Comment installer un theme WordPress » c’est la question qui se pose naturellement quand […]

The post Comment installer un thème WordPress en 2 minutes (Guide Visuel 2026) appeared first on HETO Agency.

]]>

Comment installer un thème WordPress (guide étape par étape)

Premièrement, vous aurez besoin d’un hébergement. Si ce n’est pas le cas et que vous souhaitez héberger votre site de test gratuitement, allez voir notre article sur « Comment installer et configurer localWP »

 

« Comment installer un theme WordPress » c’est la question qui se pose naturellement quand on commence la creation de son premier site, tant de possibilité et de theme different présenté, il n’existe pas le theme parfait mais un theme qui correspond à vos besoins oui.

 

Durant cet article nous allons voir ou trouver ses themes, les spécificités à connaitres, les critères de selection d’un bon theme etc…

Table des matières

Les différents “types” de thèmes WordPress et leurs approches d’utilisation

Il existe différentes façons de choisir et d’utiliser un thème WordPress. Le thème sélectionné influence directement l’ergonomie du site, le temps de création et les possibilités de personnalisation.

 

Les thèmes disponibles directement dans WordPress se trouvent dans la galerie accessible depuis l’interface d’administration. Une fois installés, ces thèmes possèdent chacun leur propre menu de personnalisation, leurs fonctionnalités spécifiques et leur identité visuelle. Certains thèmes sont conçus pour fonctionner avec des extensions précises. Par exemple, le thème Hello Elementor est spécialement pensé pour être utilisé avec le plugin Elementor. D’autres thèmes, comme Astra, offrent de nombreuses options de personnalisation, des réglages globaux, un constructeur d’en-tête et de pied de page, ainsi que des modèles de sites prêts à importer via leur système de Starter Templates. Le choix du thème a donc un impact important : selon son ergonomie et ses outils intégrés, il peut faire gagner ou perdre du temps lors de la création du site.

 

Il est aussi possible d’utiliser des thèmes vendus sur des marketplaces comme ThemeForest, TemplateMonster ou Envato. Ces thèmes sont généralement payants et proposent souvent des designs très travaillés, des démonstrations adaptées à des secteurs précis comme l’e-commerce, les restaurants ou les sites one-page, ainsi qu’un large choix de modèles. Ils peuvent être intéressants pour des besoins spécifiques, mais certains peuvent aussi être plus lourds ou plus complexes à gérer.

 

La majorité des thèmes, qu’ils soient gratuits ou payants, sont accompagnés de pages ou de sites préfabriqués. Cela permet à un nouvel utilisateur de choisir un modèle, l’importer, puis remplacer le contenu par ses propres textes et images. C’est une méthode rapide pour mettre un site en ligne.

 

Cependant, si l’objectif est de se démarquer, utiliser un template téléchargé des centaines de milliers de fois et simplement modifier le contenu peut donner un site peu différenciant. Dans une démarche plus professionnelle, il est souvent préférable d’utiliser le thème comme base technique, de ne pas importer un modèle complet, de partir d’une page blanche et de construire son propre design. On peut utiliser un thème de base pour ses performances et sa structure, tout en créant ses propres mises en page. Cela permet d’obtenir un site avec une véritable identité visuelle et une cohérence de marque.

 

Un thème WordPress n’est donc pas seulement un design, mais un véritable outil de travail. Selon son origine, ses fonctionnalités et la manière dont il est utilisé, que ce soit avec un template prêt à l’emploi ou une création sur mesure, il peut profondément influencer le résultat final et l’efficacité du processus de création.

Comment installer son premier theme (Via WordPress)

Pour installer son premier theme wordpress vous devrez vous rendre sur « Apparence > Theme »

tableau de bord WordPress montrant le menu Apparence et l’accès à la section Thèmes

Vous allez arriver sur une page qui répertorie les thèmes déjà installés. Vous pouvez effectuer une recherche de vos thèmes, si vous en avez beaucoup, avec la barre de recherche en haut à droite.

 

À noter qu’il n’est pas conseillé d’avoir beaucoup de thèmes installés (thèmes dormants). Si vous avez des thèmes que vous n’utilisez pas, pensez à les supprimer, car cela peut nuire à votre optimisation et à la santé du site.

 

  • A – Page qui répertorie vos thèmes ainsi que le thème actif. Vous pouvez cliquer sur « Theme Details » pour avoir plus d’informations sur celui-ci ou pour le supprimer.

 

  • B – Cliquez ici pour ajouter un nouveau thème via la galerie WordPress.
page thèmes WordPress montrant le thème actif et le bouton Add Theme

Vous arrivez ensuite sur une page nommée “Add Themes” qui permet de choisir un thème parmi une large sélection. Pour faciliter la recherche, plusieurs catégories sont disponibles. La section Popular regroupe les thèmes les plus utilisés. Latest affiche les thèmes les plus récemment publiés dans le répertoire WordPress. Block Themes présente des thèmes basés sur les blocs, conçus pour la création de site avec l’éditeur de blocs. La section Favorites contient les thèmes que vous avez marqués comme favoris et elle est généralement vide au départ.

 

Vous disposez également de l’outil Feature Filter, qui permet d’affiner la recherche selon des critères plus précis afin de trouver le thème le plus adapté à vos besoins.

 

  • A – Pour Upload un Theme que vous avez en fichier ZIP (généralement un thème téléchargé depuis un autre site).

 

Voici quelques themes de base qui sont 

page thèmes WordPress avec bouton Upload Theme pour ajouter un thème

Comment installer son premier theme (Via MarketPlace)

Pour installer votre premier thème via une marketplace en ligne, nous allons d’abord vous présenter des sites sérieux qui proposent un large choix de templates avec différents styles, comme l’e-commerce, les sites vitrines, les portfolios et bien d’autres. En voici quelques exemples : 

 

https://www.templatemonster.com/fr/type/themes-wordpress/ Existe des themes gratuits

https://elements.envato.com/fr/wordpress/ Solution payante

https://themeforest.net/category/wordpress Variante d’envato (EnvatoMarket – Payante)

 

Une fois votre thème trouvé, rendez-vous sur « Upload Theme » (A sur l’image précédente).

 

Une zone apparaît avec l’espace « Choisir un fichier ». En cliquant dessus, cela va ouvrir une page directement dans votre gestionnaire de fichiers. Allez donc à l’endroit où vous avez stocké le thème précédemment installé.

ATTENTION, avant de mettre votre fichier, il faut faire une manipulation. Généralement, les sites comme Template Monster, etc., vous donnent un fichier qui contient la documentation, etc., ce que WordPress ne peut pas lire. Si vous mettez le fichier directement dans l’upload, vous aurez sûrement un message de ce type :

échec d’installation d’un thème WordPress à cause du fichier style.css manquant

Pour éviter cela, veillez à décompresser le fichier et à chercher à l’intérieur de celui-ci un dossier nommé « Theme » ou quelque chose de similaire, qui doit contenir le fichier « style.css ». Il ne sera normalement pas compressé (.zip), alors vous devrez le faire vous-même. Compressez ce dossier pour ensuite le mettre dans la zone d’upload précédemment vue dans WordPress.

page Ajouter un thème dans WordPress montrant l’upload d’un thème au format ZIP

Cliquez alors sur « Install Now ».

 

Vous aurez 3 possibilités :

 

  • Live Preview – Pour prévisualiser,

 

  • Activate – Pour activer votre thème, tant qu’un thème n’est pas activé il est considéré comme dormant,

 

  • Go to Themes Page – Pour retourner à votre page qui contient les thèmes.

 

Dans notre cas cliquez sur « Activate ».

installation réussie d’un thème WordPress avec options activer et prévisualiser

Pourquoi est-ce que j’ai des articles de blog sur ma page d’accueil WordPress ?

Votre thème est maintenant activé. Vous vous demandez peut-être pourquoi, lorsque vous allez sur votre page d’accueil, vous voyez un blog ou une liste d’articles. C’est normal. Après l’installation d’un thème, que ce soit depuis la galerie WordPress ou depuis un autre site, aucune page d’accueil spécifique n’est encore définie dans les réglages.

 

Par défaut, WordPress affiche les derniers articles du blog en page d’accueil. Ce comportement vient du système WordPress lui-même et non du thème. Certains thèmes, comme Modestra par exemple, peuvent proposer une présentation différente visuellement, mais dans tous les cas il est préférable de définir une page d’accueil dédiée.

Page d’accueil WordPress affichant les articles du blog avec le message "Hello world" et la section Recent Posts

Pour corriger cela, il vous faut : 

 

  • A – Aller dans l’onglet Pages. 
  • B – Cliquez sur « Add Page »
Tableau de bord WordPress affichant la liste des pages avec le bouton Ajouter une page

À la suite de cette action, une page va s’ouvrir. Vous devrez alors entrer le nom que vous souhaitez donner à cette page. Dans notre cas, il est préférable de nommer cette page « Accueil », puis de cliquer sur « Publier » pour la mettre en ligne.

 

Une fois la page publiée, vous pourrez retourner sur le panneau d’administration en cliquant sur le logo en haut à gauche de la page.

Éditeur WordPress avec la page Accueil en cours de création avant publication

Rendez-vous dans Settings > Reading.

 

  • A – Cliquez sur “A static page (select below)”.
  • B – Dans “Homepage” ou page d’accueil, sélectionnez la page précédemment créée nommée « Accueil ».

 

Cliquez sur “Save Changes” pour enregistrer.

Réglages de lecture WordPress pour définir une page d’accueil statique

Et voilà, vous avez maintenant défini une page d’accueil pour votre site. Il ne vous reste plus qu’à la modifier et la personnaliser.

The post Comment installer un thème WordPress en 2 minutes (Guide Visuel 2026) appeared first on HETO Agency.

]]> https://www.heto-agency.fr/comment-installer-un-theme-wordpress-en-2-minutes-guide-visuel-2026/feed/ 0