Comment ajouter une image héros dans WordPress (fonctionne pour tous les thèmes)

Vous voulez rendre votre site WordPress plus professionnel ? Une image héros est votre meilleure option.

Une image héros est ce que les gens voient en premier lorsqu'ils arrivent sur votre site. Et vous n'avez qu'environ 3 secondes pour capter leur attention, il est donc important de bien la choisir.

Nous construisons des sites Web WordPress depuis plus d'une décennie maintenant – et nous nous souvenons quand les images héros sont devenues populaires pour la première fois.

À l'époque, nous luttions comme tout le monde. Les images avaient l'air bizarres – trop grandes sur ordinateur, écrasées sur mobile, ou tout simplement cassées. Mais maintenant, nous avons maîtrisé la science.

Nous allons vous montrer les moyens les plus simples d'ajouter une image héros à votre site WordPress. Que vous aimiez utiliser des constructeurs de pages ou que vous préfériez l'éditeur de blocs, nous avons ce qu'il vous faut.

Avant toute chose : Préparez votre image héros WordPress

Avant d'ajouter une image héros à votre site Web WordPress, vous devez en créer une qui captera l'attention de vos visiteurs. Une excellente section héros commence par une image saisissante qui montre de quoi parle votre site.

Canva est un outil populaire pour concevoir des graphiques de site Web. Il est facile à utiliser et propose des tonnes de modèles pour créer votre image héros. Si vous n'êtes pas fan de Canva, nous avons une liste d'alternatives à Canva que vous pouvez consulter pour trouver celle qui vous convient.

Lors de la création de votre image héros, vous voudrez garder quelques éléments à l'esprit.

Tout d'abord, pensez à la taille. Les images héroïques ne sont généralement pas trop hautes et couvrent souvent toute la largeur de votre page d'accueil.

Une taille d'image héroïque WordPress courante est d'environ 1920 pixels de large par 400 à 600 pixels de haut (ou parfois plus). Mais cela peut changer en fonction de votre thème WordPress.

Ensuite, réfléchissez au message que vous souhaitez faire passer. Votre image héroïque doit rapidement montrer de quoi parle votre site Web. Il peut s'agir d'une image héroïque de produit, d'une photographie qui représente votre marque, ou même d'une impressionnante vidéo plein écran en arrière-plan.

Par exemple, nous avons décidé de mettre en avant notre fondateur, Syed Balkhi, dans l'image héroïque de notre page d'accueil. Cela montre qu'il y a une vraie personne derrière notre marque qui se consacre à aider les utilisateurs de WordPress à réussir, ce qui est l'essence même de WPBeginner.

De plus, laissez de l'espace pour le texte. De nombreuses sections héroïques comportent un titre ou un bouton. Assurez-vous qu'il y a de la place pour ceux-ci et qu'ils sont faciles à lire.

Il est conseillé de consulter d'autres sites Web de votre secteur pour trouver des exemples de sections héroïques. Cela peut vous donner des idées pour votre propre design. Certaines des entrées de nos exemples de sites Web WordPress peuvent servir de grande inspiration.

Cela étant dit, regardons comment ajouter l'image principale.

Comment ajouter une image principale WordPress

En recherchant pour ce tutoriel, nous avons rapidement réalisé que l'ajout d'une image principale aux thèmes WordPress classiques n'est pas toujours simple. Le processus peut varier considérablement en fonction de votre thème, car certains ont des sections principales intégrées tandis que d'autres non.

Prenez le thème Sydney, par exemple. Il est livré avec une section principale prête à l'emploi, ce qui facilite grandement les choses.

Si vous essayez d'ajouter une image principale à votre site existant, mais que votre thème ne dispose pas d'une fonctionnalité intégrée pour cela, cela peut être frustrant.

Pour ceux qui débutent et qui n'ont pas peur de choisir un nouveau thème, nous recommandons de passer à un thème avec une section héros intégrée, car cela pourrait vous faire gagner du temps à long terme.

Si vous recherchez des recommandations de thèmes, vous pouvez consulter notre sélection d'experts des meilleurs thèmes WordPress et les plus populaires du marché. Mieux encore, vous pourriez utiliser un constructeur de pages avec un thème qui a une section héros, nous vous montrerons comment faire dans la méthode 3.

Avant d'apporter des changements majeurs, nous suggérons toujours d'utiliser un site de staging pour tester minutieusement les nouveaux thèmes. De cette façon, vous pouvez être sûr de faire le bon choix pour votre site.

