Design: Farben, Hintergrund und Schrift

Im Tab „Theme“ des Builders legst du das Aussehen der ganzen Page fest: Farben, Hintergrund, Form der Buttons und Schrift. Alle Änderungen außer Custom CSS werden nach etwa 2 Sekunden automatisch in den Entwurf gespeichert und gehen mit dem nächsten Veröffentlichen live.

Der Tab ist von oben nach unten aufgebaut: „Template“, „Presets“, „Farben“, „Hintergrund“, „Fläche hinter dem Inhalt“, „Button-Stil“, „Schrift“ und „Custom CSS“. Das Template ist Thema eines eigenen Artikels.

#Presets

Presets sind fertige Farbkombinationen. Ein Klick setzt Hintergrundfarbe, Textfarbe, Button-Farbe und Button-Stil auf einmal und setzt eine eigene Button-Textfarbe zurück. Es gibt 16 Presets: Klassisch, Mitternacht, Hafen, Ozean, Wald, Sonnenuntergang, Rose, Schiefer, Mono, Frost, Lavendel, Bernstein, Anthrazit, Minze, Karmin und Sand. Das aktive Preset ist markiert, solange du keinen der vier Werte änderst.

#Farben

Vier Grundfarben, jede mit Farbwähler und Hex-Wert (ohne Transparenz):

„Hintergrund“

Hintergrundfarbe der Page, gilt auch bei „Hintergrund: Farbe“.

„Textfarbe“

Farbe für Name, Bio und Texte.

„Button-Farbe“

Farbe der Link-Buttons und Standardfarbe für Buttons in Blöcken.

„Button-Text“

Schrift auf den Buttons. Ohne eigene Wahl wird automatisch eine gut lesbare Farbe zur Button-Farbe gewählt.

Angezeigt wird immer der Wert, der gerade wirkt, auch wenn er aus dem Template stammt. Viele Blöcke haben eigene Farbfelder unter „Darstellungs-Optionen“. Solange dort „Standard (aus dem Theme)“ steht, folgen sie diesen Farben.

#Hintergrund

Mit den Buttons „Farbe“, „Bild“, „Verlauf“ und „Video“ wählst du die Art des Seitenhintergrunds. Beim Umschalten merkt sich der Builder die Werte der anderen Arten, solange du im Builder bist.

Farbe

Die Page nutzt die Farbe „Hintergrund“ aus dem Bereich „Farben“.

Bild

„Desktop-Bild“

Hintergrund für große Bildschirme, 1920 × 1080 px.

„Mobil-Bild“

Optional, Hochformat 1080 × 1920 px. Leer steht „wie Desktop“, dann wird das Desktop-Bild verwendet.

„Wählen“ öffnet deine Assets, „Verwalten ↗“ die Assets-Seite, „Entfernen“ nimmt das Bild heraus. Hat ein Bild nicht genau die Zielgröße, öffnet sich der Zuschnitt, und das zugeschnittene Bild wird als neues Asset gespeichert. Mehr dazu unter Bilder im Page Builder.

Verlauf

„Startfarbe“ und „Endfarbe“

Die beiden Farben des Verlaufs.

„Winkel“

Richtung von 0 bis 355 Grad in 5er-Schritten.

„Vorlagen“

Fertige Verläufe: Indigo, Sonnenuntergang, Ozean, Wald, Beere und Mitternacht.

Video

„Desktop-Video“

Direkter Link zu einer Videodatei (.mp4 oder .webm) oder „Video auswählen“ aus deinen Video-Assets.

„Mobiles Video“

Optional, z. B. eine kleinere Datei für mobile Daten. Leer wird das Desktop-Video verwendet.

Das Video läuft stumm und in Endlosschleife, ohne Bedienelemente. Bei Besuchern, die in ihrem System „Bewegung reduzieren“ eingeschaltet haben, wird es ausgeblendet. Empfohlen sind Dateien bis 8 MB im Format MP4 oder WebM.

Overlay-Deckkraft

Bei Bild, Verlauf und Video legt ein Regler von 0 bis 80 % eine abdunkelnde Schicht über den Hintergrund, damit Text besser lesbar ist.

Ein Seitenhintergrund aus Bild, Verlauf oder Video ersetzt die Hintergrundbilder des Templates. Bei den Bildplätzen des Templates steht dann ein entsprechender Hinweis. Mit „Farbe“ sind die Template-Bilder wieder zu sehen.

#Fläche hinter dem Inhalt

Macht Text auf Hintergrundbild, Verlauf oder Video lesbar:

„Aus“

Keine Fläche, der Inhalt liegt direkt auf dem Hintergrund.

„Ganzer Inhalt“

Eine Karte hinter dem gesamten Inhalt.

„Je Block“

Eine eigene Karte hinter dem Profil und hinter jedem Block.

„Deckend“ oder „Halbtransparent“

Erscheint, sobald die Fläche eingeschaltet ist. Halbtransparent lässt den Hintergrund durchscheinen.

Beim Template Business Card hat diese Einstellung keine Wirkung.

#Button-Stil

Der Button-Stil ist die Vorgabe. Im Links-Block („Eckenradius“) und pro Link („Ecken-Radius“) kannst du ihn überschreiben.

#Schrift

Zur Wahl stehen DM Sans, Figtree, Sora, Plus Jakarta Sans, Raleway, Inter, Poppins, Montserrat, Nunito, Outfit, Space Grotesk und „System-Standard“ (die Schrift des Geräts). Die Zeile „Aa — Der schnelle Fuchs.“ zeigt eine Vorschau.

Alle Schriften liefert LinkHarbor selbst aus. Browser deiner Besucher laden dafür nichts von Google Fonts oder anderen fremden Servern.

#Welche Einstellung gewinnt

Farben und Formen werden von außen nach innen verfeinert:

1. Template: Grundstil und Standardfarben
2. Theme-Tab: Farben, Hintergrund, Button-Stil und Schrift für die ganze Page
3. Darstellungs-Optionen eines Blocks: Farben und Formen für diesen Block
4. Styling eines einzelnen Links: geht allen anderen Werten vor
5. Custom CSS: für alles, was die Regler nicht abdecken

Wie du mit eigenem CSS nachhilfst, steht unter Custom CSS.