Bootstrap 10 Design für SIQUANDO Web & Shop 10

Bootstrap Design für Siquando Web- und Shop 10

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 10 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 10 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 10 Designs (Variante Flat).

Bootstrap 10 Web 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 10 Shop Template

Gegenüber des Bootstrap-Designs für Web 10 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 10

In Siquando Web und Shop 10 wird nun der responsive Weg mit neuen Plugins konsequent fortgeführt und unser Bootstrap Design profitiert davon. Das Design in Version 10 ist mit allen neuen Plugins kompatibel, auch Panorama Plugins werden angezeigt, allerdings werden diese nicht verbreitert.

Um Ladezeiten so kurz wie möglich zu halten, haben wir in den bisherigen Versionen stets versucht Ressourcen per CDN's (Content Delivery Networks) zu laden, in der aktuellen Version 10 haben Sie nun die Wahl. Somit sind Sie zum 25. Mai und des Inkrafttreten der neuen Datenschutz-Grundverordnung (EU-DSGVO) auf der sichereren Seite.

Zusätzlich dazu haben wir dem Template weitere Neuerungen spendiert:

  • CDN's (wenn möglich) verwenden
  • Cookie Warnseite Position
  • Skalierung durch Benutzer zulassen
  • Downloadschutz für Bilder
  • Zeichencodierung
  • Hintergrundfarbe der Box Color (farbige Box)
  • neue Farbeinstellung: Cookie-Warner & Warenkorb-Info: Hintergrundfarbe
  • neue Farbeinstellung: Cookie-Warner & Warenkorb-Info: Schriftfarbe

komplett, überarbeitete Tabellen

Der Tabellenabsatz wurde in Version 10 des Design komplett überarbeitet und der unnötige Bootstrap-Ballast entfernt. Neben den bereits bekannten Farbeinstellungen wie bespielsweise für den Tabellenkopf - oder der Hintergrundfarbe, sind nun pro Tabelle diese erweiteren Einstellungen möglich:

  • Verhalten auf kleinen Bildschirmen: Scrollbarer Ausschnitt | Spalten in Zeilen reorganisieren
  • Grafiken: Bilder, füllen Zellen aus | Symbole, werden nicht vergrößert
  • Tabellenrahmen: Tabellenrahmen darstellen | nur horizontaler Rahmen | keinen Rahmen darstellen
  • Innenabstand in den Zellen: 10px (Standard), 5px oder 2px
  • Tabellenhintergrund: Standardhintergrund | wechselnder Hintergrund | transparenter Hintergrund
  • Tabelle mit runden Ecken
  • Tabelle mit Hovereffekten

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)
  • Cookie-Warnhinweis
  • 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
  • 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
  • Absatzbild-Stil: Sie können wählen zwischen Thumbnail, abgerundete Ecken, Bild kreisförmig darstellen oder „kein Stil anwenden“.
  • 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 Variante nutzt die Schrifticons zu dem auch im Shop-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.

Auf Smartphones verstecken

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 verstecken

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 verstecken

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 verstecken

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.

KARO Webdesign & Entwicklung (siquando-designs.de) verwendet Cookies, um die Dienste ständig zu verbessern und bestimmte Features zu ermöglichen. Indem Sie hier fortfahren, stimmen Sie dieser Verwendung zu. Mehr erfahren