Bootstrap Design für Siquando Web- und Shop 9

Boostrap 3 Shop 8 Template Showcase

Das responsive Webdesign reagiert auf das jeweils benutzte Endgerät des Benutzers, verschiedene Sites für verschiedene Endgeräte gehören damit der Vergangenheit an.

Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und TV-Geräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Webseite stark abhängig vom Endgerät. Mit aktuellen Webstandards wie HTML5, CSS3 und Javascript passt sich das Siquando Web 9 Bootstrap Design automatisch dem Display an, ohne zuvor eine Auswahl treffen zu müssen welche Webseitenvariante angezeigt werden soll.

Auf den folgenden Seiten stellen wir Ihnen die Eigenschaften des Designs vor. Zusätzlich haben wir das Plugin Feedback diesem Design angepasst, die angepassten Dateien können Sie separat erhalten. Für die Shop 9 Variante des Designs haben wir nun sämtliche Benutzerseiten an die responsiven Templates von Siquando angepasst und optimiert, die Standarddesigns bleiben davon jedoch völlig unberührt.

Zusätzlich kommt LESSCSS zum Einsatz, was CSS um dynamisches Verhalten erweitert und die erstellte *.css Datei minimiert, um Übertragungszeit zu sparen. Mehr über LESS erfahren Sie hier .

Unter der Adresse bootstrap.web2date-designs.de finden Sie eine Demo des Bootstrap 9 Designs (Variante Flat).

Bootstrap 9 - Web 9 Template

Diese Variante des Bootstrap Templates beinhaltet Funktionen, wie eine responsive Slideshow, umfangreiche Aufmachereinstellungen, BB-Code, überarbeitete Registerkarten, verschiedene Boxentypen, und vieles mehr. Es basiert auf HTML5 und CSS3 und bietet Ihnen umfangreiche Anpassungsmöglichkeiten.
49,99 EUR (inkl. 19% USt. zzgl. Versand)

Bootstrap 9 - Shop 9 Template

Gegenüber des Bootstrap-Designs für Web 9 ist die Shop-Version auch im Benutzerbereich und Bestellprozess optimiert.
Neue Farbeinstellungen für den Shopbereich sind hinzugekommen und das Warenkorb-Overlayfenster wurde überarbeitet.
69,99 EUR (inkl. 19% USt. zzgl. Versand)


Änderungen im Design „Bootstrap“ für Version 9

Siquando stellt mit Version 9 nun erstmalig responsive Plugins bereit. Diese können Sie natürlich mit „Bootstrap 9 Web und Shop“ nutzen. Im Gegensatz zu den responsiven Designs von Siquando lässt dieses Design ALLE Plugins zu, nicht nur die responsiven Absatztypen.

Die Bestellabwicklung und der Benutzerbereich des Bootstrap 9 Shop Designs bleibt nun annähernd unangastet gegenüber den responsiven Templates von Siquando, es wurden lediglich CSS-Anweisungen zur optischen Aufwertung hinzugefügt. Auf das deutlich ausführlichere popUp Fenster, sobald ein Artikel in den Warenkorb gelegt wurde, verzichtet das Design allerdings nicht. Auch der „Kaufen“ - Absatz wird nicht mehr durch das Design geändert, er verwendet die originale, responsive Variante des Absatztypes.

Weiterhin sind gegenüber der Version 8 neue Funktionen hinzugekommen oder wurden verbessert:

  • 18 neue Farbeinstellungen (davon 8 Farben für das Menü)
  • Update von Boostrap v3.1.1 auf v3.3.7
  • Aktualisierung der Font Awesome Icons auf Version 4.6.3
  • Ausrichtung des Textes
  • Cookie Warnseite
  • Extra Abstand unten (erweiterte Absatzeigenschaft)
  • Absatzbildern ohne Links kann nun ein Stil vergeben werden. Sie können wählen zwischen Thumbnail, abgerundete Ecken, Bild kreisförmig darstellen oder „kein Stil anwenden“.
  • die LESS-Einstellung wurde nun vereinfacht: das Design erstellt in der Standardeinstellung eine *.cache Datei, wodurch die Serverlast reduziert wird und eine Generierung der Datei style.css weniger wichtig wird. Sollten Sie das Design komplette konfiguriert haben empfehlen wir dennoch weiterhin, die Generierung durch LESS zu deaktivieren.
  • Vergrößerung des Warenkorb- und Benutzersymbols in der Navigationsleiste (Bootstrap 9 Shop)
  • „Menü invertieren“ wurde entfernt, da die Farben nun einstellbar sind

Die Features des Designs im Detail

responsive Template (Bootstrap) für web to date, shop to date und Siquando

