Cover-Seiten stellen Informationen auf einer einzigen, auffälligen Splash-Seite dar. Cover-Seiten eignen sich hervorragend zum Anzeigen einer Baustellen-Seite, zur Ankündigung einer Produktveröffentlichung oder zum Sammeln von E-Mail-Adressen von Besuchern.

Cover-Seiten sind in jedem beliebigen Website- und E-Commerce-Tarif in Version 7.0 verfügbar. Wenn du derzeit das eigenständige Cover-Seiten-Abo verwendest, bleibt deine Seite aktiv, solange eine aktive Zahlungsberechtigung besteht. Es ist nicht mehr möglich, zum Cover-Seiten-Abo zurückzukehren, nachdem du auf eine vollständige Website gewechselt hast.

Cover-Seiten sind in Version 7.1 nicht verfügbar. Um ein ähnliches Erscheinungsbild zu erzielen, kannst du den Header und den Footer auf bestimmten Seiten ausblenden. Du kannst in der Squarespace-App keine Cover-Seiten hinzufügen oder bearbeiten.

Ein Video anschauen

Eine Cover-Seite hinzufügen

Führen Sie diese Schritte aus, um eine Cover-Seite hinzuzufügen und deren Inhalt anzupassen:

1. Öffne das Seiten-Menü, klicke auf + und wähle dann Cover-Seite. Weitere Informationen findest du unter Seiten zu deiner Navigation hinzufügen.
2. Wähle ein Layout
3. Fügen Sie markenspezifischen Text und Medieninhalte hinzu.
4. Fügen Sie Aktionen wie Buttons, Links oder Formulare hinzu.
5. Stylen Sie die Seite.

Denk daran:

• Um die Cover-Seite als erste Seite festzulegen, die Besucher sehen, wenn sie deine Website besuchen, lege sie als Startseite fest.
• Verschiebe die Cover-Seite im Seiten-Menü in den Abschnitt „Nicht Verlinkt“, um sie aus den Navigationsmenüs zu entfernen. Dies ist hilfreich, wenn du die Seite als separate Landing-Page verwenden oder Besuchern diese Seite nur ein Mal anzeigen möchtest, bevor sie deine Website betreten.
• Wenn du nur den Cover-Seiten-Tarif verwendest, hast du kein Seiten-Menü und es ist nicht möglich, weitere Seiten hinzuzufügen. Im Hauptmenü werden die Menüs für die Bearbeitung deiner einzelnen Cover-Seite angezeigt.

Cover-Seiten-Layouts

Jedes Cover-Seiten-Layout verhält sich wie ein Ein-Blatt-Template mit eigenen Funktionen und Stileinstellungen. Cover-Seiten verwenden keine Blöcke und Designelemente wie Text und Buttons werden an einer festen Position angezeigt. Dies hilft, deine Cover-Seite schön und gleichzeitig reaktionsschnell zu machen.

Hinweis: Cover-Seiten unterstützen weder HTML- noch Markdown-Formatierung.

So änderst du dein Layout:

1. Klicke im Cover-Seiten-Menü auf Layout ändern.
2. Verwende das Dropdown-Menü, um Layouts nach Kategorie zu sortieren, oder wähle Alle Layouts, um alle anzuzeigen.
3. Bewege den Mauszeiger über ein Layout und klicke auf Auswählen, um es als neues Layout festzulegen.
4. Klicke oben auf der Seite auf Speichern, um die Änderung zu übernehmen.

Obwohl du Cover-Seiten-Layouts für jeden Zweck anpassen kannst, haben wir sie für allgemeine Designs entwickelt. Weitere Informationen zu den einzelnen Layout-Kategorien findest du unten.

Branding und Text hinzufügen

Verwenden Sie das Menü Branding & Text, um folgende Elemente hinzuzufügen:

• Ein Logo oder einen Branding-Text
• Eine Seitenüberschrift
• Textkörper

Diese Einstellungen passen optimal zum Stil Ihres Layouts, damit Sie eine minimale Menge an Informationen mit maximaler Wirkung präsentieren können.

Denk daran:

