Bootstrap 11 Design Installation

Pro Hauptseite beziehungsweise Warengruppe stehen Ihnen 7 verschiedene Möglichkeiten zur Erstellung des Eyecatchers zur Verfügung. Die verschiedenen Einstellungen dafür werden Ihnen nun erklärt.

• nur Farbverlauf (mit H1) anzeigen

• nur Logo anzeigen

• Google Map als Eyecatcher

• Slideshow Einstellungen der Website & FTP-Eigenschaften verwenden

• Hauptseiten durchlaufen

• Hauptseiteneigenschaften verwenden

• kein Logo anzeigen

In den globalen Seiteneigenschaften finden Sie Einstellungen die für 3 Erstellungsstrategien gelten. Sicherlich finden Sie durch probieren schnell heraus, welche Einstellung was bewirkt, zumal die verschiedenen Eigenschaften sinnvoll benannt wurden. Die verschiedenen Erstellungsmöglichkeiten für die Slideshow werden Ihnen hier detailliert erklärt. Das Bootstrap-Template bietet jedoch zusätzlich weitere Eyecatchervarianten:

Für zum Beispiel Kontaktseiten ist diese Eigenschaft ideal. In den globalen Seiteneigenschaften finden Sie dafür folgende Einstellungsmöglichkeiten:

• Adresse (zum Beispiel: Frommhagenstraße 52, Stendal)

• API-Key: unter Google Maps Api Key erstellen haben wir Ihnen beschrieben wie Sie einen API-Schlüssel für die Google Karte anfordern und warum diese Schritte notwendig sind.

• Typ: TERRAIN, HYBRID, SATELLITE, ROADMAP

• Zoomfaktor (2 bis 14)

• maximale Höhe (Angabe in Pixel)

Bei dieser Einstellung wird anstatt eines Logos ein Farbverlauf von links nach rechts angezeigt. Die Überschrift erster Ordnung wird dabei innerhalb des Headers angezeigt, außerdem kann ein Lead-Text vergeben werden (auf dieser Seite wäre das: "... das responsive Design für web to date 8.0"). Sie können zusätzlich ein PNG-Bild wählen, welches sich horizontol sowie vertikal wiederholt. Die Einstellungen dafür finden Sie unter Datei, Website- und FTP-Eigenschaften, Erweitert unter der Kategorie Eyecatcher (Farbverlauf-Einstellungen).
Bitte beachten Sie dass das PNG-Bild als Download angelegt und per Link auf Download verknüpft werden muss.

Auch hier können Sie pro Hauptseite per erweiterter Eigenschaft ein Bild (gif oder jpeg) wählen. Die entsprechende Eigenschaft 1.0 Eyecatcherbild finden Sie in der Kategorie globale Slideshow oder Eyecatcher.

Font Awesome ist eine der beliebtesten kostenlosen Icon-Fonts und das Bootstrap 3 Template beinhaltet das Iconset.

Mit Font Awesome erhalten Sie über 580 Icons, die Sie in Ihre Webseite einbauen und per BB-Code einfach anpassen können. Das Set ist unendlich und verlustfrei skalierbar und benötigt im Vergleich zu bildbasierten Lösungen deutlich weniger Kilobyte.

Das Template spendiert dem Absatztyp "Aufzählung zusätzlich 2 erweiterte Eigenschaften.
[h3]1. Auswahl des Listen-Icons[/h3]Diese Eigenschaft hat gegenüber der Eigenschaft "Auswahl des Listenstils Vorrang. Hier kann jedes Icon der Version 4.6 verwendet werden. Auf der Seite fortawesome.github.io/Font-Awesome/icons finden Sie ein Übersicht. Möchten Sie zum Beispiel das Symbol [icon=gift][/icon] fa-gift verwenden, so geben Sie bei der Eigenschaft [code]gift[/code] ein. Beachten Sie dass das [code]fa-[/code] wegfällt.
[h3]2. Auswahl des Listenstils[/h3]Ist kein spezielles Icon angegeben wird diese Eigenschaft genutzt. Sie haben die Wahl zwischen Aufzählung mit Häkchen [icon=check][/icon] (fa-check), Aufzählung mit einem Stopzeichen [icon=minus-square][/icon] (fa-minus-square), normale ungeordnete Liste oder echte Aufzählung, welche eine nummerierte Liste anzeigt.

Erstellen Sie einen Link werden automatisch bestimmte icons verwendet. Sicherlich sind Ihnen die verschiedenen Links auf web2date-designs.de aufgefallen.
Ein interner Seitenlink verwendet das Symbol [icon=share-square][/icon] [code]fa-share-square[/code], ein externer Link das Icon [icon=link][/icon] [code]fa-link[/code], eine Bildverlinkung nutzt [icon=picture-o][/icon] [code]fa-picture-o[/code] und standardmäßig verwendet ein Download das Icon [icon=download][/icon] [code]fa-download[/code].

Zusätzlich kann aber jedem Download ein eigenes Icon zugewiesen werden. Wir haben hier das Touch-Icon für Smartphones und Tablets mit dem Font-Icon [code]fa-file-text-o[/code] verlinkt.

Auf unsere Seiten sehen Sie die Icons auch in Menüs oder im Footertext, dafür verwenden wir BB-Code.

Ein tolles Anwendungsbespiel wäre eine Verlinkung eines Facebook-Icons in zweifacher Größe.

Zur Anzeige des Facebook-Icons wurde innerhalb des BB-Codes facebook-square fa-2x eingetragen.
Für die Darstellung der 4-fachen Größe wiederrum wurde youtube fa-4x angegeben.

Es gibt verschiedene Methoden wie eine seitliche Navigation erstellt werden kann, per Aufmacher oder durch das Template generiert.

Zum einen per Aufmacher (nur mit Überschrift). Der Vorteil hier ist dass Sie selbst Produkte als Menüpunkt integrieren können. Außerdem definieren Sie selbst die Reihenfolge der verschiedenen Navigationspunkte. Erstellen Sie für diese Menüvariante einen Aufmacher in der Kontextspalte. Als Stil wählen Sie bitte "Überschrift . Zusätzlich müssen Sie in den erweiterten Eigenschaften des Sidebar-Absatzes den Punkt "als Menü anzeigen auf ja stellen.

Die zweite Variante ist eine automatische Generierung des Menüs durch das Design. Natürlich haben Sie hier durch verschiedene Einstellungen Einfluss auf die Erstellung. Sie können dabei in den erweiterten Eigenschaften der kompletten Seite wählen ob das automatisch generierte Menü in der linke oder rechten Kontextspalte dargestellt werden soll. Als Nutzer des responsiven Templates beachten Sie bitte die globalen erweiterte Eigenschaften "Menü in der linken oder rechten Sidebar im Bereich "Design (Menü) . Zusätzlich können Sie pro Hauptseite bzw. Warengruppe wählen, welche Ebenen und ob das Menü auf dieser Seite angezeigt werden soll. Weiterhin können Sie dort angegeben ob die momentan ausgewählte Seite generell in der Kontextspalten-Navigation aufgenommen oder ob sie nicht dargestellt werden soll.