Home → Erste Schritte → Look & Feel anpassen
Look & Feel anpassen
Über die picturemaxx Konfiguration bestimmen Sie grundlegende gestalterische Elemente und verleihen damit Ihrer Website ein individuelles Aussehen. Hier legen Sie die Farben fest, fügen Ihr Logo und Ihr Favicon hinzu und definieren die Schriftarten.
1. Farbschema
Navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Wählen Sie im Abschnitt Farbschema benutzerdefinierte Farben für die allgemeinen Einstellungen aus, indem Sie:
- HTML-Farbcodes manuell eingeben
- die Farbe aus der Palette auswählen
2. Hintergrundfarben für Abschnitte
Um Abschnitte Ihrer Seiten zu gestalten, arbeiten Sie mit sogenannten Abschnittstypen. Unter Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile können Sie im Bereich picturemaxx Design-Einstellungen eine Reihe von Hintergrundfarben für Absätze definieren. Dies hilft Ihnen, ein einheitliches Design für alle Ihre Seiten zu erreichen.
Unter Palette der Hintergrundfarben überschreiben, können Sie neue Farben hinzufügen.
- Fügen Sie Webfarben im Hex-Triplet-Format 🔗 hinzu, das aus einem Hashtag (#) gefolgt von sechs Symbolen besteht.
- Mehrere Farbcodes sind durch ein Komma und Anführungszeichen zu trennen und in eckige Klammern zu setzen. Zum Beispiel: ["#BBE6FA","#E3FFEC","#FFDEC2"]
Unter Dunkle Hintergrundfarben, können Sie die Schriftfarben festlegen, die Sie auf der Grundlage der Hintergrundfarbe zur besseren Sichtbarkeit invertieren möchten. Wenn Sie eine dunkle Hintergrundfarbe verwenden, wird die Schrift automatisch weiß. Hier müssen Sie die Farben verwenden, die in der Palette der Hintergrundfarben überschreiben definiert sind.
- Beachten Sie, dass das Format hier keine Anführungszeichen oder eckigen Klammern verwendet. Zum Beispiel: #8c8c8c, #414141
-
Navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Scrollen Sie nach unten zu den Farbeinstellungen (wie unten dargestellt).
-
Wenn Sie Ihre Seiten gestalten, werden die neuen Farbcodes unter Display Options → Hintergrundfarbe Abschnitt jedes Absatztyps angezeigt. Auf diese Weise können Sie mit einem einheitlichen Farbmanagement arbeiten und dieselben Farboptionen für Hintergründe verwenden.
3. Logo
Um Ihr Logo hinzuzufügen, navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Wählen Sie im Abschnitt Globale Einstellungen überschreiben den Reiter Logo.
- Es wird empfohlen, eine png-Datei hochzuladen, die genau auf die Größe zugeschnitten ist, die Sie Ihren Seiten hinzufügen möchten.
- Löschen Sie vor dem Hochladen die Pfadinformationen im Feld 'Pfad' zum benutzerdefinierten Logo, um die vorhandene Datei aus Ihrer Vorlage zu entfernen.
-
Navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile und scrollen Sie nach unten zu Logo, wie unten dargestellt.
4. Hauptmenü
Wählen Sie zwischen drei Anzeigeoptionen für Ihr Hauptmenü. Die Einstellung finden Sie hier: Hauptmenü → Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Scrollen Sie nach unten zum Abschnitt picturemaxx Design-Einstellungen und klicken Sie auf Darstellungsoptionen (wie unten zu sehen).
5. Favicon
Um Ihr Favicon hinzuzufügen, navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Scrollen Sie nach unten zum Abschnitt Globale Einstellungen überschreiben und wählen Sie den Reiter Favicon.
- Es wird empfohlen, eine png-Datei hochzuladen, quadratisch, maximale Größe 48x48 px.
- Löschen Sie vor dem Hochladen die Pfadinformationen im Feld 'Pfad' zum benutzerdefinierten Symbol, um die vorhandene Datei aus Ihrer Vorlage zu entfernen.
6. Button »Zurück zum Seitenanfang«
Um den Benutzern zu helfen, schnell zum Seitenanfang zurückzukehren, aktivieren Sie die Option »Zurück zum Seitenanfang«. Navigieren Sie im Hauptmenü zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Farben, Logos & Stile. Scrollen Sie nach unten zum Abschnitt picturemaxx Theme-Eneinstellungen und wählen Sie Darstellungsoptionen.
7.1. Custom Fonts
Um einen eigenen Schriftstil zu verwenden, navigieren Sie zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Schriftauswahl und Konfiguration. Klicken Sie auf Custom Fonts und dann auf Add Custom Font. Hier können Sie die gewünschten Font Dateien auswählen und hochladen.
7.2. Importieren von Fonts / Google API Key
Um Schriftarten aus dem Google Fonts-Dienst zu importieren, navigieren Sie zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Schriftauswahl und -konfiguration.
-
1. Zunächst müssen Sie einen Google API-Schlüssel für Schriftarten erstellen. Klicken Sie auf Einstellungen:
2. Enter the Google API Key in the Google Fonts Settings dialog and save your progress:
3. In the same window click on Import from google_fonts_api to import the fonts you'd like to display on your website:
-
Um spezielle Schriftgrößen und -stile zu aktivieren, klicken Sie auf Durchsuchen/Browse. Klicken Sie sich durch die verfügbaren Schriftarten und wählen Sie die gewünschten Schriften aus.
7.3. Font display hinzufügen
Da Sie sich für den Import einer benutzerdefinierten Schriftart oder einer Google-Schriftart entschieden haben, sollten Sie im letzten Schritt eine Schriftartanzeige (Font display) für die importierte Schriftart implementieren. In der Schriftartanzeige können Sie bestimmten Selektoren (z. B. Überschriften, Standardtext) und dem Frontend-Thema einen Schriftstil zuweisen.
-
1. Navigieren Sie zu Konfiguration → picturemaxx Konfiguration → Theme-Einstellungen → Schriftauswahl und -konfiguration und klicken Sie auf Font display hinzufügen (wie unten zu sehen).
2. Hier können Sie eine Schriftart bestimmten Selektoren und dem Frontend-Thema zuordnen.
