So geht´s

Arbeiten mit Story

Dieser Artikel führt Sie durch die wesentlichen Funktionen von Story.

Lieber Leser, vielen Dank für Ihr Interesse an Story! Mit diesem Artikel wollen wir Ihnen eine kurze Anleitung zur Verfügung stellen, damit Sie sich mit einigen wichtigen Funktionen und Eigenschaften von Story vertraut machen können – und mit dem preisgekrönten Content Management System Craft auf dem Story basiert.  Im Einzelnen sind das:

  • Einen vorhandenen Artikel editieren und verändern
  • Einen neuen Artikel anlegen
  • Die Übersichtsseite editieren und verändern

Natürlich bietet Story sehr viel mehr Möglichkeiten, die aber im Demo-Zugang entweder nicht zugänglich sind oder deren Beschreibung den Rahmen dieser Anleitung sprengen würde. Deshalb möchten wir Sie dazu ermuntern, Story nach Herzenslust auszuprobieren und alle Buttons, Pulldowns, Links etc. neugierig zu klicken. So bekommen Sie am besten einen Eindruck davon, wie angenehm es ist, mit Story zu arbeiten.

Wenn Sie Fragen haben sollten, rufen Sie uns an: 0 30-98 36 86 58. Oder schreiben Sie eine Mail an kontakt@story-cms.com – wir freuen uns, Ihnen zu helfen.

Einen vorhandenen Artikel editieren und verändern

Wir haben einige Musterartikel für Sie angelegt, die Sie nach Herzenslust verändern können: fügen Sie Bilder hinzu, löschen und verschieben Sie Module, fügen Sie neue Module hinzu – probieren Sie einfach die Möglichkeiten aus, die Ihnen Story bietet. 

Artikel aufrufen und Live-Vorschau

Nachdem Sie sich angemeldet sind Sie im Adminbereich von Story. Sie sehen links auf Ihrem Dashboard die Bereiche "Übersicht", "Einträge" und "Dateien".

01

Klicken Sie in der Navigation links auf "Einträge".

02

In der sich öffnenden Unternavigation klicken Sie auf "Artikel". Öffnen Sie dann einen beliebigen Artikel (Klick auf Name des Artikels).

03

Sie befinden sich nun in der Editieransicht, in der Sie den ausgewählten Artikel beliebig ändern können. Wenn sie die Auswirkungen der Änderungen, die Sie in der Editieransicht vornehmen, live im Frontend verfolgen wollen, klicken sie rechts oben in die "Live Vorschau", eine besondere Funktion von Craft.

04

Der Bildschirm teilt sich nun in zwei Hälften: links die Editieransicht, rechts der Artikel, wie er sich im Frontend darstellt. 

05

Modul einfügen

Ein Artikel in Story besteht aus Modulen: Ein Artikel-Modul ist zum Beispiel ein Textblock, eine Fotogalerie, eine Infobox o.Ä.. Die Artikelmodule können in beliebiger Reihenfolge durch den Redakteur kombiniert werden. Um ein neues Modul zu einem Artikel hinzuzufügen, klicken Sie auf das kleine Zahnrad rechts oben in der Titelleiste eines bereits im Artikel vorhandenen Moduls. Es öffnet sich eine Listbox mit allen Artikel-Modulen, aus denen Sie mit Klick Ihre Auswahl treffen können.

06

Modul(e) verschieben

Über Drag und Drop können Sie jedes Modul an jede beliebige Stelle in einem Artikel verschieben. Klicken Sie dazu auf das kreuzförmige Icon am äußeren rechten Rand der Titelleiste des zu verschiebenden Moduls und halten Sie es gedrückt. Nun können Sie das Modul nach oben oder unten an die von Ihnen gewünschte Stelle verschieben. 

07

Sie können auch mehrere Module gleichzeitig verschieben. Dazu aktivieren Sie die zu verschiebenden Module, indem Sie am äußeren linken Rand der betreffenden Module die Checkbox aktivieren. Nun können Sie die aktivierten Module gemeinsam verschieben. 
Achtung: sind die Module an die richtige Stelle gebracht, deaktivieren Sie sie wieder, sonst sind sie an der nächsten Verschiebe-Aktion beteiligt!

08

Einen eigenen Artikel erstellen

Artikel anlegen und Artikelkopf gestalten

Klicken Sie im Adminbereich in der Navigation links auf "Einträge" und öffnen Sie das Submenü "Artikel". Sie sehen wieder die Liste der bereits in Story hinterlegten Artikel. Um einen neuen Artikel anzulegen, klicken Sie auf den Button "+ neuer Eintrag", der sich rechts oben auf der Seite befindet. 