• Branding und Textanzeige variieren je nach Layout
• Es ist nicht möglich, gleichzeitig ein Logo und Branding-Text anzuzeigen.
• Vergewissere dich, dass dein Logo unseren Best Practices entspricht, oder erstelle ein neues Logo mit Squarespace Logo.
• Im Gegensatz zu anderen Seiten verlinken Website-Titel und Logos auf Cover-Seiten nicht auf die Startseite der Website.
• Dein Branding-Text kann sich von deinem SEO-Titel unterscheiden, der als Seitenname in den Browser-Tabs und in den Suchergebnissen dient.

Medien hinzufügen

Verwenden Sie das Medien-Menü, um:

• Hintergrundbilder hochzuladen
• Archivbilder hinzufügen
• Zuvor hochgeladene Bilder wiederzuverwenden
• Ein Hintergrundvideo in Endlosschleife hinzuzufügen
• Eine Hintergrundfarbe festzulegen

Denk daran:

• Vor dem Hochladen solltest du deine Bilder richtig formatieren.
• Sie können den integrierten Bild-Editor verwenden, um das Originalbild zu bearbeiten.
• Sie können mehrere Bilder hochladen, um eine Slideshow oder einen Rasterhintergrund zu erstellen.
• Das Hochladen einer großen Anzahl hochauflösender Bilder kann sich auf die Ladezeit Ihrer Cover-Seite auswirken.
• Die meisten Layouts unterstützen Hintergrundvideos, die in einer Endlosschleife ohne Ton wiedergegeben werden. Verlinke dazu auf eine YouTube- oder Vimeo-URL.
• Es ist nicht möglich, in einer Cover-Seiten-Slideshow eine Navigationssteuerung hinzuzufügen oder die Übergangsgeschwindigkeit zu steuern.
• Aufgrund des Responsive Designs werden Bilder und Videos insbesondere auf Mobilgeräten immer – mal mehr, mal weniger stark –zugeschnitten. Wie stark dieser Beschnitt ist, hängt von der Höhe des Bildes, der Breite des Browsers und dem von dir gewählten Layout ab.

Eine Hintergrundfarbe festzulegen

Um eine einfache Hintergrundfarbe anstelle eines Bildes oder Videos anzuzeigen, wählen Keine. Das Bild verschwindet dann aus der Vorschau. Ändere die Hintergrundfarbe im Stil-Menü.

Aktionen hinzufügen

Verwende das Aktionsfenster, um Buttons, Navigationslinks und eine Formular- oder Newsletter-Anmeldeoption hinzuzufügen. Wenn du keine Aktionen auf deiner Cover-Seite möchtest, lasse die Felder leer.

Denk daran:

• Sie können Buttons oder Navigationslinks hinzufügen, aber nicht beides.
• Sie können bis zu zwei Buttons oder fünf Navigationslinks zu einer Cover-Seite hinzufügen.
• Sie können ein Formular oder eine Newsletter-Anmeldung hinzufügen.

So fügst du eine Aktion hinzu:

1. Klicken Sie im Cover-Seiten-Menü auf Aktionen.
2. Wählen Sie unter Aktionstyp auswählen eine Aktion aus.

Hinzufügen von Buttons oder Navigationslinks

Buttons und Navigationslinks führen Besucher zu einer anderen Seite Ihrer Squarespace-Website, einer anderen Website oder einer herunterladbaren Datei. So fügen Sie Buttons oder Navigationslinks hinzu:

1. Wähle Buttons oder Navigation aus dem Menü Aktionstyp auswählen.
2. Füge im ersten Feld ein Label hinzu. Wir empfehlen, den Label-Text des Links zur besseren Formatierung und Lesbarkeit kurz zu halten.
3. Klicke in das URL-Feld, um eine Web-Adresse einzugeben, oder klicke auf , um den Link-Editor zu öffnen. Du kannst auf externe Websites, herunterladbare Dateien, E-Mail-Adressen, Telefonnummern oder eigene Inhalte deiner Website verlinken. Mehr dazu erfährst du unter Links zu deiner Website hinzufügen.
4. Klicken Sie oben im Menü auf Speichern, um alle Änderungen zu veröffentlichen.

Hinzufügen eines Formulars oder einer Newsletter-Anmeldung

Besucher können auf einen Button klicken und das Formular oder die Newsletter-Anmeldung ausfüllen, das/die sich in einem Overlay öffnet. So fügen Sie ein Formular oder eine Newsletter-Anmeldung hinzu:

1. Wähle Formular oder Newsletter aus dem Menü Aktionstyp auswählen.
2. Füge im Feld Button-Label ein Label für den Button hinzu.
3. Klicke auf Formular bearbeiten oder Newsletter-Anmeldung bearbeiten, um den Inhalt zu erstellen.
4. Bei Formularen kannst du im Feld Formularname einen Namen für dein Formular hinzufügen. Der Name wird deinen Besuchern angezeigt, wenn das Formular in einer Lightbox geöffnet wird. Es ist nicht möglich, Newsletter-Anmeldungen zu benennen oder den Standardtitel „Newsletter-Formular“ zu löschen, der in der Lightbox dafür angezeigt wird.
5. Für Formulare kannst du Platzhalterfelder löschen, indem du auf die Papierkorb-Symbole klickst und unten auf + klickst, um neue Felder hinzuzufügen. Wenn du möchtest, dass Besucher zum Absenden des Formulars ein Feld ausfüllen müssen, aktiviere Pflichtfeld. Newsletter-Anmeldungen haben nur ein Feld für die E-Mail-Adresse.
6. Klicke auf den Tab Speicher, um uns mitzuteilen, wohin wir Übermittlungen senden sollen. Wenn du eine E-Mail-Kampagnen-Mailingliste als Speicheroption verwendest, erhalten Abonnenten eine Bestätigungs-E-Mail, wenn sie sich registrieren. Es ist nicht möglich, dies zu deaktivieren.
7. Im Tab Erweitert kannst du das Label für den „Senden“-Button anpassen, eine Umleitung nach dem Senden einrichten oder die Nachricht bearbeiten, die den Besuchern nach der Übermittlung des Formulars angezeigt wird. Benutze normalen Text oder HTML.
8. Klicken Sie im Editor auf Speichern und dann oben im Fenster auf Speichern, um alle Änderungen zu veröffentlichen.

Tipp: Nachdem Sie Ihr Formular oder Ihre Newsletter-Anmeldung mit der Speicheroption verbunden haben, empfehlen wir Ihnen, die Live-Version Ihrer Seite zu besuchen und ein Testformular zu senden, um zu sehen, wie es funktioniert.

Eine Formular-Hintergrundfarbe hinzufügen

In den meisten Layouts kannst du die Anpassung Benutzerdefinierte Overlay-Farbe im Stil-Menü verwenden, um dem Hintergrund deines Formulars oder deiner Newsletter-Anmeldung Farbe zu verleihen. Um dieses Overlay auf dem Rest der Seite auszublenden, verwende den Deckkraft-Schieberegler, um es transparent zu machen. Deine Besucher sehen das Overlay, nachdem sie auf den Button für das Formular oder die Newsletter-Anmeldung geklickt haben.

Denk daran:

• Das Harbor-Layout beinhaltet keine Einstellung für Benutzerdefinierte Overlay-Farbe oder Farbe hinter Text. Die Hintergründe für Formulare oder Newsletter-Anmeldungen sind bei Harbor immer hellgrau.
• In einigen Layouts wird die Option Benutzerdefinierte Overlay-Farbe erst dann angezeigt, nachdem du Bilder zum Medien-Menü hinzugefügt hast.

In diesen Layouts stimmt der Hintergrund der Formular- oder Newsletter-Anmeldung mit der Einstellung Farbe hinter Text überein:

• Backstory
• Karte
• Flagship
• Flash
• Focus
• Monocle
• Sitzung
• Hervorheben
• Vignette

Ausblenden des Formulars

Um das Formular oder die Newsletter-Anmeldung auszublenden, entfernen Sie sämtlichen Button-Label-Text und lassen Sie das Feld leer. Formularfelder bleiben intakt, falls Sie sie später wieder aktivieren.

Social-Media-Symbole hinzufügen

Um Social-Media-Symbole anzuzeigen, klicke im Cover-Seiten-Menü auf Social-Media-Links und aktiviere Social-Media-Symbole anzeigen. Die Social-Media-Symbole spiegeln die Konten wider, die du im Menü „Social-Media-Links“ hinzugefügt hast. Die Platzierung der Symbole variiert je nach Layout, sie werden aber in der Regel unten auf der Seite angezeigt.

