Tout sur les images WordPress Hero, de l'idée à la mise en œuvre

L'une des tendances les plus importantes de nos jours dans la conception Web est la conception d'image de héros WordPress. Ces en-têtes spéciaux sont souvent appelés image de héros, curseur de héros, bannière, en-tête vidéo ou carrousel. Faire une bonne première impression est extrêmement important. Vous n'obtenez qu'un seul coup avec la première impression et vous n'avez que quelques secondes pour attirer l'attention de vos visiteurs .

Dans cet article, je vais vous présenter certaines des meilleures pratiques, des exemples d'images de héros et fournir des ressources incroyables pour vous aider à créer une image de héros WordPress efficace pour votre site Web.

Pourquoi pouvez-vous utiliser une image de héros ?

Lorsque vous naviguez sur le Web, vous pouvez rencontrer de nombreuses images de héros avec des objectifs différents. J'ai rassemblé quelques cas où vous pouvez utiliser une image de héros. Voyons-les.

• Mettez votre produit en valeur . La meilleure façon de mettre en valeur un produit est une bonne image de héros sur votre page. Les visiteurs voient cette image en premier et peuvent lire de petites informations sur votre produit. Mettez un lien sur votre page Acheter maintenant et vos visiteurs peuvent acheter instantanément.
• Partagez des informations . Vous pouvez utiliser une image de héros pour partager des informations sur votre produit ou vos services d'une autre manière. Vous pouvez ajouter du texte sur l'image, vous pouvez également ajouter une vidéo qui donne des informations aux visiteurs.
• Présentez les dernières nouvelles . Voulez-vous présenter votre dernier article ou un article important pour les visiteurs ? Mettez le titre et une petite description sur l'image, un bouton avec le lien du post, et je suis sûr que si c'est intéressant, le visiteur cliquera dessus pour en savoir plus.
• Élément de conception . Une image de héros peut être un excellent élément de conception de votre page, elle est au centre de l'attention, égaie votre page et obtient généralement une interaction avec les visiteurs.
• Créer une émotion . L'émotion peut être un facteur important. Évoquer la bonne émotion peut instantanément établir la confiance avec vos visiteurs.

Comment choisir une image de héros WordPress ?

Lorsque vous choisissez une image principale, il est important de garder à l'esprit que votre image principale doit non seulement être belle, mais que son style doit convenir à l'ensemble de votre site Web . Si vous utilisez des images de héros émotionnelles, pensez à l'ambiance de votre page. Les images peuvent être en pleine page, mais des images plus petites peuvent également être présentées sous la barre de navigation. Ces grandes images de bannières sont une tendance dans la conception de sites Web et précèdent un aperçu de votre entreprise. Vous devez donc choisir une image appropriée pour votre page.

Où trouver les meilleures ressources gratuites pour une image de héros ?

De bonnes images sont un élément clé d'une grande image de héros, mais trouver des images peut être difficile. Voici ma collection des meilleurs sites Web pour trouver des photos et des vidéos gratuites.

• Unsplash – Photos haute résolution
• Pexels – Les meilleures photos gratuites en un seul endroit
• Picjumbo – Images de stock de photos totalement gratuites
• Kaboompics - Un endroit idéal pour obtenir des photos gratuites à couper le souffle pour des projets professionnels ou personnels
• Death to the Stock Photo – Photos gratuites par e-mail tous les mois
• Coverr - De belles vidéos gratuites pour votre page d'accueil
• Pikwizard – Des photos gratuites pour tous vos besoins créatifs

Que doit contenir une bonne image de héros ?

Une image de héros WordPress présente un aperçu de votre service ou produit. Il peut s'agir d'une simple image, mais elle a plus de succès si vous utilisez le contenu dessus, comme un CTA. Voyons les 4 parties importantes de ce que doit contenir une image de héros.

Appel à l'action

Le bouton CTA est l'action que vous voulez que votre visiteur entreprenne, donc votre objectif avec l'image du héros est de persuader les visiteurs d'entreprendre cette action . Peu importe si votre objectif est d'augmenter les ventes ou de générer des prospects par e-mail. Mais n'oubliez pas que vous devez être clair sur l'action que vous souhaitez que le visiteur entreprenne et que cela soit aussi simple que possible. D'accord, mais comment commencer ? Commencez par le CTA et travaillez en arrière. Ce sera tellement plus facile si vous connaissez exactement votre objectif.

Bonne copie

Le premier titre que votre visiteur voit est la copie la plus importante que vous écrivez sur votre site Web. Rédiger une bonne copie Web n'est pas facile et nécessite des compétences pour bien faire les choses. Certains des meilleurs rédacteurs passeront des semaines à rédiger le titre. Votre objectif est de communiquer votre valeur et d'amener le visiteur à interagir sur votre site Web .

