Ein vollständiger Leitfaden für Zero Block

Steuern Sie jedes Element. Sie können jedes Element des Blocks steuern, einschließlich Text, Bild, Schaltfläche oder Hintergrund. Außerdem können Sie deren Position, Größe und Bildschirmauflösung festlegen, auf der sie angezeigt werden sollen.

Ebenen. Dies ist ein praktisches Werkzeug, um mit Überlagerungs- und Deckkrafttechniken Tiefe zu erzeugen.

Bildschirmränder und Rasterausrichtung. Jedes Element der Website kann relativ zum Layoutraster oder zu den Rändern eines Bildschirms positioniert werden.

Benutzerdefinierte Bildschirmauflösungen. Definieren Sie benutzerdefinierte Bildschirmauflösungswerte, damit Ihr Layout perfekt auf ein bestimmtes Gerät passt. Breakpoints können für eine vollständige responsive Steuerung zwischen 320px und 1920px festgelegt werden.

Erweiterte Typografie. Designer haben volle kreative Freiheit, um einzigartige typografische Lösungen zu erstellen.

Hilfslinien. Verwenden Sie visuelle Hilfslinien, um Ihr Layout präzise zu steuern. Sie können festlegen, dass sie nur bei ausgewählten Bildschirmauflösungen angezeigt werden, sodass Sie keine Zeit damit verschwenden, sie auszublenden, wenn sie nicht benötigt werden.

Zoom der Zeichenfläche von 20 bis 300 %. Dieser Bereich erleichtert die Arbeit mit Elementen auf der Zeichenfläche. Vergrößern Sie die Ansicht, um kleine Details anzupassen, oder verkleinern Sie sie, um die gesamte Zeichenfläche zu sehen – beispielsweise, wenn Sie mit vielen Elementen gleichzeitig arbeiten.

Flexible Bildpositionierung in Formen. Passen Sie manuell an, welcher Teil eines Bildes innerhalb einer Form sichtbar ist. Dadurch haben Sie mehr Kontrolle über das Blocklayout, wenn die Standardpositionierungsoptionen nicht zu Ihrem Design passen.

Gruppen als Objekte. Kombinieren Sie mehrere Elemente zu Gruppen, um das Einrichten von Animationen, das Bearbeiten und Drehen von Elementen und vieles mehr zu vereinfachen.

Deckkraft. Legen Sie die Deckkraft für jedes Element und die darunter liegenden Schatteneffektefest . Passen Sie alle Parameter, wie z. B. die Komposition oder die Sichtbarkeit von Elementen, für jede Bildschirmauflösung an.

Platten. Fügen Sie farbige Platten, Inhaltskarten oder Bilder innerhalb von Formen ein.

Video. Fügen Sie YouTube- oder Vimeo-Videos zu Ihrer Website hinzu. In Zero Block können Sie deren Größe und Position auf der Seite anpassen.

HTML hinzufügen. Fügen Sie beliebige Elemente zu Zero Block hinzu, Zero Block HTML-Code einfügen, und passen Sie die Position dieser Elemente auf jedem Bildschirm an.

Tooltip. Verwenden Sie dieses interaktive Tool, um kurze Popup-Hinweise hinzuzufügen. Sie können die Farbe, den Schatten und die Größe anpassen, ein Symbol innerhalb eines Kreises oder ein Bild über dem Text auswählen und hochladen.

Feedback-Formular. Fügen Sie Eingabefelder und Datenerfassungsdienste hinzu. Legen Sie den Stil für das Formular fest und animieren Sie es.

Vektoreditor. Erstellen und bearbeitenSie Vektorbilder direkt in Zero Block. Mit dem Vektoreditor von Tilda können Sie alle Arten von Formen erstellen und importierte SVG-Dateien bearbeiten.

Animation des Erscheinungsbilds von Elementen. Animieren Sie die Art und Weise, wie Webelemente auf einer Seite erscheinen, z. B. Einblenden, Vergrößern oder Verschieben von oben, unten, links oder rechts auf dem Bildschirm.

