Heute

Handbuch zur AMH-Website

CSS für besondere Bedürfnisse

Styleklassen sorgen dafür, dass wiederkehrende Formatierungen nicht jedes Mal von Hand eigegeben werde müssen und dass die Anpassung von identischen Designdetails seitenübergreifend erfolgen kann.

Hier ist die Verwendung solcher Styleklassen beschrieben. Durch Verwendung im jeweiligen Abschnitt wird auch direkt angezeigt, was sie bewirkt.

Styleklassen für das gesamten Elementor-Element

Wenn eine dieser Styleklasse angewendet werden soll, dieselbe unter „Erweitert“ in das Feld „CSS-Klasse“ eintragen. Das kann in Blöcken (Elementor-Elementen), aber auch für ganze Abschnitte genutzt werden.

centertext

Wenn seitenbreiter Text für die Desktopansicht AUSNAHMSWEISE mal zentriert sein soll. Im Standardfall wird die Textbreite für die Desktopansicht linksbündig eingeschränkt. Wenn man den Text einfach nur zentriert setzt, ergibt sich daraus am linken Seitenrand zentriert klebender Text. Um den gesamten Textblock mittig auszurichten ist „centertext“ notwendig.

bildnachweis

Gilt für den gesamten Block am Ende einer Seite oder eines Beitrags, in dem gesonderte Bildanachweise aufgeführt werden. Gibt es als Abschnittstemplate zum Einfügen.

credit

Gilt für den gesamten Block am Ende einer Seite oder eines Beitrags. Beinhaltet z. B. die Beteiligten an einer Ausstellung. Gibt es als Abschnittstemplate zum Einfügen.

bildunterschrift

Gilt für Bildunterschriften, die als Textblock hinzugefügt werden, z. B. unterhalb einer Galerie, um sie als Ganzes zu beschreiben. Bildunterschriften bei Einzelbildern immer aus dem Element generieren lassen!!!

Gibt es auch als Abschnittstemplate zum Einfügen.

maxitext

Für Abschnitte und Texteditor.
Sorgt dafür, dass alle p-Texte so groß und in derselben Schrift gezeigt werden wie H3. Gilt auch für Storys.

text-hell

  • Für einen Abschnitt oder ein Widget einsetzen, wenn der Hintergrund dunkel ist und der Text weiß erscheinen soll
  • Auf hinreichend Kontrast achten!

Kann mit anderen Klassen kombiniert werden, z. B. abstand oder maxitext

abstand, 
abstand-oben, 
abstand-unten

  • Für einen Abschnitt einsetzen.
  • Sinnvoll, wenn es sich um Abschnitte mit farbiger Hinterlegung handelt
  • Sparsam einsetzen!
  • Sinnvoll z. B. in Storys, wenn für einen neuen Abschnitt die Hintergrundfarbe gewechselt wird.
  • Wenn global größere Abstände nach oben oder unten gewünscht werden, bitte via CSS-Einstellung lösen (lassen).
  • abstand: Abstand nach oben und unten ist 2.5 em
  • abstand-unten: Abstand nach unten ist 2.5 em
  • abstand-oben: Abstand nach oben ist 2.5 em

overlay

  • Für Textabschnitte, die auf einen Hintergrundbild liegen
  • Sorgt dafür, dass der Text mit einer Weißtransparenz hinterlegt wird
  • Passendes Abschnittstemplate:
    Bild-Text-Overlay: Bild als Hintergrund

Tipp: Im Template ist in der zweiten Spalte das Hintergrundbild noch einmal als gesondertes Bild hinterlegt, das nur mobil angezeigt wird. Das sorgt dafür, dass auf kleineren Bildschirmen das Bild auf jeden Fall zur Geltung kommt. Kann auch weggelassen werden, denn das Foto auf mobilen Geräten lediglich einen Strukturhintergrund bilden soll.

Styleklassen zur Inline-Anwendung in Texten – nur für einigeschränkte Textbereiche innerhalb von Elementor-Blöcken

Wenn einer dieser Stile angewendet werden soll, wird von „Visuell“ auf „Text“ umgeschaltet und die Angabe in HTML hinzugefügt. Bei manchen Elementor-Blöcken ist die visuelle Formatierung von vornherein aus geschlossen, z.. B. in Iconboxen, dann kann die HTML-Notierung direkt erfolgen.

smallfont

Wenn ein Textabschnitt innerhalb eines größeren Textes etwas kleiner angezeigt werden soll, z. B. weil es eine Art Fußnote oder ein rechtlich notwendiger, jedoch für den Gesamtinhalt nicht so wichtiger Abschnitt ist. Beispiel aus der globalen Iconbox für die Preise:

Der Eintritt gilt für alle Häuser des AMH. Siehe auch …

Inhalt

Accessibility by WAH