Comment concevoir une section de héros pour votre site Web (Guide 2025)

Votre site Web n'a que quelques secondes pour faire bonne impression, donc avoir une section de héros forte devrait être une priorité absolue. C'est comme la fenêtre de vitrine de votre entreprise en ligne, et il doit attirer leur attention rapidement et les encourager à continuer de faire défiler. Dans cet article, nous plongerons dans les détails de la conception d'une section de héros et vous montrerons comment en concevoir un avec Divi en utilisant son constructeur visuel de glisser-déposer intuitif.

Qu'est-ce qu'une section de héros et pourquoi en avez-vous besoin?

La section des héros de votre site Web n'est pas seulement en haut de la page; C'est votre première chance de faire bonne impression. C'est là que vous attirez l'attention, affichez votre message de base et montrez instantanément aux visiteurs pourquoi ils devraient rester. Une grande section de héros les accroche en quelques secondes, en les guidant plus profondément dans votre site avec des appels clairs à l'action et en préparant la voie à toute l'expérience utilisateur (UX). C'est pourquoi il est si important de bien faire les choses.

Voici quelques éléments à garder à l'esprit:

Les premières impressions sont importantes

Nous vivons dans un monde de gratification instantanée. Les utilisateurs atterrissant sur votre site porteront des jugements instantanés, de sorte que la section des héros doit attirer leur attention en quelques secondes. Sinon, ils rebondiront probablement, quittant votre site et allant ailleurs. Cependant, votre section de héros ne concerne pas seulement les visuels. Il donne le ton à toute l'expérience utilisateur. Une bonne section de héros définit les attentes des utilisateurs sur ce qu'ils trouveront sur votre site Web.

Lorsque vous savez que vous n'avez que quelques secondes pour attirer l'attention des gens, faites en sorte que cela compte. Utilisez la puissance de la narration visuelle pour faire passer votre message rapidement. Des images convaincantes, telles que des photos ou des vidéos, combinées à des titres percutants, peuvent transmettre beaucoup plus d'informations en quelques secondes que les grands paragraphes de texte. Utilisez un langage qui aide les utilisateurs à comprendre instantanément vos offres et pourquoi ils devraient s'en soucier.

Considérez cet exemple: vous voulez commencer à manger bio, afin que vous recherchiez un marché fermier local. Lorsque vous atterrissez sur le site, l'image de la nourriture délicieuse attire votre attention. En scannant l'en-tête, vous trouvez deux boutons vous encourageant à en savoir plus.

Il communique votre message

Les visiteurs ne devraient pas avoir à deviner ou à faire défiler pour comprendre ce que vous offrez. Évitez le jargon ou le langage trop technique que votre public cible peut ne pas saisir. Au lieu de cela, soulignez ce qui vous rend différent de la concurrence. Il pourrait s'agir d'un produit ou d'un service unique à un domaine d'expertise spécialisé. De plus, comment ce produit ou ce service leur profite-t-il? Cadrez votre message en termes de ce dont l'utilisateur a besoin ou veut.

Nous avons mentionné l'importance des visuels, mais le texte que vous choisissez est tout aussi crucial. Faites les gros titres courts, mémorables et attirant l'attention. Suivez cela avec une courte sous-position ou un paragraphe d'intro pour capturer l'intérêt de l'utilisateur.

Considérez cet exemple: vous recherchez l'art-thérapie pour votre grand-mère. Lorsque vous trouvez ce site, vous êtes attiré par le design et les couleurs vives. Vous lisez le paragraphe et savez que cette entreprise offre des séances d'art-thérapie aux enfants, aux adultes et aux personnes âgées.

Il peut conduire des conversions

Les conversions sont la principale raison pour laquelle les gens créent des sites Web. Les propriétaires d'entreprise veulent que vous achetiez quelque chose ou accomplissez une tâche. Votre section de héros peut être un aimant pour les conversions si elle est conçue correctement. L'un des facteurs les plus cruciaux pour y parvenir est d'utiliser un appel à l'action efficace (CTA). Chaque section du bon héros aura un bouton ou un formulaire qui encourage vos visiteurs à passer à l'étape suivante.