Schritt-für-Schritt-Animation. Verwenden Sie Schritt-für-Schritt-Animationen, um Ihre Seite ansprechender und dynamischer zu gestalten. Sie können Animationen durch Klicken, Scrollen, Bewegen des Mauszeigers oder beim Erscheinen eines Elements auf dem Bildschirm auslösen. Sie können auch die Beschleunigung für jeden Schritt anpassen, um die Geschmeidigkeit zu steuern. Wählen Sie die richtige Einstellung und optimieren Sie die Beschleunigung mit Bézier-Kurven.

Parallax-Scrolling. Verwenden Sie einen Parallax-Scrolling-Effekt oder erstellen Sie einen Parallax-Effekt bei Mausbewegung.

Feste Elemente beim Scrollen. Legen Sie den Abstand fest, über den das Element fixiert bleiben soll, sowie dessen Position.
Wenden Sie beim Scrollen klebrige Elemente an. Sie können den Abstand festlegen, über den das Element fixiert bleibt, sowie dessen Position. Sie können auch den gesamten Zero Block machen. So können Sie beispielsweise ein festes Menü mit einem nicht standardmäßigen Layout der Elemente erstellen.

Auto-Layouts. Vereinfachen Sie Ihren Arbeitsablauf, indem Sie die Ausrichtung von Elementen innerhalb einer Gruppe automatisieren. Mit Auto-Layouts können Sie Designs schneller erstellen, Inhalte einfach austauschen und Layouts automatisch an verschiedene Geräte anpassen.

Wenn Sie Layouts in einem Grafikeditor entwerfen, bevor Sie etwas anderes tun, verwenden Sie Zero Block sie unverändert auf Ihre Website zu übertragen. Dazu Zero Block ein 12-Spalten-Raster und anpassbare Parameter für jedes Element. Dazu gehören Koordinaten, Größe, Positionierung in Bezug auf das Raster oder den Bildschirm, Opazitätsparameter und Schatten. Verwenden Sie diese Werkzeuge, um Ihr Layout in Zero Block nachzubilden.

Zero Block Die BenutzeroberflächeZero Block ähnelt der eines Grafikeditors. Fügen Sie einfach die erforderlichen Elemente hinzu und weisen Sie ihnen die entsprechenden Koordinaten zu. In Zero Block ist das ganz einfach, insbesondere wenn Sie damit bereits Erfahrung haben. Mit Zero Block Ihre Idee schnell aus einem Grafikeditor auf Ihre Website übertragen, ohne Code schreiben zu müssen.

Wenn Sie eine Webseite oder eine Landingpage erstellen und den richtigen Block in der Tilda-Bibliothek nicht finden können, ist der Zero Block . Hier sind einige Beispiele.

Websites, die mit Tilda erstellt wurden, bestehen oft aus Blöcken, so dass die Besucher durch die einzelnen Abschnitte scrollen können. Dies ist ein Vereinheitlichungstrend im Webdesign, bei dem der Inhalt vor dem Design kommt.

Wenn Sie die Art und Weise ändern möchten, wie Besucher die Informationen auf Ihrer Website lesen, ist Zero Block ein großartiges Werkzeug dafür.

Zero Block hervorragend, um Elemente mit ungleichmäßigen Kanten in einer einzigen Komposition zusammenzufassen, indem alle Abstände optisch ähnlich gestaltet werden.

In Zero Block ist die Verwendung von Ebenen ein Kinderspiel. Sie können Bilder, Texte über einem Panel und Schaltflächen über Bildern ganz einfach überlagern. Erzeugen Sie zusätzliche Effekte, indem Sie mit deren Positionierung experimentieren.

Um die Dinge bei mehreren Elementen einfach zu halten, verwenden Sie Ebenen. Mit diesem Werkzeug können Sie jedes Element verwalten – seine Position ändern, es ausblenden oder sperren.

Um das Ebenenbedienfeld zu öffnen, verwenden Sie diese Tastenkombinationen: ⌘+ L oder Strg + L (für Macs) oder Strg + L (für Windows).

