So richten Sie einen Heldenbereich ein

Erstellen und Bearbeiten eines Deckblatts für eine Website
So wählen Sie das richtige Hintergrundbild: Abmessungen, Format und Proportionen
Einrichten des Titels, des Untertitels und anderer Texte
So erstellen Sie ein schmales Deckblatt, das nicht die gesamte Höhe des ersten Bildschirms einnimmt
Wie Sie die Lesbarkeit erhöhen, indem Sie einen Farbfilter für ein Hintergrundbild erstellen, ein Deckblatt mit einer Volltonfarbe füllen und den Übergang zum nächsten Block gestalten
Einrichten eines Videos, das im Hintergrund abgespielt wird oder wenn Sie auf die Schaltfläche "Abspielen" klicken
Wie man eine Titelseite auf mobilen Geräten gut aussehen lässt
Einrichten eines Datenerfassungsformulars auf der Startseite
Hinzufügen von Countdown-Timern für eine bestimmte Uhrzeit und ein bestimmtes Datum
Konvertieren und Bearbeiten eines Deckblatts in Zero Block
Das Titelbild ist das erste, was die Leute auf Ihrer Seite sehen. Es führt in den Inhalt ein und fordert sie auf, sich dafür zu interessieren oder fasst zusammen, was Ihr Projekt einzigartig macht. Ein Cover enthält in der Regel ein Hintergrundbild: ein stilvolles Foto, ein fesselndes Video, eine Farbe, einen Farbverlauf oder eine Textur.

Im Folgenden finden Sie einige Tipps, die Ihnen helfen, effizienter mit Covern, Hintergründen und Videos zu arbeiten.

Sichtbarer Bereich

Im Gegensatz zu Magazinseiten gibt es bei Webseiten keinen festen sichtbaren Bereich. Jedes Gerät hat eine andere Bildschirmgröße und ein anderes Seitenverhältnis. Außerdem variiert der sichtbare Bereich von Browser zu Browser. Bei Browsern mit einer festen Lesezeichenleiste ist der sichtbare Bereich zum Beispiel kleiner. Das Titelbild wird so beschnitten, dass es auf dem Bildschirm randlos erscheint.

Hintergrundbild

Laden Sie im Inhaltsbereich des Blocks→ Hintergrundbild ein Cover-Hintergrundbild hoch.
Damit das Bild gut aussieht, sollten Sie die folgenden Tipps zu den besten Einstellungen für das Hintergrundbild beachten.
Beste Größe:
Dies sind die besten Parameter für hochgeladene Bilder:
Format: JPG
Breite: 1680px
Auflösung: 72 dpi
Farbmodell: RGB
Komprimierung: 10
Wenn Sie mit der Qualität des Bildes unzufrieden sind, bearbeiten Sie es vorab in einem Grafikprogramm unter Verwendung des folgenden Referenzartikels
Bevor Sie sich für ein Bild entscheiden, lesen Sie unseren Artikel "How to Create a Cover For a Website" auf Tilda Education. Er enthält Tipps für die Erstellung Ihrer eigenen Titelseite und Links zu hochwertigen Websites für Stockfotografie.

Textformatierung

Der Text ist der wichtigste Teil eines Deckblatts, da er die erste Nachricht ist, die ein Besucher der Website sieht. Titelseiten enthalten eine Überschrift, eine Unterüberschrift, eine Beschreibung und einen oberen Hinweis, um die Botschaft zu vermitteln und das Wichtigste hervorzuheben.

Sie können die Titelseiten auf zwei Arten mit Text füllen: über das Bedienfeld "Inhalt" des Blocks oder durch Klicken auf den Text während der Bearbeitung der Seite.
Bearbeiten von Text beim Klicken auf einen Block
Bearbeiten von Text im Inhaltsbereich eines Blocks
Sie können Text sowohl über das Bedienfeld oben als auch durch Ändern der Größe, Farbe oder anderer Parameter des Textes im Bedienfeld Einstellungen des Blocks → Typografie formatieren.
Formatieren von Text über das obere Bedienfeld
Formatierungsänderungen im Einstellungsfenster des Blocks
Um ein cooles Cover zu erstellen, lesen Sie den Artikel How to Create a Cover for a Website (Wie man ein Cover für eine Website erstellt ) mit praktischen Beispielen für Text- und Hintergrundbildkombinationen und den Leitfaden Creating a Unique Selling Proposition (USP) For a Website (Einzigartiges Verkaufsargument für eine Website), um Ihre Titelseite für Besucher in weniger als zehn Sekunden ansprechend zu gestalten.