Un autre moyen efficace de conduire des conversions consiste à créer un sentiment d'urgence. Cela peut être réalisé grâce à des offres à durée limitée sur un produit spécifique, des minuteries de compte à rebours ou les avantages de l'inscription à votre newsletter. Faites attention à ne pas être trop arrogant. Au lieu de cela, utilisez un langage qui motive les utilisateurs à agir.

Considérez cet exemple: vous êtes un passionné de divi vivant en Californie. Vous avez toujours voulu assister à une conférence liée à la conception Web pour établir des connexions et acquérir de nouvelles compétences. En atterrissant sur le site, vous savez immédiatement que ce site Web est pour une rencontre Divi à San Fransisco en août, et vous pouvez vous inscrire.

Quels sont les éléments fondamentaux d'une section de héros efficace?

Se concentrer sur quelques éléments clés vous permet de créer une section de héros qui a l'air incroyable, engage efficacement vos visiteurs et les encourage à explorer davantage votre site Web. Que devez-vous inclure dans une section de héros?

Un titre convaincant

Votre titre doit être court, doux et percutant. Pensez grand, audacieux et axé sur les avantages. Au lieu de dire bienvenue sur notre site Web , essayez quelque chose de plus engageant comme déverrouiller votre potentiel avec notre programme de kickboxing de 30 jours . Le module d'en-tête de Divi ou d'en-tête de Divi vous donne un contrôle complet sur le style de votre titre. Jouez avec différentes polices, couleurs, tailles et espaces pour créer un look accrocheur. Vous pouvez utiliser les styles de typographie pour présenter le nom de votre entreprise afin qu'il soit indéniable dès le début de votre entreprise.

Sous-position ou paragraphe d'introduction

Pendant que votre titre attire l'attention, votre sous-position ou votre paragraphe d'introduction fournit le contexte. C'est votre chance d'élaborer la promesse du titre et d'ajouter une touche d'intrigue. Gardez-le concis et laissez-le fonctionner harmonieusement avec votre titre principal. Par exemple, si votre titre passe une journée au spa , votre sous-tête pourrait élaborer et expliquer ce que Spa offre.

Un appel à l'action claire

Votre héros a besoin d'un but clair. Que voulez-vous que les visiteurs fassent ensuite? Que vous souhaitiez inciter les utilisateurs à en savoir plus, à faire un achat ou à vous inscrire à une newsletter, quel qu'il soit, votre CTA doit être limpide et proéminente. Utilisez un langage orienté vers l'action comme démarrer ou rejoindre aujourd'hui . Un CTA bien placé agit comme un guide, conduisant les visiteurs vers une action souhaitée.

Imagerie de haute qualité

Soyons honnêtes: les visuels parlent plus que les mots. Une image ou une vidéo de haute qualité peut attirer instantanément l'attention et définir l'ambiance de votre site Web. Divi rend très facile à ajouter et à coiffer des images et des vidéos dans votre section Héros. Les bons visuels peuvent transmettre des émotions, raconter une histoire et créer une impression durable.

Un arrière-plan qui ne fait pas

L'arrière-plan de votre section Héros ouvre la voie à votre contenu. Vous pouvez utiliser des images, des couleurs unies ou des gradients pour créer une toile de fond étonnante. Divi vous donne un contrôle complet sur vos paramètres d'arrière-plan afin que vous puissiez faire un aspect unique et accrocheur. La plupart des thèmes premium vous fournissent un contrôle sur les paramètres d'arrière-plan, vous permettant de créer une section de héros unique qui reflète votre marque et donne le ton au reste de votre site Web.

Exemples de sections de héros (et pourquoi elles fonctionnent)

