Thème responsive : header ajouter des boutons cliquables

WordPress :6.4
Statut : résolu

Ce sujet contient 3 réponses, 3 participants et a été mis à jour pour la dernière fois par kati, le il y a 2 mois et 1 semaine.

4 sujets de 1 à 4 (sur un total de 4)

Auteur

Messages
7 juillet 2024 à 19 h 54 min #2475749
kati
Participant

Maître WordPress
903 contributions
Bonjour,

Ma configuration WP actuelle
- Version de PHP/MySQL : native 8.0
- Thème utilisé : responsive
- Extensions en place : Backuply, BP Profile Search, BuddyForms, BuddyForms Members, BuddyPress, BuddyPress Recherche Globale, Classic Widgets, Elementor, ElementsKit Lite, Essential Addons for Elementor, Events Manager, FileOrganizer, Minimal Coming Soon & Maintenance Mode, Responsive Blocks – WordPress Gutenberg Blocks, Responsive Starter Templates, SpeedyCache, WP Mail SMTP, WPForms Lite, Yoast SEO
- Nom de l’hébergeur : o2switch
- Adresse du site : http://www.partenariatpepsante.com
Problème(s) rencontré(s) : Actuellement dans mon header j’ai « s’inscrire », « se connecter » et une fonction recherche. J’aurais souhaité à la place avoir des boutons avec ces mêmes textes et pouvoir ajouter d’autres boutons.

J’ai beau chercher je ne vois pas du tout comment faire.

Merci par avance pour votre aide
9 juillet 2024 à 20 h 27 min #2475859

ferman
Modérateur

Maître WordPress
7129 contributions

Bonjour,

Vous avez plusieurs façons de procéder. Pour la plus simple, regardez ICI. (vous pouvez aussi mettre les CSS dans les css additionnelles).

10 juillet 2024 à 11 h 54 min #2475921
AnuragSaxena
Bloqué

Initié WordPress
7 contributions
Bonjour,

Merci pour votre question. Voici une méthode pour remplacer les liens dans votre header par des boutons avec les mêmes textes et ajouter d’autres boutons.
<h3>Étapes à Suivre :</h3>
1. Modifier le Header avec Elementor :
  - Accédez à votre tableau de bord WordPress.
  - Allez dans Elementor > Modèles > Ajouter un nouveau et sélectionnez « Header ».
  - Concevez votre header en utilisant les widgets « Button » pour « s’inscrire », « se connecter » et la fonction recherche.
2. Ajouter des Boutons :
  - Utilisez le widget « Button » d’Elementor pour ajouter vos boutons. Vous pouvez personnaliser le texte, le lien et le style de chaque bouton.
3. Publier le Nouveau Header :
  - Une fois que votre header est prêt, publiez-le et appliquez-le à votre site en sélectionnant les conditions d’affichage appropriées (par exemple, sur l’ensemble du site).
<h3>Exemple de Code CSS pour Styliser les Boutons :</h3>
Si vous préférez utiliser du code, vous pouvez ajouter ce CSS personnalisé pour styliser les liens existants en boutons :
```
.header-links a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073e6;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px;
}

.header-links a:hover {
    background-color: #005bb5;
}
```
Ajoutez ce code dans Apparence > Personnaliser > CSS supplémentaire.
<h3>Utiliser un Plugin de Menu :</h3>
Vous pouvez également utiliser un plugin de menu pour ajouter des boutons dans votre header :
1. Installer un Plugin de Menu :
  - Allez dans Extensions > Ajouter et recherchez « Max Mega Menu » ou un plugin similaire.
  - Installez et activez le plugin.
2. Configurer le Menu :
  - Allez dans Apparence > Menus.
  - Ajoutez vos liens « s’inscrire », « se connecter » et d’autres à votre menu principal.
  - Configurez le plugin pour transformer ces liens en boutons.
En utilisant Elementor ou un plugin de menu, vous pouvez facilement personnaliser et ajouter des boutons dans le header de votre site.

Cordialement,
- Cette réponse a été modifiée le il y a 3 mois par Joss47.
1 août 2024 à 21 h 18 min #2477218

kati
Participant

Maître WordPress
903 contributions

Bonsoir,

Je ne comprends pas car je ne reçois aucune notification des messages que l’on poste en réponses. Alors que la case est bien cochée de mon côté pour me prévenir des réponses par e-mail.

Un grand merci pour votre réponse détaillée qui m’a bien aidé. J’ai pu apprendre à créer avec Elementor et faire le header que je souhaitais. Je ne l’ai pas encore affiché mais ça ne saurait tarder.

Merci et bonne soirée.
Auteur

Messages