Skew Pro Design Anleitung und Hilfe

Herzlichen Glückwunsch zur Installation des Pro Web 3 Designs "Skew Pro v3".

Über die Design-Auswahl stehen Ihnen für das Layout Skew jeweils 16 Varianten und Farbpaletten zur Verfügung, die eine schnelle Individualisierung per Mausklick ermöglichen.

Für eine tiefergehende Anpassung des Layouts stehen Ihnen neben dem Voransichtsdialogfenster die Optionen, die Register Farben, Bereiche, Eyecatcher, Logo und Parallax Oben sowie Unten zur Verfügung.

Es gibt verschiedene Möglichkeiten um zu dem "Layoutoptionen - Dialogfenster zu gelangen. Möglichkeit 1 ist auf den Menüpunkt Gestaltung und anschließend auf Design bearbeiten zu klicken. Die 2. Variante ist auf den kleinen Pfeil in der oberen Leiste, links neben "Neuer Ordner zu klicken, siehe hier. Die dritte und letzte Variante ist per Tastenkürzel das gleichzeitige Drücken von Umschalt+F12.

Unter Layoutoptionen finden Sie die Register Optionen, Slider, Menü, Farben, Bereiche, Eyecatcher, Logo, Videologo und Parallax Oben sowie Unten zur Verfügung.

• Absatzbereich "Oben oberhalb des Sliders (Galerie) oder Eyecatchers: Ist diese Option nicht aktiviert wird der Absatzbereich "Oben unter der Slideshow angezeigt, ist sie aktiviert erfolgt die Darstellung über der Slideshow oder dem Eyecatcher-Bild

• Absatzbereich "Links nach rechts neben dem Inhalt verschieben: die übliche Reihenfolge der Absatzbereich in der Mitte ist Links - Inhalt - Rechts. Aktivieren Sie diese Option, wenn die Reihenfolge stattdessen Inhalt - Links - Rechts sein soll

• Absatzbereiche Oben, Mitte (Links, Inhalt und Rechts) und Unten mit Schrägen versehen

• Absatzbereich "Oben mit Innenabstand nach oben (ohne Abstand werden Panorama-Absätze zum Eyecatcher)

• Absatzbereiche "Oben oder/und "Unten mit particles.js animieren (Schnee u.v.m.): ähnlich wie im Pro Web Bootstrap 3 Layout können Sie die Bereiche Oben und/oder Unten mit Partikeleffekten versehen, mehr dazu erfahren Sie unter web2date-designs.de/info-probs3/

• Social-Icons in der "Infozeile" anzeigen: hier können Sie die Social - Icons in der Kopfleiste (Infoleiste) komplett deaktivieren. Setzen Sie dafür kein Häkchen. Die Icons selber sind in dem "KARO" - Dialogfenster in der Voransicht genauer konfigurierbar.

• Shariff Social-Media-Buttons anzeigen: Sie können mit dieser Options die Shariff Social Media Buttons komplett deaktivieren. Möchten Sie die Icons nur auf bestimmten Seiten deaktivieren, aktivieren Sie diese Option und deaktvieren die Anzeige im "KARO" - Dialogfenster pro Seite

• "nach Oben -Scroller anzeigen

• Bilder mit Lazy Load (jQuery Variante) später laden

• Browser-Zooming aktivieren: Das Meta-Element "viewport erhält zusätzlich die Anweisung maximum-scale=1, user-scalable:no so dass der Besucher die Seite nicht mehr Zoomen kann.

• verlinkte Bilder beim Darüberfahren leicht heranzoomen

• CDN's (Content Delivery Networks) wenn möglich verwenden: aktivieren Sie diese Option werden einige Dateien von "Content Delivery Networks" geladen, was die Ladezeit beschleunigen kann. Extern geladen wird dann jQuery von https://ajax.googleapis.com/, Font Awesome von https://cdnjs.cloudflare.com/, Shariff von https://cdnjs.cloudflare.com/, Cookie Consent 3 von https://cdnjs.cloudflare.com/ und html5shiv, sowie respond.js von https://oss.maxcdn.com/

• Video stummschalten

• Video automatisch starten

• Debugging-Informationen ausgeben

• Slider (und Eyecatcher) mit 100% Breite darstellen: Wird diese Einstellung deaktiviert wird die Slideshow "nur mit der allgemeinen Containerbreite angezeigt. Diese Breite können Sie im "KARO" - Dialogfenster anpassen

• 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

• "Sie sind hier"-Navigation darstellen

• Suchfeld darstellen

• Startseite in Navigation aufnehmen: Ist ein Häkchen gesetzt wird die Startseite in der oberen Navigation dargestellt

• Megamenü-Stil aktivieren

• Menü beim Darüberfahren öffnen: In der Bootstrap-Navigationsleiste ist es üblich die tieferliegende Ebene erst mit einem Klick darauf zu öffnen. Dies verhindert dass die erste Ebene nicht ignoriert wird, denn die erste Ebene wird einmalig in der zweiten Hierarchie wiederholt. Dies erhöht im Übrigen auch die Navigierbarkeit auf Smartphones und/oder Tablets. Dennoch können Sie dieses Verhalten unterdrücken, wodurch die Navigationsleiste wie ein übliches Dropdown-Menü reagiert ohne den Fokus auf mobile Geräte zu verlieren.

• 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: Aktivieren Sie diese Option, wenn das Menü die komplette Breite des Browserfensters nutzen soll (Der Container des Menüs wird mit 100% Breite angezeigt.)

• Menü fixieren: Die Navigationsleiste ist bei Aktivierung immer sichtbar und wird beim Erreichen der oberen Browserkante fixiert

• Menü unterhalb des Eyecatchers anzeigen

