Typografie
HTML-Überschriften-Tags
HTML-Tags definieren Standard-Überschriftenstile.
Alle H1 Überschriften

Überschrift 1

Alle H2 Überschriften

Überschrift 2

Alle H3 Überschriften

Überschrift 3

Alle H4 Überschriften

Überschrift 4

Alle H5 Überschriften
Rubrik 5
Alle H6 Überschriften
Rubrik 6
Überschriftenklassen
Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.
Überschrift-Stil-h1

Überschrift-Stil-h1

Überschrift-Stil-h2

Überschrift-Stil-h2

Überschrift-Stil-h3

Überschrift-Stil-h3

Überschrift-Stil-h4

Überschrift-Stil-h4

Überschrift-Stil-h5

Überschrift-Stil-h5

Überschrift-Stil-h6

Überschrift-Stil-h6

Andere HTML-Tags
HTML-Tags definieren Standardtextstile.
Alle Paragraphen

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.

Alle Links
Alle Links
Alle Block Zitate
Block Zitat
Alle unsortierten Listen
  • Keine Aufzählungsliste

  • Keine Aufzählungsliste

Alle unsortierten Listen
  • Keine Aufzählungsliste

  • Keine Aufzählungsliste

Alle geordneten Listen
  1. Keine Aufzählungsliste

  2. Keine Aufzählungsliste

  3. Keine Aufzählungsliste

Textgrößen
Textgrößenklassen, wenn die Größe der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-size-large

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.

text-size-regular

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.

text-size-small

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.

Bildunterschrift

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.

Textgewichte
Textgewichtsklassen, wenn das Gewicht der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Textstile
Textstilklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
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.
text-style-3lines
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. 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.
text-style-muted
text-style-muted
Textausrichtung
Textausrichtungsklassen, wenn die Ausrichtung der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Rubrik 5
Rubrik 6
Dies ist ein Blockzitat

Mit dem Rich-Text-Element kannst du Überschriften, Absätze, Blockzitate, Bilder und Videos an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Mit einem Doppelklick kannst du ganz einfach Inhalte erstellen.

Dies ist ein Link innerhalb eines Rich Textes

  • Posten auflisten
  • Posten auflisten
  • Posten auflisten
  1. Posten auflisten
  2. Posten auflisten
  3. Posten auflisten
Die Bildunterschrift ist hier
industrie_rich-text

Was ist ein Rich Text-Element?

Mit dem Rich-Text-Element kannst du Überschriften, Absätze, Blockzitate, Bilder und Videos an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Mit einem Doppelklick kannst du ganz einfach Inhalte erstellen.

Bearbeitung statischer und dynamischer Inhalte

Ein Rich-Text-Element kann mit statischen oder dynamischen Inhalten verwendet werden. Für statische Inhalte fügst du es einfach auf einer beliebigen Seite ein und beginnst mit der Bearbeitung. Für dynamische Inhalte fügst du ein Rich-Text-Feld zu einer beliebigen Sammlung hinzu und verbindest dann ein Rich-Text-Element mit diesem Feld im Einstellungsfenster. Voila!

Wie man die Formatierung für jeden Rich Text anpasst

Überschriften, Absätze, Blockzitate, Abbildungen, Bilder und Abbildungsunterschriften können alle gestylt werden, nachdem dem Rich-Text-Element mit dem verschachtelten Selektorensystem "Wenn innerhalb von" eine Klasse hinzugefügt wurde.

zahlungen_rich-text

Was ist ein Rich Text-Element?

Mit dem Rich-Text-Element kannst du Überschriften, Absätze, Blockzitate, Bilder und Videos an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Mit einem Doppelklick kannst du ganz einfach Inhalte erstellen.

Bearbeitung statischer und dynamischer Inhalte

Text

Text

Bearbeitung statischer und dynamischer Inhalte

Ein Rich-Text-Element kann mit statischen oder dynamischen Inhalten verwendet werden. Für statische Inhalte fügst du es einfach auf einer beliebigen Seite ein und beginnst mit der Bearbeitung. Für dynamische Inhalte fügst du ein Rich-Text-Feld zu einer beliebigen Sammlung hinzu und verbindest dann ein Rich-Text-Element mit diesem Feld im Einstellungsfenster. Voila!

Wie man die Formatierung für jeden Rich Text anpasst

Überschriften, Absätze, Blockzitate, Abbildungen, Bilder und Abbildungsunterschriften können alle gestylt werden, nachdem dem Rich-Text-Element mit dem verschachtelten Selektorensystem "Wenn innerhalb von" eine Klasse hinzugefügt wurde.

Farben
Hintergrundfarbe
bg-color-white
#fff
bg-color-black
#000
bg-farbe-1
#889e77
bg-farbe-2
#9e7777
bg-Farbe-3
#334350
bg-farbe-4
#f4f4f7
bg-farbe-5
#ebedee
bg-farbe-6
#E2E7EE
bg-farbe-7
#f1f2f4
Textfarbe
Verwalte wiederkehrende Textfarben.
Text-Farbe-1
Dies ist ein Text innerhalb eines div-Blocks.
Text-Farbe-2
Dies ist ein Text innerhalb eines div-Blocks.
Text-Farbe-3
Dies ist ein Text innerhalb eines div-Blocks.
Text-Farbe-4
Dies ist ein Text innerhalb eines div-Blocks.
UI-Elemente
Buttons
Taste
is-secondary
Link-Text
splide__arrows
left-position-slider-arrows
splide__arrows
right-position-slider-arrows
splide__arrows
top-left-position-slider-arrows
splide__arrows
bottom-left-position-slider-arrows
splide__arrow
Kreis-Schieberegler-Pfeil
splide__arrow--prev
circle-slider-arrow-prev
splide__arrow--next
Kreis-Schieberegler-Pfeil-Nächster
splide__pagination__page
Kreis-Punkt
splide__pagination__page
Kreis-Punkt
is-active
splide__pagination__page
Kreis-Punkt
splide__pagination__page
Kreis-Punkt
is-active
splide__arrow
Kreis-Schieberegler-Pfeil-dunkel
splide__arrow--prev
circle-slider-arrow-prev-dark
splide__arrow--next
circle-slider-arrow-next-dark
splide__pagination
right-slider-pagination
Form-Elemente
Feld-Label
Formular-Eingabe
Formular-Eingabe
is-text-area
Formular-Eingabe
is-select-input
form-checkbox
form-radio
Taste
Vielen Dank! Ihre Anfrage ist eingegangen!
Hoppla! Beim Absenden des Formulars ist ein Fehler aufgetreten.
Icons (Bild)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

Symbol-1x1-klein

icon-1x1-medium

Symbol-1x1-groß

icon-1x1-xlarge

icon-1x1-custom1

Icons (HTML Embed)
HTML Embed Icons ermöglichen es dir, die Farbe des Icons beim Hovern zu steuern.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Struktur-Klassen
Definierte und flexible Kernstruktur, die wir auf allen oder den meisten Seiten verwenden können.
page-wrapper
main-wrapper
Container-klein
container-medium
Container-groß
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Maximale Breiten
Verwende die CSS-Eigenschaft max-width, um innere Inhalte auf eine maximale Breite zu begrenzen.
max-width-full
max-width-full-tablet
max-width-full-portrait
max-width-full-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Auffüllungen
Richtung Klassen
padding-bottom
padding-top
Auffüllen-vertikal
padding-horizontal
padding-left
padding-right
Größenklassen
Polsterung-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-klein
padding-medium
polsterung-groß
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margen
Richtung Klassen
Rand-unten
Rand-oben
Rand-vertikal
Rand-horizontal
margin-left
Rand rechts
Größenklassen
Marge-0
margin-tiny
margin-xxsmall
margin-xsmall
Rand-klein
margin-medium
randgroß
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Utility-Klassen
Nützliche Utility-Klassen, die wir in den meisten unserer Projekte gerne verwenden, um schneller zu bauen.
verstecken
Dieses Element ist versteckt
Versteck-Tablet
Ausblenden des Handy-Porträts
ausblenden-mobile-landschaft
Überlauf-sichtbar
Überlauf-versteckt
Überlauf-Automatik
overflow-scroll
Zeiger-Ereignisse-auf
Zeiger-Ereignisse-aus
Ebene
div-Quadrat
abstand-sauber
ausrichten-zentrieren
z-index-1
z-index-2
display-inlineflex
margin-top-auto
von-unten