PAN für Siquando Web & Shop 11
Das neueste, responsive Template "PAN" für Siquando Shop- und Web 11 von KARO besticht durch das Mega-Menü, auf Wunsch mit Bild, einer One Pager Navigation und bildschirmfüllenden Hintergrundbildern. Wenn genügend Raum zur Verfügung steht, kann die linke und/oder rechte Kontextspalte fixiert werden. Pro Seite können Sie datenschutzfreundliche Social-Media-Buttons (c't Shariff) unter dem Inhalt anzeigen lassen.
Bekannte Features von "KARO" wie ein Hintergrundbild pro Seite, die Lightbox, Google Fonts, 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. Zu diesen Paletten gesellen sich dann weitere 25 Farben für die verschiedenen Boxen, der Social- Und Infoleiste, den Überschriften und weiteren Bereichen. Zusätzlich dazu sind 14 Farbeinstellungen für das Mega- und OnePager-Menü reserviert.
Hier finden Sie eine Live-Demo einer benutzerdefinierten Variante.
Beachten Sie bitte die Lizenzbedingungen. Eine Webmasterlizenz für das PAN Web und/oder Shop 11 Design finden in der Versionsauswahl.
PAN 11 Shop Template
| Artikelnummer: | K-063 |
„PAN“ für Siquando Shop 11 mit Mega-Menü, auf Wunsch mit Bild, einer One Pager Navigation und bildschirmfüllenden Hintergrundbilder ist ideal für Webshops. Ist der Warenkorb mit mindestens einem Artikel gefüllt wird neben dem Symbol im Menü eine Warenkorb-Box angezeigt. Fixieren Sie dazu die Sidebar hat Ihr Besucher den perfekten Überblick über die Artikel im Warenkorb.
Änderungen in Version 11 von PAN
Anpassungen für das neue Cookie-Kontrollzentrum
neue Absatzeigenschaft „Absatz-Render-Modus“: unabhängig vom Absatztyp (egal ob normaler Absatz oder XL) können Sie zwischen den verschiedenen Darstellungen immer normale Seitenbreite, Standardeinstellung, volle Breite auf mobilen Geräten und immer volle Breite wählen
neue, globale Eigenschaften in PAN 10
Darstellungsstil der Schaltflächen (Buttons): zu den Auswahlmöglichkeiten zählen (Standard), Scharf, Outline, Verlauf, Rund, Button und Runder Button
CDN's (wenn möglich) verwenden
Downloadschutz für Bilder
Cookie Warnseite Position
Kontextspalten-Sichtbarkeit bei mobiler Ansicht
Skalierung durch Benutzer zulassen
Zeichencodierung
geteilte Aufmacher im Card-Design darstellen
Radius der abgerundeten Ecken bei geteilten Aufmachern
Weiterleitung nach Direkt-Anmeldung
neue Farbeinstellung: Schriftfarbe in Kästen
neue Farbeinstellung: Registerkarten: Hintergrundfarbe
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 „PAN” 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
Positionseinstellungen
die Breite des Absatzbildes kann pro Absatz angegeben werden
Absatzbildstile: Thumbnail, abgerundete Ecken, Bild kreisförmig darstellen oder keinen Stil anwenden
Kontextspalten-Konfiguration pro Hauptseite: beide Sidebars anzeigen oder abschalten, linke oder rechte Kontextspalte anzeigen
Google Webfont integriert (für Überschriften, dem Inhaltsbereich und "Schriftart im Menü wie in den Überschriften )
Verwendung von Font-Awesome-Icons in Listen, Links oder per BBCode
verschiedene Boxtypen: Linie links oder rechts oder als Zitat, sowie farbige, helle oder dunkle Box (die Farben sind konfigurierbar)
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
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
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)
Akkordion und Registerkarten im neuen Look
verlinkbare Registerkarten bzw. Tabs
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
allgemeine Website-Eigenschaften
Animationsstil der Absatzbereiche: Absatzbereiche können Sie per animate.css animieren. Unter daneden.github.io/animate.css/ können Sie die verschiedenen Animationsstile testen
Fixierung der Kontextspalte: wählen Sie ob die linke und/oder die rechte Kontextspalte fixiert werden soll
bildschirmfüllendes oder wiederholendes Hintergrundbild: das bildschirmfüllende Hintergrundbild ist immer fixiert, beim wiederholendem Bild hingegen können Sie den fixierten Hintergrund auf Wunsch aktivieren
Position der Infoseiten: in der Kopfzeile oder im Footerbereich
Position der Kopfzeile: über dem Menü oder über dem Footer
Position der Social-Icons: in der Kopfzeile oder Icons nicht anzeigen
Position des Suchfeldes: in der horizontalen Navigation, in Kopfzeile als Icon, in der linken Sidebar oder in der rechten Sidebar
Ausrichtung des Textes
Registerkarten zentrieren
Seitenhöhe mindestens 100% der Fensterhöhe
Bilder in Tabellen skalieren
Cookie Warnhinweis
HTML-Fußzeilentext (plus Ausrichtung der Fußzeile)
"nach oben" Icon anzeigen
Sie sind hier-Navigation
Suchbegriffe vorschlagen
Touch-Icon (der Dateiname sollte "apple-touch-icon-144-precomposed.png" lauten)
Zurück Schaltfläche am Ende des Inhaltsbereiches anzeigen
Überschriften verlinken
LESS-Version: wählen Sie auf welcher Weise die CSS-Datei (style.css) ersstellt werden soll
[fa=flag fa-5x pull-left][/fa]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 Siquando Shop Variante des Designs nutzt die Schrifticons zusätzlich für die verschiedensten Shopsymbolen, bspw. während des Bestellprozesses.
Menüeinstellungen
Neben dem Mega-Menü unter der Socialicons- und Infoleiste, 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.
Menü (oder OnePager) an oberer Kante fixieren
Schriftgrößen 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)
Footer: Anzeige des Menüs aktivieren
Footer: Anzahl der Spalten (von 1 bis 12)
PNG-Bild als Icon und Verlinkung für die Startseite
Mega-Menü-Dropdown Spalter
Menü mit einem Schatten versehen
zusätzliches Menü in linker oder rechten Sidebar
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, die Hintergrundfarbe der kompletten Seite, sowie die Schriftfarbe des Inhaltsbereiches.
Viele weitere Farben können unter Website- und FTP-Eigenschaften [fa=long-arrow-right][/fa] Erweitert im Bereich "Design (Farben) bestimmt werden, dazu zählen:
Allgemeine Farben: Farbe der H1-, H2- und H3-Überschriften, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
Seiten- und Social-Icons Leiste: Farbe der Schrift, Linkfarbe und Linkfrabe beim Darüberfahren
Boxen: Hintergrundfarben der hellen, farbigen und dunklen Box
"Sie sind hier -Navigation (Brotkrumennavigation): Hintergrundfarbe und Schriftfarbe (inkl. Links)
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
Kästen und Tabellen: alternative Hintergrundfarbe in Tabellen, Hintergrundfarbe des Tabellenkopfes, Hintergrundfarbe von Kästen und Tabellen, Rahmenfarbe von Kästen und Tabellen, Rahmenfarbe von fehlerhaften Kästen, Schriftfarbe des Tabellenkopfes
Eingabe- und Auswahlfelder (Shopbereiche): Hintergrundfarbe, Rahmenfarbe und Schriftfarbe
1. Ebene des Menüs: Hintergrund beim Darüberfahren, Schriftfarbe und Schriftfarbe beim Darüberfahren
2. Menüebene: Schriftfarbe, Schriftfarbe beim Darüberfahren und Schriftfarbe des aktives Elementes, sowie Hintergrundfarbe und Hintergrundfarbe beim Darüberfahren
Konfiguration der Schriften
Google Fonts für Überschriften und/oder dem Inhaltsbereich: wählen Sie zwischen mehr als 800 Schriftarten. Suchen Sie sich einfach auf fonts.google.com 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
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.