Die Cover-Seite gestalten

Klicken Sie im Cover-Seiten-Menü auf Stil, um das Design anzupassen. Jede Cover-Seite hat individuelle Stil-Optionen, unabhängig von Ihrem Website-Template und anderen Cover-Seiten.

Denk daran:

• Wenn du dein Layout änderst, werden alle Einstellungen für Schriftart, Farbe und Größe auf die Standardeinstellungen des Layouts zurückgesetzt. Wenn du zurück zu einem zuvor verwendeten Layout wechselst, werden die Stil-Anpassungen ebenfalls zurückgesetzt.
• Da Cover-Seiten mit Responsive Design erstellt werden, sehen sie auf einem Mobilgerät ein wenig anders aus. Du kannst in der Geräteansicht eine Vorschau anzeigen, wie deine Seite auf Mobilgeräten angezeigt wird.

Ändern von Stil-Anpassungen

Klicke im Cover-Seiten-Menü auf Stil. Verwende die Stil-Anpassungen, um deine Cover-Seite anzupassen. Wenn du Änderungen vornimmst, wird die Seitenvorschau aktualisiert. Wir empfehlen zu experimentieren, um ein Design zu finden, das dir gefällt.

Hier ist eine Liste der häufigsten Cover-Seiten-Anpassungen:

• Positionierung – Positioniere den Inhalt auf der Seite. Je nach Layout sind die Optionen Links, Zentriert, Rechts oder Oben, Mitte, Unten.
• Branding - Lege die Schriftart und Farbe fest.
• Überschrift - Lege die Schriftart und Farbe fest.
• Fließtext - Lege die Schriftart und Farbe fest.
• Hintergrund - Lege die Hintergrundfarbe (sichtbar, wenn kein Bild oder Video verwendet wird) und die Optionen für den Seitenrand fest.
• Bilder (nicht verfügbar in Standort-Layouts) – Lege den Stil als Vollständig oder Raster fest und passe die Rasterdarstellung mit Stilen an, wie Raster-Galerie-Dichte und Raster-Galerie-Verhältnis. Aktiviere Automatische Overlay-Farbe und Automatische Lade-Farbe oder deaktiviere diese Optionen und lege die Farben einzeln fest. Weitere Informationen zu Lade-Farben findest du unten.
• Buttons - Lege die Schriftart, den Stil und die Farbe aller Buttons fest.
• Social-Media-Symbole - Lege den Stil und die Farbe der Social-Media-Symbole fest.
• Audio-Steuerelemente (nur Audio-Layouts) - Lege den Stil des Players und die Schriftart und Farbe der Tracks fest.
• Video-Steuerelemente (nur Video-Layouts) - Lege den Stil und die Farbe des Players fest.
• Karte (nur Standort-Layouts) - Lege den Kartenstil fest.

Hintergrundbilder

Die meisten Layouts umfassen Voll- und Rasterbildoptionen:

• Wähle Vollständig aus, um den gesamten Hintergrund deiner Cover-Seite mit einem einzigen Bild zu füllen. Wenn du mehrere Bilder hochlädst, wird jeweils ein Bild als Slideshow angezeigt.
• Wähle Raster aus, um ein Hintergrundraster mit sich wiederholenden Bildern zu erstellen. Wenn du ein Bild hast, wird das Raster dieses Bild wiederholen, um den Raum zu füllen.
  
  • Die Option „Raster“ ist in den Layouts Focus, Flagship, Harbor und Monocle nicht verfügbar.
  • Im Layout Montage kann die Inhaltsleiste einige deiner Bilder abdecken.
• Verwende die Anpassungen, die unten angezeigt werden, um das Seitenverhältnis, die Bildausrichtung usw. festzulegen.

Lade-Farbe

Die meisten Cover-Seiten-Layouts bieten eine Option für Lade-Farben, sodass du beim Laden der normalen Hintergrundfarbe oder des Bildes eine separate Hintergrundfarbe anzeigen kannst. Diese Farbe wird möglicherweise auch angezeigt, wenn du in einer Slideshow durch Bilder wechselst.

Hinweis: Die Layouts Flagship, Focus, Harbor und Monocle bieten keine Lade-Farbe.

