Ben GHKit Template

Dokumentation Homepage einrichten

Autor: Günther Hörandl
Template-Version: 1.2.1 17.03.2016 - Doku-Version: 1.0.0 04.05.2016

über diese Anleitung

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

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


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
  • service
  • quote1
  • quote2
  • quote3
  • quote4
  • custom1
  • custom2
  • custom3
  • custom4
  • custom5
  • custom6


Modulpositionen mit besonderen Eigenschaften

Sektion "über mich" mit rotierendem Foto

Das Foto ist nur sichtbar wenn es existiert und wenn die Modulposition about mit Inhalt gefüllt ist.

  • about

Nähere Information zur Sektion über mich gibt es weiter unten.


Bildergalerie in der Sektion "meine Projekte"

Eine Galerie als Portfolio der eigenen Projekte verwenden.

  • project1_title
  • project1_info
  • project2_title
  • project2_info
  • project3_title
  • project3_info
  • project4_title
  • project4_info
  • project5_title
  • project5_info
  • project6_title
  • project6_info
  • project7_title
  • project7_info
  • project8_title
  • project8_info
  • project9_title
  • project9_info
  • project10_title
  • project10_info
  • project11_title
  • project11_info
  • project12_title
  • project12_info

Nähere Information zur Sektion meine Projekte gibt es weiter unten.


Kundenmeinungen bzw. Rezessionen #customers

Vorbereitet sind bis zu 5 Module.

  • review1
  • review2
  • review3
  • review4
  • review5

Nähere Information zur Sektion meine Kunden gibt es weiter unten.


Allgemeine Informationen: Modulpositionen


Bereiche / Sektionen

Folgende Tabelle listet alle Bereiche der Startseite auf.

Name ID / Anker
Intro #intro mehr Infos
über mich #about mehr Infos
Zitat 1 #quote1 mehr Infos
meine Leistungen #services mehr Infos
Zitat 2 #quote2 mehr Infos
meine Projekte #projects mehr Infos
Zitat 3 #quote3 mehr Infos
meine Kunden #customers mehr Infos
Zitat 4 #quote4 mehr Infos
Kontakt #contact mehr Infos


Intro #intro

Screenshot:

