Bootstrap 11 Design für SIQUANDO Web & Shop 11
Bootstrap Design für Siquando Web- und Shop 11
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 11 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 11 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 11 Shop Template
| Artikelnummer: | K-061 |
Gegenüber des Bootstrap-Designs für Web 11 ist die Shop-Version auch im Benutzerbereich und Bestellprozess optimiert. Neue Farbeinstellungen für den Shopbereich sind hinzugekommen und das Warenkorb-Overlayfenster wurde überarbeitet.
Neues in Version 11 des Bootstrap Designs
Anpassungen für das neue Cookie-Kontrollzentrum
interne Webfonts hinzugefügt: Open Sans, Alegreya Sans, Arimo, Calibri, Corbel, Fira Sans, Lato, Noto Sans, Noto Serif, PT Sans, Roboto, Roboto Condensed, Signika, Source Sans Pro, Titillium Web
Ä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 Slideshow, mit umfangreiche Einstellungsmöglichkeiten und Touchgesten auf Smartphones ( [icon=info][/icon] 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)
[fa=flag fa-5x pull-left][/fa]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)
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".
