Webflow : Comment créer un bouton CTA en dehors du menu ?

La création d'un bouton d'appel à l'action (CTA) efficace est l'un des éléments les plus importants de la conception Web. Un bouton CTA invite les visiteurs à effectuer des actions spécifiques, comme s'inscrire à une newsletter, effectuer un achat ou contacter votre entreprise. Alors que de nombreux sites Web comportent des boutons CTA dans le menu de navigation, placer un bouton CTA en dehors du menu peut l'aider à se démarquer davantage et à générer davantage de conversions. Dans cet article, nous vous expliquerons les étapes à suivre pour concevoir et positionner un bouton CTA en dehors du menu dans Webflow.

Pourquoi placer un bouton CTA en dehors du menu ?

Placer un bouton CTA en dehors du menu de navigation principal peut le rendre plus visible pour vos visiteurs. Lorsqu'il est stratégiquement placé dans des zones à fort trafic, comme l'en-tête ou en haut d'une page, ce bouton peut attirer rapidement l'attention des utilisateurs. L'objectif est de rendre le CTA plus accessible et de garantir qu'il soit remarqué immédiatement, sans obliger les utilisateurs à naviguer sur le site.

Les avantages de placer un bouton CTA en dehors du menu incluent :

• Visibilité accrue : En le positionnant dans un endroit bien en vue, comme dans l'en-tête ou flottant sur le côté, les utilisateurs peuvent le repérer facilement.
• Taux de conversion améliorés : un CTA qui se démarque est plus susceptible d'être cliqué, ce qui augmente les conversions.
• Expérience utilisateur améliorée : il offre aux utilisateurs un moyen intuitif d'agir rapidement, sans naviguer dans les différentes sections.

Étapes pour créer un bouton CTA en dehors du menu dans Webflow

Webflow offre une interface conviviale pour créer des sites Web sans avoir besoin d'écrire de code. Suivez ces étapes pour ajouter un bouton CTA en dehors du menu de votre projet Webflow :

1. Configurez votre projet Webflow

Avant de commencer, assurez-vous d'avoir configuré un projet Webflow et que vous êtes dans la vue Concepteur.

• Étape 1.1 : Ouvrez votre projet Webflow et accédez à la page où vous souhaitez ajouter le bouton CTA.
• Étape 1.2 : En mode Concepteur, assurez-vous que votre mise en page est prête, avec votre menu de navigation en place (ou à l'endroit où vous souhaitez ajouter le bouton).

2. Créez un nouveau bouton CTA

Pour créer un nouveau bouton CTA en dehors du menu, vous devrez le positionner stratégiquement sur la page.

• Étape 2.1 : Depuis le panneau de gauche, faites glisser et déposez un élément Button du panneau d'ajout sur le canevas.
• Étape 2.2 : Personnalisez le texte du bouton pour qu'il corresponde à l'action que vous souhaitez que l'utilisateur entreprenne (par exemple, « Commencer », « S'inscrire », « En savoir plus »).
• Étape 2.3 : Stylisez le bouton en fonction de vos préférences de conception. Vous pouvez ajuster la police, la taille, la couleur, l'arrière-plan et le rayon de la bordure pour correspondre à l'esthétique de votre marque.

3. Positionnez le bouton CTA en dehors du menu

Maintenant que vous avez votre bouton, il est temps de le positionner en dehors du menu. Il existe plusieurs façons de procéder, selon l'endroit où vous souhaitez que le bouton apparaisse.

Option 1 : bouton CTA flottant

Un bouton CTA flottant est un choix populaire pour la visibilité. Il reste collé sur le côté ou en bas de la page, même lorsque l'utilisateur la fait défiler.

• Étape 3.1 : Sélectionnez le bouton que vous avez créé et accédez aux paramètres Position dans le panneau Style de droite.
• Étape 3.2 : Définissez la position sur Fixed . Cela garantit que le bouton reste en place sur l'écran pendant que l'utilisateur fait défiler.
• Étape 3.3 : Ajustez la position en définissant les valeurs Top , Right , Bottom ou Left pour placer le bouton là où vous le souhaitez sur l'écran (par exemple, coin inférieur droit ou coin supérieur gauche).
• Étape 3.4 : Ajoutez une valeur z-index pour garantir que le bouton apparaît au-dessus des autres éléments, comme le menu. Vous pouvez définir le z-index sur une valeur plus élevée, telle que 10 ou 100 , pour vous assurer qu'il est au top.