Si vous ne savez pas comment faire, consultez notre guide sur comment changer correctement un thème WordPress.

Satisfait de votre thème classique actuel ? Pas de problème. Passez à la méthode 4, où nous vous montrerons comment ajouter une section héros à l'aide d'un plugin. Cette approche fonctionne avec n'importe quel thème, vous pouvez donc créer une image héros époustouflante sans refondre la conception entière de votre site.

Vous pouvez utiliser les liens rapides ci-dessous pour accéder à votre méthode préférée :

• Méthode 1 : Utilisation du personnalisateur de thème (Thèmes classiques uniquement)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Étape 1 : Ouvrez l'éditeur de site complet
  • Étape 2 : Ajoutez le bloc de couverture à votre page/modèle
  • Étape 3 : Configurez l'image dans votre bloc de couverture
  • Étape 4 : Ajoutez des blocs à votre bloc de couverture
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Étape 1 : Configurez SeedProd
  • Étape 2 : Personnalisez votre section héros
  • Étape 3 : Ajoutez et personnalisez d'autres blocs à votre section héros
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Étape 1 : Configurez le plugin Hero Banner
  • Étape 2 : Trouver le sélecteur CSS de la section d'en-tête de votre thème
  • Étape 3 : Ajouter votre shortcode à WPCode
• Foire aux questions sur les images de héros

Méthode 1 : Utilisation du personnalisateur de thème (Thèmes classiques uniquement)

Si vous utilisez un thème classique qui possède une section de héros comme Sydney, vous pouvez personnaliser votre image de héros via le personnalisateur de thème. Accédez simplement à Apparence » Personnaliser dans votre tableau de bord WordPress pour commencer.

💡 Note rapide : Si le personnalisateur de thème est manquant dans votre tableau de bord, vous utilisez probablement un thème basé sur des blocs, et vous devriez passer à la méthode 2.

La barre latérale devrait proposer plusieurs options pour personnaliser votre thème classique.

Dans Sydney, le réglage pour personnaliser votre section de héros s'appelle « Hero Area », mais ce menu spécifique variera selon le thème. Cliquez dessus.

Le thème Sydney propose 3 menus pour créer votre section de héros : Hero Type, Hero Slider et Hero Media.

Nous n'utiliserons que les deux premiers car ils suffisent pour ajouter une section de héros à nos fins.

Tout d'abord, sélectionnez « Hero Type ».

Dans Hero Type, il vous sera demandé de choisir le type de média que vous allez ajouter à votre section de héros.

Vous pouvez choisir entre un curseur plein écran, une vidéo, une image ou pas d'en-tête.

Nous sélectionnerons un curseur plein écran pour la section de héros de notre page d'accueil et de l'ensemble de notre site Web. La raison en est que cela nous permet de créer un curseur avec plusieurs images pour le héros, et d'ajouter du texte et un bouton par-dessus les images.

Revenez maintenant au menu Hero Area et sélectionnez « Hero Slider ».

Ici, ouvrez l'onglet « First Slide » et cliquez sur le bouton « Select image ».

Cela ouvrira votre médiathèque WordPress, où vous pourrez télécharger une nouvelle image ou en sélectionner une existante pour votre section héros.

Une fois que vous avez téléchargé une image, vous pouvez faire défiler vers le bas et remplacer le texte dans les champs titre et sous-titre.

Vous devriez voir les modifications que vous apportez se refléter automatiquement sur l'aperçu de la page.

Si vous souhaitez ajouter plus d'une image à la section héros, vous pouvez répéter les mêmes étapes avec le reste des diapositives.

Sinon, vous pouvez faire défiler vers le bas jusqu'au menu « Bouton du curseur ».

Ici, vous pouvez modifier l'URL et le texte du bouton d'appel à l'action.

Après cela, faites défiler à nouveau vers le bas jusqu'à l'onglet « Paramètres du curseur ».

C'est ici que vous pouvez ajuster la vitesse du curseur, choisir d'afficher le même texte sur toutes les diapositives et rendre le comportement du curseur réactif.

Si vous souhaitez changer la couleur du bouton, retournez au menu principal du personnalisateur de thème.

Ensuite, cliquez sur « Général ».

Vous devriez maintenant voir plusieurs menus pour personnaliser les paramètres généraux de votre thème.