Fond de qualité

L'imagerie est probablement la partie la plus importante de l'image du héros . C'est un outil puissant pour vous aider à communiquer et à différencier votre site Web. Votre image de héros doit contenir des images, des vidéos ou des graphiques qui attirent l'attention et captivent votre public. La plupart du temps, les images contextuelles transmettent votre message plus efficacement, les images non contextuelles ne complètent pas le message avec des informations supplémentaires.

Impacter

Il s'agit de créer ce moment WOW. Les meilleures images de héros atteignent un équilibre entre capter l'attention du lecteur et fournir une quantité adéquate d'informations utiles.

Par exemple, les animations sont idéales pour rendre la conception d'un site Web inoubliable et attirer l'attention de vos visiteurs. La clé de l'animation en tant qu'outil de conception est la modération. Il existe de nombreuses façons d'utiliser l'animation pour améliorer l'expérience utilisateur dans Smart Slider 3 : animation de calque, animation de texte fractionné ou interaction mémorable.

Comment créer une image de héros WordPress facilement ?

Maintenant, vous voudrez peut-être mettre une image de héros sur votre page, mais vous ne savez pas comment le faire. Le mieux est de rechercher un plugin dans lequel vous pouvez facilement créer une section héros pour votre site. Avec un plugin dans le cas idéal, vous pouvez mettre un texte ou un bouton sur l'image, et vous pouvez le publier où vous voulez. Smart Slider est un excellent plugin pour créer des images de héros.

Qu'est-ce que Smart Slider 3 ?

Smart Slider 3 est un plugin de curseur gratuit avec lequel vous pouvez facilement créer des curseurs, des images de héros et des blocs sans connaissances en codage. Avec l'éditeur glisser-déposer, vous pouvez créer le bloc que vous voulez et utiliser des calques comme l'en-tête ou le bouton. Il est entièrement réactif et lorsque vous êtes prêt, vous pouvez le publier avec un simple code court, avec Gutenberg ou avec un constructeur de page également.

Parce que Smart Slider 3 n'est pas seulement un plugin de curseur, vous pourrez facilement créer l'image de héros WordPress parfaite pour votre site Web. Quel que soit le type dont vous avez besoin, ils sont généralement situés en haut d'un site Web et ce sont les premières choses que les gens voient .

Créer un bloc héros

Le type de bloc est un type de curseur spécial de Smart Slider. Le bloc n'affiche qu'une seule diapositive, ce qui est un choix parfait pour créer une image de héros. Créer un bloc héros avec Smart Slider est très simple. Cliquez simplement sur le bouton vert Nouveau projet et créez un nouveau projet ou commencez avec un modèle prêt à l'emploi.

Ensuite, vous pouvez modifier votre bloc dans un éditeur visuel. Dans la version gratuite de Smart Slider, vous pouvez choisir parmi 7 couches, dans la version Pro, il existe 24 types de couches. Vous pouvez mettre un calque où vous voulez, changer sa couleur, sa taille ou mettre un lien dessus. De plus, vous avez la possibilité d'animer vos calques, ce qui peut attirer l'attention des visiteurs.

Pourquoi choisir Smart Slider pour créer des images de héros ?

• Faites glisser et déposez l'éditeur visuel . Avec Smart Slider, vous pouvez éditer vos images de héros WordPress comme vous l'aviez imaginé. L'éditeur glisser-déposer vous aide à créer un bloc héros en quelques minutes. Avec les paramètres réactifs, vous pouvez lui donner une belle apparence sur n'importe quel appareil.
• Animations & Effets . Dans la version Pro de Smart Slider 3, vous pouvez utiliser des animations et des effets pour égayer votre image de héros et attirer l'attention des visiteurs. Utilisez l'effet Ken Burns si vous souhaitez ajouter un mouvement à votre héros ou utilisez des animations de calque pour mettre en évidence le contenu.
• Sources dynamiques . Modifier dynamiquement le contenu de votre bloc héros ? C'est possible avec Smart Slider 3, il suffit de créer un curseur dynamique et d'utiliser des variables.
• Facile à publier . Vous pouvez facilement mettre un héros sur votre page d'accueil, utilisez simplement votre constructeur de page, le bloc Smart Slider Gutenberg ou le shortcode du slider. Comme alternative, vous pouvez utiliser le code PHP du slider et le mettre sur votre thème enfant.
• Convivial pour le référencement . Le référencement est crucial pour que les gens trouvent votre site Web. Dans Smart Slider, vous pouvez remplir les balises alt et vous pouvez ajouter du texte que les moteurs de recherche peuvent lire.