Option 2 : Positionné dans la section d'en-tête

Si vous préférez que le bouton CTA se trouve dans un endroit fixe plus traditionnel en dehors du menu, vous pouvez le placer dans la section d'en-tête.

• Étape 3.1 : Accédez au panneau Navigator et localisez votre section d'en-tête.
• Étape 3.2 : Créez un nouveau Div Block pour servir de conteneur pour votre bouton CTA. Cela aidera à positionner le bouton par rapport aux autres éléments.
• Étape 3.3 : Faites glisser le bouton dans le conteneur Div Block .
• Étape 3.4 : Utilisez les paramètres Margin ou Padding dans le panneau Style pour déplacer le bouton à l'emplacement souhaité dans l'en-tête (par exemple, en dehors du menu principal mais toujours aligné avec l'en-tête).

Option 3 : bouton CTA sur une barre de navigation collante

Une autre option consiste à placer le bouton CTA sur une barre de navigation collante. Cela signifie que le bouton suivra l'utilisateur lorsqu'il fera défiler la page, mais il restera en dehors du menu principal.

• Étape 3.1 : Sélectionnez l'élément de la barre de navigation et définissez sa Position sur Sticky dans le panneau Style.
• Étape 3.2 : Ajoutez un nouveau Div Block à côté des éléments de menu où vous souhaitez que le bouton apparaisse.
• Étape 3.3 : Placez le bouton à l'intérieur de ce Div Block et ajustez sa position à l'aide de la marge ou du remplissage.

4. Rendre le bouton interactif

Une fois le bouton positionné, vous pouvez ajouter une interaction pour le rendre plus engageant.

• Étape 4.1 : Sélectionnez le bouton et accédez au panneau Interactions dans Webflow.
• Étape 4.2 : Ajoutez une interaction au survol, telle que changer la couleur d'arrière-plan ou redimensionner légèrement le bouton lorsque l'utilisateur le survole.
• Étape 4.3 : Configurez un lien pour le bouton. Vous pouvez le lier à une autre page ou URL externe, ou configurer une action comme l'ouverture d'un modal ou d'un formulaire.

5. Prévisualiser et publier

Après avoir configuré votre bouton CTA, il est important de prévisualiser son comportement sur la page.

• Étape 5.1 : Cliquez sur le bouton Preview dans le coin supérieur droit pour voir à quoi ressemble et se comporte le bouton sur la page.
• Étape 5.2 : Testez sa réactivité sur différentes tailles d'écran pour vous assurer qu'il est correctement positionné.
• Étape 5.3 : Une fois que vous êtes satisfait du résultat, cliquez sur Publish pour rendre le bouton visible sur votre site Web.

Meilleures pratiques pour les boutons CTA en dehors du menu

Bien que placer un bouton CTA en dehors du menu puisse être très efficace, il est essentiel de suivre quelques bonnes pratiques pour garantir son bon fonctionnement :

1. Restez simple : ne surchargez pas la page avec trop de boutons CTA. Concentrez-vous sur une action principale pour obtenir les meilleurs résultats.
2. Assurer une bonne visibilité : Assurez-vous que le bouton contraste bien avec l'arrière-plan pour attirer l'attention de l'utilisateur.
3. Positionnez-le stratégiquement : placez le bouton dans une zone où les utilisateurs sont susceptibles de le remarquer, comme le coin supérieur droit ou flottant sur le côté.
4. Testez sur différents appareils : assurez-vous que votre bouton CTA s'affiche parfaitement sur les appareils mobiles, tablettes et ordinateurs de bureau.

Conclusion

L'ajout d'un bouton CTA en dehors du menu dans Webflow peut être une stratégie puissante pour améliorer la visibilité et augmenter les conversions. En suivant les étapes décrites ci-dessus, vous pouvez facilement créer et positionner un bouton CTA qui se démarque du reste du contenu de votre page. Que vous optiez pour un bouton flottant, une barre de navigation collante ou une position d'en-tête traditionnelle, la clé est de vous assurer que votre CTA est placé là où les utilisateurs le remarqueront et seront encouragés à agir. Avec les outils de conception intuitifs de Webflow, y parvenir est plus simple que jamais !