Ici, cliquez simplement sur « Boutons ».

Maintenant, vous pouvez faire défiler vers le bas jusqu'aux sections « État par défaut » et « État au survol », où vous pouvez changer la couleur du bouton en fonction de son état.

Pour modifier la couleur, cliquez simplement sur l'outil de sélection de couleur et choisissez une nouvelle couleur.

La plupart des thèmes WordPress vous permettent également de personnaliser les couleurs et la typographie de votre design. Cependant, les modifications que vous apportez s'appliqueront généralement à l'ensemble de votre site Web, pas seulement à votre section héros, alors gardez cela à l'esprit.

Dans tous les cas, voici à quoi ressemble notre image héros, créée avec le thème Sydney :

Méthode 2 : Utilisation de l'éditeur de site complet (thèmes de blocs uniquement)

Si vous utilisez un thème de blocs, vous pouvez utiliser le bloc Couverture de l'éditeur complet du site pour créer facilement une image héroïque dans WordPress. Aucun plugin n'est nécessaire.

Étape 1 : Ouvrez l'éditeur de site complet

Tout d'abord, allez dans Apparence » Éditeur dans votre administration WordPress.

Vous verrez maintenant les menus principaux de l'éditeur.

Disons que vous voulez ajouter votre image héroïque uniquement sur votre page d'accueil.

Dans ce cas, cliquez simplement sur l'aperçu du thème sur le côté droit de la page.

Si vous souhaitez ajouter l'image héroïque à une autre page, un modèle de page personnalisé ou un motif de blocs, vous pouvez consulter notre guide sur l'édition complète du site WordPress pour plus d'informations.

Étape 2 : Ajoutez le bloc de couverture à votre page/modèle

Comme la section héroïque est généralement placée au-dessus du pli (la partie supérieure de votre page qui apparaît lorsque les visiteurs arrivent sur le site), vous devez vous assurer que vous êtes au bon endroit. La section héroïque se trouve généralement juste en dessous de l'en-tête.

Une fois que vous avez fait cela, vous devez soit supprimer les blocs existants à cet endroit, soit ajouter un nouveau bloc Groupe juste au-dessus de ces blocs existants.

Dans notre cas, nous allons simplement supprimer les blocs qui se trouvaient déjà sur notre page d'accueil. Si vous souhaitez faire de même, vous pouvez cliquer sur le bouton « Vue de liste » sur le côté gauche de la page.

Ensuite, trouvez le(s) bloc(s) que vous devez supprimer pour faire de la place à votre section héroïque. Après l'avoir localisé, cliquez simplement sur le bouton à trois points et sélectionnez « Supprimer ».

Maintenant, sélectionnez le bloc qui se trouvait juste en dessous du(des) bloc(s) que vous venez de supprimer.

Ensuite, cliquez sur le bouton à trois points et choisissez « Ajouter avant ». Cela ajoutera un bloc juste au-dessus de ce bloc et en dessous de la section d'en-tête.

À ce stade, vous pouvez cliquer sur le bouton « + » qui apparaît dans la section héroïque supposée.

Vous devez ajouter un bloc Groupe ici, car cela vous permettra de gérer l'image principale, le texte, le bouton et d'autres éléments comme un seul bloc si nécessaire.

Vous pouvez maintenant sélectionner un conteneur pour y ajouter vos blocs.

Pour la démonstration, nous avons choisi le conteneur de base Groupe.

Ensuite, cliquez simplement sur le bouton « + » à l'intérieur du bloc Groupe.

Ici, sélectionnez le bloc « Couverture ».

Après cela, vous verrez 3 options pour ajouter votre image d'arrière-plan principale : la télécharger depuis votre ordinateur, l'ajouter depuis votre médiathèque ou utiliser votre image mise en avant.

Dans notre exemple, nous cliquerons sur « Médiathèque » et sélectionnerons une image existante.

Si le téléchargement de l'image est réussi, vous verrez votre image principale immédiatement. Cependant, vous devrez apporter quelques ajustements.

Étape 3 : Configurez l'image dans votre bloc de couverture

Tout d'abord, sélectionnez le bloc « Couverture » lui-même afin que sa barre d'outils apparaisse au-dessus.

Ensuite, cliquez sur le bouton « Aligner » et choisissez « Pleine largeur ».

Ensuite, vous pouvez cliquer sur l'icône du duotone pour changer le filtre duotone appliqué à votre image.

