Anleitung


Template PAIGE


Das Template Paige beinhaltet 4 verschiedene Farbschemas, 2 verschiedene Hintergründe und 2 verschieden einstellbare Schriftarten.
Wie man diese Dinge ändern kann entnehmen Sie der Standard Anleitung: CMS Scorpion - Allgemeine Anleitung.
Bei diesem Template sind alle Modulpositionen die CMS Scorpion bietet verfügbar, außerdem können Sie alle 4 verschiedenen Menüs wie Topmenü, Sidebar-A, Sidebar-B (mit allen Untermenüs) und das Footermenü benutzen.

Den Einbau der Menüs, der Sitemap, des Kontaktformulars, etc. entnehmen Sie aus der Anleitung: Wildcards


Installations Hinweis

Um den Style (Darstellung) der Webseite wirksam zu machen müssen Sie die Schreibrechte der Datei template/paige/css/template/style.css auf cdmod777 stellen.
Weitere Informationen zu Schreibrechte finden Sie hier: CMS Scorpion - Installation



Boxen

Sie können wie bei Beispiel Template Paket 'Pizza' einzelne Boxen anlegen (Position Header-B). Hierzu stehen Ihnen 2 verschiedene Boxen zur Verfügung. Diese unterscheiden sich durch die Hintergrundfarbe bzw. durch die Schriftfarbe.

Box 1

Box 1 wird mit hell grauem Hintergrund und schwarzer Schriftfarbe dargestellt.
Um dieses Feld einzubauen müssen Sie entweder den WYSIWYG Editor bei den Benutzereinstellungen deaktivieren oder bei Editor auf 'Quelltext' umschalten. Hier tippen Sie nun den Einbaucode dieser Box ein und füllen diesen mit ihrem gewünschten Inhalt.


Einbaucode

<div class="field-style-1">Inhalt einfügen</div>


Dieses müsste mit WYSIWYG Editor anschließen so aussehen:


Box 2

Box 2 wird mit dunkel grauem Hintergrund und weißer Schriftfarbe dargestellt.
Die Einbindung dieser Box funktioniert gleich wie bei Box 1, nur mit dem unterschied das natürlich ein anderer Einbaucode verwendet werden muss.

Einbaucode

<div class="field-style-2">Inhalt einfügen</div>


Bilder einbinden

Um ein Bild in die Homepage einzubinden gibt es verschiedene Möglichkeiten. Sie können eine bestimmte Breite und/oder Höhe eines Bildes angeben, oder Sie können das Bild automatisch an den verfügbaren Platz anpassen lassen.

Wenn Sie das Bild mit dem Editor einbinden und eine bestimmte Größe anzeigen lassen möchten, geben Sie in das Feld 'Breite' und 'Höhe' die gewünschten Pixels ein.

Um das Bild automatisch anpassen zu lassen (Responsive), geben Sie in das Feld Formatvorlagenklassen img-responsive ein.

Einbau im Quelltext: <img class="img-responsive" src="url des Bildes">


Bild mit Rahmen

Sie können den Bildern auf Paige einen Rahmen hinzufügen. Hierzu können Sie wieder vom Quelltext Gebrauch nehmen. Oder bei Einfügen eines Bildes mit dem Editor die dafür vorgesehene 'Formatvorlagenklassen' pic-style-1 einfügen.

Falls bei diesem Bild bereits eine Formatvorlagenklasse eingefügt worden ist dürfen Sie diese keinesfalls löschen.
Fügen Sie lediglich den neuen Code zusätzlich ein. Dieser könnte dann wie folgt aussehen: img-responsive pic-style-1

Um ein Bild via Quellcode einzubinden verwenden Sie diesen Einbaucode: <img class="pic-style-1" src="url des Bildes">


Buttons

Das Template Paige ist mit dem System Boostrap aufgebaut. Dieses verwendet eigene Buttons. Doch diese sind nicht an die Farben dieses Templates angepasst. Hierzu haben wir eigene Buttons mit den Farben dieses Templates angepasst. Je nach Farbeinstellung der Darstellung von 'Paige' ändern sich auch die Farben der Buttons wie Sie auf den Demo Bildern erkennen können.
Insgesamt können 8 verschiedene Größen der Buttons eingebaut werden.


Einbaucode


Button sehr klein

<a href="URL" type="button" class="btn btn-success btn-xs btn-paige">Button Inhalt</a>


Button klein

<a href="URL" type="button" class="btn btn-success btn-sm btn-paige">Button Inhalt</a>


Button normal größe

<a href="URL" type="button" class="btn btn-success btn-paige">Button Inhalt</a>


Button groß

<a href="URL" type="button" class="btn btn-success btn-lg btn-paige">Button Inhalt</a>


Button sehr klein breiten füllend

<a href="URL" type="button" class="btn btn-success btn-xs btn-block btn-paige">Button Inhalt</a>

Button klein breiten füllend

<a href="URL" type="button" class="btn btn-success btn-sm btn-block btn-paige">Button Inhalt</a>

Button normal größe breiten füllend

<a href="URL" type="button" class="btn btn-success btn-block btn-paige">Button Inhalt</a>

Button groß breiten füllend

<a href="URL" type="button" class="btn btn-success btn-lg btn-block btn-paige">Button Inhalt</a>

Ersetzen Sie bei dem Einbau dieses Codes den Text URL durch den Link auf welchen Sie weitergeleitet werden wollen. Außerdem sollten Sie den Text Button Inhalt ändern. Dieser Teil des Codes ist der Anzeigename des Buttons.




Hintergrundbild bei Modulposition Header-C und Bottom-Full-B ändern