Es öffnet sich die Seite "Einen neuen Eintrag erstellen" mit noch leerer Eingabemaske. 

10

Folgende Eingaben können bzw. müssen Sie machen, um einen neuen Artikel zu erstellen: 

  • Titel 
    Der Artikeltitel ist eine Pflichtangabe, angezeigt durch den roten Stern neben dem Eingabefeld. Sollte der Artikeltitel nicht angezeigt werden, kann er im nächsten Punkt "Titel Darstellung" ausgeblendet werden. Der Titel kann außerdem linksbündig oder zentriert dargestellt werden.
  • Kategorie 
    In Story werden die Übersichtsseiten u.a. über Kategorien organisiert. Kategorien sind im Allgemeinen identisch mit den Menüpunkten der Hauptnavigation. 
  • Tags 
    Sie können einem Story-Artikel beliebig viele Tags zuordnen. Tags sind wichtig, um auf den Übersichtsseiten Artikel für Teasersektionen auszusuchen.
  • Dachzeile 
    Die Dachzeile ist optional. Sie haben die Wahl zwischen einer freie Texteingabe oder der Darstellung der Kategorie.
  • Lead Text 
    Der Lead Text ist optional. Der Lead Text ist nicht gleichzeitig der Teasertext des Artikels auf den Übersichtsseiten.
  • Autorenzeile, Datumszeile, Sharing
    Optionale Elemente
  • Titelbild 
    Das Titelbild ist ebenfalls optional. Wenn Sie die Option wählen, nimmt das Titelbild immer 100% der Breite des Browserfensters ein.
  • Titelbild als Hintergrund 
    Diese Option setzt Titel und Lead Text auf das Titelbild.  

Bevor Sie nun weiterarbeiten, sollten Sie den Artikel speichern. Den entsprechenden Button finden Sie am oberen rechten Bildschirmrand. 

Der Artikelteaser

Im hellgrünen Rechteck wird der Artikelteaser angelegt, wie er später auf der Übersichtsseite zu sehen sein wird.

11
  • Teasertext
    Der Teasertext ist maximal 300 Zeichen lang
  • Teaserbild
    Klicken Sie auf "+ Bild auswählen" und laden Sie ein Teaserbild hoch. 
  • Teaserfarbe
    Hier entscheiden Sie darüber, wie der Teaser auf den Übersichtsseiten farblich dargestellt wird. Ein nützliches Feature, wenn Sie einen Artikel auf den Übersichtsseiten besonders hervorheben möchten.
  • Priorität
    Die Priorität ist eine Artikeleigenschaft, über die sie ebenfalls Artikel zur Darstellung auf den Übersichtsseiten auswählen können

Bitte vergessen Sie nicht, hin und wieder Ihren Artikel zu speichern – "Cmd+S" ist der Shortcut. Aktivieren Sie nun die "Live-Vorschau", um alle Änderungen unmittelbar im Frontend verfolgen zu können.

12

Artikelmodule

Am unteren Bildrand sehen Sie in alphabetischer Reihenfolge alle Artikelmodule, aus denen Sie Ihren Artikel zusammenstellen können. Wir werden nun alle Module der Reihe nach kurz vorstellen, wobei wir mit dem Text-Modul beginnen, da es meistens zu Beginn eines Artikels genutzt wird.

13

Text

Das Text-Modul gibt Ihnen die Möglichkeit

  • markierte Textstellen kursiv zu setzen
  • aus markierten Textstellen Bulletpoints zu erstellen
  • markierte Textstellen mit Links zu versehen

Zudem können Sie das Textmodul mit einem Initial versehen oder den gesamten Text zentrieren.

14

Bild

Das Bildmodul kann mit einem Bild oder mehreren Bildern gefüllt werden. Fügen Sie mehrere Bilder hinzu, erhalten sie eine Slideshow.

  • Bild oder Bilderliste
    Hier können Sie ein oder mehere Bilder auswählen. Mehrere Bilder werden in einer Slideshow angezeigt. Um zu einem Bild ein Unterschrift hinzuzufügen, klicken Sie nach der Auswahl bitte auf das entsprechende Thumbnail
  • Bild Typ
    Hier definieren Sie, wie das Bild oder die Slideshow in den Artikel eingebunden wird

Möchten Sie Bilder oder ganze Slideshows nebeneinander stellen, müssen Sie zwei Bildmodule verwenden. Das erste Bildmodul definieren Sie als "Halbe Breite des Seitenrasters links" oder "Halbe Breite des Artikels links". Das zweite Bildmodul definieren Sie "halbe Breite des Seitenrasters rechts" oder "halbe Breite des Artikels rechts". 

15

Hervorhebung

Mit dem Modul können Sie einzelne Textpassagen mit einem dunklen Strich am linken Textrand auszeichnen.

Hintergrund

Mit dem Hintergrundmodul können Sie einem bestimmten Bereich im Artikel eine Hintergrundfarbe oder ein Hintergrundbild zuordnen. Die Definition des Hintergrundes bleibt so lange gültig, bis sie durch ein neues Hintergrundmodul die Farb- oder Bildhinterlegung wieder geändert wird.

  • Art des Hintergrundes
    Hier entscheiden Sie, ob der Hintergrund ein Bild (Hintergrundbild) oder eine Farbe bekommen soll
  • Bild abdunkeln
    Wenn Sie ein Bild eingegeben haben, können Sie es in sieben Abstufungen abdunkeln, um Text auf dem Bild für den User gut lesbar darzustellen
17

HTML Box

Die HTML Box erlaubt es Ihnen, Code – HTML, Javascript etc. –  in den Artikel einzufügen. Das können fertige Embed-Codes sein, wie z.B. von YouTube, Google Maps oder anderen Anbietern, aber auch selbst verfasster Code für die Darstellung z.B. von Tabellen, interaktiven Elementen etc.

18

Infobox

Das Infobox-Modul dient der gesonderten Darstellung zusätzlicher Informationen jenseits des allgemeinen Textes und erscheint im Frontend grau hinterlegt.

  • Überschrift
    Die Infobox benötigt zwingend eine Überschrift
  • Text
    Sie können den Text als normalen Lauftext, Zwischenüberschrift, Liste oder Link formatieren
  • Layout
    Wie im Bildmodul können Sie Position und Breite der Infobox variieren
19

Parallax Bild

Parallaxes Scrolling bezeichnet einen Effekt, bei dem sich unterschiedliche Darstellungsebenen verschieden schnell bewegen, wenn der User scrollt. Beim Parallax Bild wird beim scrollen das Bild quasi von oben nach unten "abgefahren", d.h. nur ein Teil des Bildes ist jeweils zu sehen. Je hochformatiger das Bild, das sie verwenden, desto stärker ist der Effekt.

Video

Das Videomodul zeigt ein selbst ablaufendes Video an. Dieses können Sie nicht über einen externen Link einbinden, sondern müssen es zunächst im Bereich "Dateien" hochladen.

  • Video 
    Hier wählen Sie die abzuspielende Videodatei aus
  • Standbild für mobile Geräte 
    Da selbst ablaufende Videos auf mobilen Geräten nicht funktionieren, benötigen Sie ersatzweise ein Standbild
  • Video Typ
    Hier legen Sie fest, wie das Video dargestellt wird
20

Zwischenüberschrift

Mit Zwischenüberschriften können Sie Ihren Text klar gliedern.

  • Text
    Der Text der Zwischenüberschrift
  • Sprungmarke
    Sie können Zwischenüberschriften als Sprungmarken verwenden. Die Sprungmarkennavigation erscheint im Frontend am unteren Bildschirmrand
  • Typ
    Es gibt drei Größen von Zwischenüberschriften, definiert als H1, H2 und H3
  • Zentriert
    Zwischenüberschriften sind linksbündig platziert, wenn Sie diese Option nicht nutzen
21

Zwischenraum

Mit dem Zwischenraummodul können sie Absätze optisch stärker von einander trennen.

  • Art des Zwischenraums 
    Wählen Sie zwischen "Weißraum" oder "Trennstrich"
23

Zitat

Das Zitatmodul setzt Zitate kursiv und mittig in den Text, oben und unten mit einem Trennstrich versehen. Zudem können Sie eine Quellenangabe hinzufügen. 

22

Eine vorhandene Übersichtsseite editieren und verändern

Mit Story können Sie sehr einfach Übersichtsseiten – z.B. Homepage und Ressortseiten – anlegen. Dabei gibt Ihnen Story viele Möglichkeiten, die Inhalte und visuelle Erscheinung der Übersichtsseiten zu variieren. Wir haben für Sie eine Übersichtsseite zum Testen angelegt – eine eigene Übersichtsseite anzulegen ist für Sie im Demozugang nicht möglich.

So gelangen Sie auf die Übersichtsseite:
Wenn sie im Editiermodus sind, speichern Sie ihren Artikel und schließen Sie gegebenenfalls die Vorschau. Sie sind dann wieder auf dem Dashboard. Dort klicken Sie "Einträge“, "Übersichtsseiten“ und dann auf die für Sie erstellten Übersichtsseite. 

24

Seitenkopf gestalten

Die von uns angelegte Übersichtsseite verfügt über einen Seitenkopf, den Sie variabel gestalten können.

  • Titel
    Der Titel der Übersichtsseite
  • Titel zentrieren
    Der Titel wird standardmäßig linksbündig angezeigt
  • Lead Text
    Der Lead Text ist optional. Hier können Sie Ihren Lesern einen kurzen Einführungstext anbieten
  • Art des Hintergrundes
    Der Seitenkopf ist wahlweise weiß, rot oder zeigt ein Hintergrundbild  
  • Bild abdunkeln
    Da der Lead Text auf dem Hintergrundbild steht, können Sie das Bild abdunkeln, um den Text optimal lesbar zu machen
  • Teaserdopplungen auf dieser Seite vermeiden
    Dieses sehr nützliche Feature sorgt dafür, dass jeder Artikel nur einmal auf einer Übersichtsseite angeteasert wird 

Module der Übersichtsseiten

Am unteren Bildrand sehen Sie wieder in alphabetischer Reihenfolge alle Module, die Sie auf der Übersichtsseite verwenden können. Wir werden Sie kurz der Reihe nach vorstellen.

Teaser Liste

Mit dem Modul "Teaser Liste" stellen Sie Teaser auf den Übersichtsseiten zusammen. Sie können beliebig viele Teaser Liste-Module auf einer Übersichtsseite platzieren. Die ersten Einträge in dem Modul nutzen Sie, um zu definieren, welche Artikel in dem Modul als Teaser angezeigt werden. Sind gar keine Filter gesetzt, werden in einem Teaser Liste-Modul alle Artikel in zeitlicher Reihenfolge angeteasert. Je mehr Filter sie setzen – Kategorie, Schlagwörter, Zeit und Prio – desto kleiner wird die Anzahl der in Frage kommenden Artikel. 

  • Kategorie(n)
    Die Auswahl der den Artikeln zugeordneten Kategorien
  • Schlagwörter
    Der Auswahl der den Artikeln zugeordneten Schlagwörter/Tags
  • Datum
    Grenzt den Erstellungszeitraum der anzuzeigenden Artikel ein
  • Prio
    Hier können Sie festlegen, ob nur Artikel eines bestimmten Prioritätsbereiches angeteasert werden sollen

Die folgenden Einträge betreffen das Erscheinungsbild des Teaser Liste-Moduls

  • Überschrift 
    Optional können Sie dem Modul eine Überschrift geben wie z.B. "Empfehlungen der Redaktion" o.ä.
  • Teaseranordnung
    Das Teaser Liste-Modul bietet drei Varianten der Teaseranordnung und -darstellung
  • Anzahl der Teaser
    Geben Sie hier ein, wie viele Teaser in dem Modul erscheinen sollen. Wichtig: Auch über die Anzahl der Teaser können Sie die Teaseranordnung variieren
  • Hintergrund 
    Hier können Sie festlegen, ob die Teaser auf einem farbigen oder einem weißen Hintergrund dargestellt werden

Probieren Sie die verschiedenen Möglichkeiten aus – vor allem die unterschiedlichen Teaseranordnungen sind sehr interessant!

25

Text Absatz

Mit dem Text Absatz-Modul können Sie Text zwischen den Übersichtsseitenmodulen platzieren. Zudem können Sie dem Modul eine eigene Hintergrundfarbe geben. 

Vorkonfiguriertes Modul

Mit dem Vorkonfigurierten Modul können sie Social Media-Icons oder ein Newsletterbestellmodul hinzufügen. Für unsere späteren Kunden können wir nach Absprache natürlich beliebig weitere Spezialmodule hinterlegen. 

26

Viel Spaß beim Ausprobieren

Wir wünschen Ihnen viel Spaß beim Testen von Story. Wenn Sie Fragen haben sollten, rufen Sie uns an: 0 30-98 36 86 58. Oder schreiben Sie eine Mail an kontakt@story-cms.com – wir freuen uns, Ihnen zu helfen.

Themen
Artikel editieren Artikel erstellen Übersicht editieren Viel Spaß!
Teilen