Bootstrap 9 Variante Flat

  • responsive Slideshow, mit umfangreiche Einstellungsmöglichkeiten und Touchgesten auf Smartphones ( die Slideshow kann auch im Inhaltsbereich angelegt werden)
  • Kontextspalten-Einstellung: beide Sidebars anzeigen oder abschalten, linke oder rechte Kontextspalte anzeigen
  • Aufmacher auch in 4, 6, 8 oder 12 Spalten
  • responsive Absätze: auf allen Ausgabegeräten, auf Smartphones anzeigen, auf Tablets anzeigen, auf Desktops anzeigen, auf Desktops größer als 1200px anzeigen, auf Smartphones verstecken, auf Tablets verstecken, auf Desktops verstecken und auf Desktops größer als 1200px verstecken (abhängig davon erfolgt die Ausgabe des Absatzes nur auf den gewählten Geräten)
  • Google Webfont integriert
  • BB-Code: mit Funktionen wie Icons oder auch Zeilenumbrüchen, zum Beispiel im Aufmacherkurztext (hier finden Sie eine genaue Beschreibung)
  • integrierte Lightbox mit zusätzlichen Funktionen wie eigenem Beschreibungstext
  • verschiedene Boxtypen: farbig, grau, Linie links oder rechts oder als Zitat
  • Auswahl verschiedener Tabellenstile
  • Verwendung von Font-Awesome-Icons in Listen oder für Links
  • Registerkarten bzw. Tabs können verlinkt werden. Zusätzlich "merkt" sich das Design per Cookie welcher Tab beim letzten Besuch zuletzt geöffnet war. Bei dem nächsten Besuch wird dieser Tab dann wieder automatisch geöffnet sein.
  • angepasster Stil des Akkordions
  • Tooltip bei verlinkten Bildern (und Eingabe einer Beschreibung)
  • Breite des Absatzbildes
  • Ausgabe des Seitennames in der Brotkrumennavigation auch auf Unterseiten (CCML-Lösung)
  • benutzerabhängige Absätze (angemeldeter Benutzer oder Besucher)
  • CSS zur Druckausgabe (verzichten Sie auf das Häkchen „druckbare Seiten erzeugen“, das Design erstellt automatisch druckfähige Seiten)
  • angepasstes Feedback-Plugin (als zusätzliches Modul erhältlich)
  • .... und vielen weiteren Möglichkeiten zur Anpassung des Designs

über 370 verschiedene Symbole (per Schrift)

Für Listen und Downloads kann jedes Font Awesome 4 Icon verwendet werden. Beispielsweise wird links ein drehendes Aktualisierungssymbol gezeigt. Das Bootstrap Design selber verwendet diese Icons bei verlinkten Bildern, Links, Downloads oder auch Aufzählungen. Die Shop to Date Variante nutzt die Schrifticons auch im Backend.


Menüeinstellungen

Neben der horizontalen Navigation, die in den verschiedensten Farben konfiguriert werden kann, kann ein Menü im Footer und in der Kontextspalte angezeigt werden. Wieviele Spalten im Footer angezeigt werden sollen können Sie natürlich per erweiterter Eigenschaft angeben. Auch das Menü in der Sidebar bietet verschiedene Möglichkeiten , so können Sie pro Hauptseite wählen ob die „erste und zweite Ebene” oder „zweite und dritte Ebene” angezeigt werden soll.

In Bootstrap 9 Web und Shop können Sie nun auch umfangreiche Farbeinstellungen für die Navigationsleiste vornehmen. In Version 8 konnten Sie lediglich zwischen der normalen Menü und der invertierten Variante wählen, in der aktuellen Version hingegen können Sie die Farben des Menüs selber bestimmen:

konfigurierbare Farben der Navigation

  • Hintergrundfarbe des Balkens
  • Hintergrundfarbe der zweiten Ebene (DropDown-Menü)
  • 1. Ebene des Menüs: Schriftfarbe, Schriftfarbe beim Darüberfahren und Hintergrundfarbe wenn aktiv
  • 2. und 3. Ebene des Menüs: Schriftfarbe, Schriftfarbe beim Darüberfahren, Hintergrundfarbe beim Darüberfahren
  • Anzahl der Spalten im Footer (von 1 bis 12)
  • Anzeige eines Menüs auch im Footer: bei „Ja” wird der HTML-Fußzeilentext und die Unterseiten der Startseite (Commonpages) links ausgerichtet, bei „Nein” werden die Infoseiten rechts ausgerichtet und in einer Zeile mit dem HTML-Fußzeilentext dargestellt
  • Menü in der linken oder rechten Sidebar
  • Menü fixieren
  • Menü beim Darüberfahren öffnen
  • Menüfarbe durch Palette und LESS berechnen
  • Schriftgröße der ersten und auch zweiten Ebene
  • Schriftart wie Überschriften (Google Fonts: https://www.google.com/fonts )
  • PNG-Icon für den Home-Bereich
  • Farbe der Shoplinks beim Darüberfahren und im normalen Zustand (da nicht bei jeder Variante die Farbe bei dem normalen und invertierten Menü angegeben werden kann, können Sie selbst die passende Farbe bestimmen)

Konfiguration der Schriften

  • Google Webfonts für Überschriften und/oder dem Inhaltsbereich (Wählen Sie zwischen mehr als 700 Schriftarten. Suchen Sie sich einfach auf www.google.com/fonts eine Schriftart aus und kopieren den Namen, fügen Sie den Namen der Schriftart in die Eigenschaft ein und das Design kümmert sich um den Rest)
  • Schriftgröße der Inhaltsbereiches
  • Schriftgröße der H1-Überschriften
  • Schriftgröße der H2-Überschriften
  • Schriftgröße der H3-Überschriften

benutzerabhängiger Absatz („light”-Version)

benutzerabhängige Absätze in web to date 8.0
Klicken Sie auf das Bild um es zu vergrößern.

Diese Eigenschaft eröffnet Ihnen die Möglichkeit Absätze erst für angemeldete Benutzer sichtbar zu machen. Da Sie auch Absätze für Gäste anlegen können, kann ein Besucher Ihrer Website zu einer Registrierung aufgefordert werden, damit weiterer Inhalt angezeigt wird.

Die Standardeinstellung ist hier natürlich „den Absatz immer anzeigen“. Weitere Einstellungsmöglichkeiten sind „nur für Besucher“ und „nur für Registrierte“. Ein deutlich erweiterte Variante mit mehr Optionen finden Sie hier .

Sie haben die Wahl zwischen 16 Varianten und Farbpaletten, natürlich enthält das Design auch eine benutzerdefinierte Variante und Farbpalette. Die BS3-Templates verwenden die Vorlagen von Bootswatch , beachten Sie dabei bitte dass Sie bei jeder Variante zusätzlich das Menü invertieren können.

Die Demo nutzt übrigens die Designvariante „Flatly“.

Die auf Basis des Flexsliders für web- und shop to date 8 angepasste Slideshow bietet eine Fülle an Optionen . Pro Seite kann zwischen den folgenden Optionen gewählt werden.

Eyecatcher-Optionen

Eigenschafts-Dialog für die verschiedenen Eyecatcher
  • kein Logo anzeigen: die H1-Überschrift befindet sich im Kopfbereich, welcher durch ein wiederholendes Hintergrundbild und einem farblichen Verlauf hervorgehoben wird
  • nur Logo anzeigen: bei dieser Auswahl kann für jede Hauptseite ein eigenes Bild ausgewählt werden
  • Google Map als Eyecatcher (ideal für Ihre Kontaktseite): dafür kann in den globalen, erweiterten Eigenschaften die Adresse, der Typ, die Höhe und der Zoomfaktor angegeben werden
  • Slideshow Einstellungen der Website & FTP-Eigenschaften verwenden: in den globalen, erweiterten Eigenschaften können bis zu 8 Bilder gewählt werden. Zusätzlich kann pro Bild die Verlinkung des Buttons und BB-Code angegeben werden
  • Haupseiten durchlaufen: hierbei werden alle sichtbaren Hauptseiten/Warengruppen durchsucht und sobald ein Bild auf der Seite ausgewählt wurde, wird dieses auf der Seite angezeigt (auch hier kann zusätzlich BB-Code/Text und eine Verlinkung angegeben werden)
  • Hauptseiteneigenschaften verwenden: diese Eigenschaft ähnelt sehr der Einstellung "Slideshow Einstellungen der Website & FTP-Eigenschaften verwenden", jedoch erfolgt die Einstellung auf der Hauptseite

Vergrößern oder verkleinern Sie einfach das Browserfenster. Abhängig von der Größe erscheinen dann verschiedene Absätze. Diese Einstellung können Sie neben den normalen Absätzen auch in den Absätzen der Kontextspalte verwenden.

Auf allen Ausgabegeräten

Quisque scelerisque turpis ac fermentum tempus. Phasellus malesuada vitae augue semper porttitor. Mauris mollis rhoncus porttitor. Praesent ullamcorper euismod egestas? Maecenas felis augue, aliquam ut gravida sit amet, blandit vitae nisl. Nullam accumsan molestie sapien a feugiat.

Auf Smartphones anzeigen

Quisque scelerisque turpis ac fermentum tempus. Phasellus malesuada vitae augue semper porttitor. Mauris mollis rhoncus porttitor. Praesent ullamcorper euismod egestas? Maecenas felis augue, aliquam ut gravida sit amet, blandit vitae nisl. Nullam accumsan molestie sapien a feugiat.

Auf Tablets anzeigen

Quisque scelerisque turpis ac fermentum tempus. Phasellus malesuada vitae augue semper porttitor. Mauris mollis rhoncus porttitor. Praesent ullamcorper euismod egestas? Maecenas felis augue, aliquam ut gravida sit amet, blandit vitae nisl. Nullam accumsan molestie sapien a feugiat.

Auf Desktops anzeigen

Quisque scelerisque turpis ac fermentum tempus. Phasellus malesuada vitae augue semper porttitor. Mauris mollis rhoncus porttitor. Praesent ullamcorper euismod egestas? Maecenas felis augue, aliquam ut gravida sit amet, blandit vitae nisl. Nullam accumsan molestie sapien a feugiat.

Auf Desktops größer als 1200px anzeigen

Quisque scelerisque turpis ac fermentum tempus. Phasellus malesuada vitae augue semper porttitor. Mauris mollis rhoncus porttitor. Praesent ullamcorper euismod egestas? Maecenas felis augue, aliquam ut gravida sit amet, blandit vitae nisl. Nullam accumsan molestie sapien a feugiat.