Um das Hintergrundbild bei den Modulpositionen Header-C oder Bottom-Full-B zu ändern müssen Sie lediglich die Bilder austauschen.
Diese Bilder können Sie bequem über das in CMS Scorpion integrierten Medienverzeichnis erreichen. Die Hintergrundbilder sind unter dem Pfad: main/paige/seperator gespeichert. Löschen Sie zunächst das gewünschte Bild und laden Sie es erneut mit ihrem Motiv hoch. Sie müssen nur darauf achten das der Bildernamen der Datei denselben Namen trägt.
Bildername für Modulposition Header-C ist: background_paige_header.jpg
Bildername für Modulposition Bottom-Full-B ist: background_paige_bottom.jpg


Animationen

Für dieses Template wurden viele verschiedene Animationen eingebaut. Sie können hier ganze Text Blöcke mit einem Spezial Effekt einblenden lassen. All diese Animationen können Sie sich auf der Demo Seite von Paige ansehen: Demo - Paige Animationen
Auf der Demo Seite von Paige ist ebenfalls der Einbaucode eingebunden mit welchem diese Animation funktioniert. Hier erklären wir Ihnen noch, wie man vorgeht um diesen Code korrekt einzubauen.
Die erste Animation auf der Demo Webseite nennt sich 'Bounce'. Der dazu gehörige Einbaucode ist:


<div class="wow bounce" style="visibility: visible; animation-name: bounce;">
Eigener Inhalt (Text/Bild)
</div>


Zunächst kopieren Sie diesen Code, wie weiter oben in dieser Anleitung bereits erklärt, in den Quellcode. Danach müssen Sie den Text Eigener Inhalt (Text/Bild) mit ihrem Inhalt (Text, Bild) ändern. Danach klicken Sie noch auf Speichern und fertig ist die neue Animation eingebaut.


Tabellen, Infoboxen und Buttons

Der Einbau von verschiedenen Tabellen, Infoboxen und Standard Buttons ist ebenfalls möglich. Wie bei Animationen haben wir hier ebenfalls die Einbaucodes auf der Demo Webseite von Paige: Demo - Paige Tabellen, Infoboxen & Buttons


Tabelle


Der Einbaucode einer Tabelle kann wie folgt aussehen:


01 <table class="table">
02  <thead>
03   <tr>
04    <th>Vorname</th>
05    <th>Nachname</th>
06    <th>Username</th>
07   </tr>
08  </thead>
09  <tbody>
10   <tr>
11    <th>Max</th>
12    <th>Mustermann</th>
13    <th>Maxi</th>
14   </tr>
15   <tr>
16    <th>Mary</th>
17    <th>Mustermann</th>
18    <th>Mary</th>
19   </tr>
20   <tr>
21    <th>Jeniffer</th>
22    <th>Musterfrau</th>
23    <th>Jenny</th>
24   </tr>
25  </tbody>
26 </table>

Die Bedeutung der einzelnen Zeilen sagt nun folgendes aus:

  • In Zeile 01 steht der Beginn und der Style (class) der Tabelle. Dieser unterscheidet sich dann zu den anderen Darstellungen der verschiedenen Tabellen: <table class="table">
    Die Zeile 26 in unserem Beispiel beendet die Tabelle.
  • Zwischen der Zeile 02 und Zeile 08 wird sozusagen der Kopf der Tabelle dargestellt, dieser ist allerdings nicht zwingend notwendig. Und kann auch weggelassen werden. <thead> ... </thead>
  • Zeile 03 und Zeile 07 geben an das dies eine Zeile der Tabelle ist: <tr> ... </tr>
  • Eine Spalte wird angegeben wie z.B. in Zeile 04: <th>Vorname</th>
    In unserem Fall steht in dieser Tabelle das Wort Vorname. Dies können Sie nun durch Ihren Text oder durch ein Bild ersetzen. Wollen Sie nun eine 2te, 3te oder 4te Spalte hinzufügen, dann wiederholen Sie diese Zeile erneut. Es ist nur darauf zu achten, dass diese wie im Beispiel, zwischen den Codezeilen <thead> ... </thead> steht.
  • Zum Schluss kommen wir noch auf die Zeile 09 und Zeile 25 zu sprechen. <tbody> ... </tbody>
    Zwischen diesen Zeilen steht nun die eigentliche Tabelle. Diese ist zwingend notwendig, nicht so wie bei dem Kopf der Tabelle. Lassen Sie nun den Kopf der Tabelle weg, müssen Sie mit diesen Codezeilen beginnen.

  • Infoboxen


    Der Code zu einer Infobox kann wie folgt aussehen:


    <div class="alert alert-success" role="alert">hier muss ihr Inhalt eingetragen werden</div>

    Wiederum kopieren Sie sich diese Codezeile und ändern den Text 'hier muss ihr Inhalt eingetragen werden' durch ihren eigenen Inhalt.


    Buttons

    Dies sind nun einige weitere Button die dieses Template bietet. Wie schon weiter oben in der Anleitung, zu den Einbau des eigenen angepassten Button dieses Templates, gilt hier das selbe Prinzip. Weshalb ich den Einbau nicht weiter erläutern werde.


    Font Awesome

    Font Awesome sind spezielle Icons. Diese können sehr einfach durch eine bestimmte Codezeile eingebaut werden.
    Welche Paige beinhaltet inklusive Einbaucode finden sie wiederum auf der Demo Webseite: Demo - Paige Font Awesome.



    Stand: 26.10.2016

Letzten Templates

Template Happy

HAPPY

Template Paige

PAIGE

Blog

COMING SOON

Top