Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Cover-Seiten

Cover-Seiten stellen Informationen auf einer einzigen, fett formatierten Seite dar. Cover-Seiten eignen sich hervorragend zum Anzeigen einer „Under Construction“ -Seite, zur Ankündigung einer Produktversion 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 mit dem Cover-Seiten-Tarif arbeitest, bleibt deine Seite aktiv, solange dein Tarif aktiv ist. Es ist nicht mehr möglich, zum Cover-Seiten-Tarif zurückzukehren, nachdem du auf eine vollständige Website gewechselt hast.

Cover-Seiten sind in Version 7.1 nicht verfügbar.

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. Klicke im Hauptmenü auf Seiten, klicke auf + und wähle dann Cover-Seite aus. Weitere Hilfe findest du unter Hinzufügen von Seiten zu deiner Navigation.
  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.

Denken Sie 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 Menü Cover-Seite 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.

Verwende diese Layouts für eine private oder geschäftliche Seite, eine „Coming Soon“-Seite oder eine Newsletter-Anmeldeseite:

  • Karte
  • Titel
  • Flash
  • Gazette
  • Jacket
  • Mission
  • Enthüllen
  • Hervorheben
  • Trade

Verwende diese Layouts für ein Text-orientiertes persönliches Profil oder zum Hervorheben von starken Bildern:

  • Backstory
  • Focus
  • Monocle
  • Montage
  • Portrait
  • Prism
  • Silhouette
  • Snapshot
  • Vanguard
  • Vignette

Verwende diese Layouts, um Songs von Musikern oder Bands hervorzuheben oder eine Podcast-Folge zu teilen:

  • Broadcast
  • Eintrag
  • Sitzung
  • Produkte

Um Audio-Tracks hinzuzufügen, klicke im Cover-Seiten-Menü auf Audio und ziehe anschließend eine MP3-Datei in den Uploader Track hinzufügen. Um eine Wiedergabeliste zu erstellen, ziehe mehrere MP3s per Drag & Drop. Cover-Seiten unterstützen MP3-Dateien bis zu 20 MB pro Track.

Verwende diese Layouts, um einen Film, Trailer oder ein anderes Video zu teilen:

  • Debut
  • Premier
  • Projector
Tipp: Die meisten Layouts unterstützen auch Hintergrundvideos mit einer YouTube- oder Vimeo-URL.

Um ein Video einzubetten, klicke im Cover-Seiten-Menü auf Video. Folge dann unseren Schritten zum Hinzufügen eines Videos, indem du entweder den Direkt-Link oder den Einbettungscode verwendest.

Bei einem eingebetteten Video wird eine Wiedergabe-Schaltfläche auf der Seite angezeigt. Wenn der Besucher darauf klickt, öffnet sich das Video in der Lightbox.

Durch das Einbetten eines Videolinks werden die zugehörigen Artworks oder Vorschaubilder des Videos nicht automatisch hochgeladen. Um zugehörige Bilddaten zu deiner Seite hinzuzufügen, lade ein Bild im Medien-Menü hoch.

Verwende diese Layouts, um einen physischen Standort anzuzeigen, z. B. einen Shop, ein Studio oder einen Veranstaltungsort:

  • Flagship
  • Harbor

Um eine Karte hinzuzufügen, klicke im Cover-Seiten-Menü auf Kartenposition. Gib eine Adresse für den Pin ein und klicke dann auf +/- im Menü, um den Standardzoom zu ändern.

Wenn du auf den Pin klickst, wird der Standort in Google Maps geöffnet. Es ist nicht möglich, der Karte mehrere Pins hinzuzufügen.

Verwende diese Layouts, um eine Slideshow der neuesten Tweets aus einem Twitter-Feed oder einem Suchfilter anzuzeigen:

  • Echo
  • Status

Um einen Twitter-Feed zu verbinden, klicke im Cover-Seiten-Menü auf Twitter und dann auf Konto hinzufügen. Du kannst Tweets aus deinem Konto oder einen Feed von Tweets anderer Personen nach Hashtag, Erwähnungen oder einem beliebigen Begriff mit Twitter-Suche verwenden anzeigen.

