Skew - Pro Web Layout

Layout „Skew - das Schräge” für Siquando Pro Web

Layout „Skew - das Schräge” für Siquando Pro Web (Präsentationsbild)

Das „schräge“ Skew ist das neueste Layout von KARO und das erste Design mit einer neuen Art Einstellungen vorzunehmen, auch für einzelne Seiten. Abgeschrägte Kanten, Shariff (Social-Media-Buttons rechtssicher einbinden), Fortschrittsbalken beim Laden der Seite oder Google Karten als Eyecatcher sind längst nicht alle Highlights. Gegenüber anderen Standardlayouts von Siquando werden ein Großteil der Einstellungen nun in der Voransicht innerhalb eines Dialogfensters (Bootstrap Modal) vorgenommen. So sind nun neben Farb – und Checkboxeinstellungen, auch Auswahl-, Text- und Zeiteinstellungen möglich, und das sogar für einzelne Seiten.

Das Layout eignet sich auf Grund der vielfältigen Menü-Einstellungen besonders für große Webseiten, aber auch für kleine Webpräsenzen ist es sehr gut geeignet.

Eine Demo die auf der Standard-Variante basiert ist auf skew.siquando-desigs.de verfügbar.

Beachten Sie bitte die Lizenzbedingungen . Eine „Skew” - Pro Webmasterlizenz inklusive Layout können Sie auf Skew - Pro Web Layout für Webmaster erwerben.

Produkt-ID: K-018

sofort verfügbar nach Zahlungseingang

59,99 EUR

inkl. 19% USt. zzgl. Versand
St



volle Kontrolle mit fast 50 Farbeinstellungen


Mega-Menü - das durchdachte Menü für große Sites

Das Megamenü, was natürlich auch deaktiviert werden kann, zeigt die 2.Ebene abhängig von Ihrem Inhalt an.
Dabei gelten die folgenden Regeln (der Mega-Menü-Schalter ist in diesem Beispiel „6”):

  • Bis zu einer Anzahl von 12 Menüpunkten wird das Dropdownmenü wie gewohnt dargestellt.
  • Zwischen 12 und 18 Elementen wird das Menü in 2 Spalten geteilt und wenn ein Ordnerbild definiert wurde wird dieses neben den Spalten angezeigt.
  • Ab 18 Elementen werden die Menüpunkte auf 3 Spalten verteilt, in der vierten Spalte wird wieder das Ordnerbild der obersten Ordner angezeigt
  • Bei mindestens 24 Elementen wird überprüft ob ein Ordnerbild angegeben wurde, wenn nicht wird das Megamenü in 4 Spalten geteilt

Zusätzlich können nun sämtliche Farbeinstellungen für das Menü, insgesamt 10, über die Einstellungsregisterkarte „Farben“ vorgenommen werden. Weitere 2 Farbeinstellungen sind für das zuschaltbare Menü im Absatzbereich Links oder Rechts vorhanden. Dieses zweite Menü können Sie pro Seite hinzuschalten und dabei wählen, ob es in der linken oder rechten Sidebar angezeigt werden soll.

Optionen direkt in der Voransicht

Website-Optionen die im kompletten Layout „Skew” gelten

„Skew” ist das erste Layout für Siquando Pro Web mit einem komplett neu entwickeltem Dialogfenster. Somit werden die Einstellungen in KARO Layouts einfacher als je zuvor. Sie können nun mit wenigen Klicks das Einholen der Zustimmung für Cookies (Screenshot ) konfigurieren, oder auch Social-Media-Buttons rechtssicher (Screenshot ) einbinden. Dank Dropdown - Optionen können Sie das Layout noch genauer steuern, und das nicht nur für die komplette Website

Erstmalig sind nun auch Optionen pro Seite möglich. Beispielsweise können Sie eine „Google Maps Adresse” pro Seite angeben, so dass dann der Eyecatcher zu einer Google Karte wird. Zusätzlich können Sie ein zweites Menü im Absatzbereich „Links” oder „Rechts” aktivieren. Dort findet Ihr Besucher immer die Ordner des zur Zeit geöffneten Ordners (Beipiel Ebene 1 / Ebene 2 ).

