Klassen

Skalieren Sie Ihre Website ohne Entwickler und befähigen Sie Ihr Marketingteam, Ihre Marke zu vermarkten. CSS-Klassennamen, die auch eine Oma verstehen kann. Keine Abkürzungen, keine Kurzschrift, keine Verwirrung. Lesen Sie einen Klassennamen und wissen Sie, was er bewirkt.

Struktur

Wir haben die wichtigsten Grundlagen definiert, damit Sie den Komplex mit weniger Aufwand aufbauen können.

Kernstrukturen und maximale Breite

Verwenden Sie diese Struktur, um die meisten Seiten zu erstellen:

.page-wrapper

.abschnitt

.container

.page-padding

...(z.B. Raster, Layouts, Komponenten, etc.)

.container

.max-800

.max-600

.max-500

.max-400

.max-200

Globale Polsterung

Äußere übergeordnete Klasse zur Erstellung globaler horizontaler Abstände auf der gesamten Website

.page-padding

EINIGE DIESER UTILITY-KLASSEN SOLLTEN VERSCHOBEN WERDEN. Etwas wie anklickbar muss nicht so weit oben auf der Liste der Klassen stehen

Utility-Klassen

.z-1 - Bringt ein Element näher an den Z-Index. Setzt z-index auf 1.

.z-2 - Bringt ein Element näher an den Z-Index. Setzt z-index auf 2.

.full-size - Keine maximale Breite für einen .container. Setzt max-width auf none.

.full-size-tablet - .full-size auf Tablets. Setzt max-width auf Tablet auf none.

.full-size-mobile - .full-size auf Mobilgeräten. Setzt max-width auf keine auf dem Handy.

.align-center - Zentriert einen .container auf dem Bildschirm. Setzt Rand links und rechts auf Auto.

.div-square - Erzeugt und bewahrt eine 1:1-Dimension eines div. CSS-Magie.

.layer - Dem div hinzufügen, um es auf die gesamte Größe des übergeordneten Elements zu erweitern. Stellen Sie sicher, dass das übergeordnete div "position: relative" hat.

.clickable-off - Verhindert alle Klick- und Hover-Interaktionen mit einem Element. Setzt Zeiger-Ereignisse auf keine.

.clickable-on - Aktiviert alle Klick- und Hover-Interaktionen mit einem Element. Setzt Zeiger-Ereignisse auf auto.

.crop - Verhindert das Überlaufen eines .container. Setzt den Überlauf auf versteckt.

.sticky-on-page - Erforderliches Add-on zu .page-wrapper, wenn 'position: sticky' auf einer Seite ist. Setzt den Überlauf auf sichtbar.

Raster

Erstellen Sie jedes Layout mit Rastern. Verwenden Sie es, wenn Sie Spalten und Zeilen benötigen.

Gitternetzspalten

.grid-1-col

.grid-2-col

.grid-3-col

.grid-4-col

Rasterzeilen

.grid-row

Artikel

Ergänzungen zu 'Rasterzeilen'

Fügen Sie diese Klassen zusätzlich zu den oben genannten "Grid rows"-Klassen hinzu.

.gap-10

Artikel

.gap-40

Artikel

.gap-60

Artikel

Einfache Zeile und Spalte

.Zeile

Artikel

.col

Artikel

Abstände

Abstandssystem, das die vertikalen und horizontalen Abstände auf Ihrer Website global hält.

Abstände - horizontal

linker Rand und rechter Rand

Platz links

.space-left-xsmall

.leer-links-klein

.leer-links-medium

.leer-links-groß

.space-left-xlarge

Platz rechts

.space-right-xsmall

Element

.leer-rechts-klein

Element

.raum-rechts-mittel

Element

.raum-rechts-groß

Element

.space-right-xlarge

Element

Abstände - vertikal

Rand unten und Rand oben

Raum Boden

.leer-unten-xsmall

.leer-unten-klein

.leer-unten-mittel

.leer-unten-groß

.leer-unten-xlarge

Raumfahrt oben

.space-top-xsmall

.leer-oben-klein

.raum-oben-mittel

.space-top-large

.space-top-xlarge

Abstände - gleicher innerer Abstand für die Abschnitte

Abstände - gleich links rechts

padding-left und padding-right

.abschnitt-raum-horizontal-20-20

.abschnitt-raum-horizontal-40-40

.abschnitt-raum-horizontal-60-60

Abstände - gleich oben unten

padding-top und padding-bottom

.abschnitt-raum-vertikal-20-20

.abschnitt-raum-vertikal-40-40

.abschnitt-raum-vertikal-80-80

Entfernen Sie alle Abstände von Standard-Webflow-Komponenten

.space-clean

Typografie

Typografische Gestaltung hält Ihre Marke professionell. Korrekte Verwendung von H1, H2, H3 für SEO.

