Showcase des responsiven Designs „Vertika”

Das neue, responsive Design „Vertika Shop oder Web 9” für Siquando Web- und Shop 9 ist durch das vertikale Menü besonders für Websites mit einer hohen Anzahl von Webseiten auf der ersten Ebene geeignet. Und selbst bei vielen Menüpunkten bleibt auch bei fixiertem linken Bereich die linke Kontextspalte unter der Navigation stets erreichbar.

Komfortfunktionen wie ein Hintergrundbild pro Seite, eine Lightbox, eine umfangreiche Slideshow, BB-Code und teilbare Aufmacher sind selbstverständlich bereits integriert.

Neben der benutzerdefinierten Palette und Farbvariante, in welcher Sie 6 Farben angeben können, stehen Ihnen 15 vorkonfigurierte Paletten und Farbvarianten zur Auswahl. Aber bitte denken Sie nicht gleich, dass Sie lediglich 6 Farben selbst wählen können! In den erweiterten Eigenschaften dieses responsiven Designs können 26 weitere Farben komfortabel ausgewählt werden. Das heißt Sie können insgesamt mehr als 30 Farben konfigurieren. Zusätzlich dazu kann für einige Bereiche eine Transparenz für die Hintergrundfarbe angeben werden.

Hier finden Sie eine Live-Demo einer benutzerdefinierten Variante.

Beachten Sie bitte die Lizenzbedingungen . Eine Webmasterlizenz für das Vertika Web Design finden Sie unter Vertika 9 Web Template für Webmaster , die Webmasterversion für Vertika Shop finden Sie hingegen unter Vertika 9 Shop Template für Webmaster .

Vertika 9 Web Template

Das neue, responsive Design „Vertika Web” ist durch das vertikale, auf Wunsch fixierte Menü besonders für Websites mit einer hohen Anzahl von Webseiten auf der ersten Ebene geeignet. Komfortfunktionen wie ein Hintergrundbild pro Seite, eine Lightbox, eine umfangreiche Slideshow, BB-Code und teilbare Aufmacher sind selbstverständlich bereits integriert. (K-022)
49,99 EUR (inkl. 19% USt. zzgl. Versand)

Vertika 9 Shop Template

Das Vertika Design für Siquando Shop 9 ist gegenüber der Web 9 Version auch im Benutzerbereich, im Bestellprozess und auf der Produktseite optimiert. Anstatt der Meldung „Der Artikel wurde in den Warenkorb gelegt.“ erscheint ein ausführlicheres Overlayfenster mit umfangreicheren Infos. Der Bestellprozess ist mit einem Fortschrittbalken ausgestattet, und vieles mehr ... (K-023)
69,99 EUR (inkl. 19% USt. zzgl. Versand)


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

In Version 9 haben die Macher von Siquando erstmalig responsive Plugins vorgestellt, und in der aktuellen Version 9 unseres Design können Sie diese natürlich nutzen. Aber nicht nur das, das Design lässt zu alle Absätze zu verwenden, egal ob responsiv oder nicht.

Die Bestellabwicklung und der Benutzerbereich des Vertika 9 Shop Designs bleibt nun annähernd unangastet gegenüber den responsiven Templates von Siquando, es wurden lediglich CSS-Anweisungen zur optischen Aufwertung und Kleinigkeiten wie der Fortschrittsbalken im Bestellprozess hinzugefügt. Auf das deutlich ausführlichere popUp Fenster, sobald ein Artikel in den Warenkorb gelegt wurde, verzichtet Vertika aber natürlich 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:

  • Cookie Warnseite
  • Aktualisierung der Font Awesome Icons auf v4.7
  • mehr Einstellungen für Unterseiten der Startseite: Anzeige innerhalb der linken Kontextspalte möglich, inkl. Einstellung der gewünschten Icons dieser Liste
  • Ausrichtung des Textes
  • Extra Abstand unten (erweiterte Absatzeigenschaft)
  • Absatzbilder mit einem Stil versehen: Sie können wählen zwischen Thumbnail, abgerundete Ecken, Bild kreisförmig darstellen oder „kein Stil anwenden“.
  • Vergrößerung des Warenkorb- und Benutzersymbols in der Kopfleiste
  • neue Farbeinstellungen für Buttons: Farbe der Primary-Buttons beim Darüberfahren und Schriftfarbe der Primary-Buttons
  • neue Farbeinstellung: Hintergrundfarbe Leuchtkasten
  • Vertika 9 Shop: 6 weitere Farbeinstellungen für Tabellen und Formulare im Benutzerbereich und Bestellprozess

