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.
Je ziet opties zoals Banner, Banner carrousel volledig, Banner afbeeldingslider horizontaal, Banner dubbele afbeeldingslider, Banner bento rooster, en meer.
Kies je 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: Lancering aankondigingen, product onthullingen of merkverklaringen waarbij één opvallende kop en achtergrond het verhaal dragen.
Aandacht vestigen: Bezoekers naar één primaire actie leiden zoals “Aan de slag” of “Boek nu” zonder visuele afleidingen.
Naadloze merkpresentatie: Het samenvoegen van uw paginaheader in een enkele, meeslepende heldenafbeelding voor een gestroomlijnde, samenhangende uitstraling.
Inhoud Tab
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.
Afbeelding schakelen
Schakel aan Afbeelding (achtergrondafbeelding/video) in als je media achter je tekst wilt.
Als ingeschakeld, zie je de Afbeelding/Video selector hieronder.
Knoppen
Schakel aan knoppen in om een call-to-action toe te voegen.
Klik op Toevoegen knop +, stel vervolgens de Label en Linktype in (pagina, sectie, e-mail, telefoon of externe URL).
Stijl Tab
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 past hoe donker of licht de overlay is om de leesbaarheid van de tekst te verbeteren.
Beeld/Video vervaging past een zachtheidseffect achter uw tekst toe.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtext: kies Klein, Medium of Groot.
Spacing
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).
Border
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 Vol
Banner Carrousel Vol
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 benadrukken: Roteren door productvoordelen, serviceaanbiedingen of casestudy-snapshots, elk met zijn eigen kop en subtekst.
Verhalen vertellen in hoofdstukken: Een meerstapsverhaal vertellen zoals “Plan → Bouw → Groei” waarbij elke dia één stap behandelt.
Het maximaliseren van vastgoed: Gebruik volle breedte dia's om je heldensectie dynamisch en boeiend te houden, vooral wanneer je 3–5 sterke visuals hebt om te delen.
Content Tab
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.
Carrouselfoto's
Sleep en neerzetten om maximaal 5 dia's opnieuw te rangschikken.
Klik op het potloodpictogram op een 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 Tab
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.
Button stijl
Klik op Wijzigen om te kiezen uit de vooraf ingestelde knopstijlen van Durable (gevuld, omtrek, pil, enz.).
Afbeeldingstijl
Overlay: Pas de dekking/helderheid aan op elke dia.
Afbeelding vervaging: Pas een zachte vervaging achter de tekst toe voor leesbaarheid.
Vervagen: Zet aan om een subtiele cross-fade tussen dia's toe te passen.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Medium of Groot.
Spacing
Boven en Onder opvulling: Klein, Medium, Groot.
Min. hoogte: Inhoud (past rond de tekst) of Scherm (vult het venster van de bezoeker).
Inhoudsuitlijning
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.
Banner Afbeelding Slider (Horizontaal)
Banner Afbeelding 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: Gebruikers laten vegen of klikken door een galerij van 6–10 afbeeldingen—geweldig voor portfolio's, klantbeoordelingen of voor-en-na-galerijen.
Laagjes van berichten: Het overlappen van beknopte koppen en CTA's op elke dia, terwijl de hoogte van de slider gematigd blijft voor snellere toegang tot de pagina.
Interactieve ontdekking: Gebruikersbetrokkenheid aanmoedigen door handmatige scrollbediening, ideaal wanneer bezoekers opties in hun eigen tempo willen doorbladeren.
Content Tab
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.
Carrouselfoto's
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 verwisselen, de alt-tekst bij te werken of de 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 op Toevoegen knop +, geef vervolgens op:
Label (bijv. “Verken Onze Diensten”)
Linktype (sectie, pagina, externe URL, telefoon of e-mail)
Tip: Houd knoppenlabels beknopt om de visuele balans te behouden.
2. Stijl Tab
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.
Carrousel snelheid
Selecteer hoe snel dia's automatisch draaien: Langzaam, Normaal, of Snel.
Layout
Carrouselpositie: Kies of afbeeldingen horizontaal (zijwaarts scrollen) of verticaal (van boven naar beneden) scrollen.
Inhoudsuitlijning: Align text en knoppen Links, Centraal of Rechts over de dia's.
Tekengrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Medium of Groot.
Ronde 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 viewport hoogte).
Animaties
Kies hoe dia's binnenkomen: Van thema, Vervagen, Schuiven, of Zoom.
Divider
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.
Pro tip: Een gematigde auto-scroll snelheid met een eenvoudige “Verken” knop levert vaak de beste betrokkenheid op.
Banner Dubbele Afbeelding Slider (Verticaal)
Banner Dubbele Afbeelding Slider (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:
Voor/na of probleem/oplossing visuals.
Uitgelichte gekoppelde functies (bijv. “On-site Support” naast “24/7 Monitoring”).
Het behouden van een hoogte voor de hero-sectie terwijl bezoekers toch meerdere krachtige afbeeldingen krijgen.
Inhoud Tab
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 (paginesectie, 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.
Button stijl
Klik op Wijzigen om de vorm (gevuld, omtrek, pil) en zweefgedrag te kiezen.
Carrousel snelheid
Selecteer hoe snel dia's automatisch roteren: Langzaam, Normaal, of Snel.
Layout
Carrouselpositie: Kies of afbeeldingen horizontaal (zijwaarts scrollen) of verticaal (van boven naar beneden) scrollen.
Inhoudsuitlijning: Lijn tekst en knoppen Links, Centraal of Rechts uit over de dia's.
Tekstgrootte
Kop: kies Klein, Medium, Groot, of Extra groot.
Subtekst: kies Klein, Middelgroot of Groot.
Ronde 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. “Ons Proces” in 3 stappen)
Uitgelichte casestudy's of portfoliostukken
Diverse serviceaanbiedingen tonen in één compacte hero
Inhoud Tab
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 (paginesectie, externe URL, telefoon, e-mail), label en doel.
Stijl Tab
Kleuren
Verander het accent voor pagineringstipjes en knopaccenten.
Layout
Inhoudsuitlijning: kies links, midden of rechts overlay.
Tekstgrootte
Kop: kies Klein, Medium, Groot of Extra groot.
Subtekst: kies Klein, Medium of Groot.
Afgeronde Hoeken
Themaradius toepassen (bijv.Groot) naar de overlaykaart of afbeeldingsmasker.
Spacing
Boven- en ondermarges (Klein/Middelgroot/Groot) voor balans.
Animaties
Invoer stijl (bijv.Van thema (Fade in)) voor kop en subtekst.
Banner Bento Grid
Banner Bento Grid
Gebruik Banner Bento Grid wanneer je een schone lay-out met drie afbeeldingen wilt die een sterk kop/subtekstblok in balans brengt met drie ondersteunende visuals. Deze stijl is perfect voor:
Drie kernservices tonen: Presenteer uw top drie aanbiedingen naast elkaar.
Case studies benadrukken: Geef gelijke ruimte aan “voor,” “tijdens,” en “na” projectafbeeldingen.
Teamleden of Testimonials Presenteren: Koppel elke foto aan een oproep in een uniforme grid.
Inhoud Tab
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 aan (paginesectie, externe URL, telefoon, e-mail), label en doel.
Stijl Tabblad
Kleuren
Wijzig het accent voor pagineringstipjes en knopaccenten.
Layout
Inhoudsuitlijning: kies links, midden of rechts overlay.
TEKSTGROOTTE
Kop: kies Klein, Medium, Groot of Extra groot.
Subtext: kies Klein, Medium of Groot.
Afgeronde Hoeken
Pas thema radius toe (bijv.Groot) naar de overlaykaart of afbeeldingsmasker.
Spacing
Boven- en onderpadding (Klein/Middelgroot/Groot) voor balans.
Animaties
Invoer stijl (bijv.Van thema (Vervagen)) voor kop en subtekst.
Banner Grid
Banner Grid
Gebruik deze stijl wanneer je een enkele kop + subtekst wilt presenteren naast een compacte raster van maximaal 3 afbeeldingen, die allemaal tegelijk zichtbaar zijn.Het is perfect voor:
Meerdere servicepijlers naast elkaar tonen onder één verenigende boodschap
Teamleden of belangrijke klanten in een nette opmaak
Productkenmerken benadrukken met snelle visuele momentopnamen
Content Tab
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
Herschikken via de sleepgreep, verwisselen via het potloodpictogram, verwijderen via de 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 aan (paginesectie, externe URL, telefoon, e-mail), label en doel
Stijl Tab
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, midden of rechts ten opzichte van het raster
Randloze afbeelding: schakelen uit/aan om afbeeldingsranden 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, Medium of Groot.
Spacing
Boven & Onder: kies Kleine/Middelgrote/Grote opvulling voor ademruimte
Min. Hoogte
Instellen op Inhoud (automatisch) of Scherm (volledig scherm)
Divider / Border
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 de nieuwe sneltoegang werkbalk bovenaan uw sectie niet
Merk op dat deze werkbalk alleen verschijnt wanneer je over de sectie in de pagina-editor zweeft, beweeg gewoon je cursor over de sectie om deze sneltoetsen te onthullen.
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• |
Deze bedieningselementen stellen je in staat om te experimenteren en on-the-fly te reorganiseren, zonder dat je dieper in de instellingen hoeft te duiken.