Prêt à voir comment une section de héros puissante peut transformer votre site Web? Explorons quelques exemples efficaces disponibles avec Divi, en décomposant pourquoi ils fonctionnent. En utilisant plusieurs packs de mise en page de Divi, nous présenterons divers designs pour vous inspirer. N'oubliez pas que ce ne sont que des points de départ - le succès du monde du monde dépend d'un contenu convaincant (pas du texte d'espace réservé). Cependant, ces exemples vous donneront une image claire des possibilités.

Exemple 1: logiciel AI

Notre premier exemple est pour une société de logiciels d'IA. Il a plusieurs points forts, notamment:

1. Une rubrique claire et une sous-tête: l'avenir de Divi est une rubrique concise et intrigante qui communique l'attention. L' intelligence artificielle sous-position offre un contexte et une sensation moderne et de pointe.
2. Appel visuel: le contexte abstrait et futuriste avec des éléments éclatants est accrocheur et pertinent pour le thème de l'IA et de l'avenir.
3. Contraste fort: le texte blanc sur l'arrière-plan violet offre une excellente lisibilité et fait ressortir le message.
4. Des appels clairs à l'action: rejoignez Divi aujourd'hui et la démo gratuite est à la fois directe et axée sur l'action, indiquant à l'utilisateur exactement ce qu'ils peuvent faire et ce qu'ils obtiendront lorsqu'ils cliquent. Le fait d'avoir deux CTAS propose des options qui intéressent l'utilisateur.
5. C'est moderne: la conception globale, la palette de couleurs et l'imagerie évoquent un sentiment d'innovation et d'avance, qui s'aligne sur le sujet de l'IA et les tendances futures.

Exemple 2: fourniture d'animaux

Ce pack de configuration est conçu pour les propriétaires d'entreprises de fournitures pour animaux de compagnie. Voici quelques points qui rendent sa section de héros efficace:

1. Une rubrique claire: les fournitures pour animaux de compagnie et les abonnements mensuels en boîte communique ce que fait l'entreprise, ce qui rend le cap simple et compréhensible.
2. Direct CTA: Shop Online est un CTA concis encourageant les visiteurs à acheter leurs produits.
3. Image visuellement pertinente: L'image principale du héros montre la nourriture pour animaux de compagnie, renforçant la nature de l'entreprise. Il ajoute également une touche de couleur pour dessiner l'œil de l'utilisateur.
4. Design propre: la mise en page est épurée, moderne et simple. Le fond blanc et le texte audacieux offrent un bon contraste et une bonne lisibilité.

Exemple 3: Water à but non lucratif

Dans cet exemple, le héros représente une entreprise à but non lucratif en eau. Bien que simple, le héros est efficace parce que:

1. Il a une marque claire: le nom de l'entreprise et le slogan qui l'accompagne communiquent la mission de l'organisation.
2. Il est visuellement attrayant: la grande image de fond de l'océan crée un visuel fort et se connecte immédiatement au thème de l'eau.
3. Un CTA clair: le bouton de faire un don est important et les utilisateurs utilisent du texte axé sur l'action pour encourager l'engagement.
4. Utilisation des statistiques: La mise en évidence de l'argent collecté fournit des preuves de l'impact de l'organisme de bienfaisance et renforce la confiance dans la marque.
5. Une disposition harmonieuse: le style de bloc de couleur présente les informations d'une manière structurée et esthétique, avec des sections claires pour différents aspects de l'organisme de bienfaisance.

Exemple 4: Realty

Dans le pack de mise en page Realty pour Divi, le héros utilise le système de grille de Divi pour ajouter quatre colonnes au héros. C'est efficace pour plusieurs raisons:

1. Titre concis: Trouvez la maison de vos rêves avec Divi fait appel au public cible et présente la valeur.
2. Visuels forts: l'image de fond monochromatique contraste bien avec le CTA vert, ce qui le fait se démarquer.
3. CTAS CLEAR: La section Hero a quatre CTA solides pour les utilisateurs pour s'engager avec le site Web.
4. Design moderne: le design minimaliste et le schéma de couleurs sombres créent un look sophistiqué et moderne.

Ces exemples démontrent la polyvalence d'une bonne conception de section de héros. Les possibilités sont infinies, élégantes et modernes à visuellement convaincantes et informatives. Maintenant, plongeons dans ce qui fait de Divi l'outil idéal pour personnaliser et créer la section Héros parfaite.

Pourquoi Divi est un excellent choix pour concevoir une section de héros

Divi change la donne en matière de création de sites Web, y compris la création de sections de héros. Divi propose un constructeur de pages glisser-déposer, le constructeur visuel, afin que vous puissiez voir exactement à quoi ressemblera votre site Web pendant que vous le construisez.

Le thème est chargé de plus de 200 modules de conception, vous offrant des options illimitées pour construire des sections de héros et des pages Web époustouflantes. Avec le constructeur de thèmes, vous pouvez personnaliser chaque partie de votre site, de l'en-tête de votre site vers des modèles de page, créant un look vraiment unique.

Divi a une bibliothèque massive de plus de 2600 dispositions conçues par des professionnels si vous avez besoin d'inspiration. Chaque mise en page comprend une section de héros bien conçue que vous pouvez facilement modifier pour correspondre parfaitement à votre marque. Donc, que vous soyez un design pro ou un débutant complet, Divi a tout ce dont vous avez besoin pour créer une section de héros qui se démarque.

En plus des milliers de dispositions, Divi offre un autre moyen facile de créer un site Web complet: Divi Quick Sites. Vous pouvez créer un site Web complet en moins de deux minutes à l'aide d'un site de démarrage ou d'une IA générative, grâce à l'intégration avec l'assistant de conception embarqué de Divi, Divi AI. Tous les sites Web de démarrage et générés sont livrés avec toutes les pages de base, les modèles de générateur de thème, les styles globaux et tous les paramètres WordPress configurés pour vous.

Divi Quick Sites est un excellent moyen de faire circuler votre créativité et de créer un site Web rapidement. Vous pouvez facilement personnaliser les styles mondiaux (polices et couleurs) pour correspondre parfaitement à votre marque. Vous n'êtes pas non plus coincé avec le look. Les conceptions peuvent être modifiées, mais vous voulez en faire la vôtre. De plus, vous pouvez créer autant de sites Web (et de sections de héros) que vous le souhaitez pour le prix bas de 89 $ par an .

Se faire divi

Comment concevoir une section de héros avec divi

La conception d'une section de héros avec Divi peut être accomplie de plusieurs manières. Vous pouvez en créer un à partir de zéro, importer une disposition pré-fait ou générer une section avec Divi Ai. Pour ce post, nous allons commencer par l'une des dispositions pré-faites de Divi et modifier la conception pour correspondre à notre marque.

Choisissez un pack de mise en page

Créez une nouvelle page sur votre site Web WordPress, installez Divi et sélectionnez Choisissez une mise en page pré-même lorsque la nouvelle page se charge. Ensuite, cliquez sur Parcourir les dispositions pour afficher la sélection des dispositions pré-faites.

Divi vous permet de rechercher ou de filtrer les catégories pour trouver la mise en page que vous souhaitez ajouter. Il y a plus d'une douzaine de catégories parmi lesquelles choisir, donc en trouver un qui convient à vos besoins sera facile. Pour ce post, nous sélectionnerons le pack de mise en page Realty (exemple n ° 4 ci-dessus) et le modifierons pour un cabinet d'avocats.

Cliquez sur le pack et sélectionnez la disposition de la page de destination . Cliquez sur le bouton Utiliser ce disposition pour installer le pack.

Une boîte de dialogue vous demande si vous souhaitez importer les préréglages de conception. Les préréglages Divi sont l'une des meilleures fonctionnalités du thème, vous permettant d'économiser et de réutiliser les styles de conception sur votre site Web. Pour cette raison, nous vous encourageons à garder cette bac à cocher. Cliquez ensuite sur Importer pour continuer.

Apporter des modifications au design à la section des héros

Maintenant que vous avez installé la disposition, nous pouvons travailler à modifier notre héros pour correspondre à notre marque. Nous allons commencer par échanger l'image d'arrière-plan de notre héros. Cliquez sur l'icône des paramètres pour afficher les paramètres de la section.

Cliquez sur le menu déroulant d'arrière-plan et sélectionnez l'onglet Image d'arrière-plan.

Supprimez l'image d'arrière-plan existante en passant par la zone d'image et en cliquant sur l' icône des déchets .

Ajoutez une nouvelle image d'arrière-plan en cliquant sur le bouton Ajouter de l'arrière-plan dans la zone d'image. Choisissez n'importe quelle image que vous souhaitez, mais assurez-vous qu'il est de 1920px de large afin qu'il s'affiche correctement sur les écrans de bureau plus grands.

Réécrivez du texte avec Divi Ai

Divi a son propre assistant de conception AI construit directement dans le constructeur visuel. Il vous permet de générer une copie de marque avec une invite de texte. Mais d'abord, nous allons changer la petite rubrique dans le héros. Cliquez sur l'icône des paramètres pour afficher les options du module. Changez le texte du petit titre en cabinet d'avocats de la famille Birmingham .

Ensuite, nous remplacerons la grande rubrique dans le héros. Cette fois, nous utiliserons Divi Ai pour élaborer un titre convaincant pour notre section Héros. Pour activer Divi AI, cliquez sur le bouton AI dans le champ de cap .

Une boîte de dialogue avec plusieurs options apparaîtra. Sélectionnez Écrire avec AI .

Lorsque les paramètres apparaissent, le type de contenu sera déjà sélectionné pour vous. Dites à Divi Ai sur quoi vous écrivez (dans ce cas, un cabinet d'avocats de la famille) et sélectionnez aucun contexte dans le domaine du contexte ajouté . Divi Ai fonctionne mieux lorsqu'il comprend ce que vous voulez bien, donc lorsque vous écrivez votre invite, soyez descriptif.

Dans la section Guide moi , vous pouvez choisir un ton de voix, ajouter tous les mots clés à utiliser, définir la longueur du contenu et choisir une langue. Enfin, cliquez sur le bouton Générer du texte pour générer l'en-tête. Il peut prendre quelques essais pour obtenir le titre que vous voulez, mais la bonne nouvelle est que Divi Ai fournit des générations illimitées.

Ajouter un appel à l'action

La dernière étape pour terminer notre section Héros est d'ajouter un appel à l'action (CTA). Tout d'abord, nous devons modifier le contenu dans les trois premières colonnes. Remplacez les icônes et le texte dans les modules par du contenu lié à la loi. Divi a plus de 800 icônes, donc trouver un pour s'adapter à votre créneau est rapide et facile.

Ensuite, nous remplacerons l'icône dans la quatrième colonne de la rangée sous la tête. Survolez le module pour le retirer.

Dans le module d'en-tête de la quatrième colonne, utilisez Divi Ai pour générer un CTA captivant. N'oubliez pas qu'il devrait encourager vos visiteurs à agir et à créer un lien vers une page pertinente sur votre site.

Comment concevoir une section de héros avec divi ai

Maintenant que vous voyez à quel point il est facile de concevoir une section de héros à l'aide d'un pack de mise en page Divi, plongeons-nous pour en créer un avec Divi Ai. Nous avons montré comment Divi AI peut générer du texte, mais il peut également générer des images, du code, des sections, des pages Web et des sites Web complets (plus à ce sujet plus tard).

Générer un nouveau héros divi

Commencez par créer une nouvelle page pour votre site Web Divi. Au lieu de commencer par une disposition préalable cette fois, choisissez Build à partir de zéro lorsque le constructeur visuel se charge.

Lorsque le constructeur visuel se charge, Divi vous permet automatiquement d'ajouter une ligne et propose diverses dispositions. Le constructeur visuel utilise un système de grille pour vous aider à structurer et à organiser votre contenu en lignes et colonnes. Divi propose plusieurs dispositions de colonnes prédéfinies (simple, deux égales, trois colonnes avec des largeurs variables, etc.).

Divi AI utilise le même système de grille pour générer des sections pour votre site Web. Cependant, il vous suffit d'ajouter des lignes que lorsque vous prévoyez de construire une disposition à partir de zéro. Annulez la boîte de dialogue Row en cliquant sur le X en haut à droite de la grille.

Pour générer une section de héros avec l'IA, survolez la page et cliquez sur l' icône Blue + .

Choisissez Générer la section avec AI lorsque la boîte de dialogue apparaît.

Lorsque le paramètre Divi AI apparaît, il y a quelques champs à remplir. Comme la génération de texte, Divi AI a besoin d'informations sur la section que vous souhaitez créer et votre entreprise. Vous pouvez également spécifier le type d'images que vous souhaitez utiliser (stock, généré par AI-AI ou espace réservée) et les polices et les couleurs que vous souhaitez utiliser. Une fois que tout est prêt, cliquez sur le bouton Générer pour créer votre héros.

L'ensemble du processus prend quelques secondes. Une fois terminé, vous pouvez enregistrer vos styles à appliquer sur chaque section ou page Web que vous créez. L'IA fournira une liste d'images utilisées (y compris un lien) si vous choisissez des images de stock.

Exemples de héros divi ai

Divi Ai est polyvalent et peut créer de belles sections de héros efficaces dans diverses catégories. Jetez un œil à quelques-uns que nous avons générés, ainsi que leurs invites.

Créez une section de héros pour une agence de conception. Il devrait avoir un titre captivant, un texte de support et un appel à l'action proéminent.

Concevez une section de héros pour un restaurant à pizza. Donnez-lui des couleurs vibrantes, un titre audacieux et une image de fond d'une délicieuse pizza.

Une section de héros pour une quincaillerie appelée «Dee's Hardware». Il doit inclure des images d'outils, un grand titre audacieux et un appel à l'action proéminent.

Créez une section de héros pour un cabinet d'architecture. Il devrait avoir un titre audacieux et percutant, des couleurs apaisantes et un appel clair à l'action.

Obtenez Divi Ai

Expérience que le meilleur divi a à offrir avec Divi Pro

Avec Divi Pro, vous avez accès à l'ensemble de l'écosystème Divi. Cela signifie que vous pouvez gérer tous vos plugins et thèmes en un seul endroit, stocker et réutiliser vos conceptions préférées dans le cloud, collaborer facilement avec votre équipe et obtenir un soutien expert chaque fois que cela est nécessaire. Divi Pro vous permet vraiment de faire passer votre site Web au niveau supérieur.

Divi Pro est livré avec:

• Divi Ai: générer des images illimitées, du texte, du code, des sections, des pages Web et des sites Web complets avec une invite de texte.
• Divi Dash: Gérez tous vos plugins et thèmes, suivez tous vos clients et obtenez des informations précieuses sur la façon dont votre site Web fonctionne - le tout dans un tableau de bord pratique.
• Divi Cloud: Dites au revoir aux fichiers JSON désordonnés et à la copie sans fin et à coller! En quelques clics, vous pouvez stocker et réutiliser vos dispositions de divi préférées dans le cloud.
• Équipes Divi: collaborez facilement avec votre équipe et accordez-leur à tous les incroyables outils Divi que vous possédez.
• Divip: Obtenez un soutien au niveau de l'entreprise en moins de 30 minutes ou moins, 24/7, 365 jours par an.
• Crédits Divi Marketplace: Obtenez 50 $ en crédits pour explorer le marché Divi et trouver des thèmes, des dispositions et des extensions incroyables pour suralimenter votre site Web.

Avec votre abonnement Divi Pro, vous pouvez faire passer votre expérience de construction de site Web au niveau supérieur. C'est comme avoir une équipe de concepteurs experts, de développeurs et de spécialistes de soutien à portée de main pour le faible coût de 277 $ par an, soit seulement 23,08 $ par mois.

Se faire divi

Faire une première impression durable avec Divi

Une section de héros convaincante est essentielle pour capturer l'attention des utilisateurs et motiver l'engagement. Après tout, vous n'avez qu'une seule chance de faire une première impression. Divi propose une plate-forme plus que capable pour créer des sections de héros percutantes, ce qui le rend plus rapide et plus facile que jamais. Avec son constructeur visuel intuitif et son puissant assistant de conception, Divi Ai, vous pouvez concevoir des sections de héros en quelques minutes. Avec Divi et Divi Ai, vous pouvez capturer votre public en premier clic.