My Preview

Diese Seite beinhaltet alle Varianten/Styles die mit Hilfe der Custom-Rubriken angelegt werden können.

Vorbereitung

1. Beitrags-Layout erstellen.
2. Bilder des Beitrags nach Sprachen (de/en) bereitlegen.
3. Alle Texte ohne Formatierung (Umbrüche) nach Reihenfolge und Sprache (de/en) abspeichern.

Anlegen in der WordPress-Umgebung

1. Bilder (de) bitte gesamthaft über die Mediathek uploaden.
2. Neuer Beitrag erstellen.
3. wie gehabt… das Beitragsbild einbinden.
4. Nun wird mit dem Layout verglichen welche Module es benötigt.
5. Die relevanten Module werden nach Reihenfolge des Layouts in WP angelegt.
6. Befüllen der Module mit Text / Bild / Bu’s / Links …
8. wie gehabt… Kategorie auswählen + Schlagwörter einbinden.
9. In der Box ‚Auszug‘ einen kurzen Text einbinden (Das ist der Text oben welcher bisher in bold gesetzt wurde)
Auszug erscheint auf der Homeseite und einigen Social-Media-Kanälen.
10. speichern !!

Sofern der deutsche Beitrag gefällt…

1. Duplizieren des de. Beitrages für die engl. Sprachversion.
Es sollten alle Module der Reihenfolge jetzt in engl. vorhanden sein inkl. aller Inhalte.
2. Uploaden der engl. Images gesamthaft in die Mediathek.
3. Austauschen der de. Images innerhalb der Bildmodule.
4. de. Texte ersetzen.
5. Checken ob das Beitragsbild neu eingebunden werden muß.
6. wie gehabt… Schlagwörter vervollständigen.
7. speichern !!

wie gehabt…

1. Unter Yoast-SEO ggf. textliche Anpassungen vornehmen.

Rubriken & Styles

Generell gibt es Rubriken zur Auswahl, innerhalb der Rubriken gibt es diverse Styles (nicht bei allen).

Struktur (Rubriken) analog Layoutvorlage

1 Image / Description

Bildunterschriften und/oder ein Link kann gesetzt werden.styles
default : Grundeinstellung, volle Breite
small : Textbreite
BU / rubrik : 1 Images / style : default
BU / rubrik : 1 Images / style : small

4 Images / Description

Die Bilder sollten bestenfalls ein quadratisches Format haben.
Es sollten 4 Bilder verwendet werden.

Bildunterschriften und/oder ein Link kann gesetzt werden.

styles
default : Grundeinstellung, ohne Abstand
+ padding : mit Abstand

1 Bildbeschreibung // 2 Bildbeschreibung // 3 Bildbeschreibung // 4 Bildbeschreibung / rubrik : 4 Images / style : default
maicommunications.com / Link
1 Bildbeschreibung // 2 Bildbeschreibung // 3 Bildbeschreibung // 4 Bildbeschreibung / rubrik : 4 Images / style : + padding
maicommunications.com / Link

Text + Image / Description
& Image + Text

Wie der Name sagt…
Bei der Auswahl Text + Image : Text links, Image rechts.
Bei der Auswahl Image + Text : Image links, Text rechts.

Gedacht wenn ein Beschreibungstext neben dem Bild steht.
Bildunterschrift kann gesetzt werden.

styles
Headlines sind in H1 gesetzt.

Headline

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

Bildbeschreibung / rubrik : Text + Image
Bildbeschreibung / rubrik : Image + Text

Headline

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

Freisteller / Description

Wie der Name sagt…
Bei der Auswahl Freisteller left : Freisteller links, Bildtitel rechts.
Bei der Auswahl Freisteller right : Freisteller rechts, Bildtitel links.

Gedacht wenn mehrere Ojekte in einem Bild stehen.

tags
Sollte bei den BU’s ein Umbruch nötig sein, dann die Zeile umbrechen, davor span class=“spacer“>/span einfügen.
Die spans müssen mit < > geöffnet, geschlossen werden.