die Features des Designs „Vertika” im Detail

  • responsive Slideshow, mit umfangreiche Einstellungsmöglichkeiten und Touchgesten auf Smartphones ( die Slideshow kann auch im Inhaltsbereich angelegt werden)
  • Hintergrundbild der kompletten Seite (plus wiederholendes PNG-Bild), zusätzlich kann pro Seite ein Hintergrundbild angegeben werden
  • Transparenzen: Transparenz des Kopfbalken Hintergrund, des Logo Hintergrund, des Menüs, Transparenz der linken Sidebar unter dem Menü, Transparenz des Footer-Menüs und des Fußbalkens
  • Kontextspalten-Konfiguration pro Hauptseite: beide Sidebars anzeigen oder abschalten, linke oder rechte Kontextspalte anzeigen
  • Smartphone-Einstellungen: Sie können verschiedene Bereiche auf Bildschirmen die schmaler sind als 768 Pixel ausblenden, dazu zählen der Logo-Bereich, der Slider, das Footermenü sowie die linke und rechte Kontextspalte
  • Google Webfont integriert (für Überschriften, dem Inhaltsbereich und „Schriftart im Menü wie in den Überschriften”)
  • Verwendung von Font-Awesome-Icons in Listen oder für Links
  • integrierte Lightbox mit zusätzlichen Funktionen wie eigenem Beschreibungstext
  • integrierter BB-Code: mit Funktionen wie Icons oder auch Zeilenumbrüchen, zum Beispiel im Aufmacherkurztext (hier finden Sie eine genaue Beschreibung)
  • Aufmacher auch in 4, 6, 8 oder sogar 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)
  • die Breite des Absatzbildes kann pro Absatz angegeben werden
  • verschiedene Boxtypen: farbig, grau, Linie links oder rechts oder als Zitat
  • Akkordion und Registerkarten im moderneren Look
  • 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.
  • Auswahl verschiedener Tabellenstile
  • Tooltip bei verlinkten Bildern (und Eingabe einer Beschreibung)
  • 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 580 verschiedene Symbole, mit einer Schrift

Für Listen und Downloads kann jedes Font Awesome 4 Icon verwendet werden. Beispielsweise wird links die FontAwesome Flage mit 4-facher Größe angezeigt. Das Vertika Template verwendet diese Icons bei verlinkten Bildern, Links, Downloads oder auch Aufzählungen. Die Shop (to Date) 8 Variante nutzt die Schrifticons zusätzlich für die verschiedensten Shopsymbole.


Menüeinstellungen

Neben dem vertikalem Menü über der linken Kontextspalte, das 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.