Si vous n'aimez pas cela, vous pouvez le désactiver plus tard, nous vous montrerons comment faire.

Après cela, vous pouvez cliquer sur l'icône de position du contenu pour changer l'endroit où votre texte et votre bouton apparaîtront sur l'image.

Nous avons décidé d'opter pour le côté centre-gauche, car le point focal de l'image est sur la droite.

Maintenant, cliquez sur l'icône « Paramètres » et basculez vers l'onglet « Bloc ».

Ici, faites défiler jusqu'aux Paramètres. C'est ici que vous pouvez facultativement ajouter un effet de parallaxe à votre image (« Arrière-plan fixe ») ou utiliser un arrière-plan répété.

Vous pouvez également revenir en arrière et basculer vers l'icône des styles.

C'est ici que vous pouvez définir l'opacité de la superposition à 0 afin que votre image n'utilise aucun filtre.

Si vous souhaitez modifier la hauteur de l'image, vous pouvez insérer un nombre en pixels dans le champ « Hauteur minimale de la couverture ».

Nous avons décidé de régler notre image sur 400 pixels.

N'hésitez pas à personnaliser d'autres paramètres tels que la bordure et l'ombre, l'espacement des blocs, le padding et la marge, la typographie, etc.

Étape 4 : Ajoutez des blocs à votre bloc de couverture

Nous sommes maintenant prêts à ajouter d'autres éléments à votre image principale. Vous devriez voir un texte « Écrire le titre » au-dessus de l'image.

Voici une astuce de pro : Au lieu d'ajouter directement un titre, cliquez sur le bouton « + » et ajoutez d'abord un autre bloc Groupe. Considérez ce bloc Groupe comme un conteneur pour votre texte et votre bouton.

Les placer à l'intérieur d'un conteneur facilite grandement le contrôle de leur alignement et de leur style ensemble en tant qu'unité.

Ensuite, choisissez votre conteneur désiré comme à l'étape précédente.

Une fois que vous avez fait cela, vous pouvez cliquer à nouveau sur le bouton « + » pour ajouter un bloc Titre.

Maintenant, vous pouvez insérer le titre de votre page.

N'hésitez pas à changer la couleur du texte, la taille et les dimensions dans la barre latérale des paramètres du bloc si vous préférez.

Une fois que vous avez terminé, vous pouvez appuyer sur la touche « Entrée ».

À ce stade, n'hésitez pas à ajouter un sous-titre juste en dessous du titre.

Enfin, vous pouvez ajouter un bouton d'appel à l'action à votre image principale.

Pour ce faire, appuyez simplement à nouveau sur la touche « Entrée », cliquez sur le bouton « + », et sélectionnez le bloc « Boutons ».

Ensuite, insérez simplement le texte du bouton.

Et pour ajouter un lien au bouton, cliquez simplement sur l'icône de lien dans la barre d'outils et insérez votre URL dans le champ approprié.

Ensuite, cliquez sur le bouton flèche.

Si vous avez besoin d'astuces et de conseils pour créer des boutons qui convertissent, vous pouvez consulter notre guide sur les meilleures pratiques pour les appels à l'action.

Et c'est à peu près tout. Vous pouvez ajouter d'autres éléments à votre image principale ou la personnaliser selon vos préférences.

Une fois que vous êtes satisfait de l'apparence de la section principale, cliquez simplement sur « Enregistrer ».

Voici à quoi ressemble notre bloc de couverture :

Méthode 3 : Utilisation d'un constructeur de pages (Pages de destination/Thèmes personnalisés)

Disons que vous êtes au tout début de la configuration de votre site web. Ou, vous cherchez à créer une page de destination personnalisée sans être limité par les contraintes de votre thème. Dans ce cas, nous vous recommandons d'utiliser un constructeur de pages qui est livré avec des modèles de sections principales, comme SeedProd.

SeedProd est un constructeur de pages par glisser-déposer que nous avons souvent utilisé pour créer des pages personnalisées pour WPBeginner et nos autres sites de marque, y compris Duplicator et OptinMonster.

Bien qu'il soit facile à utiliser, il offre également de nombreuses fonctionnalités d' édition WordPress intégrées que le personnalisateur de thème, l'éditeur de site complet et Gutenberg n'ont pas par défaut.

Grâce à cela, nous avons pu gagner du temps et de l'argent en installant des plugins tiers juste pour ajouter des fonctionnalités spéciales à nos thèmes ou pages de destination.

