Omasivusto.fi
Komponenter· Marknadsföring

Komponenter

Marknadsföring

Prislistor, kundomdömen, team, siffror, logotyper och jämförelser som övertygar besökaren.

11 komponenter

Exemplen ritas med det valda temat: en gallerimalls egna färger, typsnitt och rundningar, eller en mörk färdig palett.

Exemplen fungerar i testläge: inget sparas på en riktig webbplats, inga meddelanden skickas och betalningarna är testbetalningar.

Prissättning

Sektion pricing

Priskort sida vid sida: paketets namn, pris, vad som ingår och en knapp. Ett kort kan lyftas fram som rekommenderat.

Stilar (5)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (10)
InställningRedigeras somStandard
Heading headingText–
Introduktion introFormaterad text–
Månads- och årspris periodTogglePå / av–
Visas först defaultPeriodVal– (Månadspriser · Årspriser)
Text för månadsval monthlyLabelText–
Text för årsval yearlyLabelText–
Spartext saveNoteText–
Momsuppgift vatNoteVal– (Ingen uppgift · Enligt webbplatsens inställning Kunder · Priserna inkluderar moms · Priser exklusive moms (företagskunder) · Momsfri försäljning)
Stil designVal– (Grund · Skuggade kort · Kantlinjer · Rader · Markering med toning)
Markering vid pekning cardHighlightVal– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Kundomdömen

Sektion testimonials

Kundomdömen med namn, roll, bild och stjärnbetyg som kort, vägg eller karusell.

Stilar (6)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (9)
InställningRedigeras somStandard
Heading headingText–
Introduktion introFormaterad text–
Columns columnsTal3
Rubrikens placering headAlignVal– (Centrerad · Vänster)
Text på knappen nederst buttonLabelText–
Button link buttonUrlLänk–
Stil på knappen nederst buttonVariantVal– (Primary · Secondary · Kontur)
Stil designVal– (Grund · Ett stort citat · Vägg · Lätt · Accentfärg · Karusell)
Markering vid pekning cardHighlightVal– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

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.

Team

Sektion team

Personal eller styrelse: bild, namn, roll och kontaktuppgifter som kort, cirklar eller lista.

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (9)
InställningRedigeras somStandard
Heading headingText–
Introduktion introFormaterad text–
Columns columnsTal4
Rubrikens placering headAlignVal– (Centrerad · Vänster)
Text på knappen nederst buttonLabelText–
Button link buttonUrlLänk–
Stil på knappen nederst buttonVariantVal– (Primary · Secondary · Kontur)
Stil designVal– (Grund · Runda bilder · Lista · Namn på bilden)
Markering vid pekning cardHighlightVal– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Nyckeltal

Sektion stats

Nyckeltal som stora siffror med förklaring: år, kunder, banor eller medlemmar.

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (9)
InställningRedigeras somStandard
Heading headingText–
Introduktion introFormaterad text–
Columns columnsTal4
Rubrikens placering headAlignVal– (Centrerad · Vänster)
Text på knappen nederst buttonLabelText–
Button link buttonUrlLänk–
Stil på knappen nederst buttonVariantVal– (Primary · Secondary · Kontur)
Stil designVal– (Grund · Kort · Lodräta linjer · Färgband)
Markering vid pekning cardHighlightVal– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Logotyper

Sektion logoCloud

Logotyper för kunder, partner eller sponsorer som rutnät eller rad, vid behov som länkar.

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (6)
InställningRedigeras somStandard
Heading headingText–
Visning displayValRutnät (Rutnät · Rörligt band)
Columns columnsTal6
Bandets hastighet speedVal– (Långsam · Normal · Snabb)
Logotyper i gråskala grayscalePå / av–
Stil designVal– (Grund · Plattor · Rutnät med linjer · Rubrik vid sidan)

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.

Jämförelsetabell

Sektion comparison

En jämförelsetabell: paket eller alternativ som spalter och egenskaper som rader med bockar.