allgemeine Optionen

  • Breite der Absatzbereiche in Pixel
  • Seitenverhältnis der Bereiche Links - Inhalt – Rechts (Verhältnis von 2 zu 8 zu 2 (oder 2 zu 10) / Verhältnis von 3 zu 6 zu 3 (oder 3 zu 9) / Links, Inhalt und Rechts mit gleicher Breite)
  • Position der Infoseiten- und Social-Icons Zeile (Infoseiten- und Social-Icons Zeile nicht anzeigen / Leiste über dem Menü anzeigen / Über dem Copyright und unter dem Bereich „Unten“)
  • Mega-Menü-Dropdown-Spalter
  • Ladefortschrittsbalken für die Seite
  • Absätze beim Hineinscrollen animieren
  • Google Schriftart (gesamte Website / Überschriften / Menü)
  • CSS-Klasse für „Weiterlesen“-Link
  • Cookie Consent 3 Einstellungen ( Cookie-Zustimmmung ) ab v1.1.0 mit Farbeinstellungen
  • Shariff: Social-Media-Buttons rechtssicher einbinden
  • Icons Einstellungen (in der „Infoseiten- und Social-Icons Zeile“)
  • Animationsart des Sliders (fade / slide / page / zoom)
  • Höhe der Schrägen

Textoptionen für die komplette Website

  • Copyright
  • Infoseiten: Trennzeichen
  • Brotkrumen Trennzeichen
  • zusätzlicher Text (auch HTML) hinter den Icons

Website - „Zeiteinstellungen”

  • Slideshow [Sekunden]
  • Parallax (Oben & Unten)
  • „nach Oben” Scroller [Millisekunden]
  • Lazyload [Millisekunden]

Farben für das Menü

  • Hintergrundfarbe der Menüleiste
  • Schriftfarbe der ersten Ebene
  • Schriftfarbe der ersten Ebene beim Darüberfahren
  • Hintergrundfarbe der einzelnen Menüpunkte beim Darüberfahren in erster Ebene
  • Hintergrundfarbe des DropDown-Menüs
  • Schriftfarbe im DropDown-Menü
  • Schriftfarbe beim aktiven Menüpunkt im DropDown-Menü
  • Schriftfarbe beim Darüberfahren im DropDown-Menü
  • Hintergrundfarbe der einzelnen Menüpunkte beim Darüberfahren im DropDown-Menü
  • Farbe der Abgrenzungslinien im DropDown-Menü (123456 deaktiviert die Linien)

für die Absatzbereiche „Oben” und „Unten” jeweils

  • Hintergrundfarbe
  • Schriftfarbe (bei 123456 wird vom Inhaltsbereich geerbt)
  • Schriftfarbe der Überschrift (bei 123456 wird vom Inhaltsbereich geerbt)
  • Schriftfarbe der Links (bei 123456 wird vom Inhaltsbereich geerbt)
  • Schriftfarbe der Links beim „Hovern” (bei 123456 wird vom Standard geerbt)

Infoseiten- und Social-Icons Zeile

  • Hintergrundfarbe des Kopfbereiches
  • Schriftfarbe
  • Schriftfarbe der Links
  • Schriftfarbe der Links beim Darüberfahren
  • Infoseiten- und Social-Icons Zeile
  • Hintergrundfarbe des Hauptbereiches

Sidebar Menü

  • Farbe der Links
  • Farbe der Links beim Darüberfahren (und aktiver Zustand)

Farben der Slideshowelemente (Ordnergalerie)

  • Farbe der Schrift
  • Farbe der Links
  • Farbe der Kontrollelemente

Copyright

  • Hintergrundfarbe des Copyrights (123456 deaktiviert und Farbe wird 5% dunkler als „Unten” generiert)
  • Schriftfarbe (Farbe 123456 deaktiviert und nutzt Farbe von „Unten”)
  • Schriftfarbe der Links (Farbe 123456 deaktiviert und nutzt Farbe von „Unten”)
  • Schriftfarbe der Links beim Darüberfahren (Farbe 123456 deaktiviert)

Brotkrumen Navigation

  • Hintergrundfarbe (Farbe 123456 deaktiviert die Einstellung)
  • Farbe der Schrift (wie „Sie sind hier:”) und der Trennungszeichen
  • Farbe der Links (Farbwert 123456 deaktiviert die Einstellung)
  • Farbe der Links beim Darüberfahren (Farbe 123456 deaktiviert)