SeedProd est disponible en version gratuite et payante. Vous pouvez tout à fait utiliser la version gratuite pour créer une page de destination personnalisée, mais les options de modèles et de blocs sont assez limitées. Pour cette raison, nous recommandons de passer à un plan payant pour plus de fonctionnalités, y compris le générateur de contenu IA.

Pour plus d'informations, consultez notre avis sur SeedProd et notre comparaison entre Elementor vs. Divi vs. SeedProd, qui sont tous des constructeurs de pages populaires.

Étape 1 : Configurez SeedProd

Pour utiliser SeedProd, vous devez installer le plugin WordPress fourni dans votre compte SeedProd dans votre zone d'administration. Une fois le plugin actif, il vous sera demandé d'entrer votre clé de licence, que vous pouvez obtenir sur votre page de compte SeedProd.

Une fois que vous l'avez saisie, cliquez simplement sur le bouton « Vérifier la clé ».

Avec SeedProd, vous avez 2 options : vous pouvez ajouter une section héros à une page de destination ou à certaines pages dans un thème personnalisé.

Pour configurer votre page de destination ou votre thème, vous pouvez lire ces guides :

• Comment créer un thème WordPress personnalisé sans code
• Comment créer une page de destination dans WordPress
• Comment créer une page de capture en WordPress qui convertit
• Comment créer de belles pages « Bientôt disponible » dans WordPress

Pour le reste du tutoriel, nous utiliserons le modèle de vente de menus.

Étape 2 : Personnalisez votre section héros

Une fois que vous avez choisi un modèle pour votre thème ou votre page de destination, vous accéderez à l'éditeur SeedProd.

L'interface d'édition de SeedProd se compose d'un aperçu de la page sur le côté droit et d'une barre latérale gauche où vous pouvez ajouter d'autres blocs, personnaliser un bloc/une section, annuler/rétablir les modifications, afficher les calques de votre page et prévisualiser votre site sur mobile ou sur tablette.

Comme le thème SeedProd inclut déjà une section héros, notre travail est à moitié terminé. Ce que nous devons faire, c'est simplement remplacer l'image, la personnaliser et ajouter d'autres blocs à la section héros si nécessaire.

Alternativement, vous pourriez trouver plus de designs de section héros en passant de la barre latérale Blocs à la barre latérale Sections sur le côté gauche. Ensuite, naviguez vers 'Héros' et cliquez sur le bouton '+' sur le modèle de section héros que vous souhaitez ajouter à votre page.

SeedProd l'insérera alors dans votre page.

Changeons d'abord l'image héros.

Pour ce faire, cliquez sur la section la plus haute qui comprend l'image principale. Vous saurez que vous avez sélectionné le bon élément lorsqu'une boîte violette « Édition : Section » apparaîtra dans la barre latérale gauche.

Maintenant, survolez l'image d'arrière-plan dans la barre latérale.

Ensuite, cliquez sur l'icône « Média ». Après cela, vous pouvez télécharger votre image principale depuis votre ordinateur ou la bibliothèque de médias.

Ensuite, vous devez choisir la position d'arrière-plan qui convient le mieux à votre image.

Nous trouvons que l'option « Position personnalisée » nous donne le meilleur contrôle sur le positionnement des points focaux, nous choisirons donc cette option.

L'option Position personnalisée vous offre plusieurs façons de configurer l'arrière-plan.

Pour les positions X et Y, vous pouvez modifier la façon dont l'image est positionnée verticalement et horizontalement.

Le réglage d'attachement a 2 options : Défilement (non-parallax) et Fixe (parallax).

Si votre image est plus petite que la section principale mais que vous souhaitez que toute la section soit remplie par l'image, vous pouvez répéter l'image dans toute cette section. Sinon, choisissez simplement « Pas de répétition ».

Quant à la taille de l'image principale WordPress, vous pouvez choisir l'option « Auto » si vous souhaitez que l'image s'ajuste automatiquement à la section principale.

N'hésitez pas à jouer avec ces paramètres pour voir ce qui convient le mieux à votre image.

Une autre chose que vous pouvez faire est d'assombrir l'image d'arrière-plan afin que votre texte ressorte mieux.

Pour ce faire, vous pouvez faire glisser le curseur « Assombrir l'arrière-plan » au niveau d'opacité souhaité.

