Attribute
Inhaltselemente können über Attribute individuell gestaltet werden. Für Klassen und Attribute bestehen Definitionen, welche über das Auswahlmenü hinzugefügt werden können. Aus Sicherheitsgründen können nur Daten-Attribute zu den Attributen hinzugefügt werden.
Zusätzliche Stildefinitionen
Die Einbindung der zusätzlichen Stile ist Abhängig vom Gebrauch geschweifter Klammern. Bei der Verwendung von geschweiften Klammern werden die Stildefinitionen in den Kopfbereich der Seite aufgenommen. Ansonsten werden diese dem Stil-Attribute des Inhaltselementenkontainers zugewiesen (inline). So können schnell und einfach kleinere gestalterische Merkmale definiert werden. Als Beispiel wurde diesem Element folgende Stildefinition zugewiesen:
#self {
padding: 1rem;
border: 2px grey dashed;
}Das Schlüsselwort #self kann als Platzhalter für die ID des Inhaltselementes verwendet werden.
Vordefinierte Klassen
Verschiedene vordefinierte Klassen können über das Auswahlmenü hinzugefügt werden.
Im Folgeneden wird der Gebrauch einiger Klassen näher erläutert.
Höhe wie Zeile (pp-row-height)
Titel 1
Diesem Inhaltselement wurde die Klasse "pp-row-height" zugewiesen.
Zeile 1
Titel 2
Diesem Inhaltselement wurde die Klasse "pp-row-height" zugewiesen.
Zeile 1
Zeile 2
Zeile 3
Titel 3
Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen.
Zeile 1
Zeile 2
Gleich hohe Kindelemente (pp-row-child-height)
Titel 1
Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen.
Zeile 1
Titel 2
Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen. Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen. Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen.
Zeile 1
Zeile 2
Titel 3
Diesem Inhaltselement wurde die Klasse "pp-row-child-height" zugewiesen.
Zeile 1
Zeile 2
Zeile 3
Verschiedene Klassen
Überlagerungskarte
Mit Hilfe der Klasse "pp-ce-overlaycard" kann ein ein Inhaltselement vom Typ "Text und Bild" als Überlagerungskarte dargestellt werden. Dabei wird der Text beim Überfahren des Bildes eingeblendet.
Anhand dieses Beispieles wird deutlich, wie verschiedene Klassen verwendet werden können.
Dem Beispiel liegt ein Zwei-Spalten-Rasterelement zugrunde, welchem ein Hintergrundbild und die Klasse "pp-bg-fixed" zugewiesen wurde.
In der linken Spalte befindet sich ein "Text und Bild" Inhaltselement, welchem die Klasse "pp-ce-overlaycard" zugewiesen wurde.
In der rechten Spalt befindet sich ein Container mit einem Text-Inhaltselement, welchem die Klassen "pp-inner-bgwhite70" und "pp-inner-padding" sowie die Daten-Attribute 'data-aos="zoom-in"' und 'data-aos-once="false"' zugewiesen wurde.
Bildausrichtung und Schatten
Bei der Platzierung der Bilder überhalb sowie unterhalb des Textes, werden diese horizontal zentriert. Mit der Klass "pp-gallery-item-left" oder "pp-gallery-item-right" können diese am Rand ausgerichtet werden. Mit der Klasse "pp-gallerey-item-shadow" können den Bilder Schatten zugewiesen werden.