De Banner-sectie van Durable is verkrijgbaar in meerdere stijlen, zodat je kunt aansluiten bij de uitstraling van je merk.
Hier leest u hoe u een Banner-sectie kunt toevoegen en configureren in uw Durable-website-editor:
Klik op Sectie toevoegen +
Selecteer in uw paginabewerker Sectie toevoegen + bovenaan of onderaan uw pagina.
Zoek naar “Banner”
Typ Banner in het zoekvak.
U ziet opties zoals Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, en meer.
Kies uw bannerstijl
Klik op de stijl die u verkiest om deze aan uw pagina toe te voegen.Durable zal voorbeeldkoppen, subteksten en tijdelijke afbeeldingen invoegen.
Banner
Banner
Gebruik de sectie Banner wanneer je een gedurfde, ongecompliceerde hero-afbeelding (of video) wilt met een duidelijke boodschap en een optionele call-to-action. Het is perfect voor:
Grote impact, minimale tekst: Lanceringsaankondigingen, productonthullingen of merkboodschappen waarbij één krachtige kop en achtergrond het verhaal dragen.
Aandacht richten: Bezoekers naar één primaire actie leiden, zoals “Get Started” of “Book Now” zonder visuele afleidingen.
Naadloze merkpresentatie: Uw paginakop samenvoegen tot één meeslepende hero-afbeelding voor een gestroomlijnde, samenhangende uitstraling.
Inhoud Tabblad
Dit is waar u de tekst bewerkt en beslist of u een achtergrondafbeelding/video wilt gebruiken.
Slogan
Optionele accentlijn boven je hoofdkop.
Klik op Genereren om Durable een korte zin te laten voorstellen.
Koptekst
Uw primaire bericht.
Klik op Opnieuw genereren om andere koppen te proberen of typ je eigen kop.
Subtekst
Ondersteunende details onder uw kop.
Klik op Opnieuw genereren voor nieuwe tekstsuggesties of voer aangepaste tekst in.
Afbeeldingschakelaar
Schakel aan Afbeelding (achtergrondafbeelding/video) in als je media achter je tekst wilt.
Als deze optie is ingeschakeld, ziet u hieronder de Afbeelding/Video-selector.
Knoppen
Schakel aan knoppen in om een call-to-action toe te voegen.
Klik op Toevoegen-knop +, stel vervolgens het Label en het Linktype in (pagina, sectie, e-mail, telefoon of externe URL).
Stijltabblad
Verfijn het uiterlijk, de lay-out en het gedrag van de achtergrond en tekst van uw banner.
Kleuren
Klik op Wijzigen om je achtergrond- en tekstkleuren uit je themapalet te kiezen of voer een aangepaste hex-code in.
Achtergrondafbeelding/video
Als deze optie is ingeschakeld in Content, ziet u deze optie hier.
Positie schuifregelaars laten je de afbeelding horizontaal en verticaal verschuiven.
Overlay dropdown past aan hoe donker of licht de overlay is om de leesbaarheid van de tekst te verbeteren.
Afbeelding-/videovervaging brengt een verzachtend effect achter uw tekst aan.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Afstand
Boven- en Onder opvulling (Klein, Medium, Groot).
Min. hoogte: selecteer Inhoud (past bij tekst) of Scherm (vult het browservenster).
Horizontale uitlijning
Lijn je tekst uit naar links, in het midden of naar rechts binnen de banner.
Divider
Schakel in om een decoratieve scheidingslijn aan de onderkant van de banner toe te voegen (klik op Wijzigen om een stijl te kiezen).
Grens
Schakel in om de banner in een omlijning te wikkelen.
Animaties
Kies hoe de elementen van de banner verschijnen bij scrollen: Vanuit thema (Fade in), Vervagen, Inzoomen of Schuiven.
Combineren met kop
Schakel aan om de bannerachtergrond naadloos in uw sitekop te laten opgaan.
Banner Carrousel Volledig
Banner Carrousel Volledig
Kies voor Banner Carousel Volledig wanneer je meerdere belangrijke boodschappen of visuals hebt die je in volgorde wilt tonen. Ideale scenario's zijn onder andere:
Kenmerken belichten: Afwisselend tonen van productvoordelen, dienstaanbod of momentopnames van casestudies, elk met een eigen kop en subtekst.
Storytelling in chapters: Het vertellen van een meerstapsverhaal zoals “Plan → Build → Grow” waarbij elke dia één stap behandelt.
Maximaliseren van de beschikbare ruimte: Gebruik dia's over de volledige breedte om uw herosectie dynamisch en aantrekkelijk te houden, vooral wanneer u 3–5 sterke visuals hebt om te delen.
Inhoud Tabblad
Gebruik deze tab om de tekst van je carrousel te bewerken, afbeeldingen te kiezen en knoppen in of uit te schakelen.
Slagzin
Een korte accentregel boven je kop.
Klik op Genereren om een korte zin automatisch voor te stellen.
Koptekst
De hoofdboodschap van uw roterende carrousel.
Klik op Opnieuw genereren om nieuwe kopideeën te proberen.
Subtekst
Ondersteunende details onder de kop.
Klik op Opnieuw genereren voor nieuwe suggesties of voer uw eigen in.
Carrouselafbeeldingen
Sleep en neerzetten om maximaal 5 dia's opnieuw te rangschikken.
Klik op het potloodpictogram op elke dia om de afbeelding, bijschrift, of alt-tekst te wijzigen.
Klik op het prullenbakpictogram om een dia te verwijderen.
Knoppen
Schakel in om een call-to-action-knop onder uw carrousel weer te geven.
Klik op Toevoegen-knop +, stel vervolgens uw Label en Linktype in (pagina, sectie, e-mail, telefoon of externe URL).
Stijl Tabblad
Pas de uitstraling en het gedrag van de afbeeldingen, tekst en lay-out van je carrousel aan.
Kleuren
Klik op Wijzigen om je achtergrond- en tekstkleuren te kiezen uit je thema of aangepaste palet.
Knopstijl
Klik op Wijzigen om te kiezen uit de vooraf ingestelde knopstijlen van Durable (gevuld, omtrek, pil, enz.).
Afbeeldingsstijl
Overlay: Pas de dekking/helderheid aan op elke dia.
Afbeeldingsonscherpte: Breng een zachte vervaging achter tekst aan voor leesbaarheid.
Fade: Schakel in om een subtiele cross-fade tussen dia's toe te passen.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Afstand
Boven en Onder opvulling: Klein, Medium, Groot.
Min. hoogte: Inhoud (past zich rondom de tekst aan) of Scherm (vult de viewport van de bezoeker).
Uitlijning van inhoud
Lijn tekst en knoppen links, in het midden of rechts uit boven de carrousel.
Verdeler
Schakel aan om een decoratieve vorm toe te voegen tussen uw carrousel en de volgende sectie.
Grens
Schakel in om elke dia in een subtiele omlijning te wikkelen.
Animaties
Selecteer hoe dia's animeren (Van thema, Vervagen, Schuiven, Zoomen).
Combine met koptekst
Schakel in om de eerste dia van de carrousel naadloos te laten overlopen in de koptekst van uw site voor een hero-stijl effect.
Bannerafbeelding-slider (horizontaal)
Bannerafbeelding-slider (horizontaal)
Kies de Banner Image Slider Horizontal stijl voor een zijwaarts scrollende carrousel die afbeeldingen en tekst in een compacter venster combineert. Beste voor:
Visuele verkenning: Laat gebruikers vegen of klikken door een galerij van 6–10 afbeeldingen—ideaal voor portfolio's, klantgetuigenissen of voor-&-na galerijen.
Gelaagde boodschappen: Beknopte koppen en CTAs op elke slide plaatsen, terwijl de hoogte van de slider matig wordt gehouden voor snellere toegang tot de pagina.
Interactieve ontdekking: Stimuleert gebruikersbetrokkenheid door handmatige scrollbediening, ideaal wanneer bezoekers opties in hun eigen tempo moeten doorbladeren.
Inhoud Tabblad
Dit is waar je de tekst, afbeeldingen en knoppen van je slider beheert.
Slogan
Een korte, accentlijn boven je kop.
Klik op Genereer voor door AI voorgestelde slogans.
Koptekst
Het hoofdbericht dat boven je schuifregelaar verschijnt.
Klik op Opnieuw genereren om nieuwe kopideeën te proberen.
Subtekst
Ondersteunende tekst onder de kop.
Klik op Opnieuw genereren om de suggestie te verversen of typ je eigen.
Carrouselafbeeldingen
Slepen-en-neerzetten tot 10 afbeeldingen in de lijst om je dia's te definiëren.
Klik op het ✎ bewerkpictogram op een dia om de afbeelding te vervangen, de alt-tekst bij te werken of het bijschrift te wijzigen.
Klik op het 🗑️ prullenbakpictogram om een ongewenste dia te verwijderen.
Om meer toe te voegen, klik op Afbeelding toevoegen +.
Knoppen
Schakel in om een call-to-action knop onder je slider weer te geven.
Klik knop Toevoegen +, geef vervolgens op:
Label (bijv. “Explore Our Services”)
Linktype (sectie, pagina, externe URL, telefoon of e-mail)
Tip: Houd knoplabels beknopt om de visuele balans te behouden.
2. Stijl-tabblad
Gebruik deze bedieningselementen om het uiterlijk en gevoel van uw slider aan te passen.
Kleuren
Klik op Wijzigen om achtergrond-, tekst- en knopkleuren uit uw thema of een aangepast palet te selecteren.
Knopstijl
Klik op Wijzigen om de vorm (gevuld, omtrek, pil) en het zweefgedrag te kiezen.
Carrouselsnelheid
Selecteer hoe snel dia's automatisch draaien: Langzaam, Normaal, of Snel.
Lay-out
Carrouselpositie: Kies of afbeeldingen horizontaal (zijwaarts scrollen) of verticaal (van boven naar beneden) scrollen.
Inhoudsuitlijning: Lijn tekst en knoppen Links, Midden of Rechts uit over de dia's.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Afgeronde hoeken
Pas hoekenstralen toe op elke dia (Geen, Klein, Medium, Groot of Thema standaard).
Spatiëring
Boven en Onder opvulling: Klein, Medium of Groot.
Min. hoogte: Inhoud (automatische hoogte) of Scherm (volledige viewporthoogte).
Animaties
Kies hoe dia's binnenkomen: Van thema, Vervagen, Schuiven, of Zoom.
Scheidingslijn
Schakel in om een decoratieve SVG-scheiding onder de schuifregelaar in te voegen.
Grens
Schakel in om een subtiele omtrek rond elke dia toe te voegen.
Handige tip: Een matige automatische scrollsnelheid met een eenvoudige “Explore” knop levert vaak de beste betrokkenheid op.
Banner Dubbele Afbeeldingsslider (Verticaal)
Banner Dubbele Afbeeldingsslider (Verticaal)
Gebruik deze stijl wanneer u twee afbeeldingen naast elkaar in elke dia wilt weergeven, met een kop en ondertekst eroverheen, plus een oproep tot actie. Geweldig voor:
Het naast elkaar plaatsen van voor/na of probleem/oplossing visuals.
Gekoppelde functies benadrukken (bijv. “On-site Support” naast “24/7 Monitoring”).
Het behouden van de hoogte van de hero-section terwijl bezoekers toch meerdere afbeeldingen met grote impact te zien krijgen.
Inhoud-tabblad
Tagline (optioneel)
Korte accenttekst boven uw kop (“Trusted IT Partner”).
Klik op Genereren voor AI-suggesties.
Koptekst
Hoofdboodschap (“Betrouwbare IT-ondersteuning voor bedrijven in Burnaby”).
Klik op Opnieuw genereren om nieuwe invalshoeken te proberen.
Subtekst
Twee- of drieregels beschrijving onder de kop.
Voorbeeld: "Burnaby-bedrijven versterken met betrouwbare IT-oplossingen voor naadloze operaties en verbeterde efficiëntie."Werk vandaag samen met P3Cloud Consulting.
Carrouselafbeeldingen
Tot 10 paren afbeeldingen; elke dia toont er twee naast elkaar.
Gebruik de sleepgreep om opnieuw te ordenen, het potlood om te wisselen, de prullenbak om te verwijderen, of Afbeelding toevoegen + om nieuwe afbeeldingen te uploaden/selecteren.
Knoppen
Zet Voeg een knop toe aan.
Pas linktype aan (paginasectie, externe URL, telefoon, e-mail).
Bewerk Label (“Krijg IT-ondersteuning”) en doel (“Contact” sectie of externe link).
Stijl Tabblad
Kleuren
Klik op Wijzigen om achtergrond-, tekst- en knopkleuren te selecteren uit je thema of een aangepast palet.
Knopstijl
Klik op Wijzigen om de vorm (gevuld, omtrek, pil) en zweefgedrag te kiezen.
Carrouselsnelheid
Selecteer hoe snel dia's automatisch roteren: Langzaam, Normaal, of Snel.
Lay-out
Carrouselpositie: Kies of afbeeldingen horizontaal (zijwaarts scrollen) of verticaal (van boven naar beneden) scrollen.
Uitlijning van inhoud: Lijn tekst en knoppen Links, Midden of Rechts uit op de dia's.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Gemiddeld of Groot.
Afgeronde hoeken
Pas hoekstralen toe op elke dia (Geen, Klein, Medium, Groot of Thema standaard).
Spatiëring
Boven en Onder opvulling: Klein, Medium, of Groot.
Min. hoogte: Inhoud (automatische hoogte) of Scherm (volledige viewport-hoogte).
Animaties
Kies hoe dia's binnenkomen: Van thema, Vervagen, Schuiven, of Inzoomen.
Banner Carrousel
Banner Carrousel
Gebruik deze stijl wanneer je door meerdere afbeeldingen op volledige breedte wilt bladeren met een enkele kop en subtekstoverlay, zodat bezoekers kunnen swipen of automatisch kunnen doorgaan naar je belangrijkste berichten. Ideaal voor:
Verhalen vertellen in fasen (bijv. “Our Process” in 3 stappen)
Uitgelichte casestudy's belichten of portfoliostukken
Diverse dienstaanbiedingen weergeven in een compacte hero
Inhoudstabblad
Tagline (optioneel)
Korte pre-kop accent (“Ontdek Onze Expertise”)
Klik op Genereren voor AI-suggesties.
Koptekst
Hoofdoproep (“Advance with Strategic IT Consulting”).
Klik op Opnieuw genereren om andere bewoordingen te proberen.
Subtekst
Ondersteunende beschrijving onder de kop.
Verhoog uw zakelijke potentieel met deskundige IT-consultancydiensten die zijn afgestemd op uw unieke behoeften in Burnaby, BC.
Carrouselafbeeldingen
Selecteer maximaal 10 afbeeldingen die elk de rechterhelft (of de volledige breedte op mobiel) in volgorde zullen vullen.
Herschik via de sleepgreep, verwissel via het potloodicoon, verwijder via de prullenbak, of Afbeelding toevoegen + om nieuwe te uploaden/kiezen.
Knoppen
Schakel Voeg een knop toe in om een CTA weer te geven (“Get IT Support”).
Pas linktype aan (paginasectie, externe URL, telefoon, email), Label, en target.
Stijl Tab
Kleuren
Verander het accent voor pagineringstipjes en knopaccenten.
Lay-out
Inhoudsuitlijning: kies links, midden of rechts overlay.
Tekstgrootte
Kop: kies Klein, Medium, Groot of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Afgeronde hoeken
Themaradius toepassen (bijv.Groot) naar de overlaykaart of afbeeldingsmasker.
Afstand
Boven- en onderopvullingen (Klein/Middelgroot/Groot) voor balans.
Animaties
Invoer stijl (bijv.Van thema (Fade in)) voor kop en subtekst.
Banner Bento Raster
Banner Bento Raster
Gebruik de Banner Bento Grid wanneer u een strakke lay-out met drie afbeeldingen wilt die een sterk kop-/subtekstblok in evenwicht brengt met drie ondersteunende visuele elementen. Deze stijl is perfect voor:
Drie kernservices tonen: Presenteer uw top drie aanbiedingen naast elkaar.
Casestudy's uitlichten: Geef gelijke ruimte aan “before,” “during,” en “after” projectafbeeldingen.
Met teamleden of aanbevelingen: Koppel elke foto aan een call-out in een eenvormig raster.
Inhoud-tabblad
Tagline (optioneel)
Korte pre-kop accent (“Ontdek Onze Expertise”)
Klik op Genereren voor AI-suggesties.
Koptekst
Belangrijkste oproep (“Vooruitgang met Strategisch IT-Consulting”).
Klik op Opnieuw genereren om een andere formulering te proberen.
Subtekst
Ondersteunende beschrijving onder de kop.
Verhoog het potentieel van uw bedrijf met deskundige IT-consultancydiensten die zijn afgestemd op uw unieke behoeften in Burnaby, BC.
Carrouselafbeeldingen
Selecteer maximaal 10 afbeeldingen die elk de rechterhelft (of volledige breedte op mobiel) in volgorde vullen.
Herschik via sleepgreep, verwissel via potloodpictogram, verwijder via prullenbak, of Afbeelding toevoegen + om nieuwe te uploaden/kiezen.
Knoppen
Schakel Voeg een knop toe in om een CTA (“Get IT Support”) te tonen.
Pas linktype (paginasectie, externe URL, telefoon, e-mail), label, en doel aan.
Stijl Tabblad
Kleuren
Wijzig het accent voor pagineringstipjes en knopaccenten.
Lay-out
Inhoudsuitlijning: kies links, midden of rechts overlay.
Tekstgrootte
Kop: kies Klein, Medium, Groot of Extra groot.
Subtekst: kies Klein, Middelgroot, of Groot.
Afgeronde hoeken
Pas thema radius toe (bijv.Groot) naar de overlaykaart of afbeeldingsmasker.
Afstand
Boven- & onderopvullingen (Klein/Middel/Groot) voor balans.
Animaties
Invoer stijl (bijv.Van thema (Vervagen)) voor kop en subtekst.
Banner Raster
Banner Raster
Gebruik deze stijl wanneer u een enkele kopregel + subtekst wilt presenteren naast een compact raster van maximaal 3 afbeeldingen, die allemaal tegelijk zichtbaar zijn.Het is perfect voor:
Meerdere pijlers van dienstverlening tonen naast elkaar onder één overkoepelende boodschap
Introductie van teamleden of belangrijke klanten in een overzichtelijke lay-out
Productfuncties belichten met snelle visuele momentopnames
Inhoudstabblad
Tagline (optioneel)
Een korte pre-kop accent (bijv. “Expert IT Services”
Klik op Genereren voor AI-suggesties
Koptekst
Belangrijkste oproep (bijv.“Verhoog de bedrijfsresultaten met betrouwbare IT”
Klik op Opnieuw genereren om andere bewoordingen te proberen
Subtekst
Ondersteunende beschrijving onder de kop
Voorbeeld: "Optimaliseer uw operaties met P3Cloud Consulting, Burnaby's vertrouwde partner voor innovatieve en betrouwbare IT-oplossingen.Ervaar vandaag nog uitmuntendheid.
Rasterafbeeldingen
Selecteer maximaal 3 afbeeldingen—elke vult één cel van het raster
Herschik via sleepgreep, verwissel via potloodpictogram, verwijder via prullenbak, of Afbeelding toevoegen + om nieuwe te uploaden/kiezen
Knoppen
Schakel Een knop toevoegen in om een CTA weer te geven (bijv. “Boost Your IT”
Pas linktype (paginasectie, externe URL, telefoon, e-mail), label en doel aan
Stijl-tabblad
Kleuren
Wijzig het accent (“Cc”) voor knop- en focusstatussen
Knopstijl
Kies tussen Stijl 1 of Stijl 2 voor uw CTA
Indeling
Rasterpositie: kies pictogrammen voor afbeelding-links, afbeelding-rechts, afbeelding-boven of afbeelding-onder
Inhoudsuitlijning: links, gecentreerd of rechts ten opzichte van het raster
Randloze afbeelding: schakel uit/aan om afbeeldingskaders te verwijderen
Afgeronde Hoeken
Pas het thema-radius (Klein/Middelgroot/Groot/Extra groot) toe op afbeeldingen en overlay-kaart
Tekstgrootte
Heading: kies Klein, Medium, Groot of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Afstand
Boven & Onder: kies Kleine/Middelgrote/Grote opvulling voor ademruimte
Min. Hoogte
Instellen op Inhoud (automatisch) of Scherm (volledig scherm)
Scheidingslijn / Rand
Schakel over om een dunne lijn of kader rond de sectie te tekenen
Animaties
Invoerstijl (bijv.Van thema (Fade in)) voor kop en raster
…en vergeet niet de nieuwe werkbalk voor snelle toegang bovenaan uw sectie
Houd er rekening mee dat deze werkbalk alleen verschijnt wanneer u met de muis over de sectie in de pagina-editor gaat. Beweeg eenvoudig uw cursor over de sectie om deze knoppen voor snelle acties zichtbaar te maken.
Icoon / Knop | Actie |
Restyle | Pas onmiddellijk een sectieconfiguratie of kleurenpalet toe op deze sectie. |
Afbeeldingen opnieuw genereren | Vervang alle huidige visuals door nieuwe, door AI verkregen opties. |
↑ / ↓ | Verplaats deze sectie omhoog of omlaag op de pagina. |
⋮ (Meer menu) | Bewerk Sectie • Dupliceer sectie• Verwijder sectie• |
Met deze bedieningselementen kunt u ter plekke experimenteren en reorganiseren; u hoeft niet dieper in de instellingen te duiken.