Si vous souhaitez modifier la couleur d'arrière-plan superposée, cliquez simplement sur le bouton sélecteur de couleur « Couleur de superposition ».

Ensuite, sélectionnez simplement votre couleur préférée.

Faisons défiler vers le haut maintenant et passons aux paramètres « Avancés ». C'est là que vous pouvez ajouter toutes sortes d'effets sympas à votre section principale.

Par exemple, vous pouvez ouvrir l'onglet « Arrière-plan de particules » et ajouter un arrière-plan de particules animé à votre image. Cela peut rendre votre section héros beaucoup plus impressionnante et unique.

Ensuite, vous pouvez ajouter un séparateur de forme personnalisé en haut et/ou en bas de votre section héros en allant dans le menu « Séparateur de forme ».

Faire cela peut ajouter plus d'intérêt visuel à votre section héros. De plus, si vous ajoutez un séparateur de forme amusant en bas, vous pouvez encourager les utilisateurs à faire défiler votre page de destination et à en savoir plus sur votre offre.

Étape 3 : Ajoutez et personnalisez d'autres blocs à votre section héros

Avec votre image héros prête, ajoutons d'autres blocs à la section héros.

Comme la nôtre a déjà un bloc de titre, nous allons cliquer dessus et le personnaliser. Une fois sélectionné, vous devriez voir que la barre latérale gauche a maintenant une bannière orange indiquant « Édition : Titre ».

Ce qui est génial avec SeedProd, c'est qu'il dispose d'un générateur de contenu IA intégré.

Donc, si vous n'êtes pas sûr du titre à utiliser, vous pouvez cliquer sur le bouton « Éditer avec l'IA » pour trouver quelques idées.

Vous devriez maintenant voir une fenêtre contextuelle où vous pouvez écrire votre contenu avec l'IA.

Nous voulons générer un titre complètement nouveau, nous allons donc cliquer sur le bouton « Nouveau prompt » pour ce faire.

Ensuite, dites simplement à l'IA quel type de contenu elle doit créer.

Ensuite, cliquez sur le bouton « Générer le texte ».

L'IA générera alors le contenu pour vous.

Mais vous pouvez toujours le modifier en changeant le ton, en simplifiant le langage, en rendant le texte plus long ou plus court, et même en le traduisant dans plus de 50 langues.

Une fois que vous êtes satisfait de l'apparence du titre, cliquez simplement sur « Insérer ».

Vous pouvez maintenant faire défiler la barre latérale gauche.

C'est ici que vous pouvez modifier l'alignement du texte, la taille de la police et la balise de titre selon vos préférences.

Si vous souhaitez que le texte se démarque encore plus, faites défiler vers le haut et basculez vers l'onglet « Avancé ».

Dans le menu Styles, cliquez sur « Modifier » dans les paramètres de typographie. Ici, vous pouvez modifier librement la famille de polices, la hauteur de ligne, l'espacement des lettres et la casse du texte.

Vous pouvez également descendre un peu plus et ajouter une ombre de texte au titre.

Ici, nous avons décidé de créer une ombre de couleur personnalisée pour que le texte se démarque encore plus.

Pour ajouter un sous-titre sous le titre, cliquez simplement sur le bouton « Blocs » dans la barre latérale gauche.

Cela vous mènera à la bibliothèque de blocs.

Faites maintenant glisser et déposez le bloc « Texte » juste en dessous du titre.

Les paramètres du bloc Texte sont très similaires à ceux du bloc Titre, vous pouvez donc répéter les mêmes étapes qu'auparavant pour créer le sous-titre.

Pour ajouter un bouton d'appel à l'action, vous devez faire glisser et déposer le bloc « Bouton » sur la page.

Il est généralement placé juste en dessous du sous-titre.

Une fois cela fait, entrez le texte de votre bouton dans le champ approprié.

Vous pouvez également ajouter un sous-texte juste en dessous du texte principal du bouton pour plus de contexte.

Ensuite, faites défiler vers le bas et ajoutez un lien à votre bouton.

N'hésitez pas à modifier également l'alignement et la taille du bouton.

Revenez maintenant en haut de la barre latérale et basculez vers l'onglet « Modèles ».

C'est ici que vous pouvez modifier le style de votre bouton afin qu'il corresponde mieux à votre design WordPress.

Si vous n'aimez pas les modèles par défaut, basculez vers l'onglet « Avancé ».

