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.
Recherchez « Banner »
Tapez Banner dans la boîte de recherche.
Vous verrez des options comme Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, 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 :
Grand impact, copie minimale: Annonces de lancement, révélations de produits ou déclarations de marque où un titre frappant et un arrière-plan portent l'histoire.
Concentration de l'attention: Diriger les visiteurs vers une action principale comme « Commencer » ou « Réserver maintenant » sans distractions visuelles.
Présentation de marque sans couture: Fusionner l'en-tête de votre page dans une seule image héroïque immersive pour un look é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é.
Image toggle
Activez l'image (image/vidéo de fond) si vous souhaitez un média derrière votre texte.
Si activé, vous verrez le sélecteur d'Image/Vidéo ci-dessous.
Boutons
Activez les boutons pour ajouter un appel à l'action.
Cliquez sur Ajouter un bouton +, puis définissez le Label et le Type de lien (page, section, e-mail, téléphone ou URL externe).
Style Tab
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 ajuste l'obscurité ou la clarté de la superposition pour améliorer la lisibilité du texte.
Flou d'image/vidéo applique un effet de douceur derrière votre texte.
Taille du texte
En-tête: choisissez Petit, Moyen, Grand ou Très grand.
Subtext: 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 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 évidence des caractéristiques: Faire défiler les avantages du produit, les offres de services ou les aperçus d'études de cas, chacun avec son propre titre et sous-texte.
Raconter en chapitres: Raconter une narration en plusieurs étapes telle que « Planifier → Construire → Grandir » avec chaque diapositive couvrant une étape.
Maximiser l'immobilier: Utiliser des diapositives pleine largeur pour garder votre section héro dynamique et engageante, surtout lorsque vous avez 3 à 5 visuels forts à 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 de crayon sur n'importe quelle diapositive pour changer son image, sa légende ou son texte alternatif.
Cliquez sur l'icône de poubelle pour supprimer une diapositive.
Boutons
Activez on pour afficher un bouton d'appel à l'action sous votre carrousel.
Cliquez sur Ajouter un bouton +, puis définissez votre Étiquette et Type de lien (page, section, email, téléphone ou URL externe).
Style Tab
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 de bouton
Cliquez sur Changer pour choisir parmi les styles de boutons prédéfinis de Durable (rempli, contour, pilule, etc.).
Style d'image
Superposition : Ajuster la superposition d'obscurité/luminosité sur chaque diapositive.
Flou d'image: Appliquez un flou doux derrière le texte pour une meilleure lisibilité.
Fondu: Activez pour appliquer un fondu subtil entre les diapositives.
Taille du texte
En-tête : choisissez Petit, Moyen, Grand ou Très grand.
Subtexte : 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 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.
Diaporama d'images de bannière (horizontal)
Diaporama 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 défiler ou de cliquer à travers 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 CTA sur chaque diapositive, tout en maintenant une hauteur de diaporama modérée pour un accès plus rapide à la page.
Découverte interactive: Encourager l'engagement des utilisateurs grâce à des contrôles de défilement manuels, 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 de carrousel
Glissez-déposez jusqu'à 10 images dans la liste pour définir vos diapositives.
Cliquez sur l'icône ✎ d'édition sur une diapositive pour échanger son image, mettre à jour le texte alternatif ou changer la légende.
Cliquez sur l'🗑️ icône de la poubelle pour supprimer une diapositive indésirable.
Pour ajouter plus, cliquez sur Ajouter une image +.
Boutons
Activez on pour afficher un bouton d'appel à l'action sous votre curseur.
Cliquez sur Ajouter bouton +, puis spécifiez :
Label (e.g. “Explore Our Services”)
Type de lien (section, page, URL externe, téléphone ou e-mail)
Conseil : Gardez les étiquettes des boutons concises pour maintenir un é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 de 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.
Subtext: 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).
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.
Bordure
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 « Explorer » donne souvent le meilleur engagement.
Bannière Double Image Slider (Vertical)
Bannière Double Image Slider (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 :
Juxtaposer des visuels avant/après ou problème/solution
Mise en évidence des fonctionnalités associées (par exemple « Support sur site » à côté de « Surveillance 24/7 »).
Maintenir une hauteur de section héro tout en offrant aux visiteurs plusieurs images à fort impact.
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 page, URL externe, téléphone, email).
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 de 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.
Disposition
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).
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 :
Raconter une histoire en étapes (par exemple, “Notre Processus” en 3 étapes)
Mise en avant des études de cas ou des pièces de portfolio
Afficher des offres de services diversifiées dans un héros 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 »).
Personnaliser le type de lien (section de page, URL externe, téléphone, e-mail), étiquette et 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.
Subtexte: 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
Espacement supérieur et inférieur (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 Grid
Bannière Bento Grid
Utilisez la grille Banner Bento lorsque vous souhaitez un agencement propre avec trois images qui équilibre un bloc de titre/sous-texte fort avec trois visuels de soutien. Ce style est parfait pour :
Présentation de trois services clés : Présentez vos trois principales offres côte à côte.
Mise en évidence des études de cas : Accordez un espace égal aux images « avant », « pendant » et « après » le projet.
Présentation des membres de l'équipe ou des témoignages : Associez chaque photo à un encadré 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), étiquette et 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.
Coins arrondis
Appliquer le rayon de thème (par exemple : Grand) à la carte superposée ou au masque d'image.
Espacement
Marges supérieures et inférieures (Petite/Moyenne/Grande) 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 + sous-texte accompagné d'une grille compacte de jusqu'à 3 images, toutes visibles en même temps.C'est parfait pour :
Afficher plusieurs piliers de service côte à côte sous un message unificateur
Présentation des membres de l'équipe ou des clients clés dans une mise en page soignée
Mise en avant des caractéristiques du produit avec des aperçus visuels rapides
Onglet de 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é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
Activer Ajouter un bouton pour faire apparaître un CTA (par exemple, «Boostez votre informatique»
Personnaliser le type de lien (section de page, URL externe, téléphone, email), étiquette et cible
Onglet de style
Couleurs
Changer l'accent (“Cc”) pour les états de bouton et de focus
Style de 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: désactiver/activer 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)
Diviseur / 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
Notez que cette barre d'outils n'apparaît que lorsque vous survolez la section dans l'éditeur de page, il vous suffit de déplacer votre curseur sur la section pour révéler ces boutons d'action rapide.
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 besoin de fouiller dans des paramètres plus profonds.