• Menü mit Schatteneffekt

• Off-Canvas-Menü auf kleinen Bildschirmen aktivieren

Hinweis: Die Schriftgröße und Formatierung der Hauptebene des Menüs können Sie mit der Schrifteinstellung "H5" vornehmen. Die Farbe wird allerdings wie gewohnt aus dem Register "Farben" verwendet.

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

Einstellungen in der Voransicht über das „KARO“ - Dialogfenster

Einen Großteil der Einstellungen für die Website finden Sie im "KARO" - Dialogfenster. Um dort Einstellungen vorzunehmen wechseln Sie bitte in die Voransicht, falls Sie sich dort noch nicht befinden.

Dort sollten Sie nun an der unteren, linken Kante die Schaltfläche mit Zahnradsymbol finden. Klicken Sie bitte mit der linken Maustaste 1x darauf, damit sich das "KARO" - Dialogfenster öffnet.

Nachdem sich das "KARO" - Dialogfenster geöffnet hat können Sie Einstellungen vornehmen. Neben der Überschrift der Einstellung finden Sie meist zusätzlich einen Infoschaltfläche. Mit einem Mausklick darauf wird Ihnen die Option genauer beschrieben, in einigen Fällen ist dort auch der Standardwert zum Kopieren hinterlegt.

Unter Google Maps Api Key erstellen finden Sie des Weiteren weitere Hinweise zur Erstellung des Api Keys für die Google Karte als Eyecatcher.

Klicken Sie auf die Schaltfläche Auswählen, um das Logo über den Dialog "Bild auswählen zu definieren. Alternativ genügt ein Doppelklick auf den Vorschaubereich, um den Auswahldialog zu öffnen.
Wollen Sie das Logo in der integrierten Bildbearbeitung nachbearbeiten, drücken Sie die Schaltfläche Bearbeiten. Die anschließend angezeigte Bildbearbeitung stellt Ihnen vielfältige Anpassungsmöglichkeiten zur Verfügung.
Um das Logo aus der Vorschau und dem Design zu entfernen, drücken Sie die Schaltfläche Löschen (das rote X).
Im unteren Bereich des Registers stehen Ihnen folgende weitere Konfigurationsmöglichkeiten zur Verfügung:

• Titel: Definieren Sie in diesem Feld einen Titel für die Grafik.

• Verknüpfung: Wenn benötigt, legen Sie hier ein Linkziel fest, das automatisch angezeigt werden soll, wenn ein Besucher auf das Logo klickt. Standardmäßig ist keine Verknüpfung vorgegeben. Klicken Sie auf die Schaltfläche Verknüpfung auswählen rechts innerhalb des Eintragsfeldes. Im nun geöffneten Dialog Hyperlink können Sie die gewünschte Verknüpfung definieren. Das gewählte Linkziel wird anschließend im Eintragsfeld angezeigt. Um einen gewählten Link zu löschen, klicken Sie auf den Button Verknüpfung entfernen. Der Link wird ohne Sicherheitsabfrage gelöscht. Empfehlenswert ist auf die Startseite zu verlinken, dies ist zu üblich, weshalb die meisten Besucher auch erwarten mit einem Klick zurück zur Startseite geleitet zu werden.

Unter dem Register Eyecatcher können Sie dem Layout eine neue Eyecatcher-Grafik zuordnen.
Wählen Sie im oberen Bereich des Fensters die Grafik aus, die in den Eyecatcher integriert werden soll. Klicken Sie auf die Schaltfläche Auswählen, um das entsprechende Bild über den Dialog Bild auswählen zu definieren. Alternativ genügt ein Doppelklick auf den Vorschaubereich, um den Auswahldialog zu öffnen.
Drücken Sie die Schaltfläche Bearbeiten, um das Bild in der integrierten Bildbearbeitung zu bearbeiten.
Klicken Sie auf die Schaltfläche Löschen, um das Bild wieder aus der Vorschau zu entfernen. Das Bild wird ohne Sicherheitsabfrage entfernt und durch die Anzeige (Kein Bild gewählt) ersetzt.

Hinweis: Es ist nicht notwendig, jeder Seite ein individuelles Bild zuzuordnen. Wird einer Seite kein eigenes Bild zugewiesen, wird automatisch der hier definierte Eyecatcher verwendet.

Des Öfteren wird die Frage gestellt was die optimale Bilddimensionen für die Galerie- und/oder Eyecatcher-Bilder sind. Um es kurz zu machen. Eine optimale Breite oder Höhe gibt es nicht, da die Bilder auf 100% Breite des Browserfensters skaliert werden. Dementsprechend wächst oder schrumpft auch die Höhe der hinzugefügten Bilder. Das Layout selber schreibt keine Höhe oder Breite vor.
Angenommen die Bilder haben eine Breite von 1920px und sind 400px hoch. Wenn das Browserfenster des Betrachters nun eine Breite von 960px besitzt (1920 geteilt durch 2) so wird das Bild mit einer Höhe von 200px (400 geteilt durch 2) dargestellt.

Tipp: Bedenken Sie, dass nicht jeder Besucher Ihrer Seite über eine 100MBit-Leitung mit dem Internet verbunden ist und die Bilder geladen werden müssen, auch über mobile Datenverbindungen. Sie sollten daher immer versuchen einen guten Kompromiss aus Bildqualität und -größe zu finden. (Empfehlenswert halte ich daher Bilder von etwa 1500px Breite, da diese auch bei einer Fensterbreite von 1920px sauber dargestellt werden und die Dateigröße des Bildes nicht zu hoch ist.)
Das Gleiche gilt auch für Galerie-Bilder, welche für die Slideshow verwendet werden.