Master GHKit Template

Dokumentation Homepage einrichten

Autor: Günther Hörandl
Template-Version: 1.2.1 07.04.2016 - Doku-Version: 1.0.0 12.05.2016

über diese Anleitung

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

Die Screenshots mit den jeweiligen Erklärungen wurden hauptsächlich mit dem Inhaltspaket CP1 (siehe Demo Master 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 wird in einer separaten Anleitung beschrieben.
Lesen Sie daher vorher die Anleitung Backend Template Default


Logo

Links oben befindet sich die Modulposition logo. Hier kann mit dem Inhaltsmanager ein grafisches Logo platziert werden. Das Bild sollte aber nicht höher als 50 Pixel sein. Vorsicht beim Erstellen im Inhaltsmanager. Wenn die Grafik die maximale Höhe von 50px hat, darf sie nicht in einem Absatz gespeichert sein. Kontrolliere das mit dem Code-Editor:

Falsch

Screenshot:

Richtig

Screenshot:

Eine Alternative zu einem grafischen Logo ist ein Text. Entweder man schreibt mit dem Inhaltsmanager an die Modulposition logo einen Text der als Logo dient, oder besser man verwendet die Modulposition logo gar nicht. Wenn diese Position keinen Inhalt hat, wird automatisch der Name der Homepage als Logo angezeigt und zur Startseite verlinkt. Der Name wird im Backend bei der Konfiguration - Einstellungen als "Name der Seite" eingetragen.

Diese Alternative (Nicht-Verwendung der Modulposition logo) wird im Demo Master CP1 verwendet.


Startseite / Frontpage

Die Startseite ist in mehrere Bereiche (Sektionen) unterteilt.

Einige dieser Bereiche sind erst dann sichtbar, wenn dessen Modulpositionen mit Inhalt gefüllt sind.

Screenshot:

einfache Modulpositionen

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

  • intro
  • news
  • hello


Modulpositionen mit besonderen Eigenschaften

Sektionen mit Überschriften

Werden diese Module mit Inhalt gefüllt, dann werden Sie automatisch mit Überschriften versehen. Die Texte der Überschriften können in der Sprachdatei geändert werden.

  • top1
  • top2
  • top3
  • bottom1
  • bottom2
  • bottom3

Nähere Information zu den Bereichen mit Überschriften gibt es weiter unten.


Zitate

Es sind 6 Modulpositionen für Zitate vorbereitet. Natürlich können diese auch für andere Inhalte verwendet werden.

  • quote1
  • quote2
  • quote3
  • quote4
  • quote5
  • quote6

Nähere Information zu den Zitaten gibt es weiter unten.


horizontale Module

Vorbereitet sind 4 Module die nebeneinander positioniert sind.

  • modul1_title
  • modul1_content
  • modul2_title
  • modul2_content
  • modul3_title
  • modul3_content
  • modul4_title
  • modul4_content

Nähere Information zu den horizontalen Modulen gibt es weiter unten.


Bereiche / Sektionen

Folgende Tabelle listet alle Bereiche der Startseite auf.

Name ID / Anker
Top1 #top1 mehr Infos
Quote1 #quote1 mehr Infos
Top2 #top2 mehr Infos
Quote2 #quote2 mehr Infos
Top3 #top3 mehr Infos
Quote3 #quote3 mehr Infos
News #news mehr Infos
Slideshow #slideshow mehr Infos
Hello #hello mehr Infos
Module #modules mehr Infos
Quote4 #quote4 mehr Infos
Bottom1 #bottom1 mehr Infos
Quote5 #quote5 mehr Infos
Bottom2 #bottom2 mehr Infos
Quote6 #quote6 mehr Infos
Bottom3 #bottom3 mehr Infos


Slideshow

Die Slideshow ist auf der Startseite eingebaut und kann mit einer beliebigen Anzahl von Rotationen/Bildern verwendet werden.

Die Bilder sollten eine Auflösung von 1200px mal 400px haben und müssen sich im Verzeichnis images/slideshow/ befinden.

Alle Bilder, die sich im genannten Verzeichnis befinden werden nacheinander angezeigt. Befindet sich kein Bild in diesem Verzeichnis, so ist die Slideshow nicht aktiv und wird somit auch nicht angezeigt.

Screenshot:


News und Hello

news und hello sind 2 "normale" Modulpositionen. news ist oberhalb der Slideshow positioniert und ist für kurze Newseinträge gedacht. Und hello ist unterhalb der Slideshow eingebaut und sollte eine Willkommensnachricht enthalten.

Screenshot:


Bereiche mit Überschriften

Das Master Template ist so aufgebaut, dass es prinzipiell auch als One-Page Webseite verwendet werden kann. Dazu wurden mehrere Modulpositionen vorbereitet, die mit einem sogenannten Ankermenü fokusiert (automatischers scrollen) werden. Jede dieser Positionen kann einen Bereich einnehmen. Zum Beispiel einen Bereich mit "über uns" oder "unsere Leistungen" oder "unsere Produkte". Es sind bis zu 6 solcher Bereiche möglich.

  • top1
  • top2
  • top3
  • bottom1
  • bottom2
  • bottom3

Ein derartiger Bereich schaut etwa so aus:

Screenshot:

Die Überschrift "Überschrift (top1)" sowie der Text "Überschrift Information (top1)" kann nicht im Backend geändert werden. Diese sind fix in der Sprachdatei geschrieben. Natürlich können diese Texte geändert werden. Wie das geht ist weiter unten erklärt: vordefinierte Texte ändern

Der restliche Inhalt (Der Inhalt der Modulposition kann im Backend ...) kann bequem mit dem Inhaltsmanager im Backend erstellt bzw. geändert werden.


Zitate

Um die Anführungszeichen wie im Demo zu verwenden, muss man den WYSIWYG-Editor im Quellcode Modus nutzen und folgenden Code eintragen:

<i class="fa fa-quote-left"></i> Text <i class="fa fa-quote-right"></i>

Screenshot:


horizontale Module

Hier sind bis zu 4 Module horizontal (also nebeneinander) möglich. Je nach Displaybreite werden entweder alle nebeneinander, 2 nebeneinander / 2 untereinander oder alle 4 untereinander angezeigt (Responsive Design).

Screenshot:

Es sind dabei immer 2 Modulpositionen miteinander verbunden. Das heißt: wird die Modulposition modul1_title mit Inhalt gefüllt, wird es gemeinsam mit der Modulposition modul1_content angezeigt (das gilt auch umgekehrt). Sinn macht es aber sowieso, wenn beide Modulpositionen einen Inhalt aufweisen.

Gleiches gilt für die andern Modulpositionen:

  • modul2_title und modul2_content bzw.
  • modul3_title und modul3_content bzw.
  • modul4_title und modul4_content

Möchte man nur 3 Modulblöcke nebeneinander haben, dann verwendet man einfach die beiden Modulpositionen modul4_title und modul4_content nicht. Die Ausrichtung der anderen 3 Blöcke wird trotzdem optimal ausgerichtet.


Allgemeine Informationen: Modulpositionen


Menüs

Im Template Master wurden alle 4 möglichen Menüs eingebaut.

Bezeichnung Verwendung Sichtbar Ebenen
Hauptmenü Topline auf allen Seiten 3
Untermenü 1 Footerline auf allen Seiten 1 *
Untermenü 2 Contentmenü nur auf Inhaltsseiten 3
Untermenü 3 Ankermenü nur auf der Startseite 1 *

* Tieferliegende Ebenen werden nicht angezeigt.


Screenshot:

Beim obigen Screenshot sieht man das Hautpmenü als Topleiste, das Footermenü (Untermenü1) als Footerleiste und rechts ein Ankermenü (Untermenü3) mit farbigen Punkten.

Das Ankermenü ist nur auf der Startseite zu sehen.

Screenshot:

Das Untermenü 2 wird als Menü für Contentseiten verwendet. Es ist nur auf Contentseiten zu sehen.


Inhaltsseiten

Wie schon oben angemerkt zeigen alle Inhaltsseiten am linken Rand ein Menü. Mehr gibt es zu den Inhaltsseiten nicht zu sagen.

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.

Kontaktformular

Mit dem Kontaktformular kann ein Besucher ganz einfach mit dem Betreiber der Homepage in Kontakt treten. Das Standard-Kontaktformular verfügt über 3 Eingabefelder: Name, E-Mail Adresse und für die eigentliche Nachricht.

Als Alternative kann ein professionelles phpContact Formular verwendet werden.

Modulpositionen

Die Modulpositionen sind wie beim obigen Screenshot platziert und lauten:

  • contact_top
  • contact_center
  • contact_bottom


phpContact Formular

Das Master Template bietet neben dem "normalen" GHKit Standard-Kontaktformular auch die Möglichkeit ein optimiertes phpContact Formular einzubauen.
Einige Vorteile: zusätzliches Eingabefelde Empfängerauswahl mit bis zu 10 Adressen, dem Betreff und dem Sicherheitscode. Das Captcha und Reloadsperre sichern gegen Spam. Es gibt die Möglichkeit eines Autoresponders, und vieles mehr.
Die komplette Liste der Funktionen gibt es hier: phpContact Funktionen .

Screenshot:

Downloads:

Installationsinfos:

Konfiguration:

Folgende 3 Punkte sollten für eine optimale Konfiguration im phpContact Administratorbereich eingestellt werden:

  1. Art der Errorausgabe: auf "Master-Errortext verwenden" stellen
  2. Master-Errortext: %%ERROR_MASTER%%
  3. Bestätigungstext: %%CONFIRMMESSAGE%%

Screenshot:


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

Wie schon weiter oben angemerkt sind einige Texte (vor allem Überschriften) fest vergeben und können nicht im Backend geändert werden.

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

Möchten wir den Text der Überschrift der Modulposition Top1 von "Überschrift (top1)" ändern, dann suchen wir uns die entsprechende Zeile. Wir finden diese in der Zeile 39.

TOP1_TITLE = Überschrift (top1)

Hier sehen wir die Definition. Der Teil vor dem = darf nicht geändert werden. Für eine Überschrift, zum Beispiel für "das ist die neue Überschrift", müssten wir die Zeile 39 so ändern:

TOP1_TITLE = das ist die neue Überschrift

Danach speichern und auf den Server laden.

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


Techniken / Credits

Scripts


Change Log

v1.0.0 12.05.2016

  • erste öffentliche Version

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