TeamViewer Facebook Twitter Xing Kununu LinkedIn DigitalDojo

Orchard CMS Tutorial - Neue Seite erstellen und bearbeiten


Details des Videos zum Nachlesen:

Herzlich willkommen.

In diesem Tutorial zeige ich Ihnen wie man mit Orchard CMS den Inhalt einer Homepage verwaltet und neue Seiten erstellt und bereits bestehende Seiten verändert. Wenn Sie sich mit Ihrem Admin Account eingeloggt haben, haben Sie zwei Möglichkeiten eine neue Seite zu erstellen. Entweder über den Menüpunkt New -> Page oder über den Menüpunkt „Content“. Im Content wird Ihnen jeglicher Inhalt aufgelistet.  Klickt man auf „Create New Content“ und anschließend auf „Page“ öffnet sich die neue Seite.

Create Content

Wir beginnen mit der Eingabe des Titels. Dieser wird dann im Tab (Reiter) des Browsers angezeigt und benennt gleichzeitig die Seite. In diesem Fall nehmen wir als Titel „Tutorial - Neue Seite erstellen“. Wählen anschließend den Link dazu aus. Hier ist wichtig zu beachten, dass keine Umlaute, Sonderzeichen oder Leerzeichen verwendet werden. In unserem Beispiel lautet der Pfad content/neue_Seite (Leerzeichen werden mit Unterstrich oder Bindestrichen ersetzt)

Als weiters haben wir „Set as home page“ diese Auswahl würde bedeuten, dass genau diese Seite als Hauptseite definiert wird. Wollen wir hier nicht, da unsere Seite eine Unterseite sein soll.

Content Title

Layout:

Der Aufbau des Layouts ist bereits vordefiniert: man kann sagen, er gleicht einem Baukastensystem. Hierbei ist wichtig zu erwähnen, dass die Seite responsive ist, dh. sie ist gleich direkt für mobile Geräte optimiert.
Wie auch immer man die Seite aufbaut, beim Öffnen der Seite mit mobilen Geräten ordnen sich die Elemente so an, dass die Lesbarkeit in jedem Fall gegeben ist. Bei der Anordnung der einzelnen Elemente ist darauf zu achten, dass sich alles innerhalb des Rahmens abspielt. 

Die jeweiligen Elemente können aus dem Feld rechts per Drag & Drop reingezogen werden und lassen sich auch anschließend noch beliebig anordnen. So kann man beispielsweise ganze Reihen nach oben oder unten verschieben, Spalten vervielfachen oder wieder entfernen. Das Grid wiederum trennt einzelne Bereiche der Seite voneinander ab.

Um das Layout mit Inhalt zu befüllen, verwenden wir die Content-Elemente. Beginnend mit der Überschrift, welche in 6 vordefinierten Größen eingefügt werden kann. Wobei H1 in erster Linie über den Titel generiert wird. Deswegen verwenden wir für unsere Überschrift H2. Um das Ganze noch übersichtlicher zu gestalten, fügen wir unter den Überschriften noch einen Break ein, um dann darunter das HTML-Feld für die Texteingabe zu generieren.

Content Layout

HTML-Feld:

Der HTML-Editor funktioniert im Grunde genommen wie Word, aufgrund dessen kann ein bereits vorgefertigter Text aus dem Word in der gleichen Formatierung übernommen werden.

Um Links einzufügen wird lediglich die Auswahl des Textes, welche als Link agieren soll, markiert und der Link über den Link-Button gesetzt. Bei der Eingabe des Links ist zwischen Internen Links und Externen Links zu unterscheiden. Bei internen Links verwendet man relative Links, dh. es wird nicht die volle Internetadresse angegeben, sondern Domain- und Hostname entfallen und der Link beginnt quasi als Unterverzeichnis. Bei externen Links muss jedoch die vollständige Adresse ab http eingeben werden.

In unserem Beispiel verlinken wir zur Content-Hauptseite, also intern mit einem relativen Link (/content). Man kann dem Link nun auch noch einen Titel geben, wobei wir den einfachen Weg nehmen und denselben Titel wie Text wählen. Target, also das Ziel ist in unserem Fall keines, sprich wir bleiben auf unserer eigenen Seite. Verlinkt man nach außen, empfiehlt es sich durchaus als Ziel „New Window“ einzustellen, damit sich ein neues Fenster öffnet und der Besucher nicht von der Seite wegdirigiert wird, sondern die Möglichkeit geben ist, beide Seiten offen zu halten.

Content HTML Link

Im Bereich „Media“ hat man nun auch die Möglichkeit Bilder und Dateien hinzuzufügen, wobei sich die Auswahl „Image“ auf reine Bilddateien bezieht und das „Media Item“ jegliche anderen Dateien beinhaltet. Mehr zum Thema Media erfahren Sie im Tutorial „Media“

Ist unsere Seite nun fertig, kann sie gespeichert werden und je nach Wunsch direkt veröffentlich werden oder zu einem später definierten Zeitpunkt. Die gespeicherte Seite erscheint nun im Content-Menü und kann von hier aus nachbearbeitet oder über den Button „View“ angesehen werden.

Image