Mit "Add Article" können Sie im Hub einen neuen Artikel erstellen und so Ihren ersten eigenen Artikel anlegen.

Folgen Sie uns auf den ersten Schritten und wir zeigen Ihnen, wie Blöcke als elementarer Bestandteil dieses Editors funktionieren und wie Sie Spezial-Blöcke wie den "Purple Slider" und das "Purple Accordion" verwenden.

  1. Editor
  2. Add title
  3. Blöcke
  4. Cover-Block hinzufügen
  5. Bild in den Cover-Block einfügen
  6. Media Library
  7. Bild wählen
  8. Bild-Ausrichtung
  9. Artikel-Titel auf dem Cover
  10. Cover Setting und Overlay
  11. Text-Ausrichtung

  12. Text und Farb-Einstellungen
  13. Absatz-Kontrolle
  14. "Add Block" 
  15. "Paragraph"

  16. Purple Slider - Bildergalerie
  17. Bilder aus Media Library einfügen
  18. Vorschau des Purple Slider
  19. Slider Einstellungen

  20. Purple Accordion

  21. Entwurf speichern

Lesen Sie im folgenden Beitrag, wie Sie Ihren ersten Artikel veröffentlichen.


1. Editor

Der zentrale Part der Artikel-Ansicht ist Ihr Editor. Hier können Sie die einzelnen Elemente Ihres Artikel anlegen und mit Text bzw. Bildern füllen. Es ist ein WYSIWYG-Editor, so daß Sie für die einzelnen Blöcke eine Vorschau erhalten, wie diese im finalen Artikel aussehen werden (siehe WYSIWIG = What You See Is What You Get).

2. Add title

Der oberste Teil im Editor startet mit "Add title".  Fügen Sie hier den Post Title, also den Titel des Artikels hinzu, z.B. "Demo-Artikel No.1". Dieser Titel wird auch in der Artikel-Übersicht und in der App auf den Thumbnails angezeigt.

3. Blöcke

Nun können Sie darunter die Elemente des Artikel, sogenannte "Blöcke" hinzufügen. Mit dem + Icon oben links in der Ecke ergänzen Sie einen neuen Block. Damit bauen Sie einen "Stapel" aus Blöcken übereinander, der schlußendlich den fertigen Artikel bildet. 


Oben links in der Ecke mit dem + finden Sie eine Auswahl der verfügbaren Blöcke, sortiert nach 

  • Most used - dieser Bereich zeigt die jeweils neun von Ihnen am meisten genutzten Blöcke, er verändert sich, abhängig von Ihrer Nutzung der Blöcke
  • Common Blocks - Paragraph, Purple Slider (Bildergalerie), Purple Accordion (aufklappbare Liste), Social Share Button, Image, Heading, List (geordnet mit Zahlen, ungeordnet mit Punkten), Quote, Audio, Cover (großer Teaserbild für den Beginn eines Artikels), Video
  • Formatting - Pullquote (Zitat aus dem Artikeltext), Table
  • Layout Elements - Button (kann per URL auf andere Ziele verweisen und Funktionen aufrufen), Separator (horizontale Linie als Deko-Element zur Struktur von Artikeln), Spacer (Abstand zwischen Blöcken zur Strukturierung von Artikel-Elementen)
  • Embeds - Twitter, YouTube, Facebook, Instagram
  • Search - ganz oben ist eine Suchfeld eingebettet, damit können Sie nach dem Namen eines Blocks suchen, um ihn schneller zu finden.

4. Cover-Block hinzufügen

Klicken Sie oben links auf das + und suchen Sie im Suchfeld der Blöcken nach "Cover". Klicken Sie auf "Cover", um das Element unterhalb des Post Title hinzuzufügen.

5. Bild in den Cover-Block einfügen

Das neue Element ist jetzt sichtbar im Editor. Sie können nun ein beliebiges Bild von Ihrem Rechner oder aus der Media Library hinzufügen.

6. Media Library
Wählen Sie für die Demo "Media Library" und wählen Sie im Pop-up oben den rechten Reiter "Media Library". Hier sehen Sie alle bereits genutzten Bilder aus anderen Artikel. Sie stehen zur erneuten Verwendung zur Verfügung.

7. Bild wählen

Sie fügen ein Bild in den Block ein, indem Sie darauf klicken. Es wird ein neues Fenster zur Auswahl eines Bildes geöffnet (Hochladen oder aus Media Library, siehe Screenshot unten). Dann wird auch rechts eine Vorschau des Bildes inklusive verschiedener zusätzlicher Informationen eingeblendet. Bestätigen Sie die Auswahl mit "Select" und Sie werden automatisch zum Artikel-Editor zurückgeführt.

Sie können nun einige Eigenschaften des Blocks noch editieren:

  • Ausrichtung und Anordnung mit dem folgenden (Text-)Block, oberhalb des Blocks im Kontext-Menü
  • Text, der als Überschrift gestylt ist (und im Layout anstatt des Post Title verwendet werden kann, siehe Veröffentlichen Sie Ihren ersten Artikel für mehr Details dazu)
  • Fokuspunkt des Bildes (insbesondere relevant, wenn es als "fixed background" oder in einem responsiven Layout angezeigt wird), im rechten Menü zum Block
  • Farbe und Deckkraft des Overlays über dem Bild, im Block-Menü rechts

8. Bild-Ausrichtung

Wählen Sie "Wide Width", damit wird das Coverbild an der Breite des Textes ausgerichtet.

9. Artikel-Titel auf dem Cover

Schreiben Sie hier z.B. "Demo-Artikel No.1". Der Text auf dem Cover-Bild kann als Einstieg und Titel für den Artikel dienen, denn den Post Title darüber können Sie auch vor dem Veröffentlichen des Artikels noch ausblenden lassen.

