Autor: Günther Hörandl
Template-Version: 1.0.0 05.07.2016 - Doku-Version: 1.0.0 15.08.2016
Diese Anleitung dient zur Einrichtung des GHKit Templates "Hyperspace". Hierbei werden alle templatespezifischen Punkte erklärt.
Die Screenshots mit den jeweiligen Erklärungen wurden hauptsächlich mit dem Inhaltspaket CP1 (siehe Demo Hyperspace CP1 ) gemacht. Einige Funktionen sind aber nur im Inhaltspaket CP2 (siehe Demo Hyperspace CP2 ) eingebaut. Daher werden einige Screenshots auch vom CP2 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
Dieses Template stammt ursprünglich von HTML5UP . Es wird unter der Lizenz Creative Commons veröffentlicht.
Hyperspace wurde soweit umgebaut bzw. erweitert, dass es über GHKit Funktionen verfügt und das somit die Inhalte einfach angepasst werden können.
Hyperspace ist ein sogenanntes One-Page Template das fast alle Inhalte auf einer Seite zusammenfasst. Aber es wurden auch Techniken eingebaut um auch Unterseiten verwenden zu können.
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.
offline
intro
work_info
work1
work2
work3
work4
work5
work6
work7
work8
contact_info
Werden diese Module mit Inhalt gefüllt, dann werden (falls vorhanden) die dazugehörigen Bilder angezeigt.
about1
about2
about3
about4
about5
Nähere Information zu der Sektion "Who we are / Wer wir sind" gibt es weiter unten.
Es sind 3 Galerieseiten vorbereitet, diese haben je 2 separate Modulpositionen.
imagegallery1_top
imagegallery2_top
imagegallery3_top
imagegallery1_bottom
imagegallery2_bottom
imagegallery3_bottom
Nähere Information zu den Bildergalerien gibt es weiter unten.
Folgende Tabelle listet alle Bereiche der Startseite auf. Das Ankermenü verlinkt/scrollt zu folgenden 4 Bereichen.
Name | ID / Anker | |
---|---|---|
Welcome / Willkommen | #intro |
mehr Infos |
Who we are / Wer wir sind | #one |
mehr Infos |
What we do / Was wir machen | #two |
mehr Infos |
Get in Touch / Kontakt | #three |
mehr Infos |
Der Willkommenstext kann bequem im Backend angepasst werden. Es steht genügend Platz zur Verfügung um auch Bilder oder ein Logo einzubauen.
Unterhalb wird automatisch ein Button mit der Schrift "weiter" bzw. in der englischsprachigen Version mit "learn more" angezeigt, der beim Klick zum 2. Bereich "Who we are / Wer wir sind" runterscrollt.
Screenshot:
Hier sind Positionen zur Vorstellung von bis zu 5 Personen vorbereitet. Natürlich kann man diesen Bereich auch für bis zu 5 Tätigkeiten oder bis zu 5 Produkten verwenden.
In der Desktopansicht ist immer links ein Bild zu sehen und rechts eine Modulposition, die mit einem x-beliebigen Inhalt gefüllt werden kann. In den Demos ist hier jeweils ein kleiner Einleitungstext mit einem Button zu sehen, mit dem man dann auf eine weitere Unterseite navigieren kann.
Screenshot:
Es werden nur die Bereiche (Bild mit Modulposition) angezeigt, die auch mit einem Inhalt gefüllt sind. Die Namen der Bilder sind fest vergeben und müssen auch so verwendet werden.
Alle 5 Bilder sind im Verzeichnis images
gespeichert. Die ideale Pixelgröße ist 500px hoch und 500px breit. Die Namen dieser Bilder und die dazu passenden Modulpositionen werden in der folgenden Liste aufgeführt.
Bildname | Modulposition | |
---|---|---|
1. Person, Leistung oder Produkt | images/pic01.jpg |
about1 |
2. Person, Leistung oder Produkt | images/pic02.jpg |
about2 |
3. Person, Leistung oder Produkt | images/pic03.jpg |
about3 |
4. Person, Leistung oder Produkt | images/pic04.jpg |
about4 |
5. Person, Leistung oder Produkt | images/pic05.jpg |
about5 |
Dieser Bereich verfügt zunächst über ein Modul work_info
das für einen Einleitungstext genutzt werden kann. Er hat keine besonderen Eigenschaften.
Darunter können 8 Felder/Module verwendet werden um Tätigkeiten, Eigenschaften eines Produktes, oder ähnliches zu zeigen.
work1
work2
work3
work4
work5
work6
work7
work8
Es werden dabei nur die Module angezeigt, die auch mit Inhalt gefüllt sind. Alle anderen bleiben verborgen.
Screenshot:
Auffallend sind hier die Icons jedes Feldes. Diese müssen/können als HTML-Code direkt bei der jeweiligen Modulposition geändert werden.
Ein HTML Code (zu sehen bzw. zu ändern über den Code-Editor ) einer dieser Modulpositionen könnte folgendermaßen aussehen:
<span class="icon major fa-code"></span>
<h3>Überschrift</h3>
<p>Das ist ein kleiner Einleitungstext.</p>
In der ersten Zeile wird das Icon geschrieben. Um das Icon zu ändern, muss nur der Codeteil fa-code
geändert werden. Es handelt sich hier um eine besondere Schriftart, mit der viele Icons geschrieben werden können. Eine Liste dieser Icons mit dem dazugehörigen Code findet man auf der Homepage Font Awesome .
Schreiben wir z.B. in der ersten Zeile folgenden Code:
<span class="icon major fa-star"></span>
Dann wird das Icon einen Stern zeigen
Der Kontaktbereich beginnt wieder mit einer individuell zu füllendem Contentmodul contact_info
. Links darunter befindet sich ein einfaches Kontaktformular mit Ajax-Techniken. Die Homepage muss somit beim Senden nicht nochmals die ganze Seite laden. Und rechts werden alle Kontaktdaten, die im Backend eingetragen wurden, angezeigt.
Screenshot:
Im Template Hyperspcae wurden 3 Menüs eingebaut.
Bezeichnung | Verwendung | Sichtbar | Ebenen |
---|---|---|---|
Hauptmenü | Ankermenü links bzw. in der Topline * | nur auf der Startseite | 1 ** |
Untermenü 1 | Topline | auf allen Contentseiten | 1 ** | Untermenü 2 | auf allen Seiten | nur auf Inhaltsseiten | 1 ** |
* je nach Displaygröße
** Tieferliegende Ebenen werden nicht angezeigt.
Screenshot:
Beim obigen Screenshot sieht man links das Hauptmenü mit den 4 Ankerlinks und unten das Untermenü2 als Footerleiste.
Das Ankermenü ist nur auf der Startseite zu sehen.
Screenshot:
Das Untermenü 1 wird immer oben als Menüleiste für Contentseiten verwendet. Es ist nur auf Contentseiten und den Errorseiten zu sehen.
Links oben wird der Titel der Homepage angezeigt. Er kann im Backend bei den Konfigurationseinstellungen angepasst werden. Und es wird automatisch rechts der Menübutton "ZURÜCK ZUR STARTSEITE" bzw. "BACK TO THE FRONTPAGE" zu positioniert.
Es können zahlreiche Inhaltsseiten erstellt werden.
Screenshot:
Der obige Screenshot stammt vom Inhaltspaket CP2 (siehe Demo Hyperspace CP2 ), da beim Inhaltspaket CP1 (siehe Demo Hyperspace CP1 ) keine Inhaltsseiten eingebaut sind. Neben dem Submenü1 und dem Submenü2 ist die Position (grüner Hintergrund) zu sehen, wo der Webmaster eine Information hinterlassen kann.
Wird eine Inhaltsseite mit dem Namen privacy_policy
angelegt, dann wird beim Aufruf der Homepage (egal welche Seite) automatisch eine Footerleiste eingeblendet. Diese Footerleiste zeigt einen Informaitonstext mit Link zu dieser Contentseite privacy_policy
und einen Button zur Bestätigung diese zu aktzeptieren.
Screenshot:
Prinzipiell ist die Anzahl der möglichen Galerieseiten unbegrenzt. Aber für 3 Bildergalerien 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.
Die Kontaktseite ist bei diesem Template nicht vorhanden. Alle Kontaktinformationen sowie das Konatkformular sind unten auf der Startseite zu finden.
Erstellt man dennoch die Kontaktseite über einen Menüpunkt und ruft diese dann auf, dann erhält man folgende Ansicht:
Screenshot:
Wie jedes andere GHKit Template kann auch Hyperspace offline geschaltet werden.
Hier steht die Modulpositon offline
zur Verfügung um den Besuchern den Grund mitzuteilen.
Screenshot:
Es sind folgende kleine Scripte vorbereitet:
Informationen zur Verwendung bzw. Entwicklung dieser Script Seiten gibt es hier: Dokumentation externe Scripte
Einige Texte sind fest vergeben und können im Backend nicht geändert werden.
Natürlich können wir diese auch individuell anpassen. Dazu öffnen wir zum Beispiel die deutsche Sprachdatei template/hyperspace/language/de.ini
mit einem x-beliebigen Texteditor.
Möchten wir den Text des Buttons weiter auf der Startseite nach dem Willkommenstext ändern, dann suchen wir uns die entsprechende Zeile. Wir finden diese in der Zeile 47.
INTRO_BUTTON = weiter
Hier sehen wir die Definition. Der Teil vor dem =
darf nicht geändert werden. Für den Text, zum Beispiel für "ich bin interessiert", müssten wir die Zeile 47 so ändern:
INTRO_BUTTON = ich bin interessiert
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