La section Bannière de Durable est disponible en plusieurs styles afin que vous puissiez correspondre à l'apparence et au ressenti de votre marque.
Voici comment ajouter et configurer une section Bannière dans votre éditeur de site web Durable :
Cliquez sur Ajouter une section +
Dans votre éditeur de page, sélectionnez Ajouter une section + en haut ou en bas de votre page.
Rechercher “Banner”
Tapez Banner dans la boîte de recherche.
Vous verrez des options telles que Bannière, Carrousel de bannière plein, Curseur d'images de bannière horizontal, Curseur double d'images de bannière, Grille bento de bannière, et plus encore.
Choisissez votre style de bannière
Cliquez sur le style que vous préférez pour l'ajouter à votre page.Durable insérera des exemples de titres, des sous-titres et des images de remplacement.
Bannière
Bannière
Utilisez la section Bannière lorsque vous souhaitez une image (ou vidéo) héroïque audacieuse et épurée avec un message clair et unique et un appel à l'action facultatif. C'est parfait pour :
Fort impact, texte minimal: Annonces de lancement, dévoilements de produits ou déclarations de marque où un titre percutant et l'arrière-plan portent l'histoire.
Concentrer l'attention: Orienter les visiteurs vers une action principale comme “Get Started” ou “Book Now” sans distractions visuelles.
Présentation homogène de la marque: Intégrer l'en-tête de votre page en une seule image principale immersive pour un rendu épuré et cohérent.
Onglet Contenu
C'est ici que vous modifiez le texte et décidez d'utiliser une image/vidéo de fond.
Slogan
Ligne d'accent facultative au-dessus de votre titre principal.
Cliquez sur Générer pour laisser Durable suggérer une courte phrase.
Titre
Votre message principal.
Cliquez sur Régénérer pour essayer différents titres ou tapez le vôtre.
Sous-texte
Détails de soutien sous votre titre.
Cliquez sur Régénérer pour obtenir de nouvelles suggestions de texte ou entrez un texte personnalisé.
Commutateur d'image
Activez l'image (image/vidéo de fond) si vous souhaitez un média derrière votre texte.
Si cette option est activée, vous verrez le sélecteur Image/Vidéo ci-dessous.
Boutons
Activez les boutons pour ajouter un appel à l'action.
Cliquez sur Bouton Ajouter +, puis définissez le Libellé et le Type de lien (page, section, e-mail, téléphone ou URL externe).
Onglet Style
Affinez l'apparence, la disposition et le comportement de l'arrière-plan et du texte de votre bannière.
Couleurs
Cliquez sur Modifier pour choisir vos couleurs d'arrière-plan et de texte à partir de votre palette de thèmes ou entrez un code hexadécimal personnalisé.
Image/vidéo d'arrière-plan
Si activé dans le contenu, vous verrez cette option ici.
Les curseurs de position vous permettent de déplacer l'image horizontalement et verticalement.
Superposition Le menu déroulant permet d'ajuster le degré d'obscurité ou de clarté de la superposition afin d'améliorer la lisibilité du texte.
Flou image/vidéo applique un effet d'adoucissement derrière votre texte.
Taille du texte
En-tête: choisissez Petit, Moyen, Grand ou Très grand.
Texte secondaire: choisissez Petit, Moyen ou Grand.
Espacement
Haut et Bas padding (Petit, Moyen, Grand).
Hauteur min.: sélectionnez Contenu (s'adapte au texte) ou Écran (remplit la fenêtre d'affichage du navigateur).
Alignement horizontal
Alignez votre texte à gauche, au centre ou à droite dans la bannière.
Diviseur
Activez on pour ajouter un séparateur décoratif en bas de la bannière (cliquez sur Modifier pour choisir un style).
Bordure
Activez on pour envelopper la bannière dans un contour.
Animations
Choisissez comment les éléments de la bannière apparaissent lors du défilement : Depuis le thème (Fondu enchaîné), Fondu, Zoom ou Diapositive.
Combiner avec l'en-tête
Activez on pour intégrer parfaitement l'arrière-plan de la bannière dans l'en-tête de votre site.
Carrousel de bannières complet
Carrousel de bannières complet
Optez pour Carousel de Bannière Complet lorsque vous avez plusieurs messages clés ou visuels que vous souhaitez présenter en séquence. Les scénarios idéaux incluent :
Mise en avant des fonctionnalités: Faisant défiler les avantages des produits, les offres de services ou des extraits d'études de cas, chacun avec son propre titre et son texte secondaire.
Narration en chapitres: Raconter un récit en plusieurs étapes, par exemple “Plan → Build → Grow”, chaque diapositive couvrant une étape.
Maximiser l'utilisation de l'espace: Utiliser des diapositives en pleine largeur pour garder votre bannière principale dynamique et attrayante, surtout lorsque vous avez 3–5 visuels percutants à partager.
Onglet Contenu
Utilisez cet onglet pour modifier le texte de votre carrousel, choisir des images et activer les boutons.
Slogan
Une brève ligne d'accentuation au-dessus de votre titre.
Cliquez sur Générer pour suggérer automatiquement une courte phrase.
Titre
Le message principal de votre carrousel rotatif.
Cliquez sur Régénérer pour essayer de nouvelles idées de titres.
Sous-texte
Détail de soutien sous le titre.
Cliquez sur Régénérer pour de nouvelles suggestions ou entrez les vôtres.
Images du carrousel
Glisser-déposer pour réorganiser jusqu'à 5 diapositives.
Cliquez sur l'icône en forme de crayon de n'importe quelle diapositive pour modifier son image, sa légende ou son texte alternatif.
Cliquez sur l’icône de corbeille pour supprimer une diapositive.
Boutons
Activez on pour afficher un bouton d'appel à l'action sous votre carrousel.
Cliquez sur le bouton Ajouter +, puis définissez votre Libellé et Type de lien (page, section, e-mail, téléphone ou URL externe).
Onglet Style
Ajustez l'apparence et le comportement des images, du texte et de la mise en page de votre carrousel.
Couleurs
Cliquez sur Modifier pour choisir vos couleurs de fond et de texte à partir de votre thème ou palette personnalisée.
Style du bouton
Cliquez sur Changer pour choisir parmi les styles de boutons prédéfinis de Durable (rempli, contour, pilule, etc.).
Style de l'image
Superposition : Ajuster la superposition d'obscurité/luminosité sur chaque diapositive.
Flou d'image: Appliquez un léger flou derrière le texte pour améliorer la lisibilité.
Fondu: Activez pour appliquer un fondu enchaîné subtil entre les diapositives.
Taille du texte
En-tête : choisissez Petit, Moyen, Grand ou Très grand.
Texte secondaire: choisissez Petit, Moyen, ou Grand.
Espacement
Haut et Bas rembourrage : Petit, Moyen, Grand.
Hauteur min.: Contenu (s'adapte au texte) ou Écran (remplit la fenêtre d'affichage du visiteur).
Alignement du contenu
Alignez le texte et les boutons à gauche, au centre ou à droite sur le carrousel.
Diviseur
Activez on pour ajouter une forme décorative entre votre carrousel et la section suivante.
Bordure
Activez on pour entourer chaque diapositive d'un contour subtil.
Animations
Sélectionnez comment les diapositives s'animent (À partir du thème, Fondu, Glisser, Zoom).
Combiner avec l'en-tête
Activez on pour intégrer harmonieusement la première diapositive du carrousel avec l'en-tête de votre site pour un effet de style héroïque.
Curseur d'images de bannière (horizontal)
Curseur d'images de bannière (horizontal)
Choisissez le style Slider d'images en bannière horizontal pour un carrousel défilant latéralement qui mélange des images et du texte dans une fenêtre d'affichage plus compacte. Idéal pour :
Exploration visuelle: Permettre aux utilisateurs de faire glisser ou de cliquer pour parcourir une galerie de 6–10 images—idéal pour les portfolios, les témoignages clients ou les galeries avant-&-après.
Messages superposés: Superposer des titres concis et des CTAs sur chaque diapositive, tout en gardant la hauteur du slider modérée pour un accès plus rapide à la page.
Découverte interactive: Encourager l'engagement des utilisateurs grâce à des commandes de défilement manuelles, idéal lorsque les visiteurs ont besoin de parcourir les options à leur propre rythme.
Onglet Contenu
C'est ici que vous gérez le texte, les images et les boutons de votre diaporama.
Slogan
Une courte ligne d'accentuation au-dessus de votre titre.
Cliquez sur Générer pour des slogans suggérés par l'IA.
Titre
Le message principal qui apparaît sur votre curseur.
Cliquez sur Régénérer pour essayer de nouvelles idées de titres.
Sous-texte
Texte de soutien sous le titre.
Cliquez sur Régénérer pour actualiser la suggestion ou tapez la vôtre.
Images du carrousel
Glissez-déposez jusqu'à 10 images dans la liste pour définir vos diapositives.
Cliquez sur l'✎ icône d'édition d'une diapositive pour remplacer son image, mettre à jour le texte alternatif ou modifier la légende.
Cliquez sur 🗑️ l'icône de la corbeille pour supprimer une diapositive indésirable.
Pour en ajouter davantage, cliquez sur Ajouter une image +.
Boutons
Activez on pour afficher un bouton d'appel à l'action sous votre curseur.
Cliquez sur Ajouter +, puis spécifiez:
Libellé (p. ex. “Explore Our Services”)
Type de lien (section, page, URL externe, téléphone, ou email)
Conseil : Gardez les libellés des boutons concis pour préserver l'équilibre visuel.
2. Onglet Style
Utilisez ces contrôles pour affiner l'apparence et la convivialité de votre curseur.
Couleurs
Cliquez sur Changer pour sélectionner les couleurs de fond, de texte et de bouton à partir de votre thème ou d'une palette personnalisée.
Style du bouton
Cliquez sur Modifier pour choisir la forme (remplie, contour, pilule) et le comportement au survol.
Vitesse du carrousel
Sélectionnez la vitesse de rotation automatique des diapositives : Lent, Normal ou Rapide.
Mise en page
Position du carrousel : Choisissez si les images défilent horizontalement (défilement latéral) ou verticalement (de haut en bas).
Alignement du contenu: Alignez le texte et les boutons à gauche, au centre, ou à droite sur les diapositives.
Taille du texte
En-tête : choisissez Petit, Moyen, Grand ou Très grand.
Sous-texte: choisissez Petit, Moyen ou Grand.
Coins arrondis
Appliquer des rayons d'angle à chaque diapositive (Aucun, Petit, Moyen, Grand ou Par défaut du thème).
Espacement
Haut et Bas rembourrage : Petit, Moyen ou Grand.
Hauteur min.: Contenu (hauteur automatique) ou Écran (hauteur complète de la fenêtre d'affichage).
Animations
Choisissez comment les diapositives s'animent : Depuis le thème, Fondu enchaîné, Glisser, ou Zoom.
Séparateur
Activez on pour insérer un séparateur SVG décoratif sous le curseur.
Frontière
Activez on pour ajouter un contour subtil autour de chaque diapositive.
Astuce pro : Une vitesse de défilement automatique modérée avec un simple bouton “Explore” produit souvent le meilleur engagement.
Curseur de bannière à double image (vertical)
Curseur de bannière à double image (vertical)
Utilisez ce style lorsque vous souhaitez présenter deux images côte à côte dans chaque diapositive, avec un titre et un sous-texte superposés, ainsi qu'un appel à l'action. Idéal pour :
Juxtaposition avant/après ou problème/solution de visuels.
Mise en évidence des fonctionnalités associées (p. ex. “On-site Support” à côté de “24/7 Monitoring”).
Maintenir la hauteur d'une hero-section tout en offrant aux visiteurs plusieurs images percutantes.
Onglet Contenu
Slogan (facultatif)
Texte court avec accent au-dessus de votre titre (« Partenaire informatique de confiance »).
Cliquez sur Générer pour obtenir des suggestions d'IA.
Titre
Message principal ("Support informatique fiable pour les entreprises de Burnaby").
Cliquez sur Régénérer pour essayer de nouveaux angles.
Sous-texte
Description en deux ou trois lignes sous le titre.
Exemple : « Autonomiser les entreprises de Burnaby avec des solutions informatiques fiables pour des opérations fluides et une efficacité accrue. »Associez-vous à P3Cloud Consulting aujourd'hui.
Images du carrousel
Jusqu'à 10 paires d'images ; chaque diapositive montre deux côte à côte.
Utilisez la poignée de glissement pour réorganiser, le crayon pour échanger, la corbeille pour supprimer, ou Ajouter une image + pour télécharger/sélectionner de nouvelles.
Boutons
Activez Ajouter un bouton.
Personnaliser le type de lien (section de la page, URL externe, téléphone, e-mail).
Modifier l'étiquette (« Obtenir un support informatique ») et la cible (« section Contact » ou lien externe).
Onglet Style
Couleurs
Cliquez sur Modifier pour sélectionner les couleurs de fond, de texte et de bouton à partir de votre thème ou d'une palette personnalisée.
Style du bouton
Cliquez sur Modifier pour choisir la forme (remplie, contour, pilule) et le comportement au survol.
Vitesse du carrousel
Sélectionnez la vitesse de rotation automatique des diapositives : Lent, Normal, ou Rapide.
Mise en page
Position du carrousel : Choisissez si les images défilent horizontalement (défilement latéral) ou verticalement (de haut en bas).
Alignement du contenu: Alignez le texte et les boutons Gauche, Centre, ou Droite sur les diapositives.
Taille du texte
En-tête : choisissez Petit, Moyen, Grand ou Très grand.
Sous-texte: choisissez Petit, Moyen ou Grand.
Coins arrondis
Appliquez des rayons de coin à chaque diapositive (Aucun, Petit, Moyen, Grand ou Défaut du thème).
Espacement
Haut et Bas padding : Petit, Moyen ou Grand.
Hauteur min.: Contenu (hauteur automatique) ou Écran (hauteur complète de la fenêtre d'affichage).
Animations
Choisissez comment les diapositives s'animent : Depuis le thème, Fondu enchaîné, Glissement ou Zoom.
Carrousel de bannières
Carrousel de bannières
Utilisez ce style lorsque vous souhaitez faire défiler plusieurs images en pleine largeur avec un seul titre et un sous-texte superposé, permettant aux visiteurs de faire défiler ou d'avancer automatiquement à travers vos messages principaux. Idéal pour :
Storytelling par étapes (p. ex., “Our Process” en 3 étapes)
Mise en avant des études de cas phares ou des réalisations de portfolio
Présentation d'offres de services diversifiées dans un seul hero compact
Onglet Contenu
Slogan (facultatif)
Découvrez notre expertise
Cliquez sur Générer pour des suggestions d'IA.
Titre
Appel principal (« Avancez avec une consultation stratégique en informatique »).
Cliquez sur Régénérer pour essayer une formulation différente.
Sous-texte
Description de soutien sous le titre.
Élevez le potentiel de votre entreprise avec des services de conseil en informatique experts adaptés à vos besoins uniques à Burnaby, BC.
Images du carrousel
Sélectionnez jusqu'à 10 images, chacune remplissant la moitié droite (ou la largeur complète sur mobile) en séquence.
Réorganisez via la poignée de glissement, échangez via l'icône de crayon, supprimez via la corbeille, ou Ajouter une image + pour télécharger/choisir de nouvelles.
Boutons
Basculer Ajouter un bouton pour faire apparaître un CTA (« Obtenir un support informatique »).
Personnalisez le type de lien (section de page, URL externe, téléphone, e-mail), le libellé et la cible.
Onglet Style
Couleurs
Changer l'accent pour les points de pagination et les surbrillances des boutons.
Mise en page
Alignement du contenu: choisissez un superposition à gauche, au centre ou à droite.
Taille du texte
En-tête: choisissez Petit, Moyen, Grand ou Très grand.
Texte secondaire: choisissez Petit, Moyen ou Grand.
Coins arrondis
Appliquer le rayon de thème (par exemple : Grand) à la carte superposée ou au masque d'image.
Espacement
Espacements Haut & Bas (Petit/Moyen/Grand) pour l'équilibre.
Animations
Style d'entrée (par exemple Du thème (Fondu enchaîné)) pour le titre et le sous-texte.
Bannière Bento Grille
Bannière Bento Grille
Utilisez Banner Bento Grid lorsque vous souhaitez une mise en page épurée à trois images qui équilibre un bloc fort de titre/sous-texte avec trois visuels d'accompagnement. Ce style est parfait pour:
Présentation de trois services clés : Présentez vos trois principales offres côte à côte.
Mise en valeur des études de cas: Donnez le même espace aux images de projet “before,” “during,” et “after”.
Mettre en avant les membres de l'équipe ou des témoignages : Associez chaque photo à un encart dans une grille unifiée.
Onglet Contenu
Slogan (optionnel)
Découvrez notre expertise
Cliquez sur Générer pour des suggestions d'IA.
Titre
Appel principal (« Avancez avec un conseil en informatique stratégique »).
Cliquez sur Regenerate pour essayer une formulation différente.
Sous-texte
Description de soutien sous le titre.
Exemple : « Élevez le potentiel de votre entreprise avec des services de conseil en informatique experts adaptés à vos besoins uniques à Burnaby, BC. »
Images du carrousel
Sélectionnez jusqu'à 10 images, chacune remplira la moitié droite (ou toute la largeur sur mobile) dans l'ordre.
Réorganiser via la poignée de glissement, échanger via l'icône de crayon, supprimer via la poubelle, ou Ajouter une image + pour télécharger/choisir de nouvelles.
Boutons
Activez Ajouter un bouton pour afficher un CTA (« Obtenez un support informatique »).
Personnaliser le type de lien (section de page, URL externe, téléphone, e-mail), le libellé et la cible.
Onglet Style
Couleurs
Modifier l'accent pour les points de pagination et les surbrillances des boutons.
Mise en page
Alignement du contenu : choisissez un superposition à gauche, au centre ou à droite.
Taille du texte
Heading: choisissez Petit, Moyen, Grand ou Très grand.
Sous-texte: choisissez Petit, Moyen, ou Grand.
Bords arrondis
Appliquer le rayon de thème (par exemple : Grand) à la carte superposée ou au masque d'image.
Espacement
Espacements haut & bas (Petit/Moyen/Grand) pour l'équilibre.
Animations
Style d'entrée (par exemple Du thème (Fondu en entrée)) pour le titre et le sous-texte.
Grille de bannières
Grille de bannières
Utilisez ce style lorsque vous souhaitez présenter un titre unique + texte secondaire à côté d'une grille compacte comportant jusqu'à 3 images, le tout visible en même temps.C'est parfait pour :
Afficher plusieurs piliers de service côte-à-côte sous un message fédérateur
Présentation des membres de l'équipe ou des clients clés dans une mise en page soignée
Mettre en valeur les caractéristiques du produit avec des aperçus visuels rapides
Onglet Contenu
Slogan (optionnel)
Un court pré-titre accentué (par exemple : «Services informatiques experts»
Cliquez sur Générer pour des suggestions d'IA
Titre
Appel principal (par exemple : « Élever la performance des entreprises avec une informatique fiable »
Cliquez sur Régénérer pour essayer une formulation différente
Sous-texte
Description de soutien sous le titre
Optimisez vos opérations avec P3Cloud Consulting, le partenaire de confiance de Burnaby pour des solutions informatiques innovantes et fiables.Vivez l'excellence aujourd'hui.
Images en grille
Sélectionnez jusqu'à 3 images—chacune remplit une cellule de la grille
Réorganiser via la poignée de déplacement, échanger via l'icône crayon, supprimer via la corbeille, ou Ajouter une image + pour téléverser/choisir de nouvelles images
Boutons
Activer Ajouter un bouton pour faire apparaître un CTA (par exemple, «Boostez votre informatique»
Personnaliser le type de lien (section de la page, URL externe, téléphone, e-mail), le libellé, et la cible
Onglet Style
Couleurs
Changer l'accent (“Cc”) pour les états de bouton et de focus
Style du bouton
Choisissez entre le Style 1 ou le Style 2 pour votre CTA
Mise en page
Position de la grille: choisissez les icônes image-gauche, image-droite, image-haut ou image-bas
Alignement du contenu : à gauche, au centre ou à droite par rapport à la grille
Image sans bordure: basculez sur désactivé/activé pour supprimer les cadres d'image
Coins Arrondis
Appliquez le rayon de thème (Petit/Moyen/Grand/Très grand) aux images et à la carte de superposition
Taille du texte
Heading: choisissez Petit, Moyen, Grand ou Très grand.
Sous-texte: choisissez Petit, Moyen ou Grand.
Espacement
Haut & Bas : choisissez un rembourrage Petit/Moyen/Grand pour un espace de respiration
Hauteur min.
Définir sur Contenu (automatique) ou Écran (plein écran)
Séparateur / Bordure
Basculer pour dessiner une ligne fine ou une boîte autour de la section
Animations
Style d'entrée (par ex.Du thème (Fondu en entrée)) pour le titre et la grille
…et n'oubliez pas la nouvelle barre d'outils d'accès rapide en haut de votre section
Veuillez noter que cette barre d'outils n'apparaît que lorsque vous survolez la section dans l'éditeur de page ; déplacez simplement votre curseur sur la section pour révéler ces boutons d'action rapides.
Icône / Bouton | Action |
Relooker | Régénérer les images Appliquez instantanément une configuration de section ou une palette de couleurs à cette section. |
Régénérer les images | Remplacez tous les visuels actuels par de nouvelles options basées sur l'IA. |
↑ / ↓ | Déplacez cette section vers le haut ou le bas de la page. |
⋮ (menu Plus) | Modifier la section • Dupliquer la section• Supprimer la section• |
Ces contrôles vous permettent d'expérimenter et de réorganiser à la volée, sans avoir à parcourir des paramètres plus approfondis.