Höhe der Abdeckung

Ein dünner Umschlag hat eine Höhe von 60% oder 70%, nicht 100%. Es hat eine eher formale Funktion, da sich die Aufmerksamkeit des Nutzers auf die Informationen richtet, die auf das Cover folgen.

Um ein solches Cover zu erstellen, gehen Sie zum Feld "Höhe" in den Blockeinstellungen. Sie können die Höhe in Pixeln (z.B. 400px) oder in Viewport-Höheneinheiten in Prozent (1vh ist 1% der sichtbaren Fläche) angeben. Wir empfehlen, die Höhe in vh anzugeben.

Farbe der Abdeckung: Filtereinstellungen

So ändern Sie den Farbton des Hintergrundbildes
Wir ändern den Farbton des Bildes, wenn wir den Umschlagtext gut lesbar machen wollen. Öffnen Sie dazu das Einstellungsfeld des Titelblocks und passen Sie die Filterfarbe an. Hier sehen Sie ein Titelbild, auf das eine Filterfarbe angewendet wurde. Manchmal ist es die Markenfarbe oder die Grundfarbe einer Website, die für die Tönung verwendet wird.
Filtereinstellungen im Inhaltsbereich des Blocks
Tilda Abdeckung des Help Centers: Der Filter wird allmählich durchgehend orange
Überblenden der Farbe in die Farbe des nächsten Blocks
Manchmal soll die Abdeckung sanft in den nächsten Block übergehen. Um diesen Effekt zu erzielen, sollte die Farbe des Endfilters auf 100% Deckkraft eingestellt werden. Die Farbe des Filters sollte dieselbe sein wie die Farbe des nächsten Blocks.
Wenn Sie die Abdeckung doppelt so hoch machen und diese beiden Einstellungen gleichzeitig anwenden, erzielen Sie den unten gezeigten Effekt:

Farbverlauf und Farbfüllung

In den Blockeinstellungen gibt es zwei Parameter für die Tonung: Deckkraft und Farbe. Setzen Sie die Deckkraft auf 100 % und wählen Sie eine Farbe aus - das wird die Farbe des Covers sein.
Wenn Sie verschiedene Farben auswählen, geht eine Farbe nahtlos in die andere über.
Video-Hülle
Sie können ein Video anstelle eines Bildes verwenden. Es gibt zwei Möglichkeiten, dies zu tun.
Wie man ein YouTube-Video hinzufügt
Laden Sie ein Video auf YouTube hoch oder suchen Sie dort ein vorhandenes Video. Gehen Sie dann zum Inhaltsbereich des Titelblocks und fügen Sie den Videolink in das entsprechende Feld ein. Auf diese Weise können Sie ein Video-Cover erstellen.
Unser Unternehmen
Experten auf diesem Gebiet
Die Art Basel veranstaltet jährlich in Basel, Miami Beach und Hongkong Kunstmessen für moderne und zeitgenössische Kunst von hoher Qualität.
Wie man WebM- und MPEG-4-Videos hinzufügt
Sie können Online-Konverter verwenden, um WebM- und MPEG-4-Videos zu erstellen und sie auf Ihrem Server oder auf der Website des Konvertierungsdienstes zu hosten. gfycat.com beispielsweise ermöglicht sowohl die Konvertierung als auch das Hosting.

Öffnen Sie das Einstellungsfeld des Cover-Blocks und fügen Sie die Videolinks in die entsprechenden Felder ein.
Warum beide Formate verwenden?
Die Browser verwenden unterschiedliche Formate, so dass es kein einheitliches Format gibt. Wenn ein Nutzer auf Ihre Website kommt, soll er ein Video sehen, das sein Browser abspielen kann. Andernfalls wird das Cover leer angezeigt.
Wichtiger Hinweis: Derzeit ist es nicht möglich, Ihre Videodatei auf Tilda hochzuladen, aber Sie können Dienste von Drittanbietern nutzen, die einen direkten Link zur Videodatei bereitstellen.
Einige der beliebten Cloud-Dienste bieten auch einen direkten Link zu einer Datei. Um zum Beispiel einen direkten Link zu einer Videodatei auf Dropbox zu erhalten, müssen Sie den Link dropbox.com durch dl.dropboxusercontent.com ersetzen. Sie können die Datei auch auf Ihre Hosting-Dienste wie Selectel und andere hochladen.