styles
white : Freisteller auf weiß (Grundeinstellung), das Bild steht leicht versetzt zum Rand.
normal : Freisteller mit farbigem Hintergrund (nicht zwingend), das Bild ist bündig ausgerichtet.
small : wie normal ..wenn die Bildtitel zu lang laufen oder ein schmalleres Bildformat gewünscht wird.

rubrik : Freisteller left
style : white
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller left
style : normal
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller left
style : small
1 Bildbeschreibung Lorem Ipsum Lorem Ipsum
2 BildbeschreibungLorem Ipsum Lorem Ipsum
3 BildbeschreibungLorem Ipsum Lorem Ipsum
4 Bildbeschreibung Lorem Ipsum Lorem Ipsum
5 Bildbeschreibung Lorem Ipsum Lorem Ipsum
6 Bildbeschreibung Lorem Ipsum Lorem Ipsum
rubrik : Freisteller right
style : white
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller right
style : white
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller right
style : normal
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller right
style : normal
1 Biltitel Lorem Ipsum
2 Biltitel Lorem Ipsum
3 Biltitel Lorem Ipsum
4 Biltitel Lorem Ipsum
5 Biltitel Lorem Ipsum
6 Biltitel Lorem Ipsum
rubrik : Freisteller right
style : small
1 Bildbeschreibung Lorem Ipsum Lorem Ipsum
2 BildbeschreibungLorem Ipsum Lorem Ipsum
3 BildbeschreibungLorem Ipsum Lorem Ipsum
4 Bildbeschreibung Lorem Ipsum Lorem Ipsum
5 Bildbeschreibung Lorem Ipsum Lorem Ipsum
6 Bildbeschreibung Lorem Ipsum Lorem Ipsum
rubrik : Freisteller right
style : small
1 Bildbeschreibung Lorem Ipsum Lorem Ipsum
2 BildbeschreibungLorem Ipsum Lorem Ipsum
3 BildbeschreibungLorem Ipsum Lorem Ipsum
4 Bildbeschreibung Lorem Ipsum Lorem Ipsum
5 Bildbeschreibung Lorem Ipsum Lorem Ipsum
6 Bildbeschreibung Lorem Ipsum Lorem Ipsum

2 Images / Description

In dieser Sektion gibt es multiple Varianten.

Gedacht wenn 2 Bilder nebeneinader stehen.
Das Bildformat hängt von der verwendeten Styles ab – mal ist ein Hochformat, mal ein Querformat von Vorteil.
Im ersten Beispiel haben beide Bilder das gleiche Format; beides Hochformat.

Bildunterschriften und/oder ein Link kann gesetzt werden.

styles
default : Grundeinstellung, Bilder positionieren sich mittig nebeneinander.
default + padding : Abstand zwischen Bildern, gilt für alle Styles mit dem Zusatz (+padding).

Bildbeschreibung / rubrik : 2 Images / style : default
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : default + padding
Bildbeschreibung

2 Images / style Offset

Offset = horizontaler Versatz der Bilder.

Im Beispiel haben beide Bilder das identische Bildformat.
Ist das rechte Bild das kleinere empfiehlt sich offset_left.
Ist das linke Bild das kleinere empfiehlt sich offset_right.

styles
offset_left : Das linke Bild wird nach oben versetzt.
offset_right : Das rechte Bild wird nach oben versetzt.

Bildbeschreibung / rubrik : 2 Images / style : offset_left
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : offset_left + padding
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : offset_right
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : offset_right + padding
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : offset_left + padding / rechtes Bild ist kleiner
Bildbeschreibung / rechtes Bild ist kleiner
Bildbeschreibung / rubrik : 2 Images / style : offset_right + padding / linkes Bild ist kleiner
Bildbeschreibung

2 Images / style Small _left + _right

Small = zentriert ein Bild mittig und verkleinert dieses.
Im Gegenzug wird das andere Bild prozentual größer skaliert.
Das bedeudet daß der Bildanstoß der Bilder nie 100% mittig der Seitenansicht ist (leichter Versatz).