Bereich Design (Menü) in erweiterten Eigenschaften
  • Anzeige eines Menüs auch im Footer
  • Anzahl der Spalten im Footer (von 1 bis 12)
  • Groß- oder Kleinschreibung der Menüelemente: Kleinschreibung, Großbuchstaben, Wortanfang in Großbuchstaben oder ohne Formatierung
  • Menü fixieren
  • Menü invertieren (welche Farbe das invertierte Menü hat, sehen Sie in der Vorschau der Varianten)
  • Menüfarbe durch Palette und LESS berechnen
  • oberer und unteren Innenabstand (in Pixel) der Menüpunkte der ersten, sowie der zweiten Ebene
  • Schriftgröße der ersten und auch zweiten Ebene für das vertikale Menü und auch für das Footermenü
  • Schriftart wie Überschriften (Google Fonts: https://www.google.com/fonts )
  • Startseite im Menü anzeigen
  • Suchfeld aufhellen oder abdunkeln (bei hellen Kopfbalken war die Suche kaum sichtbar)
  • Position der Home-Unterseiten wie Impressum: im Kopfbalken, im Footer links, im Footer (Unterseiten und Copyright zentrieren), in linker Sidebar unter dem Menü (plus Icon und Überschrift für diese Variante) oder deaktivieren

Farbeinstellungen

Die wichtigsten 6 Farben können Sie wie gewohnt in den Einstellungen der Farbpalette vornehmen. Zu diesen 6 Farben zählen Hintergrundfarbe der Kopfzeile, des Menüs, des Inhaltsbereiches, des Footermenüs und der kompletten Seite. Zusätzlich kann dort die Schriftfarbe des Inhaltsbereiches geändert werden.

Viele weitere Farben können unter Website- und FTP-Eigenschaften Erweitert im Bereich „Design (Farben)” bestimmt werden, dazu zählen:

  • Design: Farbe der H1-, H2- und H3-Überschriften, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
  • Menü: Schriftfarbe des Hauptmenüs, Hintergrundfarbe des Untermenüs, Schriftfarbe des Untermenüs, Schriftfarbe des Untermenüs beim Darüberfahren
  • Logo: Hintergrundfarbe (oberhalb des Menüs)
  • Kopfbalken: Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren (zu den Links gehören auch die Icons)
  • Sidebar (unter Menü): Hintergrundfarbe, Farbe der Überschrift, Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
  • „Sie sind hier”-Navigation: Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren und Hintergrundfarbe
  • Kopfbalken: Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren und Hintergrundfarbe des „nach oben” Buttons
  • Textmarkierung: Schriftfarbe und Hintergrundfarbe
  • Buttons: Farbe der Primary-Buttons (z.B. „In den Warenkorb”) - diese Farbe gilt auch für die Paginations (den 1 - 2 -3 Links) sowie für den aktiven Bereich des Menüs in der Sidebar

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

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 .

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

Thomas K. schrieb am 09.01.2017 um 10:06

Vor wenigen Minuten wurde Version 1.1.2 im Downloadbereich zur Verfügung gestellt.
  • Änderungen für das KARO-Feedbackformular (Neue Eigenschaft: Captcha als Popover anzeigen, Konfig-Datei für das Feedbackformular für Siquando Web und Shop)
  • Fehlerbehebung: Fetter Schriftstil bei Google-Schriften in bestimmten Browsern
  • Fehlerbehebung: Fixiertes Menü überlagerte die Popup-Box
  • Fehlerbehebung: Delicious-Icons funktionierten nicht mehr korrekt
  • Shop: Login per Modal ist nun auch wieder per Kundennummer möglich

Thomas K. schrieb am 10.11.2016 um 09:30

Endlich geschafft. Vertika v1.1 für Siquando Web und Shop 9.

Thomas K. schrieb am 13.07.2016 um 10:19

Das Template hat ein kleines Update erfahren, so dass im Downloadbereich nun Version 1.0.3 heruntergeladen werden kann. Was wurde geändert?
  • neue, erweiterte Eigenschaft: Suchfeld im Kopfbalken aufhellen oder abdunkeln (bei hellen Kopfbalken war die Suche kaum sichtbar)
  • neue, erweiterte Eigenschaft: Position der Home-Unterseiten (mögliche Optionen sind „im Kopfbalken links“, „im Footer links“ und „im Footer (Unterseiten und Copyright zentrieren)“)
  • neue, erweiterte Eigenschaft: Google-Map Api-Key (wie ein Api-Schlüssel generiert wird habe ich unter „Google Maps Api Key erstellen“ beschrieben)
  • Datumsanzeige im deutschen Format
  • Aktualisierung des GMAP3 Plugin auf Version 6.1.0
  • der Google Maps Typ war auskommentiert, so dass bei die Änderung des Typs in der erweiterten Eigenschaft keinen Einfluß hatte
  • Siquando Shop 8: das Warenkorb-PopUp zeigt nun auch Produkte auf dem Merkzettel an
  • Siquando Shop 8: SSL-Abfrage für den Aufruf des Warenkrob-PopUps hinzugefügt
  • Siquando Shop 8: Fehler auf der Produktseite bei Variantenauswahl in Verbindung mit verschiedenen Verfügbarkeiten behoben

Thomas K. schrieb am 18.01.2016 um 13:32

Ab heute ist im Downloadbereich für dieses Design Version 1.0.2 verfügbar. Die folgenden Änderungen sind enthalten:
  • Anpassung auf Siquando Shop 8.0 Build 2719 (bei älteren Versionen von Siquando Shop 8 können daher Fehlermeldungen aufgrund von fehlenden Dateien erscheinen)
  • Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren und Hintergrundfarbe der Sie sind hier - Navigation (wird die Farbe #123456 verwendet wird der Standardwert der gewählten Variante verwendet)
  • Fixierung der Navigation erfolgt nun bereits ab 768px Fensterbreite
  • Slideshow-Text wurde (in Version 1.0.1) nicht innerhalb des Sliders dargestellt
  • Preisinfotext in allen Aufmachern