Ici, vous pouvez modifier la typographie, le style, la couleur, le remplissage, l'effet d'ombre, etc. du bouton.

N'hésitez pas à continuer à personnaliser votre modèle jusqu'à ce qu'il vous plaise.

Lorsque vous êtes satisfait, cliquez simplement sur le bouton « Enregistrer » en haut et sélectionnez « Publier » pour rendre la page visible.

Et voilà pour l'ajout d'une image principale avec un constructeur de page.

Voici à quoi ressemble la section principale sur notre site de démonstration :

Méthode 4 : Utilisation du plugin Hero Banner + Shortcode (Tous les thèmes)

Cette dernière méthode fonctionne techniquement avec tous les thèmes, mais nous la recommandons surtout aux personnes utilisant un thème classique sans section principale intégrée.

Pour suivre cette méthode, vous devrez installer le plugin Hero Banner Ultimate. Pour des instructions étape par étape, vous pouvez consulter notre guide sur comment installer un plugin WordPress pour débutants.

Étape 1 : Configurez le plugin Hero Banner

Une fois le plugin activé, allez dans Hero Banner » Ajouter un Hero Banner.

Après cela, donnez un titre à votre bannière principale. Cela servira de titre.

Une fois terminé, insérez du texte dans l'éditeur visuel classique qui servira de sous-titre. N'hésitez pas à modifier la mise en forme et la couleur ici.

Faites maintenant défiler vers le bas jusqu'à la section « Hero Banner – Settings ».

Ici, vous pouvez choisir une mise en page de bannière. Bien que vous ne puissiez pas prévisualiser la mise en page en temps réel dans les paramètres du plugin, il est facile de passer de l'une à l'autre plus tard sur votre page réelle pour trouver celle qui vous convient le mieux.

Nous choisirons la mise en page 1 pour notre tutoriel.

Quant au type de bannière, vous pouvez sélectionner « Image d'arrière-plan » pour une image héroïque, mais vous pouvez également choisir « Vidéo d'arrière-plan » si vous avez une vidéo pleine largeur à utiliser comme héroïque.

Ensuite, n'oubliez pas de cliquer sur « Télécharger l'image » pour ajouter votre image depuis l'ordinateur ou la médiathèque.

À ce stade, vous pouvez définir la taille de l'image d'arrière-plan sur « Couvrir » afin que l'image soit en pleine largeur.

Vous voudrez également choisir « Défilement » pour l'attachement de l'image d'arrière-plan afin de désactiver tout effet de parallaxe.

Descendez jusqu'à atteindre le réglage de la couleur de la bannière.

C'est ici que vous pouvez changer la couleur du titre (Couleur du titre) et du sous-titre (Couleur du contenu). Cliquez simplement sur l'outil de sélection de couleur pour ce faire.

De plus, vous voudrez peut-être ajouter une couleur de superposition par-dessus l'image, ce qui peut être utile pour ajuster la lisibilité du texte par rapport à l'image.

Nous avons décidé d'opter pour la couleur noire, avec une opacité de 0,5.

Configurons les paramètres de l'appel à l'action.

Ici, vous pouvez insérer le texte et le lien de votre bouton. Vous pouvez également changer la couleur dans « Button – 1 Class ».

Tout ce que vous avez à faire ensuite est de remonter.

Après cela, cliquez sur « Publier ».

Allons maintenant à Hero Banner » Hero Banner. Vous devriez maintenant voir que votre image héroïque a été créée et que le plugin a généré un shortcode pour que vous puissiez l'afficher.

Prenez note de ce shortcode, car nous en aurons besoin plus tard.

Étape 2 : Trouver le sélecteur CSS de la section d'en-tête de votre thème

Pour afficher l'image héroïque, nous devons trouver une « adresse » spécifique pour la section d'en-tête de votre thème.

Ceci est appelé un sélecteur CSS, et il indique à notre plugin exactement où placer l'image principale. Ne vous inquiétez pas, vous n'aurez pas besoin d'écrire de code vous-même.

Pour ce faire, visitez votre site web sur le front-end. Ensuite, faites un clic droit sur votre section d'en-tête et sélectionnez 'Inspecter'.

Sur le côté droit, vous devez trouver quel sélecteur CSS la section d'en-tête utilise. Vous pouvez survoler tous ces extraits de code avec votre curseur jusqu'à ce que vous voyiez que la section d'en-tête est mise en surbrillance sur le front-end.

