Layout-Einstellungen Website
Als PDF herunterladenÜbersicht
Behalten Sie alle Layout-Einstellungen für Ihre Website im Überblick. Getrennt in einzelne Tabs in nur einem Systembereich erhalten Sie alle Möglichkeiten zur Festlegung von Farben, Header- und Footer- Darstellungen sowie grafischen Ergänzungen wie Logo und Favicon. Welche weiteren Optionen das System Ihnen bietet, ist auf den nachfolgenden Seiten erläutert.
Die Layout-Einstellungen erreichen Sie über den Menüpunkt Web > Einstellungen > Layout.
Farben
Im Tab Farben definieren und verwalten Sie alle für Ihre Website relevanten Farbeinstellungen.
Hinweis
Die einzelnen Farbeinstellungen wiederholen sich in den themenbezogenen Bereichen noch einmal. Die Änderungen werden zentral gespeichert, sodass es egal ist, in welchem Tab Sie die Einstellung vornehmen.
Layout > Tab ‚Farben‘
Farbeinstellungen
Allgemein
| Farbe Basis | Legt die Hauptfarbe für die Buttons fest, die auf Webseiten und Webshop genutzt werden (gilt nicht für Login-Button). |
| Farbe Akzent | Legt die Farbe für Akzente fest, die auf Webseiten und Webshop als Mouseover-Effekte erscheinen. |
| Farbe Akzent Schrift | Legt die Schriftfarbe für Bereiche mit der Akzentfarbe fest. |
| Farbe Hintergrund | Legt die Hintergrundfarbe für die Website fest. |
| Farbe Schrift | Legt die Hauptfarbe für Schrift Ihrer Website fest. |
Sekundärfarben
| Schriftfarbe Webshop | Legt die Hauptfarbe für Schrift im Webshop fest. |
| Mittlere Schriftfarbe | Legt die Schriftfarbe mittlere Farbtöne fest. |
| Helle Schriftfarbe | Legt die Schriftfarbe helle Farbtöne fest. |
| Rahmenfarbe | Legt die Rahmenfarbe fest. |
| Rahmenfarbe fokussiert | Legt die Rahmen- und Textfarbe für fokussierte Elemente fest. |
| Mittlere Hintergrundfarbe | Legt die Farbe für mittlere Hintergrundtöne fest. |
| Helle Hintergrundfarbe | Legt die Farbe für helle Hintergrundtöne fest. |
Header
| Farbe Hintergrund | Legt die Hintergrundfarbe des Header-Bereichs fest. |
| Farbe Linien | Legt die Farbe der Linien im Header fest. |
Hauptnavigation
| Farbe Hintergrund | Legt die Hintergrundfarbe der Hauptnavigation fest. |
| Farbe Hover-Effekt | Legt die Hover-Farbe der Hauptnavigation fest. |
| Farbe Schrift | Legt die Schriftfarbe der Hauptnavigation fest. |
Suchleiste
| Farbe Hintergrund | Legt die Hintergrundfarbe der Suchleiste fest. |
| Farbe Schrift | Legt die Schriftfarbe der Suchleiste fest. |
Navigation oben rechts
| Farbe Hintergrund | Legt die Hintergrundfarbe der Navigation oben rechts fest. |
| Farbe Hover-Effekt | Legt die Hover-Farbe der Navigation oben rechts fest. |
| Farbe Schrift | Legt die Schriftfarbe der Navigation oben rechts fest. |
Footer
| Farbe Hintergrund | Legt die Hintergrundfarbe des Footers fest. |
| Farbe Hover-Effekt | Legt die Hover-Farbe des Footers fest. |
| Farbe Schrift | Legt die Schriftfarbe des Footers fest. |
Farbeinstellungen Webshop
Angebote
| Farbe Hintergrund | Legt die Hintergrundfarbe der Angebots-Seite fest. |
| Farbe Schrift | Legt die Schriftfarbe der Angebots-Seite fest. |
| Farbe Info | Legt die Schriftfarbe für die Hinweistexte der Angebots-Seite fest. |
Serien
| Farbe Hintergrund | Legt die Hintergrundfarbe der Serien-Seite fest. |
| Farbe Schrift | Legt die Schriftfarbe der Serien-Seite fest. |
| Farbe Info | Legt die Schriftfarbe für die Hinweistexte der Serien-Seite fest. |
Im Bereich Kollektionsart können Sie von den für Serien abweichende Farben festlegen. Sofern Sie mehrere Kollektionsarten nutzen, können Sie die Farben pro Kollektionsart definieren. Wenn nichts angegeben ist, werden die Farben der Serien verwendet.
Hinweis
Die Angebotsfarben beeinflussen nur das Seiten-Template Angebote - Liste mit Vorschau in Webseite, welches Sie unter Web > Seiten-Elemente > Navigation > Element bearbeiten auswählen können.
Header
Im Tab Header definieren und verwalten Sie die bereichsbezogenen Farbeinstellungen sowie Einstellungen zur Positionierung der Navigation oder des Logos. Auch das Website-Logo selbst wird in diesem Bereich ausgewählt und verwaltet.
Hinweis
Die einzelnen Farbeinstellungen in den Tabs Header, Footer und Webshop wiederholen sich im Tab Farben. Die Änderungen werden zentral gespeichert, sodass es egal ist, in welchem Tab Sie die Einstellung vornehmen.
Eine Erläuterung aller für Ihre Website möglichen Farbeinstellungen finden Sie im vorangegangenen Abschnitt Farben.
Layout > Tab ‚Header‘
Einstellungen
Im Fenster Einstellungen können Sie verschiedene Navigations- und Logo-Layouts auswählen:
Layout Header
| Header 1 (Navigation) | Gibt die Navigation unterhalb des Logos aus. |
| Header 2 (Navigation & Suche) | Gibt die Navigation unterhalb des Logos aus, hebt sie optisch hervor und bietet eine integrierte Webshop-Suche durch das Lupen-Icon an. |
| Header 3 (Navigation kompakt) | Gibt die Navigation in der gleichen Ebene wie das Logo am oberen Bildschirmrand aus. Bitte beachten Sie, dass bei diesem Header-Layout Baum 2 oben rechts nicht ausgegeben wird. |
Layout Header: Beispiel Header 1
Layout Header: Beispiel Header 2
Layout Header: Beispiel Header 3
Position Logo
| Links, Zentriert, Rechts | Bestimmen Sie die Positionierung Ihres Logos. |
|---|
Position Navigation
| Links, Zentriert, Rechts | Bestimmen Sie die Positionierung Ihrer Navigation. |
|---|
Navigationspfeile
| Aktiv, Inaktiv | Aktivieren Sie die Navigationspfeile am rechten Bildschirmrand. |
|---|
Beispiel Navigationspfeile
Suche im CMS ausblenden
| Aktiv, Inaktiv | Setzen Sie hier den Haken, wenn der Suchbalken im Header nur noch im Webshop sichtbar sein soll. |
|---|
Header beim Scrollen ausblenden
| Aktiv, Inaktiv | Aktiviert die Minimierung des Headers beim Herunterscrollen, sodass mehr Seiten-Inhalt angezeigt werden kann. |
|---|
Logo hochladen
Verwenden Sie den Logo-Bereich, um ein Logo hochzuladen und zu Ihrer Website hinzuzufügen. Weitere Informationen hierzu finden Sie in dem FAQ Website-Logo.
Schriftzug für Website
Tragen Sie hier einen Schriftzug ein, der alternativ zum Logo auf Ihrer Website ausgeben werden soll, beispielsweise den Namen Ihres Unternehmens.
Wird eine Logo-Datei hochgeladen und ein Name eingegeben, dann erscheint das Logo und der hier gesetzte Text.
Hinweis
Dieser Schriftzug dient ebenfalls als Hauptüberschrift für alle Seiten der Website und ist somit für die Suchmaschinenoptimierung von Relevanz. Nähere Informationen hierzu finden Sie im FAQ Suchmaschinenoptimierungen.
Tipp
Löschen des Browser-Cache sowie der Site-Cookies
Wird Ihnen das geänderte oder neu hochgeladene Logo nicht sofort nach Aufruf Ihrer Website angezeigt, so löschen Sie bitte Ihren Browser-Cache sowie die Site-Cookies Ihrer Website.
Wie Sie dies in Ihrem verwendeten Browser durchführen, erfahren Sie auf den jeweiligen Websites der Browserbetreiber.
Hinweis
Wenn Sie detaillierte Informationen über die Dokumentenverwaltung erhalten möchten, finden Sie diese in unserem FAQ Dokumentenverwaltung.
Footer
Im Tab Footer definieren und verwalten Sie die bereichsbezogenen Farbeinstellungen sowie Einstellungen zur Positionierung.
Einstellungen
Layout Footer
| Footer 1 (vertikal) | Gibt die einzelnen Footer-Elemente untereinander an. |
| Footer 2 (horizontal) | Gibt die einzelnen Footer-Elemente nebeneinander an. |
| Footer 3 (kompakt) | Gibt die Navigation in der gleichen Ebene wie das Logo am oberen Bildschirmrand aus. |
Layout Footer: Beispiel Footer 1
Layout Footer: Beispiel Footer 2
Layout Footer: Beispiel Footer 3
Webshop
Hier definieren Sie die Farben für Ihren Webshop, falls nicht schon im oberen Abschnitt Farben vorgenommen.
Schriften
Im Tab Schriften definieren und verwalten Sie die Schriftgröße und Schriftarten.
Hinweis
Nicht alle gängigen Schriftarten können unterstützt werden, da viele Schriftgrößen im System vordefiniert sind.
Schriftgrößen
Neben der Standardeinstellung (100%) können Sie aus 4 weiteren Schriftgrößen wählen.
Verfügbare Schriftarten
Hier finden Sie alle im System hinterlegten Schriften sowie die voreingestellte Standardschrift „Lato”. Des Weiteren können Sie über Bearbeiten > Neu eigene Schriften hochladen und für Ihre Webseite verwenden.
Nach Klick auf eine der angezeigten Schriftarten sehen Sie im Tab Schriftart, ob diese eine Systemschriftart ist. Diese können nicht gelöscht werden.
Im Tab Schriftfamilie finden Sie alle Varianten, in denen die ausgewählte Schrift verfügbar ist.
Wichtig
Eigene Schriften: Verwendete Schriften sollten für die Webnutzung kompatibel sein. Daher empfiehlt sich der Einsatz von Webschriften. Damit die gewünschte Schriftart in allen gängigen Browsern richtig angezeigt wird, muss sie in verschiedenen Formaten hochgeladen werden. Dazu gehören: EOT (Embedded Open Type), OTF/TTF (Open Type Font bzw. True Type Font), SVG Scalable Vector Graphics), WOFF/WOFF 2.0 (Web Open Font Format). Zudem sollten Schriften, die bereits im WYSIWYG-Editor verwendet wurden nicht wieder gelöscht werden, da diese dann nicht korrekt dargestellt werden.
Allgemein
Im Bereich Allgemein können Sie für die ausgewählte Schrift Folgendes festlegen:
- Schriftart ist aktiv: Die Schriftart wird freigeschaltet für die Benutzung im WYSIWYG-Editor. Sie kann in allen bestehenden Templates verwendet werden.
- Schriftart ist Standard: Die Schrift wird als Standard-Schriftart in allen Templates der aktuellen Webseite benutzt.
Template
Im Tab Template verwalten Sie das ausgewählte Template für Ihre Website - Webshop oder Website Manager.
Besuchen Sie unsere Hilfeseite, um Beispiele für jedes Template sowie ausführliche Hilfsmaterialien zu finden: https://howto.picturemaxx.com/
Favicon
Im Tab Favicon hinterlegen und verwalten Sie das ausgewählte Favicon und das Touch-Icon für Ihre Website.
Favicon für Website verwalten
Neben der Darstellung in der Adresszeile eines Browsers, wird das Favicon auch in den Tabs einer Seite oder in den Bookmarks angezeigt.
Touch-Icons für Website verwalten
Touch-Icons werden verwendet, um Lesezeichen auf dem Home-Screen von Smartphones anzulegen. Dafür wird ein großes, quadratisches Icon benötigt, das dann in der typischen Kachel-Ansicht genutzt werden kann. Auch gängige Browser nutzen diese Touch Icons auf deren Startseiten.
Hinweis
Detaillierte Informationen über das Favicon bzw. die Dokumentenverwaltung finden Sie in unseren FAQs Website-Favicon und Dokumentenverwaltung.
Mobile Version
Im Tab Mobile Version aktivieren oder deaktivieren Sie im Bereich Einstellungen die optimierte Darstellung Ihrer Website auf mobilen Endgeräten.
Hinweis
Bitte beachten Sie, dass die Darstellung der Templates teils verändert wurde, um die Optimierung auf mobilen Endgeräten zu erreichen.