Omen GHKit Template

Dokumentation Homepage einrichten

Autor: Günther Hörandl
Template-Version: 1.3.0 06.04.2016 - Doku-Version: 1.0.0 08.05.2016

über diese Anleitung

Diese Anleitung dient nur zur Einrichtung des GHKit Templates "Omen". Hierbei werden alle templatespezifischen Punkte erklärt.

Die Screenshots mit den jeweiligen Erklärungen wurden hauptsächlich mit dem Inhaltspaket CP1 (siehe Demo Omen CP1 ) gemacht.

Achtung!

Die Installation sowie allgemeine Einrichtungen (Seitenerstellung, Menüpunkte erstellen, usw.) ist nicht Teil dieser Anleitung.
Das Backend mit allen administrativen Möglichkeiten wir in einer separaten Anleitung beschrieben:
Lesen Sie daher vorher die Anleitung Backend Template Default


Logo

Screenshot:

Grundsätzlich kann als Logo eine Grafik oder wie in den beiden Demos (Omen CP1 und Omen CP2 ) ein Text verwendet werden. Bei der Text-Variante wird aber eine spezielle CSS Eigenschaft verwendet um die Schriftart zu verwenden. Und zusätzlich wird ein Buchstabe farbig dargestellt. Diese Form erreichen wir indem wir beim Inhaltsmanager den Codeeditor verwenden und folgenden Code schreiben:

<span class="logo"><span class="color_text">O</span>men</span>


Startseite / Frontpage

Die Startseite weißt mehrere Funktionen auf. Sie macht optisch schon was her. Vor allem passen sich alle Elemente perfekt der Displaygröße an und macht somit ein optimales Erscheinungsbild.

Schauen wir uns aber zuerst die Modulpositionen an:

Screenshot:

einfache Modulpositionen

Diese Positionen werden nur angezeigt, wenn sie mit Inhalt gefüllt sind. Sie haben keine Besonderheiten.

  • topline
  • slogan
  • quote
  • footer1


Modulpositionen mit besonderen Eigenschaften

Logo

  • logo

Genaue Information und Möglichkeiten zur Gestaltung des Logos gibt es weiter unten.


Slidshow

Der Slider ist nur sichtbar, wenn mindestens einer der folgenden Modulpositionen mit Inhalt gefüllt ist:

  • caption1
  • caption2
  • caption3
  • caption4
  • caption5

Nähere Information zur Slideshow gibt es weiter unten.


Bereich "Informationen"

Der Teil unterhalb der Slideshow und der "grünen Fläche" mit den Servicepunkten ist für jegliche Informationen bestimmt. Dieser Bereich ist nur dann sichtbar, wenn mindestens einer der folgenden Modulpositionen einen Inhalt aufweist:

  • info_text
  • info_list1
  • info_list2
  • info_list3
  • info_list4
  • info_list5
  • info_image

Nähere Information zum Bereich "Informationen" gibt es weiter unten.


Bereich "Service"

Vorbereitet sind bis zu 4 Punkte. Je nach Anzahl der Verwendung passt sich das Design an. Dieser "grüne" Balken ist aber nur dann sichtbar, wenn einer der Modulpositionen mit Inhalt belegt ist:

  • service1
  • service2
  • service3
  • service4

Nähere Information zum Bereich "Service" gibt es weiter unten.


Bereich "über uns"

Dieser Bereich ist gedacht um einige Punkte über den Betreiber der Homepage zu zeigen. Außerdem ist die Möglichkeit gegeben ein Video ideal zu positionieren.

Der komplette "über uns" Bereich ist wiederum nur sichtbar wenn die folgenden Modulpositionen einen Inhalt aufweisen:

  • about_text
  • about_accordion1_title
  • about_accordion1_content
  • about_accordion2_title
  • about_accordion2_content
  • about_accordion3_title
  • about_accordion3_content
  • about_accordion4_title
  • about_accordion4_content
  • about_video_top
  • about_video
  • about_video_bottom

