Skew Pro v2 Design

„Skew Pro v2” - das schräge Design für Pro Web 2

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

Skew Pro ist nun auch für Siquando Pro Web 2 erhältlich. 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. Neu in Version 2 sind die OnePage-Navigation und Panorama Absätze, die sich über die komplette Breite des Browserfensters erstrecken. Gegenüber anderen Standardlayouts von Siquando werden ein Großteil der Einstellungen 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 proskew.siquando-designs.de verfügbar.

Beachten Sie bitte die Lizenzbedingungen . Eine „Skew Pro v2“ - Webmasterlizenz inklusive Design können Sie auf Skew Pro v2 Design für Webmaster erwerben.

Produkt-ID: K-028

sofort verfügbar nach Zahlungseingang

59,99 EUR

inkl. 19% USt. zzgl. Versand
St


volle Kontrolle mit fast 50 Farbeinstellungen

jetzt NEU mit OnePage - Navigation

In Siquando Pro Web 2 können Sie nun in den „Allgemein“ - Eigenschaften eines Absatzes diesen als Direkt-Navigationspunkt markieren und zusätzlich einen Text für die Verlinkung angeben. Skew Pro v2 unterstützt diese Funktion und stellt Ihnen dafür zusätzlich Optionen bereit.

  • 4 Farbeinstellungen: Hintergrundfarbe des OnePage-Menüs, Schriftfarbe der Links, Schriftfarbe der Links beim Darüberfahren und Hintergrundfarbe des OnePage-Menü-Elementes beim Darüberfahren
  • Text zum Öffnen des OnePage-Menüs (der auf kleinen Geräten sichtbar wird)
  • Verlinkungstext für „nach Oben“ im OnePage-Menü (geben Sie hier einen Text an wird automatisch ein Link zum Anfang der Seite an ersten Stelle gesetzt)
  • Dauer der OnePage-Scrollanimation in Millisekunden
  • OnePage-Menü aktivieren

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

  • 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]

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)

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)

Farben für die Direkt-Navigation (OnePager)

  • Hintergrundfarbe des OnePage-Menüs
  • Schriftfarbe der Links
  • Hintergrundfarbe des OnePage-Menü-Elementes beim Darüberfahren
  • Schriftfarbe der Links beim Darüberfahren

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

Skew Pro v2 Einstellungsdialog (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)
  • 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ü

Skew Pro v2 Einstellungsdialog (Menü Optionen)
  • „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

Neue Einstellungen für die OnePage - Navigation

  • OnePage-Menü aktivieren
  • Text zum Öffnen des OnePage-Menüs
  • Verlinkungstext für „nach Oben“ im OnePage-Menü
  • Dauer der OnePage-Scrollanimation in Millisekunden

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

Stefan Bell schrieb am 09.12.2017 um 16:37  | Website

Hallo,
bin noch dabei, mich in Pro Web 2 einzuarbeiten. Ziemlich schnell stieß ich auf das Skew-Pro-Design - und habe sofort zugeschlagen: Genau das, was ich gesucht habe. - Toll!

Allerdings kämpfe ich noch mit einigen (Anfänger-)Problemen. Eines davon betrifft die Farbgebung: Gibt es die Möglichkeit, die Hintergrundfarbe eines Bereichs (teilweise) transparent zu gestalten?

Danke und Grüße
Stefan
Hallo Stefan,
es freut mich, dass Ihnen das Layout gefällt.
Die Hintergrundfarben verschiedener Bereiche können nicht transparent oder teil-transparent gestaltelt werden. (Zumindestens nicht ohne weitere Anpassungen am Layout.)

Thomas K. schrieb am 01.11.2017 um 08:57

Vor wenigen Minuten haben wir Version 2.0.2 im Downloadbereich bereitgestellt.
  • Anpassung auf Siquando Pro Web 2 - Version 2.0.0.1020
  • die Konstante für Mobile Devices wurde auf 768 gesenkt
  • beim Scrollen per OnePage-Element auf den entsprechenden Bereich wird nun der Abstand der One-Page-Navigation mitberechnet (damit auch die Überschrift sichtbar bleibt)
  • Abstand links und rechts Beschriftungen innerhalb von Marginalspalten auf kleinen Geräten hinzugefügt
  • Verlinkung eines Galeriebildes optimiert
  • Optimierung der Sichtbarkeitseinstellung von Absätzen

Thomas K. schrieb am 02.06.2017 um 06:57

Ab heute ist im Downloadbereich des Kundenkontos Version 2.0.1 des Pro-Designs als Download mit den nachstehenden Änderungen hinterlegt.
  • fehlende Farboption „Menü (Sidebar): Schriftfarbe der Links“ erneut hinzugefügt
  • Umbenennung der Optionen IDs von „Menü unterhalb des Eyecatchers anzeigen“ und „Menü mit Schatteneffekt“ um Inkompatibilitäten zu anderen Designs und Vorversionen zu vermeiden
  • Google Schriftart für Überschriften hat nun auch Auswirkung auf die Überschrift H5 und H6
  • Bildbeschriftungen von Bildabsätzen erhalten nun auf mobilen Geräten etwas Abstand nach links und rechts
  • runde Ecken bei Formularfelder werden aus den Schrifteinstellungen übernommen
  • Verbesserung der Panorama-Ansicht bei Registerkarten (und Akkordeon-Überschriften)
  • JS-Fehler bei aktivierter, aber leerer OnePager-Navigation behoben
  • Brotkrumennavigation wird bei gleichbreiten Absatzbereiche über den Bereichen Links, Inhalt und Rechts positioniert

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