Will man unbedingt die Bildmitte beibehalten, so muß ein kleineres Bild als Vorlage eingebunden sein.
Dann würde man zB. default_padding verwenden.

Im Beispiel haben beide Bilder das identische Bildformat als Ausgangsformat.
Der Effekt wir verstärkt wenn das gewollt kleinere Bild bereits als kleineres Bild (Höhe) upgeloadet wurde.

styles
small_left : Das linke Bild wird zentriert + verkleinert, das rechte Bild vergrößert.
small_right : Das rechte Bild wird zentriert + verkleinert, das linke Bild vergrößert.

Bildbeschreibung / rubrik : 2 Images / style : small_left
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : small_right
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : small_left + padding
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : small_right + padding
Bildbeschreibung

2 Images / style To Front _left + _right

To Front = Überlagerung der Bilder.

Im Beispiel haben beide Bilder das identische Bildformat.
Empfohlen wird Querformat für beide Bilder.

styles
left_image to front : Das linke Bild legt sich über das rechte Bild + skaliert.
right_image to front : Das rechte Bild legt sich über das linke Bild + skaliert.

Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : left_image to front
Bildbeschreibung / rubrik : 2 Images / style : right_image to front
Bildbeschreibung

2 Images / Small Images

small images = beide Bilder werden auf eine max-Höhe von 410px gecropt.

Im Beispiel haben die Bilder unterschiedliche Bildformate (Höhe).
Gewollt ist daß beide Bilder mit gleicher Höhe nebeneinander stehen.
Überschüssiger Bildbereich des größeren Bildes geht verloren, gecropt wird mittig.

styles
small images : beide Bilder werden auf eine definierte Höhe gecropt.

Bildbeschreibung / rubrik : 2 Images / style : default + padding / um den Effekt im Vergleich zu visualisieren
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : small images
Bildbeschreibung
Bildbeschreibung / rubrik : 2 Images / style : small images + padding
Bildbeschreibung

Video / Description

In der oEmbed-Spalte wird die URL (YouTube-Link) eingetragen.
Bildunterschriften und/oder ein Link kann gesetzt werden.

styles
keine

BU / rubrik : video
maicommunictaions.com

Caption Top

Caption Top = Handelt es sich zb. um einen Gastbeitrag wird Caption Top an oberster Stelle der Seite eingefügt.

zb. Gastbeitrag von Valerie Schöneich, designsetter
Wird selten benötigt.

Gastbeitrag von Valerie Schöneich, designsetter

Caption Bottom

Caption Bottom = wenn am Ende der Seite eine zusätzliche Beschreibung oder ein Gesamtlink gesetzt wird.

Wird innerhalb der Seite rechtsbündig ausgerichtet.

Mit freundlicher Unterstützung von bla bla bla

Text

Text = wird zwischen den Bildelementen eingesetzt, mittig, breite: 900px.

Normalerweise folgt nach einem Textblock ein Bildmodul, danach Text, Bildmodul …
Wird innerhalb eines Beitrages sehr oft verwendet.

styles
Headlines werden mit H1 gestylt.

Headline

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

Home-Slider // Interview + Gastbeitrag

Beiträge die auf der Homeseite im Teaser-Slider erscheinen müssen entspr. Schlagwörter erhalten

Interview-Slider = Interview (de), interview (en)
Gastbeitrag-Slider = Gastbeitrag (de), guest post (den)

Interview

Gastbeitrag


Beliebte Beiträge // Home

Beiträge werden automatisch ausgelesen. Kriterien: wöchentlich am beliebtesten, rubrikübergreifend.


Ähnliche Beiträge // Beitragsseite

Werden automatisch ausgelesen, rubrikspezifisch, max. 10 Beiträge, random-order.


Video-Slider // Home

Neue Inhalte muß ich einpflegen, da …
1. die Thumbs mit Playbutton individuell erstellt wurden.
2. die Links, insb. für die engl. Version, im Backend abgefragt werden müssen.

Sonstige Styles / Tags