Nähere Information zum Bereich "über uns" gibt es weiter unten.


Bereich "unsere Arbeit"

Dieser Bereich dient zur Auflistung von Arbeiten in Form von Bildern.

Oberhalb der Thumbnails ist eine Modulposition projects_text positioniert, damit man auch einen Informationstext zu den Arbeiten einfügen kann.

Der komplete Bereich ist nur dann sichtbar, wenn sich mindestens ein Bild im Verzeichnis images/projects befindet.

  • projects_text

Nähere Information zum Bereich "unsere Arbeit" gibt es weiter unten.


Allgemeine Informationen: Modulpositionen


Slideshow

Der Slider auf der Startseite verfügt über eine Rotation von 2 Seiten. Er ist nur sichtbar, wenn mindestens eine der folgenden Modulpositionen mit Inhalt gefüllt ist.

  • caption1
  • caption2
  • caption3
  • caption4
  • caption5

Die erste Seite verwendet 2 Hintergrundbilder und die Modulposition caption1. Man kann sich das als 3 übereinanderliegende Layer vorstellen. Ganz unten liegt das erste Hintergrundbild

images/slider/slide1_bg.jpg. Darüber wird mit einem Slide-Effekt das zweite, teils transparente Hintergrundbild images/slider/slide1_img.png geschoben. Danach, wiederum mit einem Slide-Effekt wird die Modulposition caption1 darüber gelegt.

Screenshot:

Auf der zweiten Seite wird nur ein statisches Hintergrundbild images/slider/slide1_img.png und dafür 4 Modulpositionen verwendet. Die 4 Modulpositionen caption2, caption3, caption4 und caption5werden zeitlich unterschiedlich mit einem Slide-Effekt sichtbar. Die beste Darstellung erreicht man indem man nur kurze Texte pro Modulposition verwendet. Unbedingt auch mit kleinen Displaygrößen (Tablet und Smartphone) testen!

Screenshot:

Info!

Die optimale Größe aller 3 Hintergrundbilder ist 1170px x 616px.


Bereich "Informationen"

Screenshot:

Möchte man diesen Bereich nutzen, dann muss mindestens eine der folgenden Modulpositionen einen Inhalt aufweisen:

  • info_text
  • info_list1
  • info_list2
  • info_list3
  • info_list4
  • info_list5
  • info_image

Bei den ersten 6 Modulpositionen gibt es nicht viel zu sagen. Leere Modulpositionen werden nicht angezeigt.

Die Modulposition info_image ist für einen x-beliebigen Text gedacht. Natürlich kann man auch hier (so wie bei den Demos Omen CP1 und Omen CP2 ) eine Grafik platzieren. Aber es gibt eine andere Methode eine Grafik an diese Position passgenau einzubauen.

