Autor: Günther Hörandl
Template-Version: 1.2.1 07.04.2016 - Doku-Version: 1.0.0 12.05.2016
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.
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
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:
Screenshot:
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.
Die Startseite ist in mehrere Bereiche (Sektionen) unterteilt.
Einige dieser Bereiche sind erst dann sichtbar, wenn dessen Modulpositionen mit Inhalt gefüllt sind.
Screenshot:
Diese Positionen werden nur angezeigt, wenn sie mit Inhalt gefüllt sind. Sie haben keine Besonderheiten.
intro
news
hello
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.
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.
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.
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 |
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
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:
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.
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:
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
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.
Wie schon oben angemerkt zeigen alle Inhaltsseiten am linken Rand ein Menü. Mehr gibt es zu den Inhaltsseiten nicht zu sagen.
Screenshot:
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:
Die Kontaktseite bietet 4 Funktionen. Einen automatisch generierten Lageplan, eine automatisierte Adressen- und Kontaktanzeige, ein Kontaktformular und 3 Modulpositionen.
Screenshot:
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:
Fehlt eine dieser Angaben, dann kann möglicherweise keine genaue Kartenansicht generiert werden.
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.
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.
Die Modulpositionen sind wie beim obigen Screenshot platziert und lauten:
contact_top
contact_center
contact_bottom
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:
Folgende 3 Punkte sollten für eine optimale Konfiguration im phpContact Administratorbereich eingestellt werden:
%%ERROR_MASTER%%
%%CONFIRMMESSAGE%%
Screenshot:
Es sind folgende kleine Scripte vorbereitet:
Informationen zur Verwendung bzw. Entwicklung dieser Script Seiten gibt es hier: Dokumentation externe Scripte
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.
Irrtümer und Änderungen vorbehalten!
Copyright by Günther Hörandl