Titelseite für die mobile Ansicht
Bildschirme haben ein breites Spektrum an Seitenverhältnissen, und das Cover kann auf verschiedenen Geräten unterschiedlich aussehen. Während gängige Seitenverhältnisse das Titelbild nicht dramatisch verändern, können mobile Geräte es bis zur Unkenntlichkeit verändern. Bitte nehmen Sie sich die Zeit und lernen Sie anhand dieses umfassenden Leitfadens, wie Sie ein mobilfreundliches Cover (oder einen anderen Block) erstellen können.
Warum Cover-Videos auf mobilen Geräten nicht abgespielt werden

Aufgrund der Besonderheiten des mobilen Betriebssystems werden Video-Cover auf mobilen Geräten nicht abgespielt. Mobile OS deaktivieren Autoplay. Wenn Sie ein Autoplay-Videocover erstellt haben, vergessen Sie nicht, im Inhaltsbereich des Cover-Blocks ein Bild hinzuzufügen. Das Bild wird angezeigt, wenn das Video nicht abgespielt werden kann, d. h. wenn Besucher von Smartphones oder Tablets auf Ihre Website zugreifen.
Formular auf einem Deckblatt
Ein Dateneingabeformular finden Sie auf den folgenden Deckblättern: CR26 (Titelblatt mit einem Eingabefeld), CR26AN (Titelblatt mit mehreren Eingaben), CR32 (Titelblatt mit einem rechtsbündigen Formular), CR34 (Titelblatt mit einem Countdown und einem Abonnementformular), CR36 (Titelblatt mit einem Bild oder YouTube-Video und einem zweispaltigen Formular)

Sie können eine Vorschau des Formulars sehen, indem Sie die Blockbibliothek → Titelblatt aufrufen und Ihre bevorzugte Option auswählen.
Formulare auf Deckblättern erfüllen dieselbe Funktion und können auf dieselbe Weise angepasst werden wie normale Formulare. Um Ihr Formular anzupassen, lesen Sie den Artikel Wie man Datenerfassungsformulare einrichtet.
Hinzufügen eines Countdown-Timers
Die Deckblätter der Blöcke CR34 und CR35 verfügen über einen Countdown-Timer bis zu einem bestimmten Zeitpunkt in der Zukunft. Diese Funktion ist besonders praktisch, wenn Sie eine Seite für eine Werbeaktion oder ein Ereignis erstellen.

Im Inhaltsbereich dieser Blöcke können Sie das Datum, die Uhrzeit und die Zeitzone für den Beginn der Veranstaltung festlegen.
Wenn das Datum richtig eingestellt ist, erscheint auf dem Deckblatt ein Timer.
Umwandlung eines Deckblatts in Zero Block
Blöcke mit Deckblättern sind bewährte Beispiele für gutes Design, die sich automatisch an alle Geräte anpassen. Aber manchmal müssen Sie ein Element hinzufügen oder eine eigene Titelseite erstellen. Dies kann mit dem Editor von Tilda' Zero Block geschehen.
Viele Deckblöcke können zur weiteren Bearbeitung in Zero Block umgewandelt werden. Gehen Sie dazu zu den Blockeinstellungen, scrollen Sie nach unten und klicken Sie auf die Schaltfläche "In Zero Block konvertieren".
Anschließend wird das Cover in Zero Block konvertiert. Das Format wird korrekt angepasst. Wenn Sie bereits Änderungen vorgenommen haben, werden diese nicht gespeichert, seien Sie also vorsichtig bei der Konvertierung des Covers.
Beispiel: Wie man ein Cover beschneidet
Vertikales Bild
Quadratisches Bild
Schmales horizontales Bild
Horizontales Bild, Seitenverhältnis 16:9
Hergestellt am
Tilda