Buttons

  • Schriftfarbe des Buttons mit der Klasse „btn-primary“ (Farbe 123456 deaktiviert)
  • Hintergrundfarbe des Buttons mit der Klasse „btn-primary“ (Farbe 123456 deaktiviert)
  • Schriftfarbe des Buttons mit der Klasse „btn-primary“ beim Darüberfahren
  • Hintergrundfarbe des Buttons mit der Klasse „btn-primary“ beim Darüberfahren

weitere Farbeinstellungen

  • Hintergrundfarbe des Hauptbereiches
  • Farbe des Fortschrittes beim Laden der Seite
  • Akkordeon: Farbe der Links
  • Akkordeon: Farbe der Links beim Darüberfahren
  • Textmarkierung: Farbe der Schrift
  • Textmarkierung: Hintergrundfarbe des Markierungsbereiches

Optionen im „Bearbeiten” - Modus

Neben den neuen Optionen über das Dialogfenster, gibt es natürlich auch einige Einstellungen die über das bekannte Layoutoptionen - Fenster getätigt werden. Neben den weiter unten aufgezählten Optionen können Sie die folgenden Bildeinstellungen vornehmen: Eyecatcher (inkl. Titel und Verknüpfung), Logo für das Menü bzw. über dem Menü (inkl. Titel und Verknüpfung), Videologo (inkl. Titel und Verknüpfung), sowie Bilder für die Parallaxeffekte der Absatzbereiche „Oben” und „Unten”.

allgemeine Optionen

  • Absatzbereich „Oben” oberhalb des Sliders (Galerie) oder Eyecatchers
  • Absatzbereich „Links” nach rechts neben dem Inhalt verschieben
  • Absatzbereiche Oben, Mitte (Links, Inhalt und Rechts) und Unten mit Schrägen versehen
  • Absatzbereiche „Oben” oder/und „Unten” mit particles.js animieren (Schnee u.v.m.)
  • Social-Icons in der „Infozeile“ anzeigen
  • Shariff Social-Media-Buttons anzeigen
  • „nach Oben”-Scroller anzeigen
  • Bilder mit Lazy Load (jQuery Variante) später laden
  • Browser-Zooming aktivieren
  • verlinkte Bilder beim Darüberfahren leicht heranzoomen
  • Video stummschalten
  • Video automatisch starten
  • Debugging-Informationen ausgeben

Einstellungen für das Menü

  • „Sie sind hier“-Navigation darstellen
  • Suchfeld darstellen
  • Startseite in Navigation aufnehmen
  • Megamenü-Stil aktivieren
  • Menü beim Darüberfahren öffnen
  • Menü zentrieren (das Logo wird oberhalb des Menüs ebenfalls zentriert)
  • Menü auf der rechten Seite beginnen
  • für den Inhalt des Menüs die komplette Breite nutzen
  • Menü fixieren
  • Menü unterhalb des Eyecatchers anzeigen
  • Menü mit Schatteneffekt
  • Off-Canvas-Menü auf kleinen Bildschirmen aktivieren

Slideshow - Einstellungen

  • Slider (und Eyecatcher) mit 100% Breite darstellen
  • Wenn im Ordner keine Galerie definiert wurde, übergeordneten Ordner, dann Eyecatcher verwenden
  • Slider (und Eyecatcher) beim Erreichen der oberen Browserkante fixieren
  • die untere Kante des Sliders (und Eyecatcher generell) abschrägen
  • Links-Rechts Navigation anzeigen
  • „Scrollen Sie nach unten“ anzeigen
  • Bullets anzeigen

Werden alle Absatztypen responsiv dargestellt?

Diese Frage kann ganz klar mit JEIN beantwortet werden. Leider können nicht alle Absatztypen in Ihrer Darstellungsbreite dynamisch der Browserbreite angepasst werden. Zu diesen Standard-Absatztypen gehören 3D Karussell, flexible Bildmatrix, Imagemap, Infobox und animierte Infobox. Das soll aber nicht heißen dass diese Absätze das Layout auf kleinen Bildschirmen zerstören, bei diesen Absätzen muss der Besucher lediglich horizontal scrollen. Das gesamte Layout bleibt also gut lesbar. Außerdem können Sie pro Absatz einstellen, ob dieser auf mobilen Geräten sichtbar sein soll.

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