Die Startseite wird mit einem Hintergrundbild, dass sich bildschirmfüllend zeigt geladen. Darauf befindet sich die Modulposition intro die mit einem individuellen Inhalt (Text bzw. Grafik als Logo) gefüllt werden kann. Und direkt darunter befindet sich ein Button mit dem Text "lerne mich besser kennen", der als Ankerlink (#about) zur Sektion "Über Mich" fungiert.

Die Hintergrundgrafik muss den Namen bg-intro.jpg haben und sich im Verzeichnis images/about/ befinden. Man kann hier keine genaue Vorgabe der optimalen Auflösung geben. Je größer die Auflösung desto größer ist auch die Dateigröße. Das hat zufolge, dass zwar die Qualität besser ist, aber die Ladezeit erhöht wird. Ein guter Richtwert ist etwa 1800px x 900px oder 1280 x 720.

Der Text des Buttons "lerne mich besser kennen" sowie alle Überschriften auf der Startseite sind in der Sprachdatei des Templates definiert. Mehr dazu weiter unten: vordefinierte Texte ändern.


über mich #about

Screenshot:

Dieser Bereich ist nur sichtbar, wenn die Modulposition about mit einem Inhalt gefüllt ist. Auffallend ist das rotierende Foto sobald diese Position sichtbar wird (siehe Demo Ben CP1 ). Dieses Bild wird nur angezeigt, wenn es im Verzeichnis images/about/ mit dem Namen thats-me.jpg gespeichert ist. Es kann bequem über den Dateimanager im Backend hochgeladen bzw. ersetzt werden.

Wichtig: Das Bild sollte quadratisch sein und etwa eine Pixelgröße von 300px x 300px haben.


meine Leistungen #service

Screenshot:

Dieser Bereich ist nur sichtbar, wenn die Modulposition service mit einem Inhalt gefüllt ist.

Im Demo Ben CP1 habe ich 3 Module an der Position service erstellt. Dabei habe ich über den Quellcode-Editor folgende Codes geschrieben.


1. Modul mit diesem Code:

<div class="row">
  <div class="col-lg-12"> 
    <div class="wow fadeInRight" data-wow-delay="0.3s">
      <h3>Lorem ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p><a href="#" class="btn btn-primary">weiter lesen</a></p>
    </div>
  </div>
</div>
<hr>

Sobald es im sichtbaren Bereich der Homepage gelangt (durch runter-scrollen), wird es von links nach rechts sichtbar. Diesen Effeke erreicht man durch den Code in der 3. Zeile:

<div class="wow fadeInRight" data-wow-delay="0.3s">


2. Modul mit diesem Code:

<div class="row">
  <div class="col-lg-12"> 
    <div class="wow fadeInLeft" data-wow-delay="0.3s">
      <h3>Lorem ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p><a href="#" class="btn btn-primary">weiter lesen</a></p>
    </div>
  </div>
</div>
<hr>

Hier erreicht man den Effekt, als würde dieses Modul von rechts nach links rein-geschoben. In der 3. Zeile steht dazu dieser Code:

<div class="wow fadeInLeft" data-wow-delay="0.3s">


3. Modul mit diesem Code:

<div class="row">
  <div class="col-lg-12"> 
    <div class="wow fadeInRight" data-wow-delay="0.3s">
      <h3>Lorem ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p><a href="#" class="btn btn-primary">weiter lesen</a></p>
    </div>
  </div>
</div>
<hr>

Das 3. Modul verhält sich genauso wie das 1. Modul.


Info

Das Hintergrundbild ist fixer Bestandteil und ist direkt im Template gespeichert: template/ben/images/about/bg-services.jpg
Es kann nur per FTP geändert werden.


meine Projekte #projects

Screenshot:

Dieser Bereich ist erst dann sichtbar, wenn mindesten einer der folgenden 3 Punkte erfüllt ist:

  • Mindestens ein Bild befindet sich im Verzeichnis images/projects.
  • Die Modulposition custom01 ist mit einem Inhalt gefüllt.
  • Die Modulposition custom02 ist mit einem Inhalt gefüllt.

Es werden hier alle Bilder, die sich im Verzeichnis images/projects befinden, als schwarz/weiß Thumbnails dargestellt. Oberhalb der Thumbnails befindet sich die Modulposition custom01 und unterhalb der Thumbnails die Modulposition custom02. Siehe dazu den Screenshot Startseite / Frontpage.

Diese Projekte können auf 2 verschiedene Varianten presentiert werden. Entweder nur mit den Bildern, oder mit zusätzlichen Texten.


nur mit Bildern

Hier werden alle Bilder die sich im Verzeichnis images/projects befinden als schwarz/weiß Thumbnails angezeigt. Fährt man mit dem Mauszeiger drüber, so wird das Vorschaubild farbig. Klinkt man es dann an, so wird es mit einer sogenannten Lightbox vergrößert dargestellt.

Screenshot:

Beim obigen Screenshot wird gerade mit der Maus über das linke Thumbnail gefahren.

Screenshot:

Die Lightbox mit dem vergrößerten Projekt-Bild.

Diese Variante kann man auch im Demo Ben CP2 bewundern.


Bilder mit Texte

Möchte man aber Informationstexte zu den jeweiligen Projekt-Bildern schreiben, dann sind für 12 Projekte die Modulpositionen vorbereitet. Für das 1. Projekt steht die Modulposition project1_title und project1_info zur Verfügung.

In die Modulposition project1_title sollte dabei folgender Code (Inhaltsmanager im Codeeditor) geschrieben werden:

<h3>phpContact</h3>
<p>professionelle Kontaktformulare</p>

Screenshot:

Wird die Modulposition project1_info nicht mit Inhalt gefüllt, dann erscheint beim Klick auf das orange Titel-Feld die Light-Box, die schon oben gezeigt wurde.

Verwendet man aber die Modulposition project1_info und schreibt damit einen Inhalt, so wird beim Klick auf das orange Titel-Feld eine andere Anzeige geschaltet. Siehe folgende 2 Screenshots:

Screenshot:

Modulpositionen sichtbar gemacht. Oberhalb des Projekt-Bildes wird die Modulposition project1_title und unterhalb die die Modulposition project1_info angezeigt.

Screenshot:

Das Gleiche gilt für 11 weitere Projekt-Bilder. Die Modulpositionen können der Reihe nach bis project12_title und project12_info verwendet werden.


meine Kunden #customers

Screenshot:

Dieser Bereich wird erst sichtbar, wenn mindestens einer der 5 Modulpositionen review1, review2, review3, review4 oder review5 mit Inhalt gefüllt ist.

Die Rotation richtet sich nach Anzahl der verwendeten Module. Sind die Module review1 und review2 mit Inhalt gefüllt, dann werden auch nur diese Module abwechselnd angezeigt.

Wichtig!

Die verwendeten Module müssen bei review1 beginnen und fortlaufend sein. Das heißt: Wenn man 3 Rezessionen veröffentlichen möchte, dann muss man review1, review2 und review3 verwenden. Die Verwendung von (zum Beispiel) review2, review3 und review5 wäre falsch!

Codes der Demoseiten

Prinzipiell ist es ja egal in welcher Form man hier die Kundenmeinungen schreibt. Es muss kein Bild und auch kein Button angeführt werden, möchte man aber diese "Demo-Form" haben, dann hilft folgender Code. Dieser muss wiederum mit dem Inhaltsmanager im Codeeditor geschrieben werden.

<img src="http://placehold.it/150x150" class="img-thumbnail customers">
<h2>Max Mustermann</h2>
<p class="caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><a class="btn btn-primary" href="#">www.domain.tld</a></p>

Info

Das Hintergrundbild ist fixer Bestandteil und ist direkt im Template gespeichert: template/ben/images/about/bg-customers.jpg
Es kann nur per FTP geändert werden.


Kontakt #contact

Der Kontakt-Bereich gliedert sich in 3 Bereiche. Dem Kontaktformular, dem Lageplan und der Adressenanzeige im Footerbereich.

Screenshot:

Kontaktformular

Das Kontaktformular ist mit speziellen jQuery/Ajax Techniken programmiert und muss zur Prüfung der Eingaben und zum Senden nicht neu geladen werden.

Auffällig ist auch das letzte Eingabefeld. Hier ist eine Rechnung zu sehen(5 plus 3 ist), dessen Resultat in das Eingabefeld eingetragen werden muss. Es dient als Spamunterdrückung. Prinzipiell sollte diese Form zum Blocken automatischer Programme reichen. Möchte man aber eine andere Frage mit anderer Antwort verwednen, so ist das auch möglich. Das ist in der Sprachdatei des Templates zu ändern.

In der Datei template/ben/langauge/deutsch.ini steht in den Zeile 108 die Frage und in der Zeile 109 die Antwort:

CONTACT_FORM_VALIDATE_SECURITY_QUESTION = 5 plus 3 ist
CONTACT_FORM_VALIDATE_SECURITY_ANSWERE = 8

Screenshot:

Obiger Screenshot zeigt das Kontaktformular nach erfolgreicher Sendung.


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.


Adresse

Wie schon oben angesprochen werden die Kontaktdaten im Backend eingetragen. Alle angegebenen Daten werden dann automatisch als Adresse angezeigt.

Die Social Media Kontaktdaten werden als verlinkte Icons rechts daneben ausgegeben.


Info

Das Hintergrundbild ist fixer Bestandteil und ist direkt im Template gespeichert: template/ben/images/about/bg-contact.jpg
Es kann nur per FTP geändert werden.


Menüs

Im Template Ben wurden 3 Menüs eingebaut. Das Top-Menü als Ankermenü der Startseite, am unteren Rand der Homepage das Footermenü und eine optionale Sidebar die die Funktion des Hauptmenüs übernimmt.

Screenshot:

Der Screenshot zeigt oben die waagrechte Menüleiste (Ankermenü der Startseite), unten/links das Untermenü bzw. Footermenü und rechts die Sidebar.

Hauptmenü optionale Sidebar

Die Sidebar ist nur aktiv, wenn sie über mindesten einen Menüpunkt verfügt. Sie 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 es können auch Inhalte in zum Beispiel in Form von Überschriften oder kurzen Texten eingebaut werden.

Diese Sidebar ist nicht zwingend notwendig.

Untermenü 1 Footermenü

Das Untermenü 1 ist am unteren/linken Ende der Homepage zu sehen.
Es ist nur für die Hauptebene (Ebene 0) konfiguriert. Unterebenen werden nicht angezeigt!

Untermenü 3 Ankermenü als waagrechte Menüleiste

Das Ankermenü scrollt (nur) auf der Startseite vertikal zu den verschiedenen Sectionen.
Hierbei können folgende Ankerlinks verwendet werden:

  • #pagetop
  • #about
  • #quote1
  • #service
  • #quote2
  • #projects
  • #quote3
  • #customers
  • #quote4
  • #contact
  • #gmap

Das Untermenü 3 ist nur für die Hauptebene (Ebene 0) konfiguriert. Unterebenen werden nicht angezeigt!

Bei der Menüpunkt-Erstellung im Backend muss hier der Type "Link" und die Komponente "eigenen Link eintragen" gewählt werden. Beim Eingabefeld URL trägt man dann den gewünschten Ankerlink (siehe Liste oben) ein.


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


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:


Inhaltsseiten

Natürlich können beim Template Ben auch Unterseiten verwendet werden. Hier ist dann aber nicht mehr das Hautpmenü/Ankermenü der Startseite, sondern es wird nur ein Button zur Startseite (zurück zur Startseite) und falls vorhanden der Button zum Öffnen der Sidebar sichtbar. Mehr Menüpunkte sind hier in dieser Menüleiste nicht möglich.

Screenshot:

Sollten nur wenige rechtliche Seiten wie Impressum, Datenschutz, ABG, usw. verwendet werden, könnten diese in das Untermenü im Footer eingebaut werden. Wenn das aber über diese Seiten hinausgeht, dann ist es vermutlich sinnvoll mit der Sidebar zu arbeiten.

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

Das Template Ben hat keine eigene Kontaktseite in Verwendung. Die Kontaktfunktionen müssen auf der Startseite eingebaut bzw. verwendet werden.


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 fest vergeben und können nicht im Backend geändert werden. Zum Beispiel wird ist der Text des Buttons im Intro sowie alle Überschriften aller Sektionen fest in der Sprachdatei verankert.

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

Möchten wir den Text für den Button im Intro "lerne mich besser kennen" ändern, dann suchen wir uns die entsprechende Zeile. Wir finden diese in der Zeile 50.

SECTION_INTRO_BUTTON = lerne mich besser kennen

Hier sehen wir die Definition. Der Teil vor dem = darf nicht geändert werden. Für einen Buttontext, zum Beispiel für "mehr Informationen", müssten wir die Zeile 50 so ändern:

SECTION_INTRO_BUTTON = mehr Informationen

Danach speichern und auf den Server laden.

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


Techniken / Credits

Scripts

Bilder


Change Log

v1.0.0 04.05.2016

  • erste öffentliche Version

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