Chloe GHKit Template

Dokumentation Homepage einrichten

Autor: Günther Hörandl
Template-Version: 1.2.0 05.03.2016 - Doku-Version: 1.0.0 26.04.2016

über diese Anleitung

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

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


das Logo austauschen

Das Logo ist oben links in der Menüleiste und in der Slideshow beim Bild 1 zu sehen.

Screenshot:

Es gibt 2 Möglichkeiten sein eigenes individuelles Logo zu platzieren.

1. Quatratisches Logo

Es wird wie beim obigen Screenshot oben links in der Menüleiste und beim Bild 1 der Slideshow angezeigt. Beide male wird die gleiche Grafik angezeigt (nur in unterschiedlichen Größen).

Die optimale Größe dieser Grafik ist 200px mal 200px. Also die Grafik sollte unbedingt quadratisch sein. Wichtig ist, dass das Logo den Namen chloe.png hat und sich im Verzeichnis images/logo/ befindet.

Im Backend wird die Grafik chloe.png einfach mit dem Dateimanager in das Verzeichnis images/logo hochgeladen. Sollte das Verzeichnis nicht existieren, dann muss es zuerst noch angelegt werden.

Das Logo in der Menüzeile wird automatisch mit der Startseite verlinkt.

Demo: Chloe CP1

2. kein (quadratisches / grafisches) Logo verwenden

Möchte man entweder kein quadratisches Logo, kein grafisches Logo oder kein Logo in der Slideshow haben, dann kann man auch auf obige Funktion verzichten. Die oben genannte Grafik images/logo/chloe.png darf also nicht existieren.

Links oben ist eine Modulposition eingebaut. Sie hat den Namen logo und kann per Inhaltsmanager individuell mit einer Grafik oder Text gefüllt werden. Hierbei kann jede x-beliebige Grafik eingebaut werden. Die Grafik in der Slideshow wird nicht verwendet.

Demo: Chloe CP2


Startseite / Frontpage

Die Startseite verfügt neben der Slideshow über viele Modulpositionen, die mit individuellen Inhalten gefüllt werden können:

Screenshot:

einfache Modulpositionen

Diese Positionen werden nur angezeigt, wenn sie mit Inhalt gefüllt sind. Sie sind vertikal (also untereinander) platziert:

  • news
  • top1
  • top2
  • hello
  • bottom1
  • quote1
  • bottom2
  • quote2
  • bottom3

spezielle Modulpositionen

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

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 & modul2_content bzw.
  • modul3_title & modul3_content bzw.
  • modul4_title & modul4_content

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


Allgemeine Informationen: Modulpositionen


Slideshow

Die Slideshow ist auf der Startseite eingebaut und kann mit einer Rotation von maximal 3 Bildern verwendet werden.

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

Wichtig ist auch, dass die Bilder folgende Namen haben:

  • Bild 1: pic1.jpg
  • Bild 2: pic2.jpg
  • Bild 3: pic3.jpg

Die Slideshow ist erst aktiv / sichtbar, wenn mindestens eines der 3 oben genannten Bilder existieren.
Sind zum Beispiel nur die beiden Bilder pic2.jpg und pic3.jpg vorhanden, so wird die Slideshow auch nur mit einer Rotation dieser beiden Bilder erzeugt. (Siehe Demo Chloe CP2 )

Jedem der 3 Bilder sind einige Modulpositionen zugewiesen:

Bild 1 (images/slideshow/pic1.jpg):

Screenshot:

  • caption01
  • caption02
  • caption03
  • caption04
  • caption05

Bild 2 (images/slideshow/pic2.jpg):

Screenshot:

  • caption06
  • caption07
  • caption08
  • caption09

Bild 3 (images/slideshow/pic3.jpg):

Screenshot:

  • caption10
  • caption11

Diese Modulpositionen sind nur dann sichtbar, wenn das jeweilige Bild vorhanden ist, und sich ein Inhalt an dieser Position befindet. Wird die Modulposition caption01 zwar mit einem Inhalt gefüllt, aber es existiert das Bild 1 (images/slideshow/pic1.jpg) nicht, dann wird diese Modulposition auch nicht angezeigt.

Die Bilder werden mit dem Dateimanager in das Verzeichnis images/slideshow/ hochgeladen bzw. bestehende Grafiken ersetzt.


Menüs

Im Template Chloe wurden 2 Menüs eingebaut. Das Top-Menü als Hauptmenü und am unteren Rand der Homepage das Footermenü.

Das Hauptmenü kann neben der Hauptebene (Ebene 0) noch weitere 2 Unterebenen (Ebene 1 und 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ü ist nur für die Hauptebene (Ebene 0) konfiguriert. Unterebenen werden nicht angezeigt!

Screenshot:

Wie die Menüpunkte angelegt werden, wird in der Anleitung des Backendes beschrieben:


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. Diese Fotogalerie zeigt "nur" alle Bilder mit einer sogenannten Light-Box an.

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:


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:


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

Chloe 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


Techniken / Credits

Scripts

Bilder

Change Log

v1.0.0 25.04.2016

  • erste öffentliche Version

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