Votre bouton de contact existe, mais personne ne clique dessus. Le problème vient rarement du texte ou de la couleur. Il vient souvent de l’endroit où le bouton se trouve sur la page. En pratique, un CTA trop bas ou trop discret, c’est votre panneau « Ouvert » placé derrière la porte. Sur un site WordPress pour une TPE, quelques ajustements de positionnement suffisent parfois à doubler ou tripler les demandes entrantes. Voici où placer vos boutons d’appel à l’action selon le type de page et le comportement réel de vos visiteurs.
Les études eye-tracking menées depuis les années 2000 montrent que les internautes ne lisent pas les pages web de façon linéaire. Ils scannent. Le regard suit un schéma en F ou en Z selon la structure de la page. D’abord les premières lignes en haut, puis un balayage latéral au milieu, puis quelques points d’accroche en bas. La conséquence est directe : tout ce qui se trouve dans la partie basse d’une page longue est largement ignoré. C’est également le cas des bords droits d’une colonne de texte dense.
C’est pourquoi le positionnement des CTA ne relève pas de l’intuition ou de l’esthétique. Il repose sur des données de comportement. Des outils comme Hotjar permettent de visualiser les cartes de chaleur (heatmaps) de vos pages. Vous identifiez ainsi précisément où vos visiteurs regardent, cliquent et s’arrêtent. Sur WordPress, l’installation prend moins de 10 minutes via un plugin dédié.
Le terme « above the fold » désigne la partie de la page visible sans défilement, à l’arrivée sur le site. C’est la zone que 100 % de vos visiteurs voient. Tout ce qui est en dessous atteint une proportion décroissante : environ 60 % à mi-page. Souvent moins de 20 % en bas de page.
Votre CTA principal — demande de devis, prise de rendez-vous, appel téléphonique — doit être visible dans cette zone sans aucune action du visiteur. Concrètement, cela signifie : un bouton clair dans l’en-tête ou dans la première section. Au-dessus de l’image principale. Ce positionnement seul peut augmenter les clics de 30 à 50 %. C’est la différence avec un bouton placé après deux paragraphes de présentation.
Le header est la barre de navigation en haut du site. C’est la zone la plus vue de tout votre site — elle est présente sur chaque page et chaque scroll. Y intégrer un bouton CTA (souvent à droite, après les éléments de menu) est donc une pratique efficace. Ce bouton doit être visuellement distinct des liens de navigation : couleur contrastée, légèrement plus grand. Sur mobile, ce bouton prend idéalement toute la largeur de l’écran pour maximiser la surface cliquable.
La « section héro » est le grand bloc en haut de la page d’accueil. Elle se compose généralement d’un titre accrocheur, d’un sous-titre et d’un visuel. C’est ici que doit figurer votre CTA principal, accompagné si possible d’un CTA secondaire moins proéminent (voir nos réalisations, découvrir nos services). Quasiment tous vos visiteurs voient cette zone. Elle constitue donc votre premier — et parfois unique — argument de conversion.
Si votre page d’accueil contient plusieurs sections (services, réalisations, témoignages, processus), placez un CTA à la fin de chacune. Un visiteur convaincu par votre section « Témoignages » doit pouvoir passer à l’action immédiatement, sans chercher où cliquer. Ne le forcez donc pas à remonter en haut de page mentalement — mettez le bouton à portée directe.
Sur une page dédiée à un service — « Rénovation de salle de bain » pour un plombier, « Bilan comptable annuel » pour un expert-comptable — la logique est différente. Le visiteur est déjà intéressé. Il a cliqué depuis un menu ou un résultat de recherche. Votre rôle est donc de confirmer son choix et de déclencher le contact.
Voici le positionnement recommandé. Un premier CTA dans les 300 premiers mots — avant que le doute ne s’installe. Un deuxième après la présentation du processus ou des garanties. Un troisième en bas de page pour ceux qui ont tout lu. Cette répétition n’est pas agressive — c’est une facilitation. Elle évite ainsi que le visiteur convaincu doive scroller pour trouver comment vous contacter. Sur WordPress avec Elementor ou Divi, ces blocs CTA se créent une fois. Ils s’appliquent ensuite à toutes les pages de service via des modèles de section.
Un article de blog attire des visiteurs en phase de recherche, pas encore en phase d’achat. Placer un CTA agressif (« Demandez votre devis maintenant ») en haut d’un article informatif crée une dissonance et fait fuir. En revanche, intégrer un CTA contextuel à mi-article et un CTA de conclusion fonctionne bien.
Le CTA de mi-article doit être lié au sujet traité. Si vous écrivez sur « comment choisir son assurance professionnelle », le CTA naturel est « Télécharger notre guide complet » ou « Parler à un conseiller ». Le CTA de conclusion peut être plus direct. En effet, le lecteur qui arrive en bas a lu — il s’est donc qualifié lui-même comme intéressé. Par ailleurs, un encart de contact ou un formulaire court en fin d’article est souvent plus efficace qu’un simple lien texte. Vous trouverez d’autres exemples de structure efficace sur le blog d’ordas.fr.
Sur une page de contact, le CTA principal est le formulaire lui-même — ou le bouton qui le soumet. Plusieurs règles s’appliquent. D’abord, le bouton de soumission doit être bien visible, de couleur contrastée, avec un texte précis (« Envoyer ma demande » plutôt que « Envoyer »). Placez-le immédiatement sous le dernier champ, sans espace mort. Si votre formulaire dépasse 5 champs, découpez-le en étapes. Ajoutez alors un bouton « Continuer » entre chaque étape — plutôt qu’un unique « Valider » à la fin.
La conformité RGPD impose une case à cocher pour le consentement au traitement des données. Placez-la juste avant le bouton, pas en haut du formulaire où elle risque d’être oubliée. Cette disposition signale par ailleurs le sérieux de votre démarche — et augmente la confiance. Les détails des prestations de création ou de refonte sont disponibles sur la page des tarifs d’ordas.fr.
Sur smartphone, le comportement de navigation est différent. Le visiteur fait défiler rapidement, souvent avec le pouce. Les zones chaudes — les plus facilement atteignables — se situent au centre et en bas de l’écran. Pas en haut, contrairement au desktop. C’est pourquoi une barre CTA fixe en bas de l’écran est une solution très efficace sur mobile. Elle reste visible en permanence quel que soit le scroll. Elle est accessible avec le pouce. Et elle ne perturbe pas la lecture.
Sur WordPress, cette barre se configure via des plugins comme Sticky Buttons. Vous pouvez aussi l’activer directement dans les constructeurs de pages avec une option de position fixe. La taille du bouton doit respecter le minimum recommandé de 44 × 44 pixels. Par ailleurs, un numéro de téléphone affiché en texte sur mobile est une occasion manquée. Il doit impérativement être un lien tel: pour déclencher l’appel directement au tap.
Dans la section héro, prévoyez un CTA principal (demande de devis, prise de contact) et un CTA secondaire (voir les réalisations, découvrir les services). Ensuite, ajoutez un CTA à la fin de chaque section thématique. Au total, une page d’accueil efficace compte généralement 3 à 5 occurrences du CTA principal. Ces occurrences correspondent à des moments logiques du parcours de lecture.
Sur desktop, un header sticky avec un bouton CTA est une solution courante et efficace. En revanche, un bouton flottant latéral ou en bas de page est plus intrusif sur grand écran. À réserver à des cas spécifiques : landing page dédiée, page de devis. L’essentiel est que l’action principale reste accessible à tout moment — sans que le visiteur ait à scroller.
Oui, dans la majorité des cas. Déplacer un bouton, le fixer dans le header, ajouter un CTA en fin de section — ces modifications prennent quelques minutes sur WordPress avec Elementor ou Gutenberg. Si votre thème actuel ne permet pas ces ajustements sans code, c’est souvent le signe d’une technologie trop rigide. Dans ce cas, un audit rapide du site permet notamment d’identifier les ajustements prioritaires.
Pour un formulaire de contact ou une page interne, le même onglet est recommandé — cela évite de désorienter le visiteur. Pour un lien vers une ressource externe (un partenaire, un outil tiers), un nouvel onglet est préférable. Cela évite d’interrompre la navigation. En revanche, n’ouvrez jamais un nouvel onglet pour les liens internes à votre propre site. C’est une pratique qui nuit à l’expérience utilisateur et au référencement.
Le visiteur qui ne trouve pas comment vous contacter ne vous le dit pas — il part simplement. Et il ne revient généralement pas. Pour vérifier rapidement si vos CTA sont au bon endroit, ouvrez votre site sur téléphone. Ensuite, faites défiler comme un visiteur lambda. Chronométrez alors le temps nécessaire pour trouver le bouton de contact. Si c’est plus de 10 secondes, le problème est là. Vous pouvez aussi nous envoyer votre URL et recevoir un retour direct sur les points à corriger en priorité.