Voici un exemple :

Si toute la section d'en-tête est mise en surbrillance lorsque vous survolez le code, vous êtes sur la bonne voie.

Maintenant, faites un clic droit sur cet extrait de code, et sélectionnez Copier » Copier le sélecteur.

Après avoir fait cela, vous pouvez soit coller le sélecteur dans un endroit sûr, comme un éditeur de texte, soit simplement garder cet onglet ouvert.

Étape 3 : Ajouter votre shortcode à WPCode

La prochaine étape consiste à installer WPCode, qui est un plugin d'extraits de code.

Techniquement, vous n'avez pas besoin d'utiliser un plugin pour insérer des extraits de code personnalisés dans les fichiers de votre thème. Mais nous avons voulu faire cela pour garder les choses en sécurité, car coller du code dans un fichier de thème peut présenter des erreurs inattendues.

Nous avons trouvé que WPCode est très utile pour gérer des extraits de code personnalisés sans casser votre site.

Tout d'abord, installez le plugin WordPress dans votre zone d'administration. Une fois le plugin actif, accédez à Extraits de code » + Ajouter un extrait, sélectionnez ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur le bouton ‘+ Ajouter un extrait personnalisé’.

Maintenant, donnons un nom à votre nouvel extrait de code. Il peut s'agir de quelque chose de simple, comme ‘Shortcode de bannière héros’.

Après cela, changez le Type de code en ‘Extrait PHP.’

Dans la boîte de prévisualisation du code, collez l'extrait suivant :

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode 

Assurez-vous de remplacer [hbupro_banner id="XXX"] par votre propre shortcode de bannière héros que vous avez vu précédemment.

Ensuite, faites défiler vers le bas jusqu'à la section ‘Insertion’.

Ici, la méthode d'insertion doit être ‘Insertion automatique’ et l'emplacement doit être ‘Après l'élément HTML’.

Ensuite, collez le sélecteur que vous avez copié précédemment dans le champ ‘Sélecteur CSS’. Dans notre cas, c'était #masthead, mais cela variera selon le thème.

Une fois cela fait, vous pouvez basculer le bouton ‘Inactif’ pour qu'il devienne ‘Actif’ et cliquer sur le bouton ‘Enregistrer l’extrait’.

Et c’est tout !

Si vous affichez votre site Web, vous devriez maintenant voir l'image de la bannière héros juste en dessous de votre en-tête :

Foire aux questions sur les images de héros

Voici une liste de questions courantes que nos lecteurs posent fréquemment sur les images héros :

Quelle est la meilleure taille pour une image héros WordPress ?

Un bon point de départ pour la taille d'une image héros est de 1920 pixels de large par 400 à 600 pixels de haut. Cela garantit qu'elle est nette sur la plupart des écrans d'ordinateur de bureau sans occuper trop d'espace vertical.

Cependant, la taille parfaite dépend souvent de votre thème WordPress spécifique. Nous vous recommandons toujours de tester l'apparence de votre image sur les ordinateurs de bureau et les appareils mobiles.

Puis-je utiliser une vidéo dans ma section héros ?

Absolument. Utiliser une vidéo d'arrière-plan peut rendre votre site Web plus dynamique et capter immédiatement l'attention des visiteurs. La plupart des constructeurs de pages comme SeedProd et le bloc Couverture par défaut de WordPress incluent des options simples pour ajouter une vidéo d'arrière-plan au lieu d'une image statique.

Comment rendre mon image héros adaptée aux mobiles ?

Les thèmes modernes et les constructeurs de pages sont conçus pour être réactifs, ils adapteront donc automatiquement votre image héros aux écrans plus petits. La clé est de choisir une image qui reste belle lorsqu'elle est recadrée.

Il est également très important de compresser votre image avant de la télécharger. Cela garantit qu'elle se charge rapidement pour les visiteurs ayant des connexions mobiles plus lentes.

Une image héros est-elle la même chose qu'un curseur ?

Ils sont similaires mais pas exactement identiques. Une image héros est généralement une seule grande image de bannière en haut d'une page Web. D'autre part, un curseur fait défiler plusieurs images ou vidéos. Vous pouvez utiliser un curseur dans votre section héros, comme nous l'avons montré dans la méthode pour les thèmes classiques.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une image héroïque dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter une animation de préchargement à WordPress et nos choix d'experts des meilleurs outils pour créer et vendre des produits numériques.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.