Inställningar (8)
InställningRedigeras somStandard
Heading headingText–
Introduktion introFormaterad text–
Kolumner columnsTextPerus|Plus
Rader rowsLång textOminaisuus|+|+ Toinen ominaisuus|-|+
Markerad kolumn (0 = ingen) highlightTal–
På mobilen mobileVal– (Tabellen rullar i sidled · En kolumn i taget, val ovanför)
Grupperna kan fällas ihop collapsiblePå / av–
Rubrikraden förblir synlig stickyHeaderPå / av–

Tillgänglighet

Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.

Förtroendemärken

Sektion trustBadges

Förtroendemärken: certifikat, medlemskap, betalsätt eller garantier som små märken.

Inställningar (4)
InställningRedigeras somStandard
Heading headingText–
Introduktion introLång text–
Layout layoutValRad (Rad · Kort)
Columns columnsTal3

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Kortstapel

Sektion Prova cardStack

Kortstapel: 3–7 kort med ikoner i en stapel som vrids ett steg med några sekunders mellanrum, mittersta kortet framhävt. Även som toppbild. Pausknapp; stilla vid minskad rörelse.

Inställningar (7)
InställningRedigeras somStandard
Heading headingText–
Introduktion introLång text–
Hastighet stackSpeedValNormal (Långsam · Normal · Snabb)
Grön bock på mittersta kortet stackCheckPå / avtrue
Kortstil stackLookValGlas (genomskinlig, för mörk bakgrund) (Glas (genomskinlig, för mörk bakgrund) · Enkel (för ljus bakgrund))
Kortens form stackShapeValRundat kort (Rundat kort · Piller (mindre, alla kort syns))
Listans namn för skärmläsare stackLabelText–

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.

Visningskarusell

Sektion Prova showcase

Visningskarusell: höga bildkort i en rad som rullar i sidled, nästa kort tonas ut vid kanterna. Portfolio, arbeten eller webbplatsmallar. Fungerar utan JavaScript; knappar för föregående/nästa, ingen automatisk rullning.

Inställningar (11)
InställningRedigeras somStandard
Heading headingText–
Introduktion introLång text–
Kort sourceValEgna kort (block) (Egna kort (block) · Omasivustos webbplatsmallar (endast plattformens egen webbplats))
Mallar som visas templatesLång text–
Kort som syns på bred skärm perViewTal3
Bildens form ratioValStående 3:4 (Stående 3:4 · Stående 4:5 · Kvadrat · Liggande 4:3)
Knappar actionsValNär man pekar på kortet (alltid på pekskärm) (När man pekar på kortet (alltid på pekskärm) · Alltid synliga)
Tona ut korten vid kanterna fadePå / avtrue
Width widthVal– (Content width · Full width)
Text på förhandsgranskningsknappen previewLabelText–
Text på startknappen startLabelText–

Tillgänglighet

Varje bild har alternativ text eller är markerad som dekorativ. Förstoring och bildbläddraren fungerar med tangentbordet (pilar, Esc) och anger positionen (”Bild 2 av 5”). Bara den första synliga bilden laddas direkt.

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.

Social feed

Sektion socialFeed

Ett socialt flöde: ett Instagram-liknande bildrutnät, tillagt för hand eller hämtat från kontot.

Inställningar (8)
InställningRedigeras somStandard
Heading headingTextInstagram
Nätverk networkValInstagram (Instagram · Facebook)
Profil-URL profileUrlLänk–
Användarnamn (t.ex. @varforening) handleText–
Text på följ-knappen followLabelText–
Layout layoutVal– (Rutnät · En rad som rullas i sidled)
Columns columnsTal4
Limit limitTal4

Tillgänglighet

Varje bild har alternativ text eller är markerad som dekorativ. Förstoring och bildbläddraren fungerar med tangentbordet (pilar, Esc) och anger positionen (”Bild 2 av 5”). Bara den första synliga bilden laddas direkt.

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.

Projektuppgifter

Sektion projectDetails

Projektets grunduppgifter överst på sidan: kund, år, omfattning, tjänster och en länk.

Inställningar (7)
InställningRedigeras somStandard
Kund clientTextAsiakkaan nimi
År yearText2026
Tjänster (visas som typ i projektlistan) servicesTextMitä teimme
Roll roleText–
Plats locationTextPaikkakunta
Länk (t.ex. färdig webbplats) linkUrlLänk–
Länktext linkLabelText–

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.