10 modèles gratuits de section héros d'élémenteur que vous pouvez importer en 2 minutes

La plupart des modèles gratuits de section héros Elementor ont le même problème : vous importez un fichier JSON, obtenez une mise en page gelée, puis passez une heure à cliquer sur les widgets de cap individuels, les widgets d'image et les espaceurs pour essayer de modifier la couleur de l'accent ? cela représente douze panneaux de style distincts.

Avant de faire défiler: cette collection vient de s'étendre jusqu'à 11. la plus récente, Bouts lâches[traduction], le héros de particules GPU assis au n°11, a été construit après que nous ayons filmé la vidéo YouTube, donc vous ne la trouverez pas là Ne la sautez pas. Un millier de particules en orbite autour de votre titre et esquiver le curseur de votre visiteur n'est pas quelque chose que vous verrez dans n'importe quelle autre bibliothèque Elementor, et il y a un aperçu animé ci-dessous pour que vous puissiez le regarder bouger.

Nous avons construit ces 10 sections de héros différemment Chacun importe en tant que widget unique par le biais de la Maître Addons Widget Builder. Lorsque vous le faites glisser dans Elementor, chaque titre, paragraphe, bouton, lien et image est un champ étiqueté dans l'onglet Contenu, et l'ensemble de la palette de couleurs se trouve dans l'onglet Style sous forme de 3 à 6 sélecteurs de couleurs Changez-en un “Accent Color” et les boutons, états de vol stationnaire, brille et souligne toutes les mises à jour ensemble, car le CSS dérive chaque teinte secondaire des couleurs de base que vous choisissez.

Les 10 sont téléchargeables gratuitement sur cette page Chaque zip contient le fichier widget, les images de démonstration que vous voyez dans les captures d'écran (sous forme de PNG prêts à télécharger plus les SVG originaux) et un README qui mappe chaque image à son champ exact. Les animations (montagnes de parallaxe, graphiques auto-dessinés, badges d'ingrédients en orbite) se présentent automatiquement et chacune d'entre elles respecte le réglage de mouvement réduit du visiteur, vous n'expédiez donc pas de problèmes d'accessibilité avec le bonbon pour les yeux.

Les captures d'écran n'expliquent pas à quoi ressemble réellement l'animation J'ai fait une vidéo pour vous que vous devriez regarder afin que vous ayez une bonne idée sur l'animation et ce que vous obtiendrez après avoir téléchargé le modèle de sections de héros.

Et un héros n'est que le premier écran Tout ce qu'un visiteur fait défiler après lui la grille de fonctionnalités qui explique, les témoignages qui convainquent, la table de tarification qui ferme, la FAQ qui tue la dernière objection a encore besoin de construire Nous avons emballé tous ceux dans une collection compagnon de 30+ modèles gratuits de section Élémenteur« , construit de la même manière basée sur un widget : choisissez un héros ici, empilez le reste de la page à partir de là et une page de destination complète se réunit dans un après-midi au lieu d'une semaine ».

Vous trouverez ci-dessous les 10 designs avec de vraies captures d'écran, une note honnête sur qui chacun correspond réellement, puis un guide d'importation étape par étape avec des captures d'écran du flux de travail exact.

Certains héros lisent mieux avec le mouvement dedans qu'avec une photo fixe Si c'est la direction que vous allez, le 20 conceptions de carrousels d'éléments sont le compagnon de ce one coverflow, un accordéon image, une lingette rideau, une orbite, une bande de défilement de traînée et un curseur de héros à saignement complet appelé Plinth qui porte son propre panneau de légende et son propre appel à l'action.

Ils importent exactement comme les héros ci-dessous : un fichier JSON, Widget Builder, puis un widget avec des champs étiquetés Huit des vingt fonctionnent sur le plugin gratuit et douze ont besoin de Pro, ce qui est la seule différence qui vaut la peine d'être connue avant que chaque conception ait une démo en direct, vous pouvez donc regarder un style de mouvement pendant dix secondes au lieu de deviner à partir d'une capture d'écran.

Qu'y a-t-il dans cette collection

