Unser Ziel ist es, dass die Redaktion nachdem sie den Print Beitrag fertig gemacht haben, kaum Anpassungen für Online machen müssen. Idealerweise schaut ein Beitrag, der mit den PPI Blöcken erstellt wurde, online sofort und ohne weitere Anpassungen, gut aus.
<PPI BLOCKS>
<Unterüberschrift (PPI Block)></>
<Interview Frage (PPI Block)>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?</Interview Frage (PPI Block)>
<Interview Antwort (PPI Block)>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.</Interview Antwort (PPI Block)>
<Zwischenzeile (PPI Block)>Consetetur sadipscing elitr = Zwischentitel/-überschrift</Zwischenzeile (PPI Block)>
<InfoBox Überschrift (PPI Block)>At vero eos et accusam et justo duo dolores et ea rebum</InfoBox Überschrift (PPI Block)>
<Zitat mit Bild Autor (PPI Block)>Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</Zitat mit Bild Autor (PPI Block)>
<Interview 1. Frage (PPI Block)>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?</Interview 1. Frage (PPI Block)>
<Interview 1. Antwort (PPI Block)>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.</Interview 1. Antwort (PPI Block)>
<Kurzinterview Titel (PPI Block)> Sed diam </Kurzinterview Titel (PPI Block)>
<InfoBox (PPI Block)>
InfoBox Überschrift … Lorem ipsum dolor sit amet
Infobox Body … 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.
</InfoBox (PPI Block)>
<Textbox, Body (PPI Block)>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. 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.
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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</Textbox, Body (PPI Block)>
<Zitat mit Bild (PPI Block)>
<Zitat mit Bild Autor>Hendrik Esse</Zitat mit Bild Autor>
<Zitattext>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</Zitattext>
</Zitat mit Bild (PPI Block)>
<Kurzinterview (PPI Block)>
Kurzinterview Titel
<Einleitung>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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Einleitung>
<Interview 1. Frage>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?</Interview 1. Frage>
<Interview 1. Antwort>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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Interview 1. Antwort>
<Interview Frage>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. </Interview Frage>
<Interview Antwort>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</Interview Antwort>
</Kurzinterview (PPI Block)>
<PPI Bild (PPI Block)>
</PPI Bild (PPI Block)>
</PPI BLOCKS>
Für die Print Produktion werden auch Word Press Blöcke verwendet! Und zwar folgende:
<Absatz (WP)>
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. 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.
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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</Absatz (WP)>
<Bild (WP)>
</Bild (WP)>
Jetzt zu den anderen Blöcken, die WordPress so mit sich bringt. Nämlich die Text-Blöcke des Gutenberg Editors. Die werden wir auch verwenden, dementsprechend sollten sie natürlich auch gut ausschauen:
<TEXT BLOCKS (WP)>
<Überschrift (WP)>Lorem Ipsum</Überschrift (WP)>
- <Liste (WP)>
- Punkti
- Punkti
- Punkti
- </Liste (WP)>
<Zitat (WP)>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.</Zitat (WP)>
<Details (WP)>
Klicken um Details anzuzeigen:
Detail wird angezeigt. 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.
</Details (WP)>
<Vorformatiert>Schreibe vorformatierten Text. Lorem ipsum dolor.</Vorformatiert>
<Zitatkasten (WP)>
At vero eos et accusam et justo duo et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
Maria dolores
</Zitatkasten (WP)>
<Tabelle (WP)>
| Tabelle | Anzahl der Spalten |
| Anzahl der Zeilen | 3 |
| leer | leer |
</Tabelle (WP)>
<Vers (WP)>
Vers schreiben: 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 ...
</Vers (WP)>
<Klassisch (WP)>
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.
</Klassisch (WP)>
<Stretchy Paragraph (WP)>
Hier könnte ein langer Stretchy Paragraph stehen. Wir bleiben gespannt, wie dieser wohl aussehen wird. 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.
Hier könnte ein kurzer Stretchy Paragraph stehen. Wir bleiben gespannt, wie dieser wohl aussehen wird.
</Stretchy Paragraph (WP)>
<Stretchy Heading (WP)>
Überschrift kurz
Stretchy Überschrift länger – Wie das wohl zu wirken vermögen wird?
</Stretchy Heading (WP)>
</TEXT BLOCKS (WP)>
Hier nun die WordPress MEDIEN-Blöcke, die der Gutenberg Editor mit sich bringt. Die sollten natürlich auch gut ausschauen:
<MEDIA BLOCKS (WP)>
<Bild (WP)>
</Bild (WP)>
<Galerie (WP)>
</Galerie (WP)>
<Cover (WP)>
<Nennt sich “Absatz” ist dem Cover-Block untergeordnet></>
</Cover (WP)>
<Datei (WP) Option 1, mit Inline-Einbettung>
</Datei (WP) Option 1, mit Inline-Einbettung>
<Datei (WP) Option 2, ohne Inline-Einbettung>
</Datei (WP) Option 2, ohne Inline-Einbettung>
<Medien und Text (WP)>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
</Medien und Text (WP)>
<Medien und Text (WP) mit zu viel Text>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Nam liber tempor cum soluta nobis eleifend option congue.
</Medien und Text (WP) mit zu viel Text>
</MEDIA BLOCKS (WP)>
Zu guter Letzt noch die WordPress DESIGN-Blöcke, die der Gutenberg Editor mit sich bringt:
<DESIGN BLOCKS (WP)>
<Accordion (WP)>
Accordion Element 1 befindet sich im Accordion Panel
Accordion Element 2 befindet sich auch im Panel und der übergeordnete Block ist das Accordion