Look & Feel anpassen

Überblick

Ü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.

Look and Feel anpassen

1. Navigieren Sie im Hauptverwaltungsmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Suchen Sie auf der Seite Farben, Logos & Stile ein Gestaltungselement und befolgen Sie die Anweisungen, die wir Ihnen auf dieser Seite erklären.

Das Farbschema definieren

So konfigurieren Sie die grundlegenden Gestaltungselemente Ihres Designs:

1. Navigieren Sie im Hauptverwaltungsmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Wählen Sie auf der Seite Farbkonfiguration im Abschnitt Farbschema über das Dropdown-Menü Farbauswahl eine der folgenden Optionen aus:
   • Benutzerdefiniert: Erstellen Sie ein eigenes Farbschema.
   • Standardschema: Verwenden Sie das Standard-Farbschema des picturemaxx Drupal CMS.
3. Wenn Sie Benutzerdefiniert auswählen, können Sie Farben für allgemeine Gestaltungselemente festlegen, beispielsweise Hintergrund Hauptinhalt, Text und Links. Dazu können Sie:
   • einen HTML-Farbcode eingeben (z. B. #0055CC), oder
   • eine Farbe aus der Palette auswählen.
4. Im Bereich Vorschau werden Ihre Änderungen angezeigt, bevor Sie sie speichern.

Kurze Demo: Rufen Sie die Design-Einstellungen auf, um Farben festzulegen, Darstellungsoptionen zu wählen sowie ein Logo und ein Favicon hinzuzufügen.

Hintergrundfarben für Abschnitte definieren

Um Abschnitte Ihrer Seiten zu gestalten, arbeiten Sie mit sogenannten Abschnittstypen. Um ein einheitliches Erscheinungsbild Ihrer Website sicherzustellen, können Sie Hintergrundfarben definieren, die für alle Abschnittstypen verfügbar sind.

So legen Sie Hintergrundfarben für alle Absätze fest:

1. Navigieren Sie im Hauptverwaltungsmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Scrollen Sie auf der Seite Farbkonfiguration bis zum Abschnitt Farbeinstellungen.
3. Geben Sie benutzerdefinierte Farben in das Feld Palette der Hintergrundfarben überschreiben ein.
   • 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"]
4. Geben Sie im Feld Dunkle Hintergrundfarben an, bei welchen Farben der Text weiß angezeigt werden soll, um einen besseren Kontrast zu erzielen. Bei allen hier aufgeführten Farben wird der Text automatisch weiß angezeigt.
   • Verwenden Sie die Farben, die in der Palette der Hintergrundfarben überschreiben definiert sind.
   • Geben Sie die Werte durch Kommas getrennt ein. Verwenden Sie keine Anführungszeichen oder eckigen Klammern.Beispiel: #8c8c8c, #414141.

Sobald diese Farben definiert sind, stehen sie in den Einstellungen der einzelnen Absatztypen unter Anzeigeoptionen > Hintergrundfarbe Abschnitt zur Verfügung. Nun können Sie sie ganz einfach anwenden und Ihr Design auf allen Seiten einheitlich gestalten.

Akzentfarben einzelnen Seiten zuweisen

Sie können einer Seite eine benutzerdefinierte Akzentfarbe zuweisen. Die ausgewählte Farbe wird nur auf die Inhalte dieser Seite angewendet, während der Rest der Website weiterhin die Standard-Akzentfarbe des aktiven Themes verwendet. Eine benutzerdefinierte Akzentfarbe wird für Links, Schaltflächen, Call-to-Action-Elemente und andere Elemente verwendet, die die Akzentfarbengestaltung nutzen. Globale Website-Elemente wie Header, Hauptnavigation und Footer verwenden weiterhin das Farbschema des aktiven Basisthemes.

So wenden Sie einer ausgewählten Seite eine benutzerdefinierte Akzentfarbe zu:

1. Öffnen Sie die Seite im Bearbeitungsmodus.
2. Erweitern Sie in der rechten Seitenleiste des Seiteneditors den Bereich Seiteneinstellungen, um auf die Akzentfarben-Palette zuzugreifen.
3. Wählen Sie eine Farbe aus der vordefinierten Farbpalette aus.
4. Speichern Sie die Seite.

Akzentfarben definieren

So fügen Sie der vordefinierten Farbpalette Akzentfarben hinzu:

1. Navigieren Sie zu Konfiguration > picturemaxx-Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Scrollen Sie auf der Seite Farbkonfiguration zum Abschnitt Farbeinstellungen.
3. Geben Sie die gewünschten Farben im Feld Optionen für Akzentfarben ein.
   • 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"]

Die definierten Farben stehen anschließend im Seiteneditor in der rechten Seitenleiste unter Seiteneinstellungen > Akzentfarbe zur Auswahl.

Logo hinzufügen

So laden Sie ein individuelles Logo hoch, das auf Ihren Seiten angezeigt wird:

1. Navigieren Sie im Hauptverwaltungsmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Scrollen Sie auf der Seite Farbkonfiguration nach unten bis zum Abschnitt Globale Einstellungen überschreiben.
3. Wählen Sie den Logo Tab.
4. Löschen Sie vor dem Hochladen die Pfadinformationen im Feld Pfad zum eigenen Logo, um die vorhandene Datei aus Ihrer Vorlage zu entfernen.
5. Laden Sie Ihre neue Logodatei hoch.
   • Es wird empfohlen, eine png-Datei hochzuladen, die genau auf die Größe zugeschnitten ist, die Sie Ihren Seiten hinzufügen möchten.

Favicon hinzufügen

Um Ihr Favicon hinzuzufügen, navigieren Sie im Hauptmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und 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.

Textstil für das Hauptmenü konfigurieren

Wählen Sie zwischen drei Anzeigeoptionen für Ihr Hauptmenü.

1. Navigieren Sie im Hauptmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Scrollen Sie nach unten zum Abschnitt picturemaxx Design-Einstellungen und klicken Sie auf Darstellungsoptionen.
3. Wählen Sie eine der folgenden Optionen aus:
   • Großschreiben: Jedes Wort groß schreiben
   • Großbuchstaben: Alle Buchstaben in Großbuchstaben umwandeln (Standard)
   • Keine Umwandlung: Buchstaben wie eingegeben anzeigen

Button »Zurück zum Seitenanfang«

Um den Benutzern zu helfen, schnell zum Seitenanfang zurückzukehren, aktivieren Sie die Option »Zurück zum Seitenanfang«.

1. Navigieren Sie im Hauptmenü zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Farben, Logos und Stile.
2. Scrollen Sie nach unten zum Abschnitt picturemaxx Theme-Eneinstellungen.
3. Öffnen Sie die Darstellungsoptionen und aktivieren Sie die Option Button »Zurück zum Seitenanfang« verwenden.

Schriftarten verwalten

Das picturemaxx-Basistheme verwendet die Schriftfamilie Open Sans als Standardschriftart.

Um andere Schriftarten einzusetzen können Sie:

• benutzerdefinierte Schriftarten auf Ihr System hochladen, oder
• Schriftarten aus Google Fonts importieren

Option 1: Custom Fonts (Benutzerdefinierte Schriftarten) hochladen

Wählen Sie die gewünschten Schriftattribute aus und laden Sie die Schriftdateien hoch, um Ihren eigenen Schriftart anzuwenden (nur WOFF-Format).

So laden Sie benutzerdefinierte Schriftarten hoch:

1. Navigieren Sie zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen > Schriftauswahl und Konfiguration.
2. Wählen Sie die Registerkarte Custom Fonts aus und dann klicken Sie auf Add Custom Font.
3. Hier können Sie die gewünschten Schriftattribute definieren und Schriftdateien hochladen.

Erstellen Sie nach dem Hochladen einer benutzerdefinierten Schriftart abschließend eine Schriftartanzeige (Font Display) . Siehe den Abschnitt Font Display hinzufügen unten.

Bearbeitungsoptionen

Beschriftung
Geben Sie den Namen der benutzerdefinierten Schriftart ein. Beachten Sie, dass dieser Name eindeutig sein muss, während die Schriftfamilie nicht unbedingt eindeutig sein muss.

Schriftenfamilie
Geben Sie die CSS-Schriftfamilie ein. Dieser Wert wird für die generierte @font-face-Regel verwendet und kann von mehreren Schriftvarianten, beispielsweise unterschiedlichen Schriftschnitten oder Schriftstilen, gemeinsam genutzt werden.

Font Style
Wählen Sie den Schriftstil für diese Schriftdatei aus. Wählen Sie zwischen Normal und Kursiv.

Font Weight
Die Eigenschaft Schriftstärke legt fest, wie dick oder dünn die Zeichen im Text dargestellt werden sollen und hilft dem Browser, die richtige Schriftvariante zu verwenden.

Font Classification
Wählen Sie eine oder mehrere Kategorien aus, die diese Schriftart am besten beschreiben: Serif, Sans Serif, Slab Serif, Handwriting, Decorative, Monospace.

Font File
Wählen Sie eine Schriftartdatei zum Hochladen. Die Schriftdatei muss im WOFF-Format sein, da dieses von allen modernen Browsern akzeptiert wird.

Option 2: Schriftarten aus Google Fonts importieren

Voraussetzung: Google API-Schlüssel

Folgen Sie diesem Link: https://developers.google.com/fonts/docs/developer_api#APIKey, um einen Google API-Schlüssel für Google Fonts zu erhalten.

So importieren Sie Schriftarten aus dem Google-Fonts-Dienst:

1. Navigieren Sie zu Konfiguration > picturemaxx Konfiguration > Theme-Einstellungen> Schriftauswahl und Konfiguration.
2. Klicken Sie neben Custom Fonts (Benutzerdefinierte Schriftarten) auf die Registerkarte Einstellungen.
3. Geben Sie auf der Seite Schriftarteinstellungen Ihren API-Schlüssel im Feld Google Fonts Settings ein und klicken Sie anschließend auf Konfiguration speichern.
4. Scrollen Sie nach oben und klicken Sie auf die Schaltfläche Import from google_fonts_api, um die verfügbaren Schriftarten zu importieren.
5. Wechseln Sie zurück zur Seite Schriftauswahl und öffnen Sie die Registerkarte Durchsuchen.
6. Durchsuchen Sie die verfügbaren Schriftarten und wählen Sie die Schriftarten aus, die Sie verwenden möchten.

Nach dem Import einer Google-Schriftart sollten Sie abschließend eine Schriftartanzeige (Font Display) anlegen. Siehe den Abschnitt Font Display hinzufügen unten.

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.
2. Wählen Sie die Registerkarte Font Display aus und klicken Sie auf Font display hinzufügen (wie unten zu sehen).
3. Weisen Sie den gewünschten Selektoren (z. B. Überschriften oder Standardtext) sowie dem Frontend-Theme Schriftarten zu.

Dadurch wird sichergestellt, dass die ausgewählten Schriftarten auf Ihrer gesamten Website einheitlich verwendet werden.

Bearbeitungsoptionen

Beschriftung
Geben Sie hier den Namen des Fonts ein. Diese Beschriftung dient der Verwaltung und hilft Ihnen, den Schriftstil später wiederzufinden.

Schriftart
Wählen Sie die benutzerdefinierte Schriftart oder Google Font aus, die Sie auf Elemente Ihrer Website anwenden möchten.

Fallback font
Wählen Sie eine Ersatzschrift aus, für den Fall dass die ausgewählte Schrift nicht geladen werden kann.

Preset selectors
Verwenden Sie voreingestellte Selektoren, um Ihre Schriftart einfach anzuzeigen.

Theme
Wählen Sie das Thema, für das diese Anzeige funktionieren soll.