Komponenter· Interaktiva
Interaktiva
Dragspel, flikar, karuseller, popup-fönster, frågesporter, kalkylatorer och valkompass. Alla fungerar med tangentbordet.
11 komponenter
Exemplen fungerar i testläge: inget sparas på en riktig webbplats, inga meddelanden skickas och betalningarna är testbetalningar.
Haitari
Sektion Prova accordion
Ett dragspel: frågor och svar eller annat innehåll som öppnas genom att trycka på rubriken. Passar vanliga frågor.
Stilar (5)
Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.
Inställningar (2)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Stil design | Val | – |
Tillgänglighet
Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.
Används i 90 mallar
- Padelhall
- Tennishall
- Beachvolleyhall
- Yoga- eller pilatesstudio
- Massage eller klinik
- Barberare eller frisör
Alla 90 mallar
- Padelhall
- Tennishall
- Beachvolleyhall
- Yoga- eller pilatesstudio
- Massage eller klinik
- Barberare eller frisör
- Litet hotell
- Pensionat och B&B
- Stuga och villa
- Upplevelser och turer
- Utrustningsuthyrning
- Webbutik
- Gym
- Personlig tränare
- Idrottsklubb
- Ligalag
- Lagsportsförening
- Förening för individuella idrotter
- Förening
- Valkandidat
- Festlokal
- Bröllop
- Restaurang
- Bilverkstad
- Däckaffär och däckhotell
- Trafikskola
- Besiktningsstation
- Biltvätt
- Bilhandel
- Bilplåtverkstad
- Biluthyrning
- Bärgning
- Taxi
- Gård och direktförsäljning
- Idrottare
- Författare
- Friluftsförening
- Litterärt sällskap och klassiker
- Kurscenter och utbildningsföretag
- Pianoskola och instrumentlektioner
- Musik- och dansskola
- Musiker och band
- Influencer och innehållsskapare
- Liga eller serie
- Fotograf
- Transport och logistik
- Elinstallation
- VVS-firma
- Bygg- och renoveringsföretag
- Markbyggnad och infra
- Städtjänst
- Fastighetsservice
- Konsult och coach
- Expertbyrå
- Planeringsbyrå
- Reklam- och kommunikationsbyrå
- Advokatbyrå
- Programvaruföretag och konsulting
- IT-support för småföretag
- Bemanning och rekrytering
- Fastighetsförmedling
- Bokföringsbyrå
- Kafé och bageri
- Lunchrestaurang
- Pizzeria
- Tandläkare
- Fysioterapi och terapi
- Veterinär
- Skönhetssalong eller nagelstudio
- Blomsterhandel
- Cykelaffär
- Närbutik
- Kläd- och skobutik
- Inrednings- och presentbutik
- Järnhandel
- Specialaffär
- Bostadsbolag
- Tillverkare och grossist
- Målare, tak, golv och snickare
- Vårdhem och daghem
- Loppis
- Sotare
- Kort- och betalapp
- Klätterhall (A)
- Klätterhall (B)
- Lokalkedja
- Apotek
- Formgivning, grafisk design och video
- Översättare och översättningsbyrå
- Försäkringsombud
Välilehdet
Sektion Prova tabs
Flikar: delar av samma ämne (t.ex. priser för vuxna och juniorer) som flikar bredvid varandra.
Stilar (4)
Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.
Inställningar (5)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Flikstil style | Val | – |
Flikens bild mediaMode | Val | – |
Öppna dagens flik openToday | På / av | – |
Lunchen slutar kl. todayUntil | Text | – |
Tillgänglighet
Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.
Kuvakaruselli
Sektion Prova carousel
En bildkarusell: bilder med rubriker och knappar, bläddras med pilar och svep. Inget automatiskt byte som standard.
Inställningar (8)
| Inställning | Redigeras som | Standard |
|---|---|---|
Karusellin nimi (saavutettavuus) ariaLabel | Text | – |
Korkeus (px) height | Tal | 800 |
Korkeus mobiilissa (px) mobileHeight | Tal | 450 |
Automatiskt bildbyte (millisekunder, 0 = av) autoplayMs | Tal | 0 |
Näytä nuolet showArrows | På / av | true |
Näytä pisteet showDots | På / av | true |
Alignment align | Val | Center |
Startsektionens bredd width | Val | Kant till kant |
Tillgänglighet
Ingen automatisk rörelse som standard. Om ägaren slår på rörelse är Paus-knappen den första kontrollen och prefers-reduced-motion stoppar alltid rörelsen (WCAG 2.2.2). Kontrollerna har namn på webbplatsens språk.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Popup
Sektion Prova popup
Ett popup-fönster: ett erbjudande, en nyhetsbrevsanmälan eller ett meddelande som öppnas efter en stund, vid rullning eller från en länk.
I exemplet öppnas popup-fönstret efter tre sekunder, som ett tidsinställt fönster på en riktig sida; stäng det med krysset eller Esc-tangenten.
Inställningar (10)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Tilaa uutiskirje |
Body body | Formaterad text | – |
Form formId | Formulär | – |
Öppningsvillkor trigger | Val | Efter fördröjning |
Fördröjning (ms) delayMs | Tal | 3000 |
Scroll (%) scrollPercent | Tal | 50 |
Popup vid exit-intent exitIntent | På / av | – |
En gång per session oncePerSession | På / av | – |
Button label ctaLabel | Text | – |
Button link ctaUrl | Länk | – |
Tillgänglighet
Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Frågesport
Sektion Prova quiz
En frågesport eller produktväljare: frågor med alternativ och till sist ett resultat eller en rekommendation enligt poäng.
Inställningar (13)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Tietovisa |
Ingress intro | Lång text | Vastaa kysymyksiin ja katso tuloksesi. |
Typ av frågesport mode | Val | Kunskapsquiz: poäng och förklaringar |
Frågor och resultat quiz | Frågesportens frågor | {"questions":[{"id":"q1","text":"Kirjoita ensim… |
Text på startknappen startLabel | Text | – |
Förklaringar visas explain | Val | Direkt efter varje svar |
Frågor i slumpmässig ordning shuffle | På / av | – |
Antal frågor som visas pool | Tal | – |
Tidsgräns i sekunder timeLimit | Tal | – |
När resultat har lika många poäng tie | Val | – |
Delningstext shareText | Text | – |
Länk om frågesporten inte startar: text fallbackLabel | Text | – |
Länk om frågesporten inte startar: adress fallbackUrl | Länk | – |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Räknare
Sektion Prova calculator
En kalkylator: besökaren matar in siffror (t.ex. yta, antal personer) och ser ett pris eller resultat enligt din formel.
Inställningar (11)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Laske siivouksen hinta |
Ingress intro | Lång text | Valitse asunnon koko ja siivousväli, niin näet … |
Fält inputs | Lång text | pinta_ala | Asunnon pinta-ala | luku | min 20; … |
Resultat outputs | Lång text | kerta | Hinta-arvio käynniltä | max(69, pinta_a… |
Anmärkning under priset disclaimer | Text | Hinta-arvio, lopullinen hinta tarjouksessa. |
Knappens text ctaLabel | Text | Pyydä tarjous |
Formulär som knappen öppnar ctaForm | Formulär | – |
Eller sidan som knappen leder till ctaLink | Länk | – |
Moms vat | Val | Priserna inkluderar moms |
Momssats (%) vatRate | Tal | 25.5 |
Formulärfält för sammanfattningen ctaSummaryField | Text | – |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 13 mallar
Minneslista
Sektion Prova dateChecklist
En datumbaserad checklista: besökaren väljer ett datum och ser uppgifterna med datum, och valen stannar i besökarens egen webbläsare.
Inställningar (10)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Inledning intro | Lång text | – |
Dagens namn dateLabel | Text | – |
Frågor till besökaren choices | Lång text | – |
Listan "Gör nu", dagar framåt nowDays | Tal | 30 |
Rubrik: gör nu labelNow | Text | – |
Rubrik: före dagen labelBefore | Text | – |
Rubrik: på dagen labelEvent | Text | – |
Rubrik: efter dagen labelAfter | Text | – |
Anmärkning under listan disclaimer | Lång text | – |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Dokumentbyggare
Sektion Prova documentBuilder
Dokumentbyggare: besökaren fyller i ett dokument steg för steg, ser en förhandsgranskning med vattenstämpel, betalar och laddar ner en PDF. Dokumentet sparas inte på servern.
Inställningar (10)
| Inställning | Redigeras som | Standard |
|---|---|---|
Dokumentmall template | Val | – |
Heading heading | Text | – |
Inledning intro | Lång text | – |
Pris i euro (inklusive moms) price | Tal | – |
Text på betalningsknappen payLabel | Text | – |
Vattenstämpel i förhandsgranskningen watermark | Text | – |
Adress för att hitta en jurist expertUrl | Länk | – |
Adress till dataskyddsbeskrivningen privacyUrl | Länk | – |
Visa ett fiktivt exempel showSample | På / av | false |
Anmärkning längst ner disclaimer | Lång text | Asiakirjapohja on tehty tavallisia tilanteita v… |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Avbetalningsräknare
Sektion Prova financing
En avbetalningskalkylator: pris, handpenning, ränta och löptid ger månadsbeloppet och totalpriset.
Inställningar (24)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Maksa osissa |
Ingress intro | Lång text | Jaa ostoksen hinta tasaisiin kuukausieriin. Las… |
Företagets roll lenderRole | Val | – |
Kreditgivare lender | Text | – |
Prisets rubrik priceLabel | Text | Ostoksen hinta |
Val av pris priceControl | Val | Sifferfält |
Exemplets pris (€) price | Tal | 2000 |
Lägsta pris (€) priceMin | Tal | 200 |
Högsta pris (€) priceMax | Tal | 20000 |
Prisets steg (€) priceStep | Tal | 50 |
Fråga om kontantinsats askDownPayment | På / av | false |
Exemplets kontantinsats (€) downPayment | Tal | 0 |
Kredittider (mån) terms | Text | 6, 12, 24, 36 |
Exemplets kredittid (mån) term | Tal | 12 |
Nominell ränta (% per år) rate | Tal | 7.9 |
Räntetyp rateType | Val | Fast |
Uppläggningsavgift (€) openingFee | Tal | 39 |
Uppläggningsavgiften betalas openingFeeWhen | Val | Med den första delbetalningen |
Konto- eller aviavgift (€/mån) monthlyFee | Tal | 6 |
Anmärkning under priset disclaimer | Text | Laskelma on suuntaa antava. Luoton myöntää ja s… |
Knappens text ctaLabel | Text | Kysy lisää |
Formulär som knappen öppnar ctaForm | Formulär | – |
Eller sidan som knappen leder till ctaLink | Länk | – |
Formulärfält för sammanfattningen ctaSummaryField | Text | – |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 5 mallar
Omröstning med resultat
Sektion Prova poll
En omröstning med resultat: besökaren röstar på ett alternativ och ser genast hur andra svarat.
Exemplet visar hur omröstningen ser ut; röstknappen är inaktiv eftersom omröstningen hör till webbplatsens egen sparade omröstning.
Inställningar (8)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Introduktion intro | Formaterad text | – |
Fråga question | Text | Mikä päivä sopii talkoisiin parhaiten? |
Alternativ (ett per rad) options | Lång text | Lauantai 9.5. Sunnuntai 10.5. Lauantai 16.5. |
Flera val tillåtna multiple | På / av | false |
Resultat på sidan results | Val | Efter röstning |
Omröstningen avslutas closesAt | Datum och tid | – |
Endast inloggade kunder customersOnly | På / av | – |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Valkompass (ja/nej)
Sektion Prova vaalikone
En valkompass: besökaren svarar ja eller nej på påståenden och ser hur kandidatens åsikter stämmer med de egna.
Inställningar (9)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Vaalikone |
Inledning intro | Lång text | Vastaa väitteisiin ja katso, missä olemme samaa… |
Kandidatens namn i resultatet candidateName | Text | – |
Besökaren kan markera en fråga som viktig visitorWeights | På / av | true |
Första knappens text cta1Label | Text | – |
Första knappens adress cta1Url | Länk | – |
Andra knappens text cta2Label | Text | – |
Andra knappens adress cta2Url | Länk | – |
Knappen Dela resultatet share | På / av | true |
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.