Profi-Tipp: Die Twitter-Richtlinien zur Verwendung von Abfrageoperatoren bei deiner Suche findest du in der API-Dokumentation von Twitter.

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.

Denken Sie daran:

  • Branding und Textanzeige variieren je nach Layout
  • Es ist nicht möglich, gleichzeitig ein Logo und Branding-Text anzuzeigen.
  • Stelle sicher, dass dein Logo unseren Best Practices folgt, 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:

Denken Sie 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, indem Sie auf eine YouTube- oder Vimeo-URL verlinken. 
  • Es ist nicht möglich, in einer Cover-Seiten-Slideshow eine Navigationssteuerung hinzuzufügen oder die Übergangsgeschwindigkeit zu steuern.
  • Dank Responsive Design werden Bilder und Videos immer in gewissem Maße zugeschnitten, insbesondere auf Mobilgeräten. 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.

Denken Sie 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ählen Sie 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 „das, 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ählen Sie Formular oder Newsletter aus dem Menü Aktionstyp auswählen .
  2. Füge im Feld Button-Label ein Label für den Button hinzu.
  3. Klicken Sie 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. Es ist nicht möglich, Newsletter-Anmeldungen zu benennen.
  5. Für Formulare können Sie Platzhalterfelder löschen, indem Sie auf die Papierkorb-Symbole klicken und unten auf + klicken, um neue Felder hinzuzufügen. Wenn Sie möchten, dass Besucher ein Feld ausfüllen müssen, um das Formular absenden zu können, aktivieren Sie Pflichtfeld. Newsletter-Anmeldungen haben nur ein E-Mail-Adresse-Feld.
  6. Click the Storage tab to tell us where to send submissions. If you use an Email Campaigns mailing list as your storage option, subscribers will receive a confirmation email when they sign up. It's not possible to disable this.
  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 deiner 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.

Denken Sie 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 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

Verwenden Sie das Stil-Menü innerhalb Ihres Cover-Seiten-Menüs, um das Design anzupassen. Jede Cover-Seite hat individuelle Stil-Optionen, unabhängig von Ihrem Website-Template und anderen Cover-Seiten.

Denken Sie 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, werden sie auf einem Mobilgerät ein wenig anders aussehen. 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.
  • Medien (nicht verfügbar in Standort-Layouts) - Lege den Stil als Vollständig oder Raster fest und passe die Rasterdarstellung an. Aktiviere die Option Automatische Overlay-Farbe und Automatische Lade-Farbe, oder deaktiviere die Option 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.
  • Twitter (nur Twitter-Layouts) - Lege Schriftart, Stil und Farbe von Tweets (Fließtext) und Twitter-Handle-Text (Name undMeta) fest.

Hintergrundbilder

Die meisten Layouts umfassen Voll- und Rasterbildoptionen:

  • Wähle Vollständig, 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 haben, 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-Farbeverwendet. 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 noch HTML oder Skripte hinzufügen musst, verwende die Einstellungen der Cover-Seite, um die Option Code einfügen pro Seite zu nutzen. Weitere Unterstützung findest du in unseren FAQ zu benutzerdefiniertem Code.

Warum wird mein Twitter-Feed nicht aktualisiert?

Die Twitter-Feed-Integration wird alle fünf Minuten aktualisiert. Wenn du eine längere Verzögerung bemerkst, aktualisiere die Verbindung manuell:

  1. Klicke im Cover-Seiten-Menü auf Social Media-Symbole und dann auf Verbundene Konten.
  2. Klicke auf deinen Twitter-Account.
  3. Klicke auf Daten zurücksetzen. Es wird eine Meldung angezeigt, dass deine Daten zurückgesetzt werden und dein Feed in wenigen Minuten aktualisiert wird.
  4. Klicken Sie auf Speichern.

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.
War dieser Beitrag hilfreich?
382 von 595 fanden dies hilfreich