Grid

Layouts - Flex

Note: in a real-world example the container of the construct needs Min Height: 100vh to fill the browser window's full height.

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?

Elements

Navigation

Grid

Flex Rows

Whole
Half
Half
Half
Half
Third
Third
Third
Quarter
Quarter
Quarter
Quarter
33
Auto
50
Auto
Auto
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Fluent Column
Elements

Hyphen & Break

Soft Hyphen (­) [­]

Zero Space Break (​) [​]

Elements

Lists

  • Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
  • Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
  • Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
  • Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
Elements

Lists Custom Elements

Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang.

Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang.

Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Elements

Rich Text

This is a Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a old camera lens

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a very long Headline to test the line height in advance and trouble shoot the text

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a very long Headline to test the line height in advance and trouble shoot the text

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a very long Headline to test the line height in advance and trouble shoot the text

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Life is about making an impact not a living...

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

This is a Headline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item

Elements

Tooltips

Note: for using tooltips the custom CSS needs to be copied into the global custom CSS section.

Add to which ever element the custom html attributes data-balloon and data-balloon-pos with their respective values in the "Settings"-Tap to integrate a tooltip.

For the message, use the data-balloon html attribute with "your custom text" as the value.

Touch me!

For positioning, use the data-balloon-pos html attribute with one of the values: up, up-left, up-right, down, down-left, down-right, left or right

Touch me!

For size, use the data-balloon-length html attribute with one of the values: smallmediumlarge, xlarge or fit (fits the size of the button or image element). The pixel sizes for each attribute can be modified in the CSS file.

Touch me!

To initially delay the appearance of the tooltip, use the data-balloon-delay html attribute with one of the values: 0.5, 0.75, 1 or 1.25. These values directly reflect the length of the initial delay in seconds.

Touch me!

To show a tooltip on a Word, it has to be simply wrapped with a <span> and then needs the </span>data-balloon and data-balloon-pos html attributes added to it. To give the word an even stronger hint feel, give the <span> a custom "?" cursor.</span>
In real usage of a hint, the word shouldn't be bold or in a different color. More like this.

If you want to show tooltips even when user interaction isn't happening, you can simply use the data-balloon-visible html attribute with an attribute value (the number 1 as an example)

Touch me!

To change the color of the tooltip, following values have to be changed in the css style sheet [data-balloon]:after {background; color;}. "Background" is for the shape and "color" is for the text.

For the the little triangle of the shape, following part of each of the 4 svg-shapes (one for each direction) in the css style sheet has to be modified:
fill%3D%22rgba%2817,%2017,​%2017,%200.9%29%22

A Hex-Code value has to be implemented like this:
fill%3D%22#1FCE95%22

Touch me!

Under this Link or in the folder "Webflow Resources" more features of the Tooltip extension can be found.

FUNCTIONS

Modal

Modal Open
Custom Code
Elements

Tabs

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Elements

Accordions

Dropdown
Dropdown
Simple

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Simple

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Elements

Kontaktformular

Form Prozessor

Set in the foSet in the "Form Settings" the "Method" of the form to post. Then paste in the field "Action" the url path of the form processor.

In the embed element is the default php form processor code, which has to be placed on the server as a php file to which the form directs when the form is submited.

Custom Code
Default
File upload

In order for the file upload to work in the formprocessor, the div "Form" inside the form block needs this html attribute: enctype="multipart/form-data"

Datei auswählen oder hier reinziehen.

This is some text inside of a div block.

Datei auswählen oder hier reinziehen.

Datei auswählen oder hier reinziehen.

Datei auswählen oder hier reinziehen.

reCaptcha V2 – Webflow (Global recaptcha activation)
reCaptcha V2 – Embed (Single recaptcha activation)
Custom Code
* Pflichtfelder
Ihre Daten werden verschlüsselt übertragen
Vielen Dank! Ihre Kontaktanfrage wurde von uns empfangen!
Oh nein! Irgendwas ist schiefgelaufen. Probieren Sie es bitte noch einmal!
Labels – Fixed
* Pflichtfelder
Ihre Daten werden verschlüsselt übertragen
Vielen Dank! Ihre Kontaktanfrage wurde von uns empfangen!
Oh nein! Irgendwas ist schiefgelaufen. Probieren Sie es bitte noch einmal!
Labels – Dynamic
Ihre Daten werden verschlüsselt übertragen
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

The Color-Style can be modified by the "my-style" CSS-File. Either manually or by generating a color-scheme on this site Datedropper

Vielen Dank! Ihre Kontaktanfrage wurde von uns empfangen!
Oh nein! Irgendwas ist schiefgelaufen. Probieren Sie es bitte noch einmal!
Step 1

An welchem Produkttyp sind Sie interessiert?

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step 2

Radio Square Icon – Anrede

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step 3

Input Text – Nachname

Bitte tragen Sie die gewünschte Infor­mation ein um fort­zu­fahren
Step 4
Sehr gut
Herr
Frau
Nachname

Radio Slim Small – Ja/Nein

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step 5

Radio Square Icon – Bewertung

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step 6

Input Text Number – Alter

Bitte tragen Sie die gewünschte Infor­mation ein um fort­zu­fahren
Step 9

Input Text Number – Dimensions

m
X
m
Bitte tragen Sie die gewünschte Infor­mation ein um fort­zu­fahren
Step 7

Checkbox Multi Choice + Text Input

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step 8

Radio Square Icon Large

Bitte machen Sie eine Aus­wahl um fort­zu­fahren
Step Final

Fast geschafft

Herr

Frau

Nachname

Teilen Sie uns nun noch Ihre Mail­adresse oder Telefon­nummer mit – dann erhalten Sie von uns eine erste Ein­schätzung, welche Schlaf­lösung für Sie geeignet ist.

Ihre Daten werden verschlüsselt übertragen
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.