Modifier un héros

Lorsque vous ouvrez un héros existant, vous aurez accès à différentes sections qui vous permettent de personnaliser son apparence et son contenu. Chaque élément peut être désactivé si vous ne souhaitez pas qu'il soit affiché.

⚠️ Important : Chaque héros est complètement indépendant des autres. Si vous souhaitez faire une modification qui affecte tous les héros, il faut effectuer la modification manuellement sur chacun d’eux.

À n'importe quel moment, vous pouvez visualiser le rendu du héros à droite de l'écran. Il est possible de vérifier son format sur tous les types d'écrans afin de s'assurer qu'il est parfait, peu importe la taille de l'écran.

Voici un aperçu détaillé de chaque section.

1. Nom et langue

Commencez par définir le nom de votre héros ainsi que la langue dans laquelle il sera affiché.

Ces options sont disponibles complètement en haut. Il suffit de cliquer sur le nom actuel pour pouvoir le modifier.

Le nom et la langue choisie ne seront pas visibles aux visiteurs de votre site. Ils sont utilisés lorsque vous ajoutez une bannière à une page pour n’afficher que les bannières de la même langue.

2. Paramètres de base

Cette première section présente quelques options qui auront un impact sur tous les éléments par la suite. La taille de la bannière modifie la hauteur qu’elle aura lorsque quelqu’un ouvre votre site.

Si vous n’êtes pas certain de la meilleure taille pour vous, sachez que les bannières principales visibles sur la page d’accueil ont généralement une taille variant de moyenne à énorme. Les petites bannières visibles sur les autres pages sont généralement petites ou moyennes.
L’option minuscule est généralement réservée aux sites ayant deux bannières sur la page d’accueil.

Vous avez déjà une bannière de faite ? Choisissez l’option Image d’arrière-plan, elle bloquera tous les réglages et vous permettra d’ajouter directement votre image de bannière.

3. Contenu du texte

Ajustez le texte affiché sur votre bannière. Par défaut, les bannières ont deux boîtes de texte indépendantes pour lesquelles vous pouvez choisir la taille du texte, la couleur d’arrière-plan et bien plus.

Ces options ne vous permettent pas de recréer exactement ce que vous aviez en tête ? N’hésitez pas à utiliser le mode avancé. Celui-ci vous permet d’écrire directement le code HTML qui sera affiché sur votre bannière. Vous avez accès aux classes CSS de la bibliothèque Tailwind afin de pouvoir modifier chaque détail de l’apparence.

4. Boutons

Ajoutez un ou plusieurs boutons d’action. Ils utilisent l'apparence choisie dans la section aspect visuel.

Vous pouvez :

• Choisir une icône
• Définir le texte du bouton
• Saisir l’URL de redirection

💡 Astuce : Pour rediriger vers une page interne de votre site, il suffit d’entrer “/” suivi du nom de la page (ex. /contact).

5. Flottant

Le texte flottant est une petite zone de texte qui s’affiche dans un coin de la bannière.

Il peut être associé à une image, par exemple un trophée, une médaille ou un logo distinctif.

6. Contexte

Cette section permet de modifier tous les détails de l’arrière-plan. Trois types de fonds sont disponibles :

Vidéo
Intégrez une vidéo comme fond de votre bannière pour un rendu dynamique et immersif.
Pour ce faire, il suffit de déposer votre vidéo dans la bibliothèque de médias, de copier l’URL et de la placer dans la boîte URL de la vidéo.

Diaporama
Activez le mode diaporama pour afficher un défilement d’images en arrière-plan, créant un effet visuel attrayant et varié.

Pour ajouter des images, il faut les téléverser dans la bibliothèque de médias et les sélectionner dans la section prévue. Les boutons pagination et navigation permettent respectivement d’ajouter des marques au bas de la bannière (indiquant à quelle diapositive le défilement est rendu) et d’ajouter des flèches sur les côtés pour faire défiler les pages manuellement.

Arrière-plan statique
Vous pouvez aussi opter pour une image fixe en arrière-plan si vous préférez un visuel simple et statique. Il suffit d’ajouter l’image à la bibliothèque de médias et de la sélectionner dans la case prévue à cet effet.

7. Logo

Ajoutez un logo pour renforcer l’identité visuelle de votre marque ou de votre agence. Vous pouvez aussi utiliser cette section pour ajouter une autre image qui pourrait être utile.

8. Photo de profil

Importez et positionnez une photo de profil dans votre bannière.

⚠️ Important : La taille choisie pour la photo doit correspondre à la taille de la bannière afin d’éviter les déformations.

Trois modes sont disponibles : 

• Unique : une seule photo d'un courtier.
• Multiple : permet d'ajouter autant de photos que requises les unes à côté des autres.
• Chaque côté : permet d'ajouter une photo à chaque extrémité de la bannière.

Si vous avez des questions, vous pouvez nous rejoindre au supportwebsite@urbanimmersive.com