Überschrift-Tags

Verwenden Sie immer Tags, um Überschriften festzulegen.

Die Seite darf nur eine H1-Überschrift haben - SEO-Anforderung. Fügen Sie die Klasse .style-heading-large zu h2, h3, etc. hinzu, wenn Sie mehr als eine Überschrift mit dem gleichen Stil wie H1 benötigen.

H1

H2

H3

H4

H5

H6

Schriftgröße einzigartig

.style-überschrift-riesig

.style-überschrift-groß

.style-überschrift-medium

Inhalt

Absatztext - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.style-text-groß

.style-text-klein

.style-text-tiny

Text Link

Block Zitat

.style-text-durchgestrichen

Reichhaltiger Text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Wir haben eine spezielle .rich-text-Klasse mit einer speziellen Formatierung für jede Komponente erstellt.

h1

h2

h3

h4

h5

h6

Zitat

Link

Listenelement
Listenelement
‍

Text des Absatzes

Gewicht der Schriftart

.style-text-fett

.style-text-normal

Textausrichtung

.style-text-links

.style-text-zentrum

.style-text-rechts

Farben

Typografische Gestaltung hält Ihre Marke professionell. Korrekte Verwendung von H1, H2, H3 für SEO.

Textfarbe

Hinzufügen zu Abschnitten, Containern und Elementen, um die Hintergrundfarbe zu ändern

.style-text-farbe-weiß

.style-text-farbe-grau

.style-text-farbe-schwarz

.style-text-muted - fügt dem Text Deckkraft hinzu

Hintergrundfarben-Add-ons

Hinzufügen zu Abschnitten, Containern und Elementen, um die Hintergrundfarbe zu ändern

.style-hintergrund-weiß

.style-hintergrund-grau

.stylebackground-schwarz

Responsive Sichtbarkeit

Einzigartige Erfahrung auf jedem Gerät.

Ein- und Ausblenden von Elementen nach Bildschirmgröße

.hide - auf allen Geräten ausblenden

.hide-tablet - Ausblenden ab der Tablet-Auflösung

.hide-landscape - Ausblenden ab Querformatauflösung

.hide-mobile - Ausblenden ab der mobilen Auflösung

.show-tablet - Anzeige ab der Tablet-Auflösung

.show-landscape - Anzeige ab Querformatauflösung

.show-mobile - Anzeige ab der mobilen Auflösung

Komponenten

Formularkomponenten, Schaltflächen, Dropdowns, Registerkarten, Schieberegler und vieles mehr.

Buttons

Tipp: Verwenden Sie .grid-row .gap-small/medium/large als Wrapper, um den Abstand zwischen zwei Buttons zu setzen

.button

.button-secondary

.schaltflächen-text

Verwenden Sie die Add-on-Klasse .invert-colors, wenn Sie eine Schaltfläche auf dunklem Hintergrund platzieren

.button

.button-secondary

.schaltflächen-text

Formulare

Webflow-eigene Formularelemente

Ich danke Ihnen! Ihre Einreichung ist eingegangen!

Hoppla! Etwas ist beim Einreichen des Formulars schiefgegangen.

Schieberegler

Dies ist ein Text innerhalb eines div-Blocks.

Registerkarten

Dies ist ein Text innerhalb eines div-Blocks.

Icons

Icon-Klassen

.icon-16

.icon-30

.icon-40

.icon-60

.icon-80

.icon-1x1-xsmall

.icon-1x1-klein

.icon-1x1-medium

.icon-1x1-groß

.icon-1x1-xlarge

Inline SVG-Symbole

Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>

Klassen

Struktur

Kernstrukturen und maximale Breite

Globale Polsterung

Utility-Klassen

Raster

Gitternetzspalten

Rasterzeilen

Ergänzungen zu 'Rasterzeilen'

Einfache Zeile und Spalte

Abstände

Abstände - horizontal

Platz links

Platz rechts

Abstände - vertikal

Raum Boden

Raumfahrt oben

Abstände - gleicher innerer Abstand für die Abschnitte

Abstände - gleich links rechts

Abstände - gleich oben unten

Entfernen Sie alle Abstände von Standard-Webflow-Komponenten

Typografie

Überschrift-Tags

H1

H2

H3

H4

H5

H6

Schriftgröße einzigartig

Inhalt

Reichhaltiger Text

h1

h2

h3

h4

h5

h6

Gewicht der Schriftart

Textausrichtung

Farben

Textfarbe

Hintergrundfarben-Add-ons

Responsive Sichtbarkeit

Ein- und Ausblenden von Elementen nach Bildschirmgröße

Komponenten

Navigation

Buttons

Formulare

Schieberegler

Registerkarten

Auswahlliste

Leuchtkasten

Suche

Icons

Icon-Klassen

Inline SVG-Symbole