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.

---

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

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

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

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

Textfomatierungsblöcke

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

Inlinebild

Fließtext als Animation

Blog vorvormatiert (pre)

Block code

Farbformatierungen

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

Absatzhintergrund ist individuell farbig gestaltbar.

Farben für Formatierungen

Basisfarben

Styles im Smedia Theme > Customizer > Allgemein > Theme Farben
--base-color-xxx (Doppelstrich voran)

Theme Helle Farbe (Border): var(–base-color);

Theme Helle Farbe Sekundär (Felder): var(–base-color-alt);

Theme Dunkle Farbe (Überschrift): var(–brand-color);

Theme Dunkle Farbe Sekundär (Schrift): var(–brand-color-alt);

Theme Akzentfarbe (Link): var(–accent-color);

Theme Akzentfarbe Sekundär (Link-Hover): var(–accent-color-alt);

THEME Farbpalette

Styles in Design > Theme Einstellungen > Globale Einstellungen > Farbpalette
(Zum Aktivieren der Palette THEME muss mindestens eine Farbe verändert werden)

.has-wpbf-palette-color-1-background-color

.has-wpbf-palette-color-2-background-color

.has-wpbf-palette-color-3-background-color

.has-wpbf-palette-color-4-background-color

.has-wpbf-palette-color-5-background-color

.has-wpbf-palette-color-6-background-color

.has-wpbf-palette-color-7-background-color

.has-wpbf-palette-color-8-background-color

BUTTONS Styles

Farben der Buttons im Smedia Theme – Customizer > Allgemein > Theme Buttons

ALERT Styles

Styles in Design – Theme-Datei-Editor – Smedia Child Theme: style.css

WP Farbpalette STANDARD

Styles der WP-Farben ggf. in eigene CSS anpassen:
--wp--preset--color--xxx-xxx (Doppelstriche)

–wp–preset–color–black: #000000;

–wp–preset–color–cyan-bluish-gray (style.css Blog Container)

Theme Helle Farbe (Border): var(–base-color);

Theme Helle Farbe Sekundär (Felder): var(–base-color-alt);

–wp–preset–color–white: #ffffff;

–wp–preset–color–pale-pink (style.css danger)

–wp–preset–color–vivid-red (style.css danger)

–wp–preset–color–luminous-vivid-amber (style.css warning)

–wp–preset–color–luminous-vivid-orange (style.css warning)

–wp–preset–color–light-green-cyan: (style.css success)

–wp–preset–color–vivid-green-cyan (style.css success)

–wp–preset–color–pale-cyan-blue (style.css info)

–wp–preset–color–vivid-cyan-blue (style.css info)

–wp–preset–color–vivid-purple (style.css Kontrast, Blog-Datum)

Formularfarben

Name *
Art der Anfrage  
– hier auswählen –Auswahl 1Auswahl 2 Mietbestimmungen / AGB’s *

Normale Textfarbe und Linkfarbe

Anfrage: *

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 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
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“

Alle Inhalte öffnen

<p class="c-pointer"><a id="show-accordion"><i class="fas fa-plus"></i> Alle Inhalte öffnen</a></p>

Getwid-Block: Tabs

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

Getwid-Block: Timeline Block

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