Zero Block Benutzer benutzerdefinierte Kompositionen aus mehreren Elementen wie Texten, Bildern, Linien, Feldern und Schaltflächen erstellen. Sie können auch mehrere Elemente zu einem einzigen Objekt kombinieren. Sie können beispielsweise eine Artikelkarte entwerfen und einen Link hinzufügen. Diese Art von Elementgruppe kann animiert, mit Rändern versehen, mit einem Schatten versehen und mit anderen Einstellungen angepasst werden. Um eine Objektgruppe zu erstellen, wählen Sie mehrere Elemente aus, gruppieren Sie sie und wählen Sie in den Gruppeneinstellungen „Objekt“ aus.

Diese Landingpage präsentiert die Funktionen von Tilda, die besonders für Unternehmen nützlich sind, und besteht aus Blöcken, die mehrere Elemente enthalten.

Der Hover-Effekt verändert das Aussehen eines Elements, wenn der Benutzer mit der Maus darüber fährt. Sie können ihn als zusätzliches Designelement oder als funktionales Element eines Artikels oder einer Infografik verwenden.

Ideal in Situationen, in denen es unmöglich ist, einen vorgefertigten Block mithilfe seiner Einstellungen so zu ändern, wie Sie es sich vorstellen.

Wenn Sie einen vorgefertigten Tilda-Block ausgewählt haben und einige Änderungen daran vornehmen möchten, verwenden Sie die Option „In Zero Block konvertieren ”. Dadurch können Sie ihn so bearbeiten, als wäre es einZero Block. Diese Option ist für die meisten Tilda-Blöcke verfügbar.

Lassen Sie uns diesen Vorgang in einzelne Schritte unterteilen. Ändern wir beispielsweise den Preisblock, indem wir die Symbole außerhalb der Informationsfelder positionieren.

Beispiel für einen in Zero Block umgewandelten Block:

Die vorgefertigten Blöcke von Tilda bieten zahlreiche Einstellungen. Fügen Sie die am besten geeignete aus der Bibliothek hinzu. Öffnen Sie das Einstellungsfenster und prüfen Sie, ob Sie die Vorlage an Ihre Anforderungen anpassen können. Möglicherweise benötigen Sie Zero Block nicht.

Die folgenden Beispiele wurden mit den vorgefertigten Blöcken von Tilda erstellt.

Bei Tilda können Sie die Abstände für Desktop-Computer und Mobilgeräte separat festlegen.

Bei Tilda sind vorgefertigte Blöcke in einem 12-spaltigen Raster angeordnet. Sie können die Einrückungen auf eine beliebige Anzahl von Spalten festlegen. Wenn Sie Ihren Block in Zero Block Berücksichtigung des Rasters entworfen haben, können Sie nicht die gleichen Einrückungen für vorgefertigte Blöcke festlegen (Sie müssen sie in Zero Block konvertieren).

Angenommen, Sie wechseln in Ihrem Website-Layout zwischen vorgefertigten Blöcken und Zero Blocks. Während Sie Elemente in Zero Block an beliebiger Stelle platzieren können, ist dies in vorgefertigten Blöcken nicht möglich. Beachten Sie daher, dass die vorgefertigten Blöcke nur auf dem Raster positioniert werden können.

Wir empfehlen Ihnen, bei der Gestaltung Ihrer Website in Zero Block ein Raster zu verwenden. Positionieren Sie die Hauptelemente relativ zum Raster. Auf diese Weise lässt sich Ihr Design leicht mit allen anderen Tilda-Blöcken kombinieren.

Wählen Sie ein bevorzugtes Schnittstellenthema für den Editor aus – Standard, Hell oder Dunkel. Sie können auch die Größe der Schnittstelle für jedes dieser Themen reduzieren, damit sie weniger Platz auf dem Bildschirm einnimmt. Wo aktivieren: Zero Block klicken Sie auf „Tab“ → Zero Block → Thema.

In Zero Block können Sie Elemente hinzufügen, die komplexer sind als Texte, Bilder, Formen und Schaltflächen.

Fügen Sie Videos von YouTube, Vimeo, Kinescope, iFrame hinzu und richten Sie sie ein oder laden Sie eine MP4- oder WebM-Datei hoch. Ändern Sie die Größe und das Seitenverhältnis des Videos, seine Deckkraft, erstellen Sie Schatten und wenden Sie Animationen an.

In den Videoeinstellungen können Sie die automatische Wiedergabe einstellen, die Wiederholung aktivieren und deaktivieren, die Start- und Endzeit für jedes Video festlegen und Ihr eigenes Cover hochladen.

Fügen Sie beliebige Elemente durch Einbetten von HTML hinzu. Zum Beispiel interaktive Elemente, Online-Aufzeichnungen, Musikplayer, Kalender, Rechner und Social-Media-Beiträge. Sie können die Position dieser Elemente auf jedem Bildschirm anpassen.

Ein Tooltip ist eine interaktive Eingabeaufforderung, die angezeigt wird, wenn der Mauszeiger über einem Element einer Website positioniert wird. Dies kann nützlich sein, wenn Sie ein komplexes Thema beschreiben und dessen Bestandteile in einem Foto erläutern möchten. Wenn Sie beispielsweise Ferienhäuser in einer Wohnsiedlung verkaufen, können Sie eine Karte zeichnen und jedes Gebäude auf dieser Karte markieren.

Der Tooltip verfügt über mehrere praktische Einstellungen: Passen Sie Farbe, Schatten und Größe an, laden Sie ein Symbol hoch, das in einem Kreis angezeigt wird, oder laden Sie ein Bild hoch, das beim Darüberfahren mit der Maus angezeigt wird.

Nachdem Sie die Elemente/Tooltips auf der Seite platziert haben, vergessen Sie nicht, die Position jedes Tooltips für alle Auflösungen zu überprüfen. Andernfalls besteht die Gefahr, dass die Eingabeaufforderung oben, unten oder an den Rändern des Blocks abgeschnitten wird.

Fügen Sie ein horizontales oder vertikales Online-Formular zu Zero Block hinzu. Passen Sie anschließend alle Einstellungen an, z. B. Eingabefelder oder Datenerfassungsdienste, Erfolgsmeldungen und Fehlermeldungen, Formularstile oder Animationen.

In Zero Block können Sie Vektorelemente erstellen und bearbeiten. Zum Beispiel ungewöhnliche Formen, Symbole oder kleine gezeichnete Elemente wie Unterstreichungen oder Pfeile. Der Vektor-Editor eignet sich auch zum Verfeinern importierter SVG-Elemente direkt in Tilda.

Jedem Element können die Koordinaten relativ zu den vier Seiten eines Bildschirms oder eines Rasters, die Deckkraft und der Schatten zugewiesen werden. Sie können Elemente auch drehen oder ihnen einen Link zuweisen.

Lineale erleichtern die Arbeit mit Layoutelementen. Dabei handelt es sich um horizontale Linien am oberen Rand und vertikale Linien am linken Rand des Bildschirms, von denen aus Sie Hilfslinien „ziehen” können. Lineale und Hilfslinien helfen Ihnen dabei, die gewünschte Anordnung der Elemente im Layout festzulegen, Einzüge und Ausrichtung zu überwachen und konstante Größen und Proportionen der Elemente beizubehalten. Um Lineale zu aktivieren, gehen Sie zu Einstellungen in Zero Block Lineale anzeigen.

Jedem Element kann eine Größe in Pixeln oder ein Prozentsatz der Bildschirmgröße zugewiesen werden. Wenn Sie beispielsweise ein Element erstellen möchten, das unabhängig von seiner Größe die Hälfte des Bildschirms einnimmt, legen Sie dessen Breite und Höhe in Prozent statt in Pixeln fest.

Entdecken Sie viele Überraschungen mit Zero Block. Hier finden Sie eine Liste der Effekte, die Sie auf Ihrer Website verwenden können.

Verwenden Sie eine Schaltfläche für Hover-Effekte in Zero Block. Sie können die Größe beliebig festlegen und die Schaltfläche durch Anpassen der Einstellungen sogar rund gestalten. Möchten Sie, dass sie nur beim Hover sichtbar ist? Dann machen Sie sie transparent und wählen Sie für den Hover eine Deckkraft von 30 % und eine beliebige Farbe.

Positionieren Sie die Schaltfläche über den Elementen, die Sie mit dem Hover-Effekt abdecken möchten. Dies können Bilder oder Text sein. Weisen Sie der Schaltfläche bei Bedarf einen URL-Link zu.

Um ein Element beim Scrollen zu fixieren, ändern Sie die Bildeinstellungen auf „Verhalten – Fixiert“. Diese Funktion ist für Hintergrundbilder und Bilder innerhalb einer Form verfügbar. Wenn Sie dies auf ein Bild innerhalb eines Feldes anwenden, wird das Bild über den gesamten Bildschirm gestreckt. Es ist jedoch nur innerhalb der Form sichtbar. Wenn mehrere solcher Formen in einem Block verwendet werden, wird das Bild innerhalb der Formen als Fortsetzung angezeigt.

Sie können fixierte Bilder und statische Bilder kombinieren, um zusätzliche Effekte und ungewöhnliche Kompositionen zu erstellen.

Wenn Sie möchten, dass einige Elemente außerhalb von Zero Block angezeigt Zero Block über benachbarte Blöcke gelegt werden, verwenden Sie „Overflow“. Sie finden diese Option im Einstellungsfeld von Zero Block.

In Zero Block können Sie auch unterschiedliche Parameter für die X- und Y-Achse festlegen. Dies kann nützlich sein, wenn Sie Karten erstellen möchten, die horizontal ohne vertikale Verschiebung scrollen.

Wenn Sie X auf„Versteckt” und Y auf„Sichtbar/Auto” setzen, erscheint in Zero Block eine vertikale Bildlaufleiste, und der Block wird fixiert, bis alle Inhalte entlang der Y-Achse angezeigt werden.

Wenn Sie X auf „Sichtbar/Auto“ und Y auf „Ausgeblendet“ setzen, werden Inhalte außerhalb der Leinwand auf der X-Achse beim horizontalen Scrollen angezeigt.

Der Zero Block auf der Seite fixiert werden, sodass er beim Scrollen oben oder unten auf der Seite bleibt. Dies ist beispielsweise nützlich, um ein festes Menü mit einem benutzerdefinierten Design zu erstellen. Um die Fixierung einzurichten, gehen Sie zu Einstellungen → Position und Überlauf.

Sie können auch festlegen, dass der Block nicht sofort angezeigt wird, sondern erst nach einigen Scrollvorgängen (Appear Offset). In diesem Fall können Sie eine von zwei Animationen für die Anzeige verwenden – Einblenden oder Nach oben/unten schieben.

Zero Block fünf grundlegende Bildschirmauflösungen, mit denen Sie die Reaktionsfähigkeit Ihrer Website anpassen können: 320px, 480px, 640px, 960px und 1200px. Sie können diesen Bereich durch Hinzufügen von Breakpoints erweitern. Mit Breakpoints können Sie das perfekte Layout für alle Website-Elemente bei bestimmten Auflösungen erzielen. Eine flexible Konfiguration kann beispielsweise nützlich sein, wenn Benutzer die Website auf Geräten mit unregelmäßigen Bildschirmauflösungen besuchen.

Bei der Gestaltung Zero Block ist es wichtig, zu testen, wie die Website auf allen Bildschirmen angezeigt wird. Sie können dies direkt in Zero Block tun, Zero Block Sie auf das Bild des entsprechenden Geräts klicken.

Zero Block so konzipiert, dass jedes Element auf jedem Bildschirm individuell angepasst werden kann. Wenn Sie die Zusammensetzung oder den Inhalt eines Elements ändern, kann der Block aufgrund von Unterschieden in der Zeilenlänge oder Elementgröße auf Bildschirmen mit niedrigerer Auflösung anders aussehen.

Wenn Sie einen Zero Block Grund Zero Block erstellen, denken Sie daran, die Layouts für jede Auflösung manuell anzupassen. Beachten Sie dies, bevor Sie die Website veröffentlichen.

Wenn Ihre gesamte Website in Zero Block gestaltet ist, ist es praktischer, sie in separate Blöcke zu unterteilen. Auf diese Weise können Sie Blöcke für Bildschirme mit niedriger Auflösung deaktivieren oder sie vorübergehend für die gesamte Website deaktivieren.

Wenn Sie auf einem großen Bildschirm viele Details verwenden, können Sie das Layout auf Bildschirmen mit niedrigerer Auflösung einfacher und übersichtlicher gestalten, um die Wahrnehmung zu erleichtern.

Hier ist ein Beispiel für eine einzigartige visuelle Komposition für jede Bildschirmgröße:

Wenn Ihnen das adaptive Design nicht gefällt und Sie von vorne beginnen möchten, können Sie die Einstellungen für Elemente für niedrigere Bildschirmauflösungen löschen. Wählen Sie dazu ein oder mehrere Elemente aus → klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen → Löschen Sie das adaptive Design.

Auto Layouts in Zero Block eine Designtechnik, mit der Sie schnell Layouts erstellen, Inhalte ändern und das Design an verschiedene Bildschirmauflösungen anpassen können. Sie eignet sich besonders für die Erstellung von Elementen wie Karten, Schaltflächen mit mehreren Elementen, Menüpunkten und anderen. Eine Anleitung zum Einrichten von Auto Layout finden Sie im Hilfe-Center.

Auto-Layouts steuern die Platzierung von Elementen in einer Gruppe relativ zueinander. Sobald die Ausrichtung und die Abstände festgelegt sind, werden sie automatisch nach diesen Regeln ausgerichtet, unabhängig von Änderungen am Inhalt der Gruppe. Wenn Sie beispielsweise beim Erstellen einer Galerie ein weiteres Bild zu einer Gruppe hinzufügen müssen, wird es gemäß den festgelegten Regeln „angepasst“ – Sie müssen andere Elemente der Gruppe nicht manuell verschieben.

Sehen Sie sich das Tutorial zur Verwendung von Auto-Layouts an:

Sie können jedes Element so animieren, wie es in Zero Block erscheint. Es gibt sechs Arten von Animationen:

Jede Art von Animation verfügt über eigene Einstellungen. Sehen wir uns diese einmal an.

Die Dauer ist die Länge der Animation in Sekunden. Je höher der Wert, desto langsamer die Animation.

Die Entfernung ist der Abstand zwischen der Ausgangsposition eines animierten Elements und seiner Endposition. Sie wird nur für Animationen angegeben, bei denen Objekte von den Seiten erscheinen.

Die Skalierung ist die Größe eines Elements zu Beginn der Animation als Prozentsatz der ursprünglichen Größe. Dieser Parameter wird festgelegt, wenn eine Vergrößerung oder Verkleinerung erfolgt. Ist der Wert größer als 100, ist das Element zu Beginn größer und wird auf seine ursprüngliche Größe verkleinert. Ist der Wert kleiner als 100, wird das Element auf seine ursprüngliche Größe vergrößert.

Die Verzögerung ist die Verzögerung der Animationswiedergabe in Sekunden. Wenn der Wert 0 ist, startet die Animation, sobald der Block auf der Seite erscheint.

Wann sollten Sie die Verzögerung verwenden? Sie kann hilfreich sein, wenn ein anderes Objekt ein wichtiges Element überlappt oder überdeckt. Wenn sich mehrere animierte Objekte auf einer Seite befinden, weisen Sie jedem Element unterschiedliche Verzögerungseinstellungen zu. Auf diese Weise können Sie den Blick des Betrachters lenken und ihn von einem Element zum nächsten führen.

Der Trigger-Offset ist der Abstand in Pixeln vom unteren Bildschirmrand, an dem das Element auf der Seite erscheint. Standardmäßig beginnt die Animation, sobald das Element die untere Linie der Seite überschreitet. Wenn Sie die Animation verzögern möchten, bis das Element für den Betrachter sichtbar ist (und nicht ganz unten auf der Seite), legen Sie den Abstand vom unteren Rand fest, bei dem die Animation beginnen soll. Befindet sich das Objekt zunächst in einem geringeren Abstand als dem Wert dieses Parameters, ist es erst sichtbar, wenn der Benutzer nach unten scrollt.

Nachdem Sie die erforderlichen Parameter festgelegt haben, überprüfen Sie die Animation direkt im Editor. Um das animierte Element in Aktion zu sehen, klicken Sie auf „Element abspielen“ für ein einzelnes Element und auf „Alle abspielen“ für mehrere Elemente, um zu sehen, wie sie zusammenwirken.

Mit der Schritt-für-Schritt-Animation können Sie jedem Seitenelement sequenzielle Transformationsschritte zuweisen und Besuchern die Interaktion mit diesen Elementen ermöglichen.

Um eine Schritt-für-Schritt-Animation zu einem Element in Zero Block hinzuzufügen, wählen Sie das Element aus, öffnen Sie dessen Einstellungen und navigieren Sie zum Abschnitt „Schritt-für-Schritt-Animation“ (am Ende der Element-Einstellungen).

Elemente erscheinen und bewegen sich, wenn der Besucher auf der Seite nach oben oder unten scrollt.

Alle unten aufgeführten Animationsbeispiele sind als Vorlagen verfügbar, sodass Sie sie zu Ihren Projekten hinzufügen und nach Belieben verwenden können.Beispiele für „

”-Animationen beim Scrollen:

Diese Art von Animation wird ausgelöst, wenn ein Element auf dem Bildschirm erscheint.

Element auf dem Bildschirm – Die Animation wird ausgelöst, wenn ein Element den unteren Rand des Browsers passiert und auf der Webseite erscheint.

Block auf dem Bildschirm – Die Animation wird ausgelöst, wenn ein Zero Block dem Element den unteren Rand des Browsers passiert und auf der Webseite erscheint.

Diese Art von Animation wird ausgelöst, wenn ein Besucher mit der Maus über ein Element fährt.

Diese Art von Animation wird ausgelöst, wenn ein Besucher auf das Element klickt.

Jede Art von Animation verfügt über zusätzliche Einstellungen:

Start Trigger ist ein Ereignis, das die Animation auslöst. Wählen Sie zwischen Window Top, Window Center und Window Bottom.
Standardmäßig ist Window Bottom als Trigger eingestellt; die Animation startet, sobald sie den unteren Rand des Browsers erreicht.

Trigger Offset ist der Abstand in Pixeln vom ausgewählten Start Trigger. Die Animation startet, sobald dieser Abstand gescrollt wurde.

Loop ist ein Parameter, mit dem Sie bestimmte Schritte unbegrenzt wiederholen können. Sie können die Animation entweder unbegrenzt oft wiederholen (Loop with Reverse einstellen) oder nur einmal abspielen (Loop Once einstellen).

Easing legt die Geschmeidigkeit der Animation fest. In Tilda können Sie zwischen 29 Arten von Easing wählen, die sich auf die Darstellung der konfigurierten Animation auswirken. Der ausgewählte Glättungstyp kann mit Hilfe der Bézier-Kurven geändert werden.

Sie können die resultierende Animation mit den Schaltflächen „Element abspielen“ (siehe Animation des ausgewählten Elements) / „Alle abspielen“ (Animation aller Elemente im Block abspielen) testen. Diese Option ist für alle Arten von Animationen verfügbar, mit Ausnahme von Animationen beim Scrollen.

Der Einfachheit halber können Sie die Animation in zwei Browser-Registerkarten bearbeiten: Bearbeiten Sie den Zero Block einer und öffnen Sie die Seitenvorschau in der anderen. So können Sie das Ergebnis schnell überprüfen, ohne Zero Block zu verlassen. Bevor Sie das Ergebnis testen, vergessen Sie nicht, Ihre Änderungen im Zero Block zu speichern Zero Block die Vorschauseite zu aktualisieren.

Wenn Sie die Schritt-für-Schritt-Animation verwenden, können Sie Schritte hinzufügen und die Eigenschaften jedes einzelnen Schrittes anpassen. Dadurch werden Änderungen an den Parametern jedes ausgewählten Elements auf Ihrer Webseite ausgelöst. Erstellen Sie anhand mehrerer Schritte eine Bewegungsbahn und Bewegungen für Ihre Elemente auf der Seite.

Um den Anfangszustand eines Elements zu ändern – wenn Sie beispielsweise möchten, dass es zu Beginn unsichtbar ist, setzen Sie die Deckkraft auf 0 und die Dauer auf 0 Sekunden oder 0 Pixel (für Animationen beim Scrollen).

Mit den Schritteneinstellungen können Sie die Eigenschaften des Elements ändern, auf das die Animation angewendet wird.

Sie können die Position (Verschieben), Größe (Skalieren), Transparenz (Deckkraft) des Elements und den Drehwinkel des Elements (Drehen) festlegen.

Parallaxe beim Scrollen. Wenn Sie diese Animation auf ein Element anwenden, unterscheidet sich dessen Bewegungsgeschwindigkeit beim Scrollen der Seite von der Geschwindigkeit anderer Elemente. In den Einstellungen können Sie die Bewegungsgeschwindigkeit festlegen – bei einer niedrigen Geschwindigkeit von 0 bis 100 bewegt es sich langsamer als der Bildlauf, bei einer hohen Geschwindigkeit von 100 bis 200 bewegt es sich viel schneller.

Parallaxe bei Mausbewegung. Ein Element mit diesem Animationstyp bewegt sich entgegen der Cursorbewegung. Der vertikale und horizontale Bewegungsbereich kann in den Einstellungen festgelegt werden.

Mit dieser Art von Animation können Sie Elemente beim Scrollen fixieren. In den Einstellungen können Sie den Abstand festlegen, innerhalb dessen die Elemente an einer bestimmten Position fixiert bleiben (die Fixierung erfolgt nur innerhalb des Blocks). Nach dem Scrollen bis zum festgelegten Abstand wird das Element nicht mehr fixiert und scrollt zusammen mit anderen Elementen auf der Seite.

In den Einstellungen können Sie auch festlegen, was die Fixierung auslöst – der obere Rand des Fensters, der untere Rand oder die Mitte. Mit „Trigger Offset“ können Sie den Abstand vom Rand des Fensters steuern und so sicherstellen, dass das Element nicht daran haften bleibt. Dies ist auch nützlich, wenn Sie mehrere Elemente gleichzeitig in einem bestimmten Abstand voneinander fixieren möchten.

Wenn Sie in Ihrem Projekt Animationen verwenden, überladen Sie die Seite nicht mit zu vielen Effekten. In der Regel reicht es aus, 20 bis 30 % des Inhalts zu animieren. Übermäßige Animationen wirken aufdringlich und störend und verlangsamen zudem die Ladegeschwindigkeit der Seite.

Wenn Sie einen Block von Grund auf neu erstellen, lohnt es sich, zunächst die gesamte Seite zu entwerfen, um zu sehen, wie dieser Block im Vergleich zu den anderen aussieht. Wenn Sie das getan haben, vergessen Sie nicht, die Anpassungsoptionen zu konfigurieren. Wenn Sie Text in Zero Block übersetzen Zero Block einfach ändern, überprüfen Sie, wie er auf jeder Bildschirmversion aussieht, auch wenn auf dem ersten Bildschirm alles gut aussieht. Aufgrund unterschiedlicher Schriftgrößen und Zeilenlängen kann der Text auf verschiedenen Bildschirmen unterschiedlich aussehen.

Wenn Sie möchten, dass zwei Elemente unabhängig von der Bildschirmauflösung relativ zueinander an derselben Position bleiben, legen Sie die Positionierung der Elemente als „Grid Container“ oder „Window Container“ fest.

Weitere Informationen zum Einrichten der Positionierung von Elementen finden Sie im Hilfe-Center:

Wenn Sie den Text relativ zum Raster positionieren und möchten, dass er immer innerhalb des Bildschirms bleibt, stellen Sie sicher, dass sein Container nicht über den Rasterbereich hinausgeht. Es ist empfehlenswert, ein übersichtliches Layout zu erstellen: Auf diese Weise vermeiden Sie unangenehme Überraschungen, wenn der Block veröffentlicht wird.

Verwenden Sie Zero Block beeindruckende Websites und innovative typografische Lösungen zu erstellen. Es ist ein nützliches Werkzeug für Ihre Designlösungen. Verleihen Sie Ihrer Website mit Spezialeffekten, Typografie und innovativem Design eine persönliche Note. Jetzt liegt alles in Ihren Händen!