Hyperspace GHKit Template

Dokumentation Homepage einrichten

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

über diese Anleitung

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.

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


Allgemeines

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.


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.

  • offline
  • intro
  • work_info
  • work1
  • work2
  • work3
  • work4
  • work5
  • work6
  • work7
  • work8
  • contact_info


Modulpositionen mit besonderen Eigenschaften

Sektion "Who we are / Wer wir sind"

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.


Bildergalerien

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.


Bereiche / Sektionen der Startseite

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


Welcome / Willkommen

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:


Who we are / Wer wir sind

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


What we do / Was wir machen

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.

Modulpositionen

  • 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


Get in Touch / Kontakt

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:


Menüs

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.


Inhaltsseiten

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.

Spezielle Inhaltsseite "Privancy Policy"

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:


Bildergalerien

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.


Kontaktseite

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:


Offline

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:


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

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


vordefinierte Texte ändern

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.


Techniken / Credits

originales Template

Scripts

Bilder


Change Log

v1.0.0 05.07.2016

  • erste öffentliche Version

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