Helios GHKit Template

Dokumentation Homepage einrichten

Autor: Günther Hörandl
Template-Version: 1.0.0 25.10.2016 - Doku-Version: 1.0.0 25.10.2016

über diese Anleitung

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

Die Screenshots mit den jeweiligen Erklärungen wurden mit dem Inhaltspaket CP1 (siehe Demo Helios 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:

Im oben gezeigten Screenshot wird ein einfacher Text Helios angezeigt. Das ist der Text, der im Backend bei den Konfigurationseinstellungen beim Punkt "Name der Seite" eingetragen ist.

Aber es gibt auch noch eine 2. Möglichkeit. Und zwar wird genau an dieser Stelle eine Modulposition aktiv, wenn diese mit einem Inhalt gefüllt ist. Diese Modulposition heißt logo (siehe auch Screenshot unten). Wird diese Modulposition verwendet, dann wird anstelle des Textes (wie oben beschrieben) eben der Inhalt der Modulposition angezeigt. Das kann dann nicht nur ein Text, sondern auch eine Grafik sein. Die Größe der Grafik passt sich automatisch an.


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 sind eigenständig und haben keine Besonderheiten.

  • custom_frontpage1
  • custom_frontpage2
  • custom_frontpage3
  • custom_frontpage4
  • footer_about_us


Modulpositionen mit besonderen Eigenschaften

Logo

  • logo

Genaue Information und Möglichkeiten zur Gestaltung des Logos wurde bereits weiter oben beschrieben.


Header / Slidshow

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

  • caption1
  • caption2

Nähere Information zur Slideshow gibt es weiter unten.


Bereich "Service"

Er besteht aus 6 Modulpositionen und ist nur dann sichtbar, wenn mindestens einer dieser Modulpositionen einen Inhalt aufweist:

  • service
  • service1
  • service2
  • service3
  • service4
  • service_bottom

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


Bereich "Inform"

Neben einer Informationsgrafik ist eine Modulposition als Einleitungstext und 3 Listenelemente eingebaut. Der komplette "Inform" Block ist nur dann sichtbar, wenn einer der Modulpositionen mit Inhalt belegt ist:

  • inform_top
  • inform_li1
  • inform_li2
  • inform_li3

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


Bereich "Projekte"

Hier werden Bilder von Projekten gezeigt. Ober und unterhalb befindet sich eine Modulposition für individuellen Inhalt.

  • projects
  • projects_bottom

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


..............................................................................


Header / 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

Die erste Seite verwendet links ein Bild mit dem Namen caption_img1.png, das sich im Verzeichnis images/slider befinden muss. Rechts daneben ist die Modulposition caption1 eingebaut.

Screenshot:

Die zweite Seite ist genauso aufgebaut. Nur werden die Positionen gewechselt. Die Grafik images/slider/caption_img2.png ist rechts und die Modulposition caption2 links positioniert.

Screenshot:

Info!

Die Größe der originalen Bilder sind.

  • caption_img1.png: 646 x 381 Pixel
  • caption_img2.png: 608 x 431 Pixel

Die Größen müssen nicht zwingend genauso sein, sollten sich aber etwa in diesen Bereichen befinden.

Das Hintergrundbild ist genauso im Verzeichnis images/slider gespeichert und muss den Namen slider_bg.jpg haben. Es soll etwa eine Größe von 1680 x 738 Pixel haben. Wichtig ist auch, dass das Bild in schwarz/weiß sein soll. Je nach Farbvariation (siehe weiter unten) wird ein entsprechender halbtransparenter Layer darübergelegt. In der Grundeinstellung ist dieser Layer rot.


Bereich "Service"

Screenshot:

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

  • service
  • service1
  • service2
  • service3
  • service4
  • service_bottom

Die erste Modulposition service dient als Überschrift bzw. als Informationstext.

Dann sind hier 4 Blöcke zu sehen. Sie zeigen je ein Hintergrundbild und darunter eine Modulposition für einen kurzen Text. Die Bilder sind im Verzeichnis images/service zu finden. Hier können sie mit dem Filemanager auch ersetzt werden. Die Bilder müssen folgende Namen haben:

  • service_bg1.jpg
  • service_bg2.jpg
  • service_bg3.jpg
  • service_bg4.jpg

Die Größe der 4 Bilder sollte 255 x 325 Pixel sein.

Darunter ist noch eine einfache Modulposition service_bottom eingebaut. Sie hat beim obigen Screenshot keinen Inhalt und ist somit nicht zu sehen.


Bereich "Inform"

Screenshot:

Dieser Bereich fällt durch den farbigen Hintergrund sofort ins Blickfeld. Rechts neben einem Informationsbild sind 4 Modulpositionen zu finden. Eine Überschrift oder Informationstext und darunter 3 Listenelemente.

Das Informationsbild befindet sich im Verzeichnis images/info und hat den Namen inform.png. Es sollte eine Größe von etwa 540 x 421 Pixel haben.

Die Modulpositionen haben die Namen:

  • inform_top
  • inform_li1
  • inform_li2
  • inform_li3

Dieser "Inform" Bereich ist nur sichtbar, wenn eine dieser 4 Modulpositionen mit Inhalt gefüllt ist.

Bereich "Projekte"

Screenshot:

Prinzipiell ist hier eine Bildergalerie zu sehen. Die Anzahl der Bilder ist unbegrenzt. Alle Bilder die sich im Verzeichnis images/projects befinden werden hier angezeigt. Iealerweise sollten alle Bilder die gleiche Größe haben und quadratisch sein.

Oberhalb und unterhalb der Bilderleiste ist je eine Modulposition eingebaut. Oben projects und unten projects_bottom. Die untere Modulposition ist beim obigen Screenshot ohne Inhalt und daher nicht zu sehen.


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: Die Überschrift automatisch geschrieben. Es ist der gleiche Text, der als Title-Tag verwendet wird. Dieser wird bei der Erstellung der Seite im Backend vergeben.

Screenshot:

Auffallend ist hier der Header mit der Menüleiste. Hier ist genauso wie auf der Startseite ein schwarz/weißes Hintergrundbild mit einer Überlagerung eines halbtransparenten farbigen Layers. Dieses Hintergrundbild ist im Verzeichnis images mit dem Namen header.jpg gespeichert und sollte etwa eine Größe von 1680 x 200 Pixel haben. Dieser Header wird bei allen Seiten (außer der Startseite) angezeigt.


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:

Fährt man mit dem Mauszeiger über ein Thumbnail, so wird ein rot-tansparenter Layer mit einem weißen Kreuz darüber gelegt (siehe oben erstes Thumbnail). Klickt man dann drauf, dann wird das Bild in vergrößerten Form in einer sogenannten Light-Box angezeigt. Siehe Screenshot unten.

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.

Modulpositionen

Es sind 3 Modulpositionen vorhanden. Diese werden nur angezeigt, wenn sie einen Inhalt aufweisen.

  • contact_top
  • contact_center
  • contact_bottom


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


Offline Seite

Screenshot:

Die Offline Seite verfügt über eine Modulposition offline und ein Login-Formular für berechtigte Administratoren. Das entsprechende Passwort hierzu kann im Backend bei den Konfigurationseinstellungen geändert werden.

Designvarianten

Helios verfügt über einige Einstellungen um das Design anzupassen.

Farbvariationen:

  • Blau
  • Rot (Standardfarbe)
  • Grün
  • Gelb
  • Rosa
  • Violet

Das Layout:

  • wide / bildschirmfüllend (Standard)
  • boxed / Breite fix mit 1170 Pixel

Ist "boxed" gewählt, ergibt sich ein Hintergrund. Hier kann ein Hintergrundbild gewählt werden.

Hintergrundgrafiken:

  • Muster 1 (hell)
  • Muster 2 (hell)
  • Muster 3 (hell)
  • Muster 4 (dunkel)
  • Muster 5 (dunkel)
  • Muster 6 (dunkel)
  • Bild 1 (Straße)
  • Bild 2 (Mandarinenbaum)
  • Bild 3 (Blumenwiese)
  • Bild 4 (Bergspitzen/Himmel)
  • Bild 5 (Felsen/Meer)
  • eigenes Hintergrundbild

Wählt man den Punkt "eigenes Hintergrundbild", so wird die Grafik gewählt, die sich im Verzeichnis images/background befindet und den Namen image.jpg hat. Es wird bildschirmfüllend angezeigt.

Schriftarten:

  • Raleway (Standard)
  • Cabin
  • Taviraj
  • Arial
  • Dosis
  • Cuprum
  • Abel


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 99.

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 "unsere Partner", müssten wir die Zeile 99 so ändern:

BOTTOM_SUBMENU = 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 25.10.2016

  • erste öffentliche Version

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