Omasivusto.fi
Components· Marketing

Components

Marketing

Pricing, testimonials, team, numbers, logos and comparisons that convince a visitor.

11 components

The examples are rendered in the chosen theme: a gallery template's own colours, fonts and corners, or a dark ready-made palette.

The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.

Pricing

Section pricing

Pricing cards side by side: the plan's name, price, what is included and a button. One card can be marked as recommended.

Styles (5)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (10)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Monthly and yearly prices periodToggleOn / off–
Shown first defaultPeriodChoice– (Monthly prices · Yearly prices)
Monthly option text monthlyLabelText–
Yearly option text yearlyLabelText–
Saving note saveNoteText–
VAT note vatNoteChoice– (No note · From the site’s Customers setting · Prices include VAT · Prices exclude VAT (business customers) · VAT-exempt sales)
Design designChoice– (Basic · Shadowed cards · Bordered · Rows · Gradient highlight)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Testimonials

Section testimonials

Customer testimonials with name, role, photo and star rating, as cards, a wall or a carousel.

Styles (6)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (9)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Columns columnsNumber3
Heading position headAlignChoice– (Centred · Left)
Bottom button text buttonLabelText–
Button link buttonUrlLink–
Bottom button style buttonVariantChoice– (Primary · Secondary · Outline)
Design designChoice– (Basic · One large quote · Wall · Light · Accent colour · Carousel)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

Accessibility

No automatic motion by default. If the owner turns motion on, a Pause button is the first control and prefers-reduced-motion always stops it (WCAG 2.2.2). The controls have names in the site's language.

Team

Section team

Staff or board: photo, name, role and contact details as cards, circles or a list.

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (9)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Columns columnsNumber4
Heading position headAlignChoice– (Centred · Left)
Bottom button text buttonLabelText–
Button link buttonUrlLink–
Bottom button style buttonVariantChoice– (Primary · Secondary · Outline)
Design designChoice– (Basic · Round photos · List · Name over photo)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Key figures

Section stats

Key figures as large numbers with labels: years, customers, courts or members.

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (9)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Columns columnsNumber4
Heading position headAlignChoice– (Centred · Left)
Bottom button text buttonLabelText–
Button link buttonUrlLink–
Bottom button style buttonVariantChoice– (Primary · Secondary · Outline)
Design designChoice– (Basic · Cards · Dividers · Colour band)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Logos

Section logoCloud

Logos of customers, partners or sponsors as a grid or a row, optionally as links.

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (6)
SettingEdited asDefault
Heading headingText–
Display displayChoiceGrid (Grid · Moving strip)
Columns columnsNumber6
Strip speed speedChoice– (Slow · Normal · Fast)
Greyscale logos grayscaleOn / off–
Design designChoice– (Basic · Tiles · Divided grid · Heading at the side)

Accessibility

No automatic motion by default. If the owner turns motion on, a Pause button is the first control and prefers-reduced-motion always stops it (WCAG 2.2.2). The controls have names in the site's language.

Comparison table

Section comparison

A comparison table: plans or options as columns and features as rows with ticks.

Settings (8)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Columns columnsTextPerus|Plus
Rows rowsLong textOminaisuus|+|+ Toinen ominaisuus|-|+
Highlighted column (0 = none) highlightNumber–
On phones mobileChoice– (Table scrolls sideways · One column at a time, picker above)
Groups can be collapsed collapsibleOn / off–
Header row stays visible stickyHeaderOn / off–

Accessibility

Tables have header cells and a caption, lists are real lists and dates are in a readable form. A chart's numbers are available as text too.

Trust badges

Section trustBadges

Trust badges: certificates, memberships, payment methods or guarantees as small marks.

Settings (4)
SettingEdited asDefault
Heading headingText–
Introduction introLong text–
Layout layoutChoiceRow (Row · Cards)
Columns columnsNumber3

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Card stack

Section Try it cardStack

Card stack: 3–7 cards with icons in a stack that turns one step every few seconds, the middle card highlighted. Also a hero visual. Pause button; still for reduced motion.

Settings (7)
SettingEdited asDefault
Heading headingText–
Introduction introLong text–
Speed stackSpeedChoiceNormal (Slow · Normal · Fast)
Green check on the middle card stackCheckOn / offtrue
Card style stackLookChoiceGlass (translucent, for dark backgrounds) (Glass (translucent, for dark backgrounds) · Plain (for light backgrounds))
Card shape stackShapeChoiceRounded card (Rounded card · Pill (smaller, every card in sight))
List name for screen readers stackLabelText–

Accessibility

No automatic motion by default. If the owner turns motion on, a Pause button is the first control and prefers-reduced-motion always stops it (WCAG 2.2.2). The controls have names in the site's language.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Showcase carousel

Section Try it showcase

Showcase carousel: tall picture cards in a row that scrolls sideways, the next cards fading at the edges. A portfolio, work or site templates. Works without JavaScript; previous/next buttons, no automatic scrolling.

Settings (11)
SettingEdited asDefault
Heading headingText–
Introduction introLong text–
Cards sourceChoiceOwn cards (blocks) (Own cards (blocks) · Omasivusto site templates (platform site only))
Templates to show templatesLong text–
Cards in view on a wide screen perViewNumber3
Picture shape ratioChoicePortrait 3:4 (Portrait 3:4 · Portrait 4:5 · Square · Landscape 4:3)
Buttons actionsChoiceWhen a card is pointed at (always on touch screens) (When a card is pointed at (always on touch screens) · Always visible)
Fade the cards at the edges fadeOn / offtrue
Width widthChoice– (Content width · Full width)
Preview button text previewLabelText–
Start button text startLabelText–

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Social feed

Section socialFeed

A social feed: an Instagram-like grid of pictures, added by hand or fetched from the account.

Settings (8)
SettingEdited asDefault
Heading headingTextInstagram
Network networkChoiceInstagram (Instagram · Facebook)
Profile URL profileUrlLink–
Username (e.g. @ourclub) handleText–
Text of the follow button followLabelText–
Layout layoutChoice– (Grid · One row that scrolls sideways)
Columns columnsNumber4
Limit limitNumber4

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Project details

Section projectDetails

A project's key details at the top of its page: client, year, scope, services and a link.

Settings (7)
SettingEdited asDefault
Client clientTextAsiakkaan nimi
Year yearText2026
Services (shown as the type in the project list) servicesTextMitä teimme
Role roleText–
Location locationTextPaikkakunta
Link (e.g. the finished site) linkUrlLink–
Link text linkLabelText–

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.