10. Cover Settings und Overlay

Hier können Sie die Standard-Einstellungen Ihren Wünschen anpassen und so z.B. die Deckkraft der über dem Bild liegenden, halbtransparenten Ebene auf 20% reduzieren. Damit scheint Ihr Bild etwas deutlicher durch und Ihr Text ist dennoch deutlich zu lesen.

Wenn Sie den Titel auf dem Cover ergänzen, werden Ihnen ebenfalls Optionen im Kontext-Menü oberhalb des Textes wie auch rechts im Block-Menü angeboten:

11. Text-Ausrichtung

Wählen Sie hier "Align text center" und "Bold" aus. 

12. Text und Farb-Einstellungen

Hier können Sie grundsätzlich die Textgröße, einen Initial für den ersten Buchstaben ("Drop Cap") oder auch die Farbe des Textes bzw. des Hintergrunds zum Text festlegen ("Color Settings"). Der Farbwert wird üblicherweise als Hexadezimalwert angegeben.


13. Absatz-Kontrolle

Indem Sie mit der Maus über einen Block fahren, sehen Sie, welcher Block-Typ eingesetzt wurde. 
Mit den Pfeilen links können Sie den Block mit anderen ober- und unterhalb vertauschen. Mit dem gepunkteten Regler können Sie den Block auch mit gehaltener Maustaste per Drag&Drop verschieben.

14. "Add Block" 

Das + erlaubt auch zwischen bestehenden Blöcken mit einem Klick einen neuen Block anzulegen. Ebenso wie es mit dem + oben links in der Ecke des Editors möglich ist.

15. "Paragraph"

Im Kontext-Menü des Paragraph-Blocks können Sie die Ausrichtung des Absatzes festlegen sowie innerhalb des Absatzes einzelne Wort hervorheben. Sie können unter anderem mit dem Kette-Icon auch Links zu Webseiten hinterlegen. Der Link wird wie üblich in einem hellblauen Farbton hervorgehoben.


16. Purple Slider - Bildergalerie

Fügen Sie als nächsten Block einen "Purple Slider" ein. Das Layout der Galerie ist für die Webseite sowie die mobilen Geräten gleich. Die Usability ist jedoch für mobile Geräte optimiert: mit einer Swipe-Geste kann die Galerie durchblättert werden. Auf der Webseite können die Pfeile rechts und links des Bildes zum Blättern genutzt werden.



17. Bilder aus Media Library einfügen 

Fügen Sie nun mehrere Bilder aus der Media Library ein. Sie können im rechten Bereich der Media Library zu jedem Bild eine "Caption" (= Bildunterschrift) hinzufügen.

18. Vorschau des Purple Slider

Ausnahmsweise zeigt der Purple Slider im Editor nicht die Vorschau für die Bildergalerie an, sondern vor allem eine Übersicht aller eingefügten Bilder inkl. Bildunterschrift. Die Bildunterschrift wird in der Galerie auf den mobilen Geräten und auf der Webseite unterhalb des Bildes angezeigt (siehe weiter unten die Ansicht der Galerie).

19.Slider Einstellungen

Im Menü rechts können Sie unter "Slider Settings" die Funktion "Crop Images" aktivieren. Damit werden alle Bilder auf das Seitenverhältnis 2:3 (Höhe:Breite) beschnitten und die Bilder werden alle gleich groß angezeigt. Wenn Sie diese Funktion deaktivieren, werden die Bilder komplett angezeigt. Es kann jedoch zu schwarzen Streifen um das jeweilige Bild herum kommen, der sogenannte "Letterbox-Effekt". Damit wird der Raum um Bilder, die nicht perfekt in die Galerie passen, gefüllt und das Seitenverhältnis von Galerie und Bild ausgeglichen.


20. Purple Accordion

Dieser Block ist besonders für lange Listen geeignet. Jede Überschrift ist ein eigenes Element, dem Paragraphen und andere Blöcke untergeordnet werden können. Wie unten in der Ansicht der Webseite zu sehen, können die einzelnen Abschnitte des Akkordeons aufgeklappt werden, um die untergeordneten Inhalte anzuzeigen.

So kann man komplexere Themen einfach strukturieren und Nutzer können die Themen schnell überblicken. Bei Bedarf kann ein interessanter Bereich ausgeklappt werden, um ein Thema zu vertiefen.


Ein Akkordeon-Block besteht aus einer Überschrift, die immer zu sehen ist, auch wenn das Element nicht ausgeklappt ist. Darunter können dann beliebige weitere Blöcke angelegt werden, die nach dem Ausklappen sichtbar werden.

A. Erstes Akkordeon-Element

B. Paragraph innerhalb des ersten Akkordeon-Elements

C. Zitat-Block innerhalb des ersten Akkordeon-Elements

D. "Add block" innerhalb des ersten Akkordeon-Elements

E. "Add block" unterhalb des ersten Akkordeon-Elements

F. Zweites Akkordeon-Element (= neuer Block!)


21. Entwurf speichern

Wenn Sie den Artikel fertiggestellt haben, können Sie den Artikel als "Draft" (=Entwurf) speichern. Der Artikel ist dann nicht veröffentlicht, steht jedoch weiterhin für Sie im DS Hub zur weiteren Bearbeitung und Revision bereit.


Lesen Sie im folgenden Artikel der Knowledgebase weiter, was Sie zur Veröffentlichung vorbereiten sollten und wie ein Artikel veröffentlicht wird: Veröffentlichen Sie Ihren ersten Artikel im DS Hub.