Komponenter· Webbplatsens delar
Webbplatsens delar
Sidhuvudmodeller, sidfötter, navigering, meddelandefält, flytande knappar, sök och cookiepolicy.
24 komponenter
Exemplen fungerar i testläge: inget sparas på en riktig webbplats, inga meddelanden skickas och betalningarna är testbetalningar.
Kontaktuppgifter per ämne
Sektion contactTopics
Kontaktuppgifter per ämne: försäljning, service, fakturering och andra ämnen, var och en med person eller team, telefon, e-post, betjäningstider och en länk till rätt formulär. Som kortrutnät, eller som dragspel när ämnena är många.
Inställningar (4)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Introduktion intro | Lång text | – |
Layout layout | Val | Kort |
Columns columns | Tal | 3 |
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 1 mallar
Länkstig
Sektion breadcrumbs
Länkstig: startsidan, överordnade sidor enligt menyn och den här sidan. Ett blogginlägg ligger under nyhetssidan och ett evenemang under evenemangssidan. Sökmotorerna får samma stig. Webbplatsens inställning visar stigen på alla undersidor; sektionen placerar den där du vill.
Inställningar (1)
| Inställning | Redigeras som | Standard |
|---|---|---|
På telefonen mobile | Val | – |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Header
Sektion header
Sidans överdel som sektion: namn eller logotyp, meny och knapp. Webbplatsens egen sidhuvud väljs under Utseende (modeller nedan).
Inställningar (14)
| Inställning | Redigeras som | Standard |
|---|---|---|
Logo logo | Bild | – |
Alternative text logoAlt | Text | – |
Logo width (px) logoWidth | Tal | – |
field_logoWidthMobile logoWidthMobile | Tal | – |
Logo height (px) logoHeight | Tal | – |
Menu menu | Val | Main menu |
Show language switcher showLocaleSwitcher | På / av | true |
Mobile navigation mobileNav | Val | Off-canvas drawer |
field_headerToggleSize headerToggleSize | Tal | – |
field_mobileNavBackground mobileNavBackground | Temafärg | – |
field_mobileNavColor mobileNavColor | Temafärg | – |
field_mobileNavFontSize mobileNavFontSize | Tal | – |
field_mobileNavFontWeight mobileNavFontWeight | Tal | – |
field_mobileNavItemHeight mobileNavItemHeight | Tal | – |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Meddelandefält
Sektion announcement
Ett meddelandefält överst på sidan: avvikande öppettider, ett erbjudande eller en viktig nyhet, vid behov stängbart.
Stilar (3)
Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.
Inställningar (8)
| Inställning | Redigeras som | Standard |
|---|---|---|
Text text | Text | Tiedote |
Länktext linkLabel | Text | – |
Länk linkUrl | Länk | – |
Ikon icon | Ikon | – |
Style variant | Val | Accentfärg |
Besökaren kan stänga dismissible | På / av | false |
Fler meddelanden more | Lång text | – |
Byt meddelande automatiskt rotate | Val | – |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 15 mallar
Flytande åtgärdsknapp
Sektion floatingCta
En flytande åtgärdsknapp som syns när man rullar: Boka, Ring eller Beställ.
Inställningar (4)
| Inställning | Redigeras som | Standard |
|---|---|---|
Label label | Text | Varaa |
URL url | Länk | /varaa |
Phone phone | Text | – |
Dölj på mobil hideOnPhone | På / av | false |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 2 mallar
Tillbaka upp-knapp
Sektion scrollTop
En tillbaka-upp-knapp som visas på en lång sida.
Inställningar (2)
| Inställning | Redigeras som | Standard |
|---|---|---|
Knappens namn för skärmläsare label | Text | Takaisin sivun alkuun |
Hörn side | Val | Nedre högra hörnet |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Flytande kontaktknapp (WhatsApp)
Sektion Prova contactButton
En flytande kontaktknapp: WhatsApp, samtal eller e-post med ett tryck.
Inställningar (7)
| Inställning | Redigeras som | Standard |
|---|---|---|
Knappens text label | Text | Ota yhteyttä |
WhatsApp-nummer med landskod (t.ex. +358 40…) whatsapp | Text | – |
Färdigskrivet meddelande message | Text | Hei! Minulla olisi kysymys. |
Phone phone | Text | – |
Använd webbplatsens telefonnummer useSitePhone | På / av | – |
Email email | Text | info@esimerkkiyritys.example |
Hörn side | Val | Nedre vänstra hörnet |
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Kakpolicy (tabell)
Sektion cookiePolicy
En cookiepolicy: en tabell som fylls i automatiskt med de tjänster och cookies som webbplatsen använder.
Inställningar (2)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Body intro | Formaterad text | – |
Tillgänglighet
Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.
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.
Webbplatssökning
Sektion Prova siteSearch
Webbplatssök: ett sökfält och resultat från webbplatsens sidor, nyheter och evenemang.
Inställningar (4)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Hjälptext i fältet placeholder | Text | – |
Button label buttonLabel | Text | – |
Visa träffarna på den här sidan showResults | 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.
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.
Aviseringar
Sektion Prova pushNotices
Aviseringar: besökaren kan prenumerera på aviseringar i webbläsaren eller telefonen om nya evenemang och nyheter.
Inget prenumereras i förhandsvisningen: knappen berättar vad den gör på en riktig webbplats.
Inställningar (7)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | – |
Förklaring ovanför knappen body | Lång text | – |
Button label buttonLabel | Text | – |
Integritetsnotis under knappen note | Lång text | – |
Sida för nyhetsbrevet (alternativ) newsletterUrl | Länk | – |
Länktext för nyhetsbrevet newsletterLabel | Text | – |
Layout layout | Val | Kort |
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 3 mallar
Logga in eller gå med
Sektion Prova accessGate
Logga in eller gå med: innehåll för medlemmar visas efter inloggning, andra erbjuds att gå med.
Inställningar (4)
| Inställning | Redigeras som | Standard |
|---|---|---|
Heading heading | Text | Vain jäsenille |
Introduktion intro | Formaterad text | – |
Uppmaningens text lead | Text | – |
Vem innehållet är för audience | Val | Endast medlemmar |
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.
Sidhuvud: Klassisk
Sidhuvud classic
Namnet till vänster, menyn i mitten, knappen till höger
Den vanligaste modellen: namn eller logotyp till vänster, meny i mitten och åtgärdsknapp till höger. På telefon öppnas menyn som panel.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 48 mallar
Alla 48 mallar
- Padelhall
- Tennishall
- Beachvolleyhall
- Litet hotell
- Upplevelser och turer
- Utrustningsuthyrning
- Webbutik
- Gym
- Personlig tränare
- Valkandidat
- Festlokal
- Trafikskola
- Biltvätt
- Bilhandel
- Biluthyrning
- Idrottare
- Författare
- Litterärt sällskap och klassiker
- Kurscenter och utbildningsföretag
- Pianoskola och instrumentlektioner
- Musik- och dansskola
- Musiker och band
- Inredningsarkitekt
- Influencer och innehållsskapare
- Elinstallation
- Bygg- och renoveringsföretag
- Markbyggnad och infra
- Städtjänst
- Konsult och coach
- Expertbyrå
- Planeringsbyrå
- Reklam- och kommunikationsbyrå
- Programvaruföretag och konsulting
- Bemanning och rekrytering
- Fastighetsförmedling
- Bokföringsbyrå
- Inrednings- och presentbutik
- Specialaffär
- Tillverkare och grossist
- Målare, tak, golv och snickare
- Loppis
- Sotare
- Kort- och betalapp
- Klätterhall (B)
- Lokalkedja
- Formgivning, grafisk design och video
- Översättare och översättningsbyrå
- Försäkringsombud
Sidhuvud: Centrerad
Sidhuvud centered
Namnet i mitten, menyn på en egen rad
Namnet i mitten och menyn på en egen rad under; passar ett kafé, en fest eller en författare.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Sidhuvud: Över bilden
Sidhuvud overlay
Genomskinlig över en stor bild, fast när man rullar
En genomskinlig list över en stor bild som blir fast när man rullar.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Sidhuvud: Kompakt
Sidhuvud compact
Låg list med menyn som ett runt band
En låg list med menyn som ett rundat band: mycket plats för innehåll.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Sidhuvud: Två rader
Sidhuvud topbar
Öppettider, telefon och sociala medier överst
Två rader: öppettider, telefon och sociala medier överst, namn och meny under.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 22 mallar
Alla 22 mallar
- Bilverkstad
- Däckaffär och däckhotell
- Besiktningsstation
- Bilplåtverkstad
- Bärgning
- Taxi
- Gård och direktförsäljning
- Fotografens register
- Fysioterapi: bokning först
- Transport och logistik
- VVS-firma
- Fastighetsservice
- Advokatbyrå
- IT-support för småföretag
- Tandläkare
- Fysioterapi och terapi
- Veterinär
- Cykelaffär
- Närbutik
- Järnhandel
- Vårdhem och daghem
- Apotek
Sidhuvud: Menyknapp
Sidhuvud drawer
Alla sidor i en panel som öppnas
En menyknapp: alla sidor öppnas i en panel; passar när det finns många sidor.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Sidfot: spalter
Sidfot columns
Spalter: kontaktuppgifter, meny, öppettider och sociala medier i egna spalter.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 94 mallar
- Padelhall
- Tennishall
- Beachvolleyhall
- Yoga- eller pilatesstudio
- Massage eller klinik
- Barberare eller frisör
Alla 94 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
- Fotografens register
- Inredningsarkitekt
- Fysioterapi: bokning först
- 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
- Stiftelse
- 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
Sidfot: avskalad
Sidfot minimal
Avskalad: en rad med namn, länkar och upphovsrätt.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Sidfot: centrerad
Sidfot centered
Centrerad: namn, länkar och sociala medier centrerade under varandra.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.
Sidfot: staplad
Sidfot stacked
Staplad: stora kontaktuppgifter först, menyn och juridiska länkar under.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
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.