Praxisbeispiel: Erstellen einer Landingpage

Hallo, mein Name ist Gerhard Moser. In diesem Video erstellen wir eine sogenannte Landingpage. Dazu setzen wir verschiedene Gestaltungselemente ein, wie z. B ein Bilderkarussell, Zeilen und Spalten für ein mehrspaltiges Layout sowie Boxen, Bilder und Buttons.

Als Erstes erstelle ich in meinem Bereich eine neue Seite. Wie Sie eine neue Seite erstellen, haben wir uns bereits in einem früheren Video angesehen. Kurz gesagt: ich wechsle in die Seitenübersicht und klicke auf das Plus-Symbol. Anschließend vergebe ich Titel und Slug der Seite. Mit einem Klick auf “Sichern” wird die Seite angelegt und wir befinden uns wieder in der Seitenansicht.

Über das Augen-Symbol gelangen wir nun zur Seitenvorschau. Im Menü “Seite” finden Sie unter “Vorlagen” die Einstellung “Landingpage”. Eine Landingpage nutzt die volle Breite der Website und blendet die Navigationsleiste aus. Sie ist aber natürlich weiterhin über das Navigations-Symbol (der “Hamburger”) rechts oben aufrufbar. Gedacht sind Landingpages für Bereichsseiten; sie dienen als Einstiegs- und Übersichtsseiten. Es ist daher in der Regel nicht sinnvoll, Unterseiten eines Bereichs zu Landingpages zu machen.

Fügen wir nun der Seite eine Überschrift hinzu. Öffnen Sie den Struktureditor per Klick auf das entsprechende Symbol rechts oben und fügen Sie mit dem Plus-Symbol neben “Seiteninhalt” das Gestaltungselement “Überschrift” hinzu. Das ist für Sie ja alles nichts Neues. Für die Hauptüberschrift einer Seite wählen Sie als “Gliederungsebene” bitte “Überschrift 1”. Das ist wichtig, um sehbehinderten Benutzern und Benutzerinnen ebenso wie Suchmaschinen die Orientierung auf der Seite zu erleichtern. Ich möchte diese Überschrift blau formatieren, daher wähle ich zusätzlich die CSS-Klasse “blue” aus.

Als zweites Element füge ich Text hinzu und gebe einen kurzen Einführungstext ein, den ich als Zitat formatiere.

Am Kopf einer Landingpage verwenden wir häufig Bannerbilder oder -karusselle. In diesem Sinne füge ich das Gestaltungselement “Bilderkarussell” hinzu. In unserem Fall wird es sich um ein einzelnes Bannerbild handeln, daher belasse ich die Anzahl der Folien bei “1”. Als Seitenverhältnis wähle ich “Banner”. Dadurch wird das Bild, das ich anschließend hochlade, automatisch auf das im Corporate Design der Universität vorgesehene Banner-Format zugeschnitten. Ich aktiviere die Option “Volle Breite”, damit das Banner die volle Breite der Seite nutzt, also bis zum Rand reicht.

Ein Bilderkarussell besteht aus mehreren Gestaltungselementen. Das Element “Bilderkarussel”, in dem sie allgemeine Einstellungen vornehmen, wie eben gesehen, und die untergeordneten Folien-Elemente, denen Sie die Bilder hinzufügen. Öffnen Sie das Element “Bilderkarussel” per Klick und bearbeiten Sie das Folienelement, um ein Bild hinzuzufügen.

Diesen Bild-Dialog kennen Sie bereits von anderen Gestaltungselementen, wie z. B. dem Element “Text”. Klicken Sie auf “Datei auswählen”, um ein Bild aus der Mediathek einzufügen. Ich mache das Fenster ein wenig breiter, um zu prüfen, ob wir uns bereits im richtigen Ordner befinden. Den Namen des aktuellen Ordners sehen Sie übrigens oben links.

Das Bild, das ich verwenden möchte, befindet sich noch nicht in der Mediathek. Daher lade ich es hoch, indem ich es einfach von meinem Computer in die Mediathek ziehe. Anschließend füge ich es per Klick ein. Wie Sie bereits wissen, geben Sie bei der ersten Verwendung eines Bilds zusätzliche Informationen an, wie z. B. den Bildtitel oder eine Quellenangabe.

Ich schiebe das Banner im Struktureditor an die erste Stelle, es soll ja am Kopf der Seite stehen.

Als Nächstes möchte ich eine Zeile mit vier Kacheln erzeugen. Dafür füge ich zuerst das Gestaltungselement “Zeile” ein und wähle die Variante mit vier Spalten. Ich öffne die Zeile per Klick, um die Spalten bearbeiten zu können. Zu jeder Spalte werde ich nun ein Gestaltungselement Kachel hinzufügen.

Anstatt ein Gestaltungselement aus der Liste auszuwählen, können Sie es auch über das Suchfeld suchen. Sobald Sie zu tippen beginnen, bekommen Sie passende Vorschläge und können das gewünschte Element auswählen.

Eine Kachel ist ein kompakter Text- und Bild-Block in einem vorgegebenen Design. Der Link ist dabei obligatorisch und verlinkt die gesamte Kachel. Kacheln können übrigens nur in Spalten verwendet werden.

Als Stil wähle ich die Standardvariante ohne Rahmen. Dann wähle ich ein passendes Bild aus der Mediathek. Dieses Bild hat die Universität Innsbruck selbst hergestellt, daher ist keine Quellenangabe erforderlich. Bitte aktivieren Sie das Häkchen bei “Leere Quellenangabe” nur dann, wenn Sie absolut sicher sind, keine Quelle angeben zu müssen. Fehlende Quellenangaben können zu kostspieligen Nachforderungen führen.

Unter “Seitenverhältnis Bild” wählen Sie das passende Format. Das verwendete Bild wird automatisch auf das gewählte Format zugeschnitten. Ich gebe der Kachel noch einen Titel und ergänze den Text, der unter dem Bild erscheint.

Wie gesagt, Kacheln sind immer verlinkt. Dementsprechend wähle ich, so wie Sie es aus anderen Gestaltungselementen, mit denen Links erstellt werden können, bereits kennen, den passenden Link aus. Als Buttonstil wähle ich eine dezente Variante mit Doppelpfeil und füge per Klick auf “Sichern” die Kachel ein. Diese Schritte wiederhole ich nun für die weiteren Kacheln.

Es kommt vor, dass der Struktureditor nicht aktualisiert wird. In unserem Fall z. B. sind die beiden gerade eingefügten Kacheln in der Struktur nicht sichtbar. Aktualisieren Sie einfach die Seite, um den Struktureditor neu aufzubauen. Keine Sorge, beim Aktualisieren der Seite geht Ihre Arbeit nicht verloren, im UniCMS wird Ihre Arbeit automatisch gespeichert.

Übrigens: Befindet sich das gewünschte Bild bereits in der Mediathek, können Sie es mittels des Suchfelds auch suchen.

Diese Kachel verlinkt eine Seite, die noch mit XIMS bearbeitet wird. Daher wähle ich als Linktyp “Externe URL” und füge die URL der Seite ein. Öffnen Sie einfach die zu verlinkende Seite in einem neuen Tab und kopieren Sie die URL. So vermeiden Sie auch Tippfehler. Alles Wissenswerte über Links zeige ich Ihnen übrigens im Video zum Thema Links.

Nun füge ich eine Überschrift hinzu, um die Zeile mit den Kacheln zu beschriften. Da es sich um eine Unterüberschrift handelt, wähle ich die Variante “Überschrift 2”. Bitte wählen Sie Überschriften immer entsprechend der inhaltlichen Struktur aus und nicht aufgrund der Schriftgröße. Falsch gewählte Überschriften verwirren sehbehinderte Benutzer und Benutzerinnen und führen zu Abzügen in der Bewertung der Seite durch Suchmaschinen.

Diese Überschrift soll natürlich über der Zeile mit den Kacheln stehen. Da der Abstand zwischen Überschrift und Zeile für meinen Geschmack etwas zu knapp ausfällt, bearbeite ich die Überschrift und erhöhe den Abstand unten.

Ich füge eine weitere Zeile für einen kurzen Info-Text und Kontaktmöglichkeiten ein. Diese Zeile soll über zwei gleich breite Spalten verfügen.

Den Text in der linken Spalte möchte ich grau hinterlegen. Dafür verwende ich das Element “Box”. Dieser “Box” füge ich nun wiederum das Gestaltungselement “Überschrift” hinzu. Bei dieser Überschrift handelt es sich ebenfalls um eine Unterüberschrift, also eine “Überschrift 2”. Im Struktureditor sehen Sie gut die verschachtelte Struktur dieser Zeile. Zusätzlich füge ich der Box nun auch noch “Text” hinzu.

Auch in der rechten Spalte benötigen wir Text, hier verzichten wir jedoch auf eine Box. Ich füge eine allgemeine Kontakt-E-Mail-Adresse hinzu und verlinke Sie so, wie Sie es bereits in meinem Video zum Thema Links gesehen haben.

Diesen Link formatiere ich als Button und wähle Stil sowie Größe aus. Bei Buttons haben Sie auch die Möglichkeit, ein Symbol hinzufügen. Wählen Sie dazu das “Font Awesome Set” aus und suchen Sie ein passendes Symbol, z. B. über das Suchfeld.

Überschriften können auch direkt in einem Textfeld eingesetzt werden, sie müssen also nicht unbedingt das Gestaltungselement “Überschrift” verwenden. Dieses gibt Ihnen allerdings mehr Gestaltungsmöglichkeiten.

Bei den AnsprechpartnerInnen möchte ich nicht nur auf die E-Mail-Adresse verlinken, sondern auf die gesamte Kontaktinformation, kurz gesagt auf die sogenannten vCards. Verwenden Sie einfach die Suche von www.uibk.ac.at, um die vCard einer Person zu finden. Öffnen Sie einen neuen Tab, suchen Sie die gewünschte Person und kopieren Sie den Link. Wechseln Sie zurück ins UniCMS und fügen Sie den Link ein. Auch diesen Link formatiere ich als Button und füge ein Symbol hinzu.

Veröffentlichen wir nun die Seite und sehen uns das Ergebnis an. Der Abstand zwischen den beiden Zeilen ist ein wenig knapp. Ich editiere noch einmal die Seite. In der Zeile mit den Kacheln erhöhe ich den Abstand nach unten. Anschließend veröffentliche ich noch einmal die Seite. Sieht gut aus.

Nun sind Sie an der Reihe: Erstellen Sie Ihre eigenen wunderbaren Seiten mit dem UniCMS. Übrigens: Neben den Gestaltungselementen, die wir auf dieser Seite verwendet haben, gibt es noch eine Menge mehr. Eine Übersicht finden Sie auf der Seite UniCMS Schnellstart.

Probieren Sie doch ein paar davon aus.

Mir bleibt nur noch eines zu sagen: Herzlichen Dank für Ihre Aufmerksamkeit. Bis zum nächsten Mal.