• 1. Pulseboard : produit SaS/analytics
• 2. Alpenrute & aventure
• 3. Ember & Oak : café/restaurant
• 4. Atelier Norr & e-commerce
• 5. Offbeat Studio agence créative
• 6. Forge Athletics, salle de sport et remise en forme
• 7. Wiggly Minds : applications et éducation pour enfants
• 8. Studio Meridian architecture et intérieurs
• 9. Lowtone : événements et musique
• 10. Måne & soins de beauté
• 11. Loose Ends : portefeuilles, studios et pages de lancement qui ont besoin d'une touche
• Comment importer une section héros dans Elementor (étape par étape)
• FAQ

Pourquoi ce ne sont pas des modèles de section ordinaires

Une distinction rapide avant la vitrine, car elle change la façon dont vous allez les utiliser.

Un modèle de section Elementor normal est un arrangement enregistré de widgets de stock Il semble terminé, mais structurellement, ce sont des dizaines de parties lâches Ces 10 héros sont widgets personnalisés construit avec le Widget Builder : HTML, CSS et JavaScript emballés derrière les contrôles Elementor. Trois conséquences pratiques :

• L'édition est plus rapide. Le héros du festival de musique compte 24 champs (date, lieu, trois rangées de line-up avec leurs propres liens, deux boutons, couleurs).Vous les modifiez dans un panneau au lieu de chasser à travers un arbre de conteneurs imbriqués.
• Les animations survivent. Le JavaScript est livré à l'intérieur du widget : boutons magnétiques, statistiques de décompte, parallaxe de la souris. Pas de plugins supplémentaires, pas d'appels CDN à l'exception de Google Fonts, que chaque widget charge une fois, seul.
• Rien ne fuit. Chaque feuille de style est portée à sa propre classe d'emballage et chaque nom d'animation est préfixé, donc deux héros sur la même page ne se battront pas ni les styles de votre thème Nous avons appris celui-là à la dure.

Vous aurez besoin du Plugin Addons Maître PRO installé aux côtés d'Elementor. Le Widget Builder et sa fonctionnalité d'importation sont inclus dans la version gratuite, c'est ainsi que plus de 30 000 sites l'exécutent déjà.

1. Pulseboard pour les produits SaaS et analytiques

Le classique split hero, copie à gauche et produit à droite, mais avec trois détails qui font arrêter les visiteurs Le graphique des revenus se dessine en charge avec un point d'impulsion se déplaçant le long de la ligne Deux cartes de statistiques flottent sur le tableau de bord sur un bob lent Et tout le visuel s'incline de quelques degrés vers votre curseur, ce qui fait une maquette plate lue comme un objet.

La ligne à l'épreuve sociale en dessous compte jusqu'à votre numéro (par défaut : 4 700 équipes).Vous tapez un numéro simple dans le panneau et l'animation gère le reste C'est la mise en page à choisir si votre produit a un écran qui vaut la peine d'être affiché : outils d'analyse, CRM, tableaux de bord, systèmes de réservation Si votre produit ne fait pas bien de démonstration dans une capture d'écran, regardez plutôt Offbeat (#5), car cette mise en page vit ou meurt sur cette image de droite.

Vous pouvez modifier: Titre en 4 parties (le mot d'accent souligné est son propre champ), texte de badge, paragraphe, 2 boutons avec commandes de lien complètes, numéro de compte à rebours, texte d'épreuve, 3 images, 6 couleurs.

2. Alpenrute pour les voyages, les visites et les marques de plein air

Un panorama de montagne plein écran construit à partir de trois couches d'images distinctes Déplacez votre souris et les couches se déplacent à des vitesses différentes C'est une vraie profondeur, pas une photo plate avec du texte sur le dessus Les nuages dérivent sur des boucles de 55 et 90 secondes, et un téléscripteur d'altitude vertical sur la droite compte de 0 à 2 847 m au fur et à mesure que la page se charge Il y a même un petit randonneur avec une lampe frontale clignotante sur la crête avant Personne n'a besoin du randonneur Tout le monde se souvient du randonneur.

Parce que le paysage provient de trois champs d'images, vous pouvez échanger les montagnes contre vos propres œuvres d'art en couches (dunes, littoral, horizon de la ville) et garder la parallaxe La rangée des faits (27 itinéraires /8 randonneurs max /19 ans) est de six champs modifiables, et c'est là que ce héros gagne la confiance : des numéros spécifiques au lieu d'adjectifs Le meilleur ajustement : les entreprises de trekking, les voyagistes, les sites des parcs nationaux, toute marque vendant un lieu plutôt qu'un produit.

Vous pouvez modifier: Titre à 2 lignes, sourcil, paragraphe, 2 boutons + liens, numéro d'altitude et étiquette, 3 paires de faits, 4 images de paysages, 4 couleurs (l'ensemble du dégradé du ciel se re-teint à partir d'une couleur de base).

3. Ember & Oak pour les cafés, cafés et restaurants

Fond d'espresso sombre, titre empattement avec un mot d'accent ambré italique, et la pièce signature : un anneau de lecture de texte “PEMALL BATCH · TORRÉFIÉ TOUS LES JEUDIS · ORIGINE UNIQUE” qui tourne lentement autour d'une photo au latte descendante tandis que la vapeur monte de la tasse Un sac de café se penche dans le coin et se redresse lorsqu'il est plané En bas, un chapiteau d'origine (Yirgacheffe, Huila, Sidra...) défile en boucle et s'arrête en vol stationnaire.

Le texte de l'anneau est un champ univoque, donc une boulangerie écrit“SOURDOUGH · BAKED AT 5 AM · NO SHORTCUTS” et tout le transfert de personnalité Idem pour le chapiteau : un champ, imprimé deux fois en interne pour que la boucle ne montre jamais de couture Travaux pour tout métier alimentaire où l'artisanat est le pitch roasteries, boulangeries, brasseries, restaurants de la ferme à la table.

Vous pouvez modifier: Titre en 3 parties avec mot d'accent, paragraphe, note de prix, 2 boutons + liens, texte en anneau, texte de chapiteau, 2 images, 5 couleurs.

4. Atelier Norr : marques de mode et e-commerce haut de gamme

Le design le plus silencieux de l'ensemble, et le plus éditorial Deux mots surdimensionnés (QUIET / TAILORING par défaut) chevauchent un cadre de portrait arqué, chaque mot s'essuyant d'un bord coupé en charge Survolez le portrait et il passe à un deuxième regard tandis que la légende en dessous passe de “01/02 The Longline Coat à 002/02 The Drape Dress” deux-image hoverap est l'ensemble en miniature : retenu, mais vivant.

Seulement trois couleurs à gérer (toile, encre, accent sage) car la puissance du design est la typographie et l'espace négatif plutôt que la palette Si votre marque photographie bien et que vous voulez que le site ressemble à un lookbook, c'est celui-là Mode, bijoux, céramique, meubles Si vous avez besoin de bachoter cinq propositions de valeur au-dessus du pli, il vous combattra, et il devrait.

Vous pouvez modifier: les deux mots principaux, étiquette de saison verticale, paragraphe, bouton + lien, indice de survol, 2 images de look avec 2 légendes, bande de pied de page, 3 couleurs.

5. Offbeat Studio pour agences créatives et studios

Cobalt, corail, et citron sur blanc cassé énergie de l'affiche du Bauhaus Le titre crie en majuscule avec un mot d'accent mis en surbrillance qui obtient un trait de balayage jaune une demi-seconde après le chargement En dessous, trois tuiles de portefeuille reposent légèrement en rotation comme des impressions sur une table ; chacune se redresse, se soulève, et s'incline vers votre curseur en 3 D sur le vol stationnaire Une autocollant RÉSERVATION POUR Q4” tourne paresseusement au-dessus du collage.

L'appel à l'action circulaire est la pièce avec laquelle les gens jouent C'est magnétique: il suit votre curseur à l'intérieur de son rayon et recule quand vous partez Chaque tuile a son propre champ de lien, donc le collage se double d'un mini portfolio avec trois études de cas cliquables directement du héros Pour les agences, designers, photographes, toute personne dont le travail est le terrain.

Vous pouvez modifier: 3 étiquettes de service, kicker, titre en 5 parties (mot accent séparé), paragraphe, bouton magnétique + lien, 3 tuiles avec 3 liens, texte autocollant, chapiteau client, 5 couleurs.

6. Forge Athletics pour les gymnases et les marques de fitness

Charbon et vert volt, type majuscule condensé, et un titre qui claque dans : chaque ligne atterrit avec un claquement asymétrique au lieu d'un fondu poli La ligne deux est tracée au lieu d'être remplie, la ligne trois prend la couleur volt Derrière tout, un mot fantôme géant (FORGE) dérive contre votre parchemin L'image de l'athlète se trouve dans un cadre de parallélogramme incliné avec une barre oblique volt coupant la disposition en diagonale.

Les statistiques comptent en bas : 14 plateformes, 31 classes, 24 membres par coach max Remarquez ce que fait ce dernier numéro. “Membres par coach, max” est une promesse, pas une vantardise, et c'est le genre de ligne qui remplit les sessions d'intro Swap the ghost word for your gym's name in one field Construit pour les gym de force, les boîtes CrossFit, les studios d'arts martiaux, et les coachs dont la marque est l'intensité.

Vous pouvez modifier: Titre 3 lignes, sourcil, paragraphe, mot fantôme, étiquette verticale, 2 boutons + liens, 3 paires de statistiques, image d'athlète, 4 couleurs.

7. Wiggly Minds : applications pour enfants, écoles et éducation

Pastels de bonbons, type arrondi, et trois mascottes de blob : une lisant un livre, une tenant un crayon, une agitant une baguette étoilée Ils entrent avec un ressort, bougent doucement, et se détournent de votre curseur en se déplaçant Les étoiles scintillent sur le fond, un gribouillis jaune se dessine sous le mot d'accent incliné, et le bouton principal s'écrase comme de la gelée lorsqu'on appuie sur Une vague blanche ferme la section pour qu'elle s'écoule dans tout ce qui vient ensuite.

La disposition centrée maintient les parents (les acheteurs réels) sur un chemin clair : badge de tranche d'âge, promesse, un paragraphe qui répond à “is cette heure d'écran je vais regretter ?”, ligne de confiance avec la note App Store Les mascottes sont trois champs d'image Swap dans vos propres personnages et le comportement rebond, ombre, et curseur timide s'appliquent automatiquement Pour l'apprentissage des applications, des garderies, des clubs enfants, des pratiques pédiatriques, et des marques de jouets.

Vous pouvez modifier: titre avec mot d'accent incliné, badge, paragraphe, 2 boutons + liens, ligne de confiance, 3 images de mascotte, 6 couleurs.

8. Studio Meridian pour architectes, architectes d'intérieur et portfolios

Discipline de grille suisse : une méta colonne (pratique, fondée, projets sur place), un mince titre de 300 poids avec un mot souligné en brique, et une grande photo de projet qui révèle avec une lingette Un rideau de couleur papier glisse et l'image se dépose à partir d'un léger zoom sur une seconde complète Le détail sur lequel les gens nous envoient un courriel est le plan d'étage dans la barre latérale, qui se dessine « Les murs d'abord, puis les balançoires de porte, puis les étiquettes de pièce s'estompent. » C'est une animation SVG qui est livrée à l'intérieur de l'image de démonstration, sans plugin impliqué.

Vingt-cinq champs modifiables en font le héros le plus riche en données des dix Chaque méta-étiquette, les deux légendes, même les coordonnées dans la règle du bas Trois couleurs seulement, et c'est délibéré : le graphite, le papier et la brique est un système, et les systèmes sont ce que ce public respecte Pour les cabinets d'architecture, les studios d'intérieur, les ingénieurs en structure, et tout portefeuille où la retenue signale la compétence.

Vous pouvez modifier: Titre en 5 parties, paragraphe, bouton + lien texte avec URL, 3 méta paires, photo + légende, plan d'étage + légende, règle de coordonnées, 3 couleurs.

9. Lowtone pour les festivals, concerts et pages d'événements

Le design le plus fort ici, et il le gagne Un mot-symbole géant se divise au milieu du mot en un gradient orange-violet, un orbe lumineux dérive derrière le contenu et s'éloigne de votre curseur, et le long du bas s'étend sur toute la largeur égaliseur: des dizaines de mesures, chacune s'animant sur son propre rythme pour que la bande ne boucle jamais visiblement Les barres sont générées par le propre script du widget et tirent leur dégradé des couleurs de votre onglet Style, donc recolorer le festival recolore le son.

Trois lignes de programmation (FRI / SAT /SUN) portent chacune leur propre étiquette, liste d'actes et lien, de sorte que vous pouvez envoyer chaque jour à sa propre page de programmation Le dégradé est constitué de trois jeux de couleurs distincts dans l'onglet Style Changez-les et le mot-symbole, les boutons, la lueur et l'égaliseur suivent tous Pour les festivals, les lieux, les soirées club, les conférences avec têtes d'affiche et les lancements d'albums.

Vous pouvez modifier: mot-symbole divisé, date, emplacement, paragraphe, 3 lignes de programmation avec 3 liens, 2 boutons + liens, image orbe, 5 couleurs, y compris les 3 arrêts dégradés.

10. Måne pour les marques de soins de la peau, de beauté et de bien-être

Les noisettes brumeuses de lavande et de pêche s'estompent et dérivent derrière un titre en empattement dont la ligne italique, “le poste de nuit.”, obtient un soulignement dégradé doux qui fleurit vers l'extérieur La bouteille de produit flotte doucement au centre d'un anneau en pointillés, et trois badges d'ingrédients (2 % rétinien, 5 % ferment d'avoine, 0 % de parfum) orbite il sur une boucle de 26 secondes, en contre-rotation pour qu'ils restent debout tout le long du parcours.

Ces badges sont le jeu de conversion Les revendications en pourcentage sont ce que les acheteurs de soins de la peau recherchent, et ici, ils entourent littéralement le produit Les six valeurs et étiquettes des badges sont des champs en texte brut La rangée de revendications (dermatologue testé · parfum libre · verre recyclable) complète l'histoire de confiance Pour les soins de la peau, les suppléments, les bougies, les soins des cheveux n'importe quel produit où la liste des ingrédients est l'argument.

Vous pouvez modifier: Titre en 2 parties, sourcil, paragraphe, 2 boutons + liens, 3 revendications, 3 paires de badges en orbite, image de bouteille, 4 couleurs.

11. Loose Ends : portefeuilles, studios et pages de lancement qui ont besoin d'une touche

Celui-ci est nouveau, et c'est la chose la plus ambitieuse que nous ayons poussée à travers le Widget Builder jusqu'à présent : un titre en plein écran assis dans l'œil d'un vortex de mille particules, simulées sur le GPU du visiteur en temps réel. Déplacez la souris et les parties de l'essaim autour du curseur, puis recule La caméra dérive un peu aussi, ce qui fait lire le champ comme un espace plutôt que comme une vidéo de fond Le titre se décode avec un brouillage de personnage en charge, le bouton primaire porte un balayage de lumière lent, et une couche film-grain empêche le fond sombre de se bander.

Les particules ne sont pas un regard fixe Une baisse dans l'onglet Style fait basculer le champ entre Brins (filaments tourbillonnants colorés), Neige (dérive blanche lente), Étoiles (un champ d'étoiles presque immobile), et Univers (longs wisps en espace profond).Quatre curseurs contrôlent la densité (100 à 2 000 particules), la taille, la profondeur et la force avec laquelle l'essaim réagit à la souris Il existe également un contrôle d'alignement qui déplace toute la pile de contenu à gauche, au centre ou à droite, de sorte que le même widget fonctionne comme un héros éditorial aligné à gauche ou une page de démarrage centrée Une note honnête : le moteur 3 D se charge à partir d'un CDN, environ 1,2 Mo mis en cache après la première visite, et fonctionne sur WebGPU dans Chrome et Edge avec un repli WebGL2 partout ailleurs Si cette demande échoue, le héros ne restitue comme une section stylisée normale et ne se brise pas la scène.

Vous pouvez modifier: texte de la pilule, sourcil, titre, slogan, 2 boutons avec commandes de lien complètes, signal de défilement, 3 textes de la barre inférieure, alignement du contenu (gauche /centre /droite), type de particule (brins /neige /étoiles /univers), densité, taille, profondeur et curseurs de réaction de la souris, 5 couleurs.

Comment importer un modèle de section héros dans Elementor (étape par étape)

L'ensemble du processus prend environ deux minutes par widget Vous avez besoin de WordPress avec Élémenteur et le Additions maîtres Plugin PRO actif Voici le workflow exact, screenshotté à partir d'une réelle importation du héros du festival de musique.

Étape 1 : décompressez le téléchargement

Double-cliquez sur la fermeture éclair (ici, music-festival-hero.zip).À l'intérieur, vous trouverez trois choses : le fichier widget (widget-music-festival.json), un demo-images dossier avec PNG prêts à télécharger, et un README.txt cela vous indique à quelle image appartient dans quel champ Il y a aussi un svg-originals dossier plus sur ça dans la FAQ.

Étape 2 : Importez le JSON dans le Widget Builder

Dans votre administrateur WordPress, accédez à Modules complémentaires principaux → Créateur de widgets et cliquez Importer Widget. Faites glisser le .json fichier dans la boîte de dialogue, ou cliquez sur Parcourir les fichiers Seul le JSON va ici Les images viennent plus tard, par la médiathèque normale.

Étape 3 : Vérifiez le widget et enregistrez

Le widget s'ouvre dans le constructeur avec tout ce qui est déjà câblé : les sections de contenu à gauche, les onglets HTML/CSS/JS derrière les onglets et une barre latérale Documentation répertoriant chaque jeton de champ Vous n'avez pas besoin d'en toucher. Il suffit de frapper Enregistrer Paramètres. Si vous êtes curieux de savoir comment les champs se connectent au code, le Guide des paramètres du constructeur de widgets explique le système de jetons.

Étape 4 : Faites-le glisser dans votre page

Ouvrez n'importe quelle page avec Elementor Votre nouveau widget apparaît dans le panneau ci-dessous Favoris; chercher son nom si vous ne le repérez pas Faites-le glisser dans un conteneur Un conseil pour vous : réglez celui du conteneur Largeur du contenu jusqu'à la pleine largeur ainsi, des designs bord à bord comme les héros du festival et du voyage peuvent réellement atteindre les limites.

Étape 5 : Modifier le contenu et les liens

Cliquez sur le widget et l'onglet Contenu répertorie chaque pièce modifiable, regroupée de la manière dont la conception est regroupée : Zone de contenu, Lignes de programmation, Boutons, Images Tapez sur n'importe quel texte et les mises à jour de prévisualisation en direct Chaque bouton et ligne liée a un contrôle de lien Elementor approprié Collez votre URL, puis appuyez sur la vitesse pour basculer “open dans une nouvelle fenêtre” et “nofollow”.

Étape 6 : Téléchargez les images de démonstration

Dans la section Images, cliquez sur chaque champ et téléchargez le fichier correspondant à partir du demo-images dossier. Le README les mappe si un widget en a plusieurs Les PNGs de démonstration sont exportés à une résolution 2 x, ils restent donc nets sur les écrans de la rétine Swap dans vos propres photos à tout moment ; le champ est un sélecteur de média WordPress standard. Puis Publier. Fait.

Pour restyle : ouvrez le Onglet Style. Chaque héros expose sa palette complète comme une poignée de commandes de couleurs, et chaque nuance dérivée (états de vol stationnaire, lueurs, bordures, dégradés) recalcule à partir de ceux-là Vous ne pouvez pas à moitié recolorer ces dessins, ce qui est exactement le point.

FAQ

Les 10 sections héros sont gratuites pour les projets personnels et commerciaux Construit et testé par l'équipe Master Addons sur Elementor avec Master Addons v3. x. Questions ou une demande de widget ? Dites-le-nous dans les commentaires La collection grandit en fonction de ce que les gens demandent.