Circle Text Element 1

Hier benutzen wir das WordPress Pattern „circleTextElement1“. Im Folgenden versuchen wir euch bestmöglich die Gestaltungsmöglichkeiten aufzuzeichnen.

Es gibt generell die Möglichkeit das Bild rechts oder Links anzuordnen. Dazu zieht Ihr die Spalte mit Bild- oder Text-Block einfach auf die entsprechende Seite

Farbe des Kreises

Die Farbe des Kreises ist die Hintergrundfarbe der Spalte, welche das Bild enthält. In dem Pattern haben wir diese ab Werk auf orange eingestellt. Diese Farbe könnt Ihr beliebig ändern. Wenn Ihr keine Farbe wählt wird die Farbe der Überschriften, welche Ihr in den Theme Options eingestellt habt.

Das Bild

Da wir oben die Farbe des Kreises eingestellt haben, macht es natürlich sinn, dass wir eine Bilddatei mit Transparenz bzw. transparenten Teilen verwendet. Die entsprechenden Dateiformate wären z.B. PNG oder WebP. Natürlich könnt Ihr auch ein JPG verwenden, aber dann ist der Hintergrund des Kreises nicht mehr zu sehen, wenn die Bildgröße nicht verkleinert wird durch eine Klasse.

Content Breite ( normal, alignwide, alignfull)

Bei alignfull haben wir den kreis am Desktop leicht aus dem sichtbaren Bereichs des Bildschirms gelegt, damit es etwas dynamischer wirkt. Auf kleineren Auflösungen ist alles wieder normal.

Die Klassen für Anpassungen

Element	Klasse	Funktion
Bild	.imgSize80	reduziert die längste Seite des Bildes auf 80%
Bild	.imgSize90	reduziert die längste Seite des Bildes auf 90%
Bild	.imgSize100	die längste Seite des Bildes hat den Durchmesser des Kreises (Standard – Klasse hat keinen Effekt)
Bild	.imgSize110	erweitert die längste Seite des Bildes auf 110%
Bild	.imgSize120	erweitert die längste Seite des Bildes auf 120%
Spalte mit Bild	.overflowHidden	schneidet alle Teile des Bildes ab, welche den Rand des Kreises überschreiten

Beispiel mit einem breiten Bild (Breite > Höhe)

Es wurden keine Klassen verwendet. Dies ist das Basis-Layout ohne irgendwelche Anpassungen.

Überschrift

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.

Beispiel mit einem hohen Bild (Höhe > Breite) und .alignwide

Das Bild hat die Klasse .imgSize80, damit das Bild nicht über den Rand des Kreises herausragt.
Gleichtzeitig wurde der Block auf die Gesamte Breite des Bildschirms gestreckt.

Überschrift

Beispiel mit quadratischen Bild

Quadratische Bilder sind im Zusammenspiel mit Kreisen am leichtesten zu kombinieren. Bei diesem Beispiel haben wir nur die Klasse .overflowHidden in die Spalte mit dem Bild eingefügt, damit keine Teile des Bildes über den Rand des Kreise hinauslaufen.
Hier wurde die Block-Breite „weit“ (alignwide) gewählt.

Überschrift

Beispiel mit Bild rechts

Hier im Beispiel mit der einzigen Anpassung, dass die Bildgröße auf 110% gesetzt wurde mit der Klasse „imgSize110“.

Genau genommen unterscheidet sich die Version mit Bild rechts nur durch die Anordnung der Spalten.