So richten Sie einen Heldenbereich ein
Erstellen und Bearbeiten eines Website-Deckblatts
So wählen Sie das richtige Hintergrundbild aus: Abmessungen, Format und Proportionen
Richten Sie Ihren Titel, Untertitel und anderen Text ein
So erstellen Sie ein schmales Deckblatt, das nicht die volle 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 zum nächsten Block übergehen
Einrichten eines Videos, das im Hintergrund abgespielt wird oder wenn Sie auf die Schaltfläche „Wiedergabe“ klicken
Wie man eine Titelseite auf Mobilgeräten gut aussehen lässt
Einrichten eines Datenerfassungsformulars auf der Startbildschirmseite
Fügen Sie Countdown-Timer zu einer bestimmten Zeit und einem bestimmten Datum hinzu
So konvertieren und bearbeiten Sie ein Deckblatt in Zero Block
Das Cover ist das erste, was die Leute auf Ihrer Seite sehen. Es stellt den Inhalt vor und fordert sie dazu auf oder fasst zusammen, was Ihr Projekt einzigartig macht. Ein Cover enthält normalerweise ein Hintergrundbild: ein stilvolles Foto, ein überzeugendes Video, eine Farbe, einen Farbverlauf oder eine Textur.
Hier sind ein paar Tipps, die Ihnen helfen, effizienter mit Covern, Hintergründen und Videos zu arbeiten.
Hier sind ein paar Tipps, die Ihnen helfen, effizienter mit Covern, Hintergründen und Videos zu arbeiten.
Sichtbarer Bereich
Im Gegensatz zu Zeitschriftenseiten haben Website-Seiten keinen festen sichtbaren Bereich. Jedes Gerät hat eine andere Bildschirmgröße und ein anderes Seitenverhältnis. Darüber hinaus variieren die sichtbaren Bereiche von Browser zu Browser. Beispielsweise bieten Browser mit einer festen Lesezeichenleiste einen kleineren sichtbaren Bereich. Das Titelbild wird so zugeschnitten, dass es auf dem Bildschirm randlos erscheint.
Hintergrundbild
Laden Sie ein Hintergrundbild für das Titelbild in das Bedienfeld "Inhalt" des Blocks hoch→ Hintergrundbild.
Damit das Bild großartig aussieht, befolgen Sie diese Tipps zu den besten Einstellungen für das Hintergrundbild.
Beste Größe:
Dies sind die besten Parameter für hochgeladene Bilder:
Format: JPG
Breite: 1680px
Auflösung: 72 dpi
Farbmodell: RGB
Kompression: 10
Dies sind die besten Parameter für hochgeladene Bilder:
Format: JPG
Breite: 1680px
Auflösung: 72 dpi
Farbmodell: RGB
Kompression: 10
Wenn Sie mit der Qualität des Bildes unzufrieden sind, bearbeiten Sie es vorab in einem Grafikeditor mithilfe des Referenzartikels unten
Bevor Sie sich für ein Bild entscheiden, lesen Sie unseren Artikel "So erstellen Sie ein Cover für eine Website" auf Tilda Education. Es enthält Tipps zum Erstellen Ihres eigenen Deckblatts und Links zu hochwertigen Stockfotografie-Websites.
Textformatierung
Text ist der wichtigste Teil eines jeden Deckblatts, da es die erste Nachricht ist, die ein Website-Besucher sieht. Titelseiten enthalten eine Überschrift, eine Unterüberschrift, eine Beschreibung und eine obere Anmerkung, um die Botschaft zu vermitteln und das Wichtige hervorzuheben.
Sie können die Cover auf zwei Arten mit Text füllen: über das Inhaltsfenster des Blocks oder durch Klicken auf den Text während der Bearbeitung der Seite.
Sie können die Cover auf zwei Arten mit Text füllen: über das Inhaltsfenster 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 Abschnitt Inhalt eines Blocks
Sie können Text sowohl über das Bedienfeld oben formatieren als auch durch Ändern der Größe, Farbe oder anderer Parameter des Texts im Bedienfeld "Einstellungen" des Blocks → Typografie.
Formatieren von Text über das obere Bedienfeld
Formatierungsänderungen im Bereich Einstellungen des Blocks
Um ein cooles Cover zu erstellen, lesen Sie den Artikel So erstellen Sie ein Cover für eine Website mit praktischen Beispielen für Text- und Hintergrundbildkombinationen und den Leitfaden Erstellen eines Alleinstellungsmerkmals (USP) für eine Website, um Ihr Cover für Besucher ansprechend zu gestalten weniger als zehn Sekunden.
Abdeckungshöhe
Eine dünne Abdeckung hat eine Höhe von 60 % oder 70 %, nicht 100 %. Es erfüllt eine eher formelle Funktion, da sich die Aufmerksamkeit des Benutzers auf die Informationen richtet, die auf das Cover folgen.
Um eine solche Abdeckung zu erstellen, gehen Sie in den Blockeinstellungen auf das Feld „Höhe“ . Sie können die Höhe in Pixel (z. B. 400 Pixel) oder als Maßeinheit für die Höhe des Ansichtsfensters in Prozent festlegen (1vh ist 1 % des sichtbaren Bereichs). Wir empfehlen die Höhe in vh einzustellen.
Um eine solche Abdeckung zu erstellen, gehen Sie in den Blockeinstellungen auf das Feld „Höhe“ . Sie können die Höhe in Pixel (z. B. 400 Pixel) oder als Maßeinheit für die Höhe des Ansichtsfensters in Prozent festlegen (1vh ist 1 % des sichtbaren Bereichs). Wir empfehlen die Höhe in vh einzustellen.
Coverfarbe: Filtereinstellungen
So ändern Sie den Ton des Hintergrundbilds
Wir ändern den Ton des Bildes, wenn wir den Covertext leicht lesbar machen wollen. Öffnen Sie dazu die Einstellungsleiste des Abdeckungsblocks und passen Sie die Filterfarbe an. Hier sehen Sie ein Titelbild, auf das eine Filterfarbe angewendet wurde. Manchmal ist es die Markenfarbe oder die Primärfarbe einer Website, die für die Tönung verwendet wird.
Wir ändern den Ton des Bildes, wenn wir den Covertext leicht lesbar machen wollen. Öffnen Sie dazu die Einstellungsleiste des Abdeckungsblocks und passen Sie die Filterfarbe an. Hier sehen Sie ein Titelbild, auf das eine Filterfarbe angewendet wurde. Manchmal ist es die Markenfarbe oder die Primärfarbe einer Website, die für die Tönung verwendet wird.
Filtereinstellungen im Inhaltsbereich des Blocks
Tilda Hilfe-Center Abdeckung: Der Filter färbt sich allmählich einfarbig orange
So mischen Sie die Farbe in die Farbe des nächsten Blocks
Manchmal sollte 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 mit der Farbe des nächsten Blocks übereinstimmen.
Manchmal sollte 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 mit der Farbe des nächsten Blocks übereinstimmen.
Wenn Sie die Abdeckung doppelt so hoch machen, während Sie diese beiden Einstellungen gleichzeitig anwenden, können Sie den unten gezeigten Effekt erzielen:
Verlauf und Farbfüllung
Es gibt zwei Toning-Parameter in den Blockeinstellungen: Deckkraft und Farbe. Stellen Sie die Deckkraft auf 100 % ein und wählen Sie eine Farbe aus – dies ist die Farbe des Covers.
Wenn Sie verschiedene Farben auswählen, wird eine nahtlos in die andere übergehen.
Video-Cover
Sie können ein Video anstelle eines Bildes verwenden. Es gibt zwei Möglichkeiten, dies zu tun.
So fügen Sie ein YouTube-Video hinzu
Laden Sie ein Video auf YouTube hoch oder suchen Sie dort nach einem vorhandenen. Gehen Sie dann zum Inhaltsbereich des Coverblocks und fügen Sie den Videolink in das entsprechende Feld ein. Auf diese Weise können Sie ein Video-Cover erstellen.
Unser Unternehmen
Experten in der Kunst
Die Art Basel veranstaltet Kunstmessen für hochwertige moderne und zeitgenössische Kunst und findet jährlich in Basel, Miami Beach und Hongkong statt
So fügen Sie WebM- und MPEG-4-Videos hinzu
Sie können Online-Konverter verwenden, um WebM- und MPEG-4-Videos zu erstellen und sie auf Ihrem Server oder der Website des Konvertierungsdienstes zu hosten. Zum Beispiel ermöglicht gfycat.com sowohl Konvertierung als auch Hosting.
Öffnen Sie das Einstellungsfenster des Deckblocks und fügen Sie die Videolinks zu den entsprechenden Feldern hinzu.
Öffnen Sie das Einstellungsfenster des Deckblocks und fügen Sie die Videolinks zu den entsprechenden Feldern hinzu.
Warum beide Formate verwenden?
Browser verwenden unterschiedliche Formate, daher gibt es kein einheitliches Format. Wenn ein Benutzer Ihre Website besucht, sieht er ein Video, das sein Browser abspielen kann. Andernfalls erscheint die Abdeckung leer.
Browser verwenden unterschiedliche Formate, daher gibt es kein einheitliches Format. Wenn ein Benutzer Ihre Website besucht, sieht er ein Video, das sein Browser abspielen kann. Andernfalls erscheint die Abdeckung leer.
Wichtiger Punkt: Derzeit ist es nicht möglich, Ihre Videodatei auf Tilda hochzuladen, aber Sie können Dienste von Drittanbietern verwenden, die einen direkten Link zur Videodatei bereitstellen.
Einige der gängigen Cloud-Dienste bieten auch einen direkten Link zu einer Datei. Wenn Sie beispielsweise einen direkten Link zu einer Videodatei in Dropbox erhalten möchten, müssen Sie den dropbox.com Link durch dl.dropboxusercontent.com ersetzen. Sie können die Datei auch auf Ihre Hosting-Dienste wie Selectel und andere hochladen.
Einige der gängigen Cloud-Dienste bieten auch einen direkten Link zu einer Datei. Wenn Sie beispielsweise einen direkten Link zu einer Videodatei in Dropbox erhalten möchten, müssen Sie den dropbox.com Link durch dl.dropboxusercontent.com ersetzen. Sie können die Datei auch auf Ihre Hosting-Dienste wie Selectel und andere hochladen.
Titelseite für mobile Ansicht
Bildschirme haben eine Vielzahl von Seitenverhältnissen und das Cover kann auf verschiedenen Geräten unterschiedlich aussehen. Während gängige Seitenverhältnisse keine dramatischen Änderungen am Titelbild bewirken, können mobile Geräte es bis zur Unkenntlichkeit verändern. Bitte nehmen Sie sich die Zeit, um zu lernen, wie Sie mit dieser umfassenden Anleitung ein mobilfreundliches Cover (oder einen anderen Block) erstellen.
Warum Cover-Videos nicht auf Mobilgeräten abgespielt werden
Aufgrund der Besonderheiten des mobilen Betriebssystems werden Videocover nicht auf mobilen Geräten abgespielt. Mobile Betriebssysteme deaktivieren die automatische Wiedergabe. Wenn Sie ein Videocover für die automatische Wiedergabe erstellt haben, vergessen Sie nicht, ein Bild im Inhaltsbedienfeld des Coverblocks hinzuzufügen. Das Bild erscheint, wenn das Video nicht abgespielt werden kann, d.h. wenn Besucher von Smartphones oder Tablets auf Ihre Website zugreifen.
Aufgrund der Besonderheiten des mobilen Betriebssystems werden Videocover nicht auf mobilen Geräten abgespielt. Mobile Betriebssysteme deaktivieren die automatische Wiedergabe. Wenn Sie ein Videocover für die automatische Wiedergabe erstellt haben, vergessen Sie nicht, ein Bild im Inhaltsbedienfeld des Coverblocks hinzuzufügen. Das Bild erscheint, wenn das Video nicht abgespielt werden kann, d.h. wenn Besucher von Smartphones oder Tablets auf Ihre Website zugreifen.
Formular auf einem Deckblatt
Ein Datenerfassungsformular finden Sie auf folgenden Umschlagseiten: CR26 (Cover mit Eingabefeld), CR26AN (Cover mit mehreren Eingaben), CR32 (Cover mit rechtsbündigem Formular), CR34 (Cover mit Countdown- und Anmeldeformular ), CR36 (Cover mit einem Bild oder YouTube-Video und Formular in zwei Spalten)
Sie können eine Vorschau des Formulars anzeigen, indem Sie die Blockbibliothek → Cover aufrufen und Ihre bevorzugte Option auswählen.
Sie können eine Vorschau des Formulars anzeigen, indem Sie die Blockbibliothek → Cover aufrufen und Ihre bevorzugte Option auswählen.
Formulare auf Deckblättern erfüllen die gleiche Funktion und können auf die gleiche Weise wie normale Formulare angepasst werden. Informationen zum Anpassen des Formulars finden Sie im Artikel Einrichten von Datenerfassungsformularen.
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 Event erstellen.
Im Inhaltsbereich dieser Blöcke können Sie das Datum, die Uhrzeit und die Zeitzone der Startzeit des Ereignisses festlegen.
Im Inhaltsbereich dieser Blöcke können Sie das Datum, die Uhrzeit und die Zeitzone der Startzeit des Ereignisses festlegen.
Wenn das Datum richtig eingestellt ist, erscheint auf dem Deckblatt ein Timer.
Konvertieren eines Deckblatts in Zero Block
Blöcke mit Abdeckungen sind bewährte Beispiele für gutes Design, das sich automatisch an alle Geräte anpasst. Manchmal müssen Sie jedoch ein Element hinzufügen oder ein benutzerdefiniertes Deckblatt erstellen. Dies kann mit dem Zero Block Editor von Tilda erfolgen.
Viele Cover-Blöcke können zur weiteren Bearbeitung in Zero Block konvertiert werden. Gehen Sie dazu in die Blockeinstellungen, scrollen Sie nach unten und klicken Sie auf die Schaltfläche "In Zero Block konvertieren".
Danach wird das Cover in Zero Block umgewandelt. Das Format wird korrekt angepasst. Wenn Sie Ihre Änderungen bereits vorgenommen haben, werden diese nicht gespeichert, seien Sie also vorsichtig beim Umrüsten des Covers.
Beispiel: Wie man ein Cover zuschneidet
Vertikales Bild
Quadratisches Bild
Schmales horizontales Bild
Horizontales Bild, Seitenverhältnis 16:9
