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.
- WordPress Gutenberg-Blocks https://gutenberghub.com/plugins/core/
- Plugin Getwid-Block https://wordpress.org/plugins/getwid/
Heading 1
Die Styles für Überschriften und Text werden unter Design > Customizer > Typografie angepasst.
Heading 2
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
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)
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 Tabelle | hier mit | aktiver | Kopfzeile |
---|---|---|---|
Block: Tabelle | Überschrift | Überschrift | Überschrift |
Inhalt | Inhalt | Inhalt | Inhalt |
Inhalt | Inhalt | Inhalt | Inhalt |
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 |
Inhalt | Inhalt | Inhalt | Inhalt | Inhalt |
Inhalt | Inhalt | Inhalt | Inhalt | Inhalt |
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 |
Inhalt | Inhalt | Inhalt | Inhalt | Inhalt |
Inhalt | Inhalt | Inhalt | Inhalt | Inhalt |
Weitere Blöcke
Block: Vers Füge Poesie ein. Benutze spezielle Abstandsformate. Oder zitiere Liedtexte.
Block: Pullquote
Quelle: von mir
Gib einem Textausschnitt eine besondere optische Hervorhebung.
Block: Zitat
Quelle: Julio Cortázar
Gib einem Zitat eine optische Hervorhebung. „Indem wir andere zitieren, zitieren wir uns selbst.”
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
Titel1
Text
Titel2
Text

Titel3
Text
Icons und Listen
Dashicons sind Standard-Symbole von WordPress, keine weitere Icon-Einbindung erforderlich (siehe oben SmediaBlock: Icon)
Aufzählung ol
- Block Liste
- Teil2
- Teil3
Aufzählung ul-extern
- Teil1
- Teil2
- Teil3
<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-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-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
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