Titel
Logo

Styles und Typografie

In dieser Installation stehen folgende Blöcke und Styles zur Erstellung und Formatierungen zur Verfügung:
Der Hinweis Getwid-Block weist auf das zusätzliche Plugin hin.

Heading 1

Die Styles für Überschriften und Text werden unter Design > Customizer > Typografie angepasst.

Diese Überschrift wurde farbig gestaltet. Lorem ipsum dolor sit amet, consetetur sadipscing.

Heading 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Heading 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Heading 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Heading 6

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Der erste Buchstabe im Absatz kann rechts über Blockeinstellungen > Text-Einstellungen > Initialbuchstaben groß dargestellt werden. Die Größe ist über die style.css voreingestellt.

Getwid-Block: Icon Box

Einstellungen wie Größe, Farbe und Abstand sind einstellbar.

Inhalte ausgeblendet

Mit Blockeinstellungen > Erweitert > Zusätzliche CSS-Klasse d-none werden Inhalte ausgeblendet (Im Editor sind sie jedoch sichtbar):

Dieser Block ist ausgeblendet!

Druckausgabe “no”

Mit Blockeinstellungen > Erweitert > Zusätzliche CSS-Klasse d-print-none werden Inhalte beim Drucken ausgeblendet:

Dieser Block wird nicht ausgedruckt!

Textformatierungen

Ganz normaler Fließtext mit Link zu einer anderen Seite. Text kann kursiv oder auch fett dargestellt werden.
Mit Shift+Enter erreicht man einen Zeilenwechsel
und mit Enter eine neuen Absatz.

Der automatische Abstand des Absatzes kann über A > No Bottom Spacing auf 0px, also keinen Abstand nach dem Absatz zurückgesetzt werden.

Dies ist der nächste Absatz aber ohne Abstand im vorigen Absatz über A eingestellt.

Individuelle Formatierungen können über die 3 Punkte in der HTML-Ansicht eingearbeitet werden.

Text kann durchgestrichen oder in Großbuchstaben oder als Code dargstellt werden.

Text kann individuell über A in Größe formatiert werden. Soll ein ganzen Absatz klein dargestellt werden ist das rechts über Blockeinstellungen > Erweitert > Zusätzliche CSS-Klasse small erreichbar

Block: Gruppe
folgende Überschriften und Absätze sind im Block Gruppe zusamengefasst mit einer Hintergrundfarbe hinterlegt und animiert

Spacing

Bei jedem Block rechts über Blockeinstellungen > Erweitert > Zusätzliche CSS-Klasse (z.B.
mb-4 für unteren Abstand oder
mb-0 für unten keinen Abstand) erreichbar.

margin | padding |top | bottom | left | right | x left & right | y top & bottom | 0 bis 5 & auto

.mx-auto horizontal zentriert bei fester Box-Breite
.mt-0 kein Außenabstand oben (px bei font-size 16)
.m-1 Außenabstand rundherum (1 = 0.25rem = 4px)
.pb-2 Innenabstand unten (2 = 0.5rem = 8px)
.py-3 Innenabstand oben & unten (3 = 1rem = 16px)
.mt-4 Außenabstand oben (4 = 1.5rem = 24px)
.mb-4 Außenabstand unten (4 = 1.5rem = 24px)
.ml-5 Außenabstand links (5 = 3rem = 48px)
.mt-n1 bis .mt-n8 Negativer Abstand nach oben
.position-relative in Verbindung mit .z-index1 bis .z-index100 (0,1,2,10,100) ist ein Übereinanderlegen von Containern möglich – siehe Cards

Dieser Text ist animiert. Dieser Text ist animiert. Dieser Text ist animiert. Dieser Text ist animiert.

Farbformatierungen

Text kann rechts über Blockeinstellungen > Farbeinstellungen für den Absatz individuell farbig formatiert werden.

Absatzhintergrund ist farbig gestaltbar.

Die Standardfarben sind in der style.css für das WordPress-Theme voreingestellt. Folgende Farben stehen zur Verfügung:

text-color über Design > Customizer > Typografie > Text anpassbar

link und link-hover über Design > Customizer > Allgemein > Akzentfarbe anpassbar

Text, Link und Überschrift siehe Links …

Farben für Formatierungen
(hier Absatz hinterlegt und mit (Abstand px-1 py-0 definiert)

Farbe 1 (schwarz)

Farbe 2 (weiß)

Farbe 3

Farbe 4

Farbe 5

Farbe 6

Farbe 7

Farbe 8

Textfomatierungsblöcke

Dies ist Fließtext zur Demonstation der Textformatierungen (Markieren und über Pfeil auswählen): Inline-Code und Textfarbe und Text Hinterlegt mit "Tastatur-Eingabe" (als Alternative, weil WP keine Faomatiwerung dafür bietet)


Formularfarben



Mietbestimmungen bestätigen

Normale Textfarbe und Linkfarbe


Folgender Standard-Button (link beim Formular) ist über Design > Customizer > Allgemein Theme-Buttons anpassbar.

Buttonfarben

Standard-Button-Farbe -> siehe Formular
(über Theme-Buttons einstellbar)

Primäre-Button-Farbe
(über Theme-Buttons “Primäre” einstellbar)

Block: Trennzeichen

Styles: 1. Standard mit Farbe, 2. breite Linie, 3. Punkte, 4. Standard mit CSS-Klasse: hr, 5. breite Linie mit zusätzlicher CSS-Klasse: hr






Block Tabellen

Standard-Tabelle mit Farbe über Blockeinstellungen > Farbeinstellungen

Block Tabellehier mitaktiverKopfzeile
Block: TabelleÜberschriftÜberschriftÜberschrift
InhaltInhaltInhaltInhalt
InhaltInhaltInhaltInhalt

Tabelle responsiv mit Zellenformatierung:
rechts über Blockeinstellungen > Erweitert > Zusätzliche CSS-Klasse

table responsive-table table-hover top-row-bg left-col-bg

bedeutet: Tabelle / Scrollbar in Mobilversion / Farbanimation beim Hovern / Obere Zeile hervorgehoben / Linke Spalte hervorgehoben

ÜberschriftÜberschriftÜberschriftÜberschrift Überschrift
InhaltInhaltInhaltInhaltInhalt
InhaltInhaltInhaltInhaltInhalt

Tabelle mit schmalen Abstand:

table table-sm table-borderless table-hover top-row-bg

bedeutet: Tabelle / Verkleinerte Tabelle / Tabelle ohne Rahmen / Obere Zeile hervorgehoben

ÜberschriftÜberschriftÜberschriftÜberschrift Überschrift
InhaltInhaltInhaltInhaltInhalt
InhaltInhaltInhaltInhaltInhalt

Weitere Blöcke

Block: Vers
Füge Poesie ein. Benutze spezielle Abstandsformate. Oder zitiere Liedtexte.

Block: Pullquote
Gib einem Textausschnitt eine besondere optische Hervorhebung.

Quelle: von mir

Block: Zitat
Gib einem Zitat eine optische Hervorhebung. „Indem wir andere zitieren, zitieren wir uns selbst.”

Quelle: Julio Cortázar

Getwid-Block: Accordeon

Accordeon h5 Überschriften und Icon 36
mit Styles (Header Farbe, Abstand, Radius)
„Erweitert: header-color header-mt border-radius

Getwid-Block: Tabs

Tabs mit eigenem Style (Header Farbe)
„Erweitert: header-color

Getwid-Block: Timeline Block

2020

Titel1

Text

2020

2021

Titel2

Text

2021

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Titel3

Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


Icons und Listen

Dashicons sind Standard-Symbole von WordPress, keine weitere Icon-Einbindung erforderlich (siehe oben SmediaBlock: Icon)

Aufzählung ol

  1. Block Liste
  2. Teil2
  3. Teil3

Aufzählung ul-extern

  • Teil1
  • Teil2
  • Teil3
dashicons dashicons-external
<i class="dashicons dashicons-external"></i>

© Copyright (als html einfügen)

Aufzählung ul

  • Teil1
  • Teil2
  • Teil3

Aufzählung ul-stern

  • Teil1
  • Teil2
  • Teil3
dashicons dashicons-location-alt
dashicons dashicons-admin-users
dashicons dashicons-media-default
dashicons dashicons-camera
dashicons dashicons-portfolio
dashicons dashicons-phone

Aufzählung ul-pfeil

  • Teil1
  • Teil2
  • Teil3

Aufzählung ul-haken

  • Teil1
  • Teil2
  • Teil3
dashicons dashicons-format-gallery
dashicons dashicons-admin-home
dashicons dashicons-calendar
dashicons dashicons-book
dashicons dashicons-lock
dashicons dashicons-location

Aufzählung ul-pin

  • Teil1
  • Teil2
  • Teil3

Aufzählung ul-download

  • Teil1
  • Teil2
  • Teil3
dashicons dashicons-location small

Weitere Icons: https://developer.wordpress.org/resource/dashicons/ oder http://calebserna.com/dashicons-cheatsheet/

Objekte abrunden und Schatten

Objekte runden unter Blockeinstellungen > Erweitert > Zusätzliche CSS-Klassen

p-3 mb-2 rounded

p-3 mb-2 rounded-lg

p-3 mb-2 rounded-top

p-3 mb-2 rounded-bottom

p-3 mb-2 rounded-left

p-3 mb-2 rounded-right

hallo
hallo

rounded-circle (quadratisches Objekt erforderlich, z.B. Bild)

Schatten unter Blockeinstellungen > Erweitert > Zusätzliche CSS-Klassen

Kein Schatten: p-3 mb-5 rounded

Schmaler Schatten: shadow-sm p-3 mb-5 rounded

Schatten: shadow p-3 mb-5 rounded

Großer Schatten: shadow-lg p-3 mb-5 rounded

Kontur: kontur mb-5 rounded

Schatten unter Blockeinstellungen > Erweitert > Zusätzliche CSS-Klassen

Schatten überall: shadow-all p-3 mb-5 rounded

Harter Schatten: shadow-bold p-3 mb-5 rounded

Schatten links & rechts: shadow-b p-3 mb-5 rounded

Schatten oben & unten: shadow-bl mb-5 rounded

Schatten oben: shadow-br mb-5 rounded

Nach oben