Standardmäßig wird in deinem Layout die Automatische Lade-Farbe verwendet. Dies bedeutet, dass die Farbe auf der Hintergrundfarbe für dein Bild oder Video basiert. Wenn du mehrere Hintergrundbilder hast, basiert die Lade-Farbe auf dem ersten Bild im Medien-Menü.

Um eine eigene Farbe auszuwählen, deaktiviere die Option Automatische Lade-Farbe und lege eine neue fest, indem du auf Benutzerdefinierte Lade-Farbe klickst.

Um die Lade-Farbe zu deaktivieren, klicke auf Benutzerdefinierte Lade-Farbe und aktiviere die Option Transparent .

Overlay-Farbe

Alle Layouts außer Harbor bieten eine Overlay-Farboption, die deinem Hintergrundbild oder deiner Farbe einen Farbton verleiht. Standardmäßig wird in deinem Layout die Automatische Overlay-Farbe verwendet. Die automatische Farbe ist in der Regel ein Grauton, der dein Demo-Bild ergänzt.

Um eine benutzerdefinierte Overlay-Farbe zu verwenden, deaktiviere die Option Automatische Overlay-Farbe, klicke auf Benutzerdefinierte Overlay-Farbe und wähle eine neue Farbe aus.

Um die benutzerdefinierte Overlay-Farbe als Formular-Hintergrundfarbe zu verwenden, sie aber auf dem Rest der Seite auszublenden, verwende den Schieberegler für Deckkraft, um die Farbe transparent zu machen.

FAQ

Warum kann ich meine Textgröße nur bis zu einem bestimmten Punkt vergrößern?

Der Text, die Logos und Schaltflächen auf einer Cover-Seite können nur bis zu der maximalen Breite vergrößert werden, die jedes Layout unterstützt. Diese Einschränkungen verhindern, dass sich Inhalte überschneiden und gewährleisten ein responsives Design.

Der Textkörper zeigt die eingestellte Schriftgröße an, wenn die Browserbreite größer als 1800 Pixel ist. Bei Browsern mit einer Breite von 1800 Pixeln und kleiner erreicht die Textschriftart abhängig von der Breite eine maximale Größe:

• 1800 Pixel breit: 27 Pixel
• 1600 Pixel breit: 22 Pixel
• 1020 Pixel breit: 18 Pixel
• 760 Pixel breit: 17 Pixel
• 600 Pixel breit: 16 Pixel

Wenn Sie beispielsweise die Schriftgröße für den Textkörper auf 30 px einstellen, wird sie nur mit 30 Pixeln angezeigt, wenn das Browserfenster eines Besuchers mindestens 1801 Pixel breit ist. Andernfalls passt er sich auf Grundlage der obigen Liste an. Wenn Sie die Schriftgröße für den Textkörper auf 13 px einstellen, wird sie ebenfalls immer mit 13 Pixeln angezeigt, da diese Größe kleiner ist als jede der Grenzen.

Branding- und Überschriftentext funktioniert anders. Die Schriftgröße fungiert eher als Ziel und der Text skaliert basierend auf der Höhe und Breite des Browsers. Diese Skalierung variiert zwischen Layouts.

Kann ich einer Cover-Seite benutzerdefinierten Code hinzufügen?

Cover-Seiten haben sehr absichtliche Designs und sind nicht für das Hinzufügen von benutzerdefinierten CSS gemacht. Verwende das Stil-Menü, um den Stil deines Deckblatts (wie Schriftarten und Farben) anzupassen.

Wenn du weiterhin HTML oder Skripte hinzufügen musst, verwende die Einstellungen der Cover-Seite, um die Option Code einfügen pro Seite hinzuzufügen. Weitere Unterstützung findest du unter Benutzerdefinierten Code zu deiner Website hinzufügen.

Der Wiedergabe-Button ändert die Position im Layout Projector.

Die Platzierung des Abspiel-Buttons im Projector-Layout hängt von der Textmenge im Feld „Textkörper“ ab:

• Bei einer kleinen Textmenge bleibt der Wiedergabe-Button zentriert.
• Wenn der Text eine bestimmte Breite überschreitet, wechselt der Wiedergabe-Button in die linke obere Ecke.
• Die Position variiert je nach Browsergröße.