Wenn die Grafik images/info/info_image.png vorhanden ist, wird diese automatisch angezeigt. Eine optimale Breite dieser Datei ist 284px. Die optimale Höhe richtet sich nach dem Platzbedarf der linken Spalte (Modulpositionen info_text, info_list1 bis info_list5.


Bereich "Service"

Screenshot:

Die Servicepunkte fallen sofort durch den farbigen Hintergrund auf. Er ist sichtbar, wenn mindestens eine der Modulpositionen service1, service2, service3 oder service4 einen Inhalt hat. Die Darstellung passt sich optimal der Verwendeten Servicepunkten an.

Jede Modulposition zeigt ein eigenes Icon. Diese müssen im Verzeichnis images/icons gespeichert werden und müssen folgende Namen haben:

  • service1.png
  • service2.png
  • service3.png
  • service4.png

Diese Icons können bequem mit dem Dateimanager hochgeladen bzw. ersetzt werden.

Der Richtwert für die Größe der Icons liegt bei etwa 100px x 100px.


Bereich "über uns"

Screenshot:

Dieser Bereich kann neben Angaben zum Betreiber der Homepage (also "über uns") auch andere Informationen zeigen. Im linken Teil ist ein Accordion und rechts ein Feld für einen zusätzlichen, individuellen Inhalt vorbereitet. Der Grundgedanke war hier ein Video zu platzieren. Zu sehen im Demo Omen CP1 .

Wie auch schon oben bei allen anderen Bereichen ist dieser "über uns" Bereich nur dann sichtbar, wenn mindestens eine der folgenden Modulpositionen mit Inhalt gefüllt ist:

  • about_text
  • about_accordion1_title
  • about_accordion1_content
  • about_accordion2_title
  • about_accordion2_content
  • about_accordion3_title
  • about_accordion3_content
  • about_accordion4_title
  • about_accordion4_content
  • about_video_top
  • about_video
  • about_video_bottom


Bereich "unsere Arbeit"

Screenshot:

Dieser Bereich dient zur Auflistung von Arbeiten in Form von Bildern. Hierbei wird eine Kombination eines Carusells und einer Lightbox verwendet. Die verkleinerten Bilder (Thumbnails) werden dabei nur horizontal aufgelistet. Das heißt alle Bilder stehen nebeneinander. Und zwar werden nur so viele angezeigt, die auch Platz habe. Werden Bilder ausgeblendet, dann kann man diese durch Klick auf die Punkte rechts/oberhalb der Thumbnais in den sichtbaren Bereich scrollen lassen.

Fährt man mit dem Mauszeiger über ein Thumbnail, so legt sich ein farbiger, halbtransparenter Schleier drüber.

Screenshot:

Klickt man dann auf diesen Schleier, dann wird eine vergrößerte Form des Bildes in einer Lightbox sichtbar.

Screenshot:

Die Bilder der Arbeiten müssen sich im Verzeichnis images/projects befinden. Existiert keine Bilddatei in diesem Verzeichnis, so wird der komplette Bereich "unsere Arbeit" ausgeblendet. (auch wenn die Modulposition projects_text mit Inhalt gefüllt ist)

Somit kommen wir auch schon zur Modulposition projects_text. Hier können wir oberhalb der Vorschaubilder einen Informationstext einfügen.


Zitat

Screenshot:

Dieser Bereich ist für den Einbaues eines Zitats gedacht. Kann aber auch für jeden x-beliebigen Inhalt verwendet werden.

Möchte man aber ein Zitat wie im Demo Omen CP2 einbauen, dann kann man folgenden Code verwenden. Dieser muss mit dem Codeeditor beim Contentmanager eingetragen werden.

<blockquote>
  Rotwein ist für alte Knaben, eine von den besten Gaben.<br><small>Wilhelm Busch, 1832-1908: Abenteuer eines Junggesellen, 1875</small>
</blockquote>


Menüs

In das Template Omen wurden 2 Menüs eingebaut.

Screenshot:

Das Hauptmenü kann neben der Hauptebene (Ebene 0) noch weitere 2 Unterebenen (Menü-Ebene 1 und Menü-Ebene 2) haben. Es können Trenner (Seperator) zur Gruppierung einzelner Menüpunkte verwendet werden, und auch Inhalte in zum Beispiel in Form von Überschriften oder kurzen Texten eingebaut werden.

Das Footermenü (hier mit der Überschrift "Rechtliches") ist nur für die Hauptebene (Ebene 0) konfiguriert. Unterebenen werden nicht angezeigt! Die Überschrift kann in der Sprachdatei geändert werden. Siehe hier: vordefinierte Texte ändern


Wie die Menüpunkte angelegt werden, wird in der Anleitung des Backendes beschrieben:


Inhaltsseiten

Bei den Inhaltsseiten gibt es nur einen Punkt zu sagen: Der Text im dunkelgrauen Balken wird automatisch geschrieben. Es ist der gleiche Text, der als Title-Tag verwendet wird. Dieser wird bei der Erstellung der Seite im Backend vergeben.

Screenshot:


Fotogalerien

Prinzipiell ist die Anzahl der möglichen Galerieseiten unbegrenzt. Aber für 3 Fotogalerien wurde dieses Template mit Modulpositionen vorbereitet.

Mit dem Filemanager muss zuerst ein neues Verzeichnis im Verzeichnis images angelegt werden. Diesem neuen Verzeichnis geben wir einen Namen. Zum Beispiel: pictures. Danach laden wir verschiedene Bilder bei "Drag & Drop" in dieses neue Verzeichnis. Mit dem Menümanager können wir jetzt einen neuen Menüpunkt als Fotogalerie mit dem Verzeichnis images/pictures erstellen.

Screenshot:

Durch Klick auf ein Bild wird es in einer vergrößerten Form in einer sogenannten Light-Box angezeigt.

Screenshot:

Verwendet man aber im Verzeichnisnamen die Zahl 1, also zum Beispiel pictures1, dann werden auf der Galerieseite 2 Module angezeigt. Oberhalb der Thumbnails wird die Modulposition imagegallery1_top und unterhalb die Modulposition imagegallery1_bottom angezeigt. Natürlich nur dann, wenn sie auch mit Inhalt gefüllt sind.

Screenshot:

Die gleiche Technik gilt für die Zahl 2 und 3. Hier werden die Modulpositionen imagegallery2_top und imagegallery2_bottom bzw. imagegallery3_top und imagegallery3_bottom aktiv.

Screenshot:

Screenshot:


Kontaktseite

Die Kontaktseite bietet 4 Funktionen. Einen automatisch generierten Lageplan, eine automatisierte Adressen- und Kontaktanzeige, ein Kontaktformular und 3 Modulpositionen.

Screenshot:

Lageplan

Der Lageplan wird mit Google Maps automatisch mit den Kontaktdaten, die im Backend bei Kontaktdaten eingetragen sind, generiert.

Es werden dazu folgende 3 Daten verwendet:

  • Straße und Hausnummer
  • Postleitzahl und Ort
  • Land

Fehlt eine dieser Angaben, dann kann möglicherweise keine genaue Kartenansicht generiert werden.

Kontaktdaten

Wie schon oben angesprochen werden die Kontaktdaten im Backend eingetragen. Alle angegebenen Daten werden dann automatisch als Adresse angezeigt. Sollten auch Social Media Kontaktdaten vorhanden sein, werden diese als verlinkte Icons ausgegeben.


spezial Script Pages

Es sind folgende kleine Scripte vorbereitet:

  • blank ... Vorbereitung für weitere Entwicklungen
  • develope ... Entwicklerinformationen (anzuwendende Konstanten)
  • elements ... Bootstrap Elemente und deren Codes anzeigen
  • iframe ... responsive IFRAMEs zum Einbau externer Webseiten
  • phpcontact ... Vorbereitung zum Einbau phpContact Formulare auf einer separaten Seite

Informationen zur Verwendung bzw. Entwicklung dieser Script Seiten gibt es hier: Dokumentation externe Scripte


vordefinierte Texte ändern

Einige wenige Texte sind fest im Template vergeben und können nicht im Backend geändert werden.

Natürlich können wir diese auch ändern. Dazu öffnen wir zum Beispiel die deutsche Sprachdatei template/omen/language/de.ini mit einem x-beliebigen Texteditor.

Möchten wir den Text für die Überschrift im Footer "über uns" ändern, dann suchen wir uns die entsprechende Zeile. Wir finden diese in der Zeile 106.

BOTTOM_ABOUTUS = über uns

Hier sehen wir die Definition. Der Teil vor dem = darf nicht geändert werden. Für einen Buttontext, zum Beispiel für "mehr Informationen", müssten wir die Zeile 106 so ändern:

BOTTOM_ABOUTUS = unsere Partner

Danach speichern und auf den Server laden.

Genauso können hier alle anderen, fest definierten Texte angepasst werden.


Techniken / Credits

Scripts

Bilder


Change Log

v1.0.0 08.05.2016

  • erste öffentliche Version

Irrtümer und Änderungen vorbehalten!
Copyright by Günther Hörandl