Ein vollständiger Leitfaden zu Zero Block

Wie Sie Ihr eigenes Design mit unserem Zero Block Webdesign-Editor erstellen

Zero Block ist ein Werkzeug zur Erstellung von einzigartig gestalteten Blöcken auf Tilda. Positionieren Sie jedes Element, ändern Sie seine Parameter je nach Bildschirmgröße und gestalten Sie einen neuen Block für Ihre Website.
Inhalt

Was ist also so gut an Zero Block?

Steuern Sie jedes Element. Sie können jedes Element des Blocks, wie z. B. Text, Bild, Schaltfläche oder Hintergrund, steuern. Entscheiden Sie über deren Position, Größe und Bildschirmauflösung, auf der sie erscheinen sollen.

Ebenen. Dies ist ein praktisches Werkzeug, um mit Überlagerungs- und Deckkrafttechniken Tiefe zu erzeugen. Jedes Element der Website kann relativ zum Raster oder zu den Rändern des Bildschirms positioniert werden.

Komplexe Typografie. Die Designer haben völlige Freiheit bei der Gestaltung einzigartiger typografischer Lösungen.

Durchsichtigkeit. Legen Sie für jedes Element eine Transparenzstufe und darunter liegende Schatteneffekte fest und passen Sie die Anpassungsfähigkeit an. Ändern Sie jeden Parameter, wie z. B. die Zusammensetzung, die Menge der sichtbaren Elemente, je nach Bildschirmauflösung.
Tafeln. Fügen Sie farbenfrohe Tafeln und Inhaltskarten hinzu oder laden Sie Bilder innerhalb geometrischer Formen hoch.

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.

Hinzufügen von HTML. Fügen Sie beliebige Elemente in Zero Block ein, indem Sie HTML-Code einfügen (verwenden Sie entweder Ihren eigenen Code oder IFrame-Widgets, mit denen Sie Inhalte von Drittanbietern einfügen können). Passen Sie die Positionierung dieser Elemente auf jedem Bildschirm an.

Tooltip. Verwenden Sie dieses interaktive Tool, um kurze Pop-up-Hinweise einzufügen. Sie können die Einstellungen wie Farbe, Schatten, Größe ändern, ein Symbol in einem Kreis oder ein Bild über dem Text hochladen.

Rückmeldungsformular. Fügen Sie Eingabefelder und Datenerfassungsintegrationen hinzu, legen Sie den Stil für das Formular fest und animieren Sie es.

Animation von Webseitenelementen. Fügen Sie Animationen hinzu, wenn Webelemente auf einer Seite erscheinen: Deckkraft, Skalierung nach oben, wenn Elemente von unten, oben, links oder rechts ins Bild kommen.

Schritt-für-Schritt-Animation. Gestalten Sie Ihre Seite dynamischer und ansprechender. Animieren Sie beim Klicken, beim Scrollen, beim Schweben und wenn das Element auf dem Bildschirm erscheint.


Parallaxer Bildlauf. Nutzen Sie den Parallaxen-Scroll oder erzeugen Sie den Parallaxen-Effekt durch Mausbewegungen.

Fixierte Elemente beim Scrollen. Geben Sie den Abstand an, für den das Element fixiert bleiben soll, und seine Position.

Wann Sie Zero Block wählen sollten

Zero Block ist ein praktisches, multifunktionales Werkzeug. Hier sind ein paar Szenarien, in denen es nützlich sein kann.
1. Verwenden Sie es, wenn Sie ein Layout in einem Grafikeditor zeichnen und es auf eine Seite übertragen möchten
Wenn Sie Layouts in einem Grafikeditor zeichnen, bevor Sie sie verwenden, können Sie sie mit Zero Block unverändert auf Ihre Website übertragen. Dazu bietet Zero Block ein 12-Spalten-Raster und anpassbare Spezifikationen für jedes Element, wie Koordinaten, Größe, Positionierung im Verhältnis zum Raster oder Bildschirm, Deckkraftparameter und Schatten. Verwenden Sie diese Werkzeuge, um Ihr Layout in Zero Block zu erstellen.

Die Oberfläche von Zero Block ähnelt der eines Grafikeditors. Fügen Sie einfach die benötigten Elemente hinzu und geben Sie ihnen die entsprechenden Koordinaten. Das ist in Zero Block ganz einfach, vor allem, wenn Sie es schon einmal gemacht haben. Verwenden Sie Zero Block, um Ihre Idee aus einem Grafikeditor schnell auf Ihre Website zu übertragen, ohne Code schreiben zu müssen.
2. Verwenden Sie es, wenn Sie eine Website erstellen und die vorhandenen Blöcke nicht ausreichen
Wenn Sie eine Webseite oder eine Landing Page erstellen und den richtigen Block in der Tilda-Bibliothek nicht finden können, verwenden Sie Zero Block. Hier sind ein paar konkrete Beispiele.
1. Unkonventionelles Design
Websites, die mit Tilda erstellt werden, 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, wie Besucher Informationen auf Ihrer Website lesen, ändern möchten, ist Zero Block ein großartiges Werkzeug dafür.
Risum Studio verwendet Zero Block, um ein Team ungewöhnlich zu zeigen
Quantum Attorneys. Website der Anwaltskanzlei
2. Komplexe Formen
Zero Block eignet sich hervorragend, um Elemente mit ungleichmäßigen Kanten in einer einzigen Komposition zusammenzufassen, indem alle Abstände optisch gleich gemacht werden.
Ein Komplex von Elementen auf der Tilda Landing Page mit schrittweiser Animation
Mit Zero Block können Sie ein Design aus Zeichen und Typografie erstellen, indem Sie den Abstand zwischen diesen Elementen regulieren, ähnlich wie bei der Erstellung eines Posters.
3. Lagen
Zero Block lässt sich gut mit Ebenen kombinieren, z. B. mit sich überlappenden Bildern, Texten über einer Tafel oder Schaltflächen über Bildern. Erzeugen Sie zusätzliche Effekte, indem Sie mit ihrer Positionierung spielen.
E2 PRO Videoproduktionsstudio
Um den Umgang mit mehreren Elementen zu vereinfachen, verwenden Sie die Funktion "Ebenen". Mit diesem großartigen Werkzeug können Sie jedes Element verwalten - seine Position ändern, es ausblenden oder sperren.

Um Ebenen zu öffnen, verwenden Sie diese Tastaturkürzel: ⌘+ L oder Strg + L (für Macs) oder Strg + L (für Windows).
4. Mehrere Elemente zusammengenommen
Mit Zero Block können Benutzer komplexe Kompositionen aus mehreren Elementen wie Texten, Bildern, Linien, Tafeln und Schaltflächen erstellen.
Der Designer der Landing Page von Tilda Icons hat Zero Block verwendet, um großformatige Zahlen, eine Beschriftung, eine Beschreibung, eine große Anzahl von Symbolen und einen ungleichmäßigen Rand zu einem Website-Cover hinzuzufügen.
UNIT.City verwendet Zero Block, um einige Textspalten auf neue Weise zu kombinieren
Diese mit Tilda erstellte Landing Page für neue Schriftarten besteht aus Blöcken, die mehrere Elemente enthalten.
5. Hover-Effekt
Der Hover-Effekt verändert das Aussehen eines Elements, wenn der Benutzer mit der Maus darüber fährt. Verwenden Sie ihn als zusätzliches Designelement oder als funktionales Element in einem Artikel oder einer Infografik.
Hovers werden verwendet, um die "Knochen" eines Longreads besser zu veranschaulichen. Wenn der Leser darauf klickt, wird er zu dem entsprechenden Abschnitt eines Artikels weitergeleitet.

3. Umwandlung eines bestehenden Tilda-Blocks in einen Zero-Block

Perfekt für den Fall, dass Sie etwas an einem regulären Block ändern möchten, es aber nicht möglich ist, die Einstellungen zu ändern.

Wenn Sie einen allgemeinen Tilda-Block ausgewählt haben und einige Änderungen daran vornehmen möchten, verwenden Sie einfach die Option In Nullblock umwandeln. Damit können Sie ihn so bearbeiten, als wäre er ein Nullblock. Diese Option ist für die meisten Tilda-Blöcke verfügbar.

Lassen Sie uns diesen Prozess in einzelne Schritte unterteilen. Ändern wir zum Beispiel den Tarifblock, indem wir die Symbole außerhalb der Informationsfelder positionieren.
1
Fügen Sie den gewünschten Block auf der Webseite ein.
2
Klicken Sie in den Seiteneinstellungen auf In Nullblock umwandeln.
3
Klicken Sie auf Block-Editor.
4
Änderungen vornehmen. In diesem Fall wollen wir das Panel auf die Mitte der Icons schneiden. Deshalb verwenden wir Zero Block.
5
Jetzt ist der Abstand zwischen der Kopfzeile und den Tarifen optisch größer. Markieren Sie alle Tarifkarten und rücken Sie sie näher an die Kopfzeile. Verringern wir auch die Höhe des gesamten Blocks, damit der Platz darunter gleich bleibt.
6
Fügen Sie Ihren Inhalt hinzu: Icons und Texte.
8
Nachdem Sie Änderungen auf dem größten Bildschirm vorgenommen haben, bleibt die Position der Elemente auf allen anderen Bildschirmen unverändert. Nur der Inhalt, den Sie hinzugefügt haben, wird geändert. Auf diese Weise können Sie jedes Element auf der Webseite manipulieren und auf allen Bildschirmen unterschiedliche Designs erstellen.

Passen Sie die Anzeige für die anderen Bildschirme vom größten zum kleinsten an. Überprüfen Sie immer die Anzeige auf allen Bildschirmen, wenn Sie den Text ändern.
Beispiel für die Umwandlung eines anderen Blocks in einen Null-Block:
E2 PRO Videoproduktionsstudio. Dieser Block wurde in einen Nullblock umgewandelt, wobei dem Hintergrund eine Form hinzugefügt wurde. Auch eine Schaltfläche Farbe geändert und ein kleiner Text in der Nähe der Schaltfläche hinzugefügt.

Wann Sie Zero Block nicht verwenden sollten

1. Wenn ein normaler vorgefertigter Block ausreicht
Unsere Standardblöcke verfügen über eine Vielzahl von Einstellungen. Fügen Sie den am besten geeigneten Block aus der Bibliothek hinzu, öffnen Sie die Registerkarte Einstellungen und prüfen Sie, ob Sie die Vorlage an Ihr Ziel anpassen können. Es ist möglich, dass Sie den Null-Block gar nicht benötigen.

Die folgenden Beispiele sind Entwürfe, die auf unseren Standardblöcken basieren.
Radario. Vollständige Designs ersetzen Bilder. Erstellen Sie ähnliche Designs in Zero Block oder fügen Sie sie einem regulären Block als Bild hinzu.
2. Wenn Sie flexible Einzüge erstellen möchten
Wenn Sie bisher einen regulären Block in einen Null-Block umwandeln mussten, ist dies nun nicht mehr erforderlich. Tilda bietet jetzt die Möglichkeit, die Einzüge für Computer und mobile Geräte getrennt zu definieren.
3. Wenn Sie die Abstände in unseren regulären Blöcken ändern müssen, wenn Zero Block nicht im Netz ist
Unsere regulären Blöcke sind in einem Raster von 12 Spalten angeordnet. Sie können die Einzüge für jede Überschrift entsprechend der Anzahl der Spalten festlegen. Wenn Sie Ihren Block in Zero Block entworfen haben, ohne das Raster zu berücksichtigen, können Sie nicht dieselben Einzüge für reguläre Blöcke festlegen (Sie müssen sie in Zero Block konvertieren).

Sie wechseln zum Beispiel reguläre und Zero Blocks in Ihrem Website-Design ab. Während Sie im Null-Block Elemente an beliebiger Stelle platzieren können, lässt sich dies in einem regulären Block nicht wiederholen. Daher ist es gut zu wissen, dass unsere regulären Blöcke nur auf dem Raster positioniert werden können.

Wir empfehlen die Verwendung eines Rasters, wenn Sie Ihre Website mit Zero Block gestalten. Positionieren Sie die Hauptelemente relativ zum Raster - jetzt lässt sich Ihr Design leicht mit allen anderen Tilda-Blöcken kombinieren.

Wie man Zero Block verwendet

Werfen wir einen Blick auf die grundlegenden Funktionen von Zero Block. Lesen Sie mehr über die erweiterten Funktionen von Zero Block in unserem umfassenden Leitfaden für die Gestaltung eigener Blöcke.
Elemente
In Zero Block können Sie Elemente hinzufügen, die komplexer sind als Texte, Bilder, Felder und Schaltflächen.
Video
Sie können Videos von YouTube und Vimeo hinzufügen oder bearbeiten. Ändern Sie die Größe und das Seitenverhältnis des Videos sowie seine Deckkraft, erstellen Sie Schatten und wenden Sie Animationen an.

In den Videoeinstellungen können Sie die automatische Wiedergabe einstellen, Schleifen aktivieren und deaktivieren, die Start- und Endzeit für jedes Video festlegen und Ihr eigenes Cover hochladen.
Video im Nullblock
Hinzufügen des HTML
Fügen Sie ein beliebiges Element mit Hilfe des HTML-Codes hinzu. Dies kann Ihr eigener Code sein oder Sie können den iFrame eines Widgets eines Drittanbieters einbetten. Dabei kann es sich beispielsweise um interaktive Elemente, Online-Aufnahmen, Musikplayer, Kalender, Taschenrechner oder Beiträge in sozialen Medien handeln. Sie können die Position dieser Elemente auf jedem Bildschirm anpassen.
QuickInfo
Tooltip ist eine kleine interaktive Eingabeaufforderung, die erscheint, wenn der Mauszeiger über ein Element einer Website bewegt wird. Dies kann nützlich sein, wenn Sie ein komplexes Thema beschreiben und dessen Bestandteile auf einem Foto darstellen möchten. Wenn Sie zum Beispiel Häuser in einer Wohnsiedlung verkaufen, können Sie eine Karte zeichnen und jedes Gebäude auf dieser Karte markieren.

Die QuickInfo verfügt über viele praktische Einstellungen: Sie können die Farbe, den Schatten und die Größe ändern oder ein Symbol auswählen und hochladen, das in einem Kreis erscheint, oder einen Text, der angezeigt wird, wenn Sie mit dem Mauszeiger darüber fahren.

Nachdem Sie die Elemente/Tooltips auf der Seite platziert haben, vergessen Sie nicht, die Position jedes Tooltips auf Bildschirmen aller Auflösungen zu überprüfen, da sonst die Gefahr besteht, dass die Eingabeaufforderung von oben, unten oder den Rändern des Blocks abgeschnitten wird.
Verwendung einer QuickInfo zur Beschreibung von Produktdetails. Bild: SPERA.de
Feedback-Formular
Fügen Sie ein horizontales oder vertikales Feedback-Formular zu Zero Block hinzu und ändern Sie alle Einstellungen, wie z. B. das Hinzufügen von Eingabefeldern oder Datenerfassungsintegrationen, Erfolgs- oder Fehlermeldungen, Formularstile oder Animationen.
Ein mit Zero Block entworfenes Formular im Tilda-Blog
Standort der Elemente
Jedem Element können die Koordinaten in Bezug auf die vier Seiten eines Bildschirms oder eines Gitters zugewiesen werden, die Deckkraft und der Schatten können geändert werden; Sie können das Element drehen oder ihm einen Link auf einen Klick geben.
Größe der Elemente
Jedem Element kann eine Größe in Pixeln oder ein Prozentsatz der Bildschirmgröße zugewiesen werden. Wenn Sie zum Beispiel ein Element erstellen möchten, das unabhängig von seiner Größe die Hälfte des Bildschirms einnimmt. In diesem Fall geben Sie seine Breite und Höhe in % und nicht in Pixeln an.
Auswirkungen
Entdecken Sie viele unerwartete Überraschungen mit Zero Block. Hier finden Sie eine Liste von Effekten, die Sie auf Ihrer Website verwenden können.
Hover-Effekte
Verwenden Sie eine Schaltfläche für Hover-Effekte in Zero Block. Sie können sie in jeder gewünschten Größe und sogar rund gestalten, indem Sie die Einstellungen anpassen. Möchten Sie, dass die Schaltfläche nur sichtbar ist, wenn sie sich im Schwebezustand befindet? Dann machen Sie ihn transparent. Und wenn Sie schon dabei sind, wählen Sie eine Deckkraft von 30 % und eine beliebige Farbe für die Hover-Schaltfläche.
Positionieren Sie die Schaltfläche über Elementen, die vom Hover-Effekt verdeckt werden sollen. Das können Bilder oder Text sein. Verwandeln Sie die Schaltfläche bei Bedarf in einen Link.
Die Zahlen in den Kreisen sind schwarze Schaltflächen mit Text und oranger Farbe, wenn man mit dem Mauszeiger darüber fährt. Der Effekt im Diagramm sind mehrere rechteckige Schaltflächen über dem Bild.
Korrektur des Hintergrundbildes beim Scrollen
Um ein Element während des Bildlaufs zu fixieren, ändern Sie die Einstellungen für das Bild auf Verhalten - Fixiert. Diese Funktion ist für Hintergrundbilder innerhalb einer Form verfügbar. Wenn Sie dies auf das Bild in einem Panel anwenden, wird die Bildgröße auf den gesamten Bildschirm ausgedehnt, aber es ist nur innerhalb der Form sichtbar. Wenn Sie mehrere solcher Formen in einem Block verwenden, wird das Bild innerhalb dieser Formen eine Fortsetzung desselben Bildes sein.

Sie können feste Bilder und statische Bilder kombinieren, um zusätzliche Effekte und ungewöhnliche Kombinationen zu schaffen.
Langes Scrollen
Um einen langen Bildlauf zu erzeugen, legen Sie die Höhe des Fenster-Containers als Prozentsatz der Höhe des Bildschirms fest. Wenn der Container beispielsweise doppelt so hoch wie der Bildschirm sein soll, setzen Sie den Wert auf 200 und das Hintergrundbild auf fest.

Wenn Sie möchten, dass der Text und die anderen Elemente unten auf der Seite erscheinen, stellen Sie für jedes Container-Element den Wert Window container und Axis Y - Bottom ein. Jetzt sind die Elemente auf den unteren Rand des Bildes ausgerichtet. Erhöhen Sie jedes einzelne Element so weit wie gewünscht, damit es über dieser Grenze liegt.
Um einen langen Bildlauf zu erzeugen, legen Sie die Höhe des Fenster-Containers als Prozentsatz der Höhe des Bildschirms fest. Wenn Sie beispielsweise möchten, dass der Container doppelt so hoch wie der Bildschirm ist, setzen Sie den Wert auf 200.
Setzen Sie das Hintergrundbild auf fest.
Wenn Sie möchten, dass der Text und andere Elemente am unteren Rand der Seite erscheinen, stellen Sie für jedes Container-Element den Fenster-Container und die Achse Y - Unten ein. Jetzt sind die Elemente am unteren Rand des Bildes ausgerichtet. Heben Sie jedes Element so weit an, dass es höher als dieser Rand ist.
Anzeige von Elementen außerhalb des Nullblocks
Wenn Sie möchten, dass einige Elemente außerhalb des Null-Blocks angezeigt werden und sich über benachbarte Blöcke legen, wählen Sie die Option Überlauf. Sie finden sie in den Einstellungen des Blocks.
Wann sollte diese Option verwendet werden?
1
Wenn Sie ein Element über einen normalen Block legen möchten. So sparen Sie Zeit - Sie müssen es nicht in einen Null-Block umwandeln und seine Anpassungsfähigkeit anpassen.

Um ein Element über einen angrenzenden Block zu legen, erstellen Sie einen schmalen Null-Block daneben, positionieren Sie das Element so, dass es über den weißen Bereich hinausragt, und aktivieren Sie Überlauf. Vergessen Sie nicht zu prüfen, wie das Element auf mobilen Geräten angezeigt wird.
2
Wenn Sie ein Element außerhalb eines Nullblocks fixieren möchten. Dies kann vor allem bei der schrittweisen Animation nützlich sein.

Anpassungsfähigkeit konfigurieren

Zero Block Designs können für die fünf gängigsten Bildschirmtypen angepasst werden. Ihr Block sieht auf jedem Gerät gut aus.

Vergessen Sie nicht zu prüfen, wie Ihr Zero Block auf allen Bildschirmen aussieht. Drücken Sie einfach auf die Schaltfläche, die das gewünschte Gerät in Zero Block darstellt.
Jedes Element auf jedem Bildschirm ist in Zero Block anpassbar. Wenn Sie also die Zusammensetzung oder den Inhalt auf einem der Bildschirme ändern, kann ein Block in einer niedrigeren Auflösung aufgrund der unterschiedlichen Länge der Zeile oder der Größe der Elemente anders aussehen.

Wenn Sie einen Zero Block von Grund auf neu erstellen, konfigurieren Sie die Anpassungsfähigkeit für jedes Gerät individuell. Es ist wichtig, dies zu beachten, bevor Sie Ihre Website veröffentlichen.

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

Wenn Sie auf einem großen Bildschirm viele Details verwenden, vereinfachen Sie Ihr Design für Bildschirme mit niedrigerer Auflösung, um es für das Auge angenehmer zu gestalten.
Hier ist ein Beispiel für eine individuelle visuelle Komposition auf jedem Bildschirm:

Animation im Nullblock

Zu den Animationsarten, die in Zero Block verwendet werden können, gehören die Animation beim Erscheinen, die schrittweise Animation sowie die Parallaxe und die Fixierung von Elementen beim Scrollen.

Elemente beim Erscheinen animieren

Sie können jedes Element so animieren, wie es in Zero Block erscheint. Wir haben sechs Arten von Animationen bereitgestellt:
Einblenden - wenn Elemente durch Deckkraft erscheinen.
Einblenden nach oben - wenn Elemente vom unteren Rand der Seite nach oben durch Deckkraft erscheinen.
Einblendung nach unten - wenn Elemente vom oberen Rand der Seite durch Deckkraft erscheinen.
Links einblenden - wenn Elemente durch die Deckkraft von rechts erscheinen.
Rechts einblenden - wenn Elemente durch die Deckkraft von links erscheinen.
Einzoomen - wenn Elemente durch Vergrößern oder Verkleinern angezeigt werden.
Jede Art von Animation hat ihre eigenen Parameter. Schauen wir uns an, was sie bedeuten.

Dauer - die Länge einer Animation in Sekunden. Je höher der Wert, desto langsamer die Animation.
Abstand - der Abstand zwischen der Anfangsposition einer Animation und ihrer Endposition. Er wird nur für die Animationen angegeben, bei denen die Objekte von der Seite erscheinen.
Skalieren - die Größe eines Elements zu Beginn einer Animation in Prozent der ursprünglichen Größe. Dieser Parameter wird gesetzt, wenn eine Vergrößerung oder Verkleinerung stattfindet. Ist der Wert größer als 100, ist das Element von Anfang an 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 skaliert.
Verzögerung - die Verzögerung der Wiedergabe der Animation in Sekunden. Wenn der Wert Null ist, beginnt die Animation, sobald der Block auf der Seite erscheint.

Wann sollten Sie es verwenden? Sie kann nützlich sein, wenn sich ein anderes Objekt mit einem wichtigen Element überschneidet oder dieses ausblendet. Wenn ein Bildschirm mehrere animierte Objekte zeigt, weisen Sie jedem Element eine andere Verzögerungsfunktion zu. So können Sie den Blick des Betrachters lenken und ihn von einem Element zum nächsten führen.
Auslöser-Versatz ist der in Pixeln gemessene Abstand vom unteren Rand des Bildschirms, in dem die Elemente auf der Seite erscheinen. Standardmäßig beginnt die Animation, sobald das Element auf der Seite erscheint. Wenn Sie die Animation verzögern möchten, bis das Objekt für den Betrachter sichtbar ist (und sich nicht ganz unten auf der Seite befindet), legen Sie den Abstand vom unteren Rand fest, bei dem die Animation beginnen soll. Befindet sich das Objekt anfangs in einem geringeren Abstand als dem Wert dieses Parameters, wird es erst sichtbar, wenn der Benutzer weiter scrollt.
Nachdem Sie die notwendigen Parameter eingestellt haben, können Sie die Animation überprüfen, ohne den Editor zu verlassen. Aktivieren Sie das Element, das Sie animiert haben, klicken Sie auf Element abspielen für ein einzelnes Element und auf Alle abspielen, wenn Sie mehrere Elemente animiert haben und sehen möchten, wie sie zusammenarbeiten.
Animierte Elemente, wie sie auf dem Cover des Tilda-Jahresrückblicks 2017 erscheinen
Schritt-für-Schritt-Animation
Wenn Sie interaktive Elemente auf Ihrer Seite sehen möchten, mit denen sich die Nutzer beschäftigen möchten, markieren Sie das Element, das Sie animieren möchten, und wählen Sie in den Elementeinstellungen die schrittweise Animation.
Die Animation wird gestartet, wenn ein Benutzer eine Aktion auf der Seite ausführt. Zero Block hat vier solcher Ereignisse:

  • Auf der Schriftrolle
  • Auf dem Bildschirm
  • Beim Schweben
  • Auf Klick
Die Animation wird gestartet, wenn ein Benutzer eine Aktion auf der Seite ausführt. Zero Block hat vier solcher Ereignisse:

  • Auf der Schriftrolle
  • Auf dem Bildschirm
  • Beim Schweben
  • Auf Klick
    Animation auf der Schriftrolle
    Elemente erscheinen und bewegen sich, wenn ein Benutzer auf einer Seite nach oben oder unten blättert.
    * Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
    Beispiele für Animationen auf Scrolls:

    Sie können diese Animationsbeispiele gerne in Ihren eigenen Projekten verwenden.
    Animation, wenn das Element auf dem Bildschirm erscheint
    Diese Art der Animation wird ausgelöst, wenn ein Element auf dem Bildschirm erscheint.
    * Um dieses Beispiel einer Schritt-für-Schritt-Animation in Zero Block zu sehen, öffnen Sie es bitte auf einem Bildschirm mit mehr als 1200 Pixeln.
    Element auf dem Bildschirm - Die Animation wird ausgelöst, wenn ein Element den unteren Rand des Browsers überschreitet und auf der Webseite erscheint.

    Block auf dem Bildschirm - wird ausgelöst, wenn ein Nullblock, der das Element enthält, den unteren Rand des Browsers überschreitet und auf der Webseite erscheint.
    Beispiele:
    Animation beim Schweben
    Die Animation beginnt, wenn der Mauszeiger über ein Element bewegt wird.
    Setzen Sie den Cursor auf die Elemente
    * Um dieses Beispiel einer Schritt-für-Schritt-Animation in Zero Block zu sehen, öffnen Sie es bitte auf einem Bildschirm mit mehr als 1200 Pixeln.
    Beispiel einer Animation, die abgespielt wird, wenn das Element auf dem Bildschirm erscheint
    Animation bei Klick
    Die Animation wird gestartet, wenn ein Benutzer auf das Element klickt.
    Klicken Sie auf dieses Element
    * Um dieses Beispiel einer Schritt-für-Schritt-Animation in Zero Block zu sehen, öffnen Sie es bitte auf einem Bildschirm mit mehr als 1200 Pixeln.
    Jede Art von Animation hat diese zusätzlichen Einstellungen:

    Startauslöser -Ein Ereignis, das die Animation auslöst. Wählen Sie zwischen Fenster oben, Fenster Mitte und Fenster unten.

    Der Auslöser "Fenster unten" ist standardmäßig eingestellt; die Animation beginnt, sobald das Fenster den unteren Rand des Browsers überquert.

    Auslöser-Versatz ist der Abstand in Pixeln vom ausgewählten Auslöser, der die Animation startet.

    Animation Schleife ist ein Parameter, der die ständige Wiederholung der Animation steuert.

    Sie können die Animation mit Hilfe der Schaltfläche Play Element / Play All testen. Diese Option ist für alle Arten von Animationen verfügbar, mit Ausnahme der Animation beim Scrollen.

    Zu Ihrer Bequemlichkeit können Sie zwei Browser-Registerkarten verwenden: eine für die Bearbeitung in Zero Block und die andere zum Öffnen der Seitenvorschau. Auf diese Weise können Sie Ihr Ergebnis überprüfen, ohne Zero Block zu verlassen. Stellen Sie sicher, dass Sie alle Änderungen speichern und die Vorschauseite aktualisieren, bevor Sie Ihre Webseite testen.
    Schritte
    Wenn Sie sich für eine schrittweise Animation entscheiden, können Sie Schritte hinzufügen und die Eigenschaften jedes Schritts anpassen, die Änderungen an den Parametern jedes ausgewählten Elements auf Ihrer Webseite auslösen werden. Erstellen Sie eine Flugbahn und Bewegungen Ihrer Elemente auf der Seite auf der Grundlage einer Reihe von Schritten.
    Jeder Schritt hat eine bestimmte Dauer, d. h. die Zeit, die jeder Schritt abgespielt wird.

    Je kürzer die Dauer dieses Schritts ist, desto schneller ändern sich die Parameter des Elements.

    Bei der On-Scroll-Animation wird die Länge der einzelnen Schritte in Pixeln gemessen. Bei allen anderen Arten von Animationen wird jeder Schritt in Sekunden gemessen.
    Jeder Schritt hat eine bestimmte Dauer, d. h. die Zeit, die jeder Schritt abgespielt wird.

    Je kürzer die Dauer dieses Schritts ist, desto schneller ändern sich die Parameter des Elements.

    Bei der On-Scroll-Animation wird die Länge jedes Schritts in Pixeln gemessen. Bei allen anderen Arten von Animationen wird jeder Schritt in Sekunden gemessen.
    Um den anfänglichen Zustand eines Elements zu ändern - wenn es z. B. zu Beginn unsichtbar sein soll - setzen Sie die Deckkraft auf Null und die Dauer auf 0 Sekunden oder 0 Pixel (für die Animation beim Scrollen).
    Eigenschaften
    Mit Hilfe der Schritteinstellungen können Sie die Eigenschaften des Elements, das Sie animieren, ändern.

    Sie können seine Position (Verschieben), Größe (Skalieren), Transparenz (Deckkraft) und den Drehwinkel (Skalieren) einstellen.
    Sie können das Element auch an einer bestimmten Stelle auf der Seite während eines bestimmten Schritts fixieren (Fix). Mit dieser Einstellung wird das Element fixiert, während der Benutzer auf der Seite nach oben oder unten scrollt.

    Genau wie bei der Animation, wenn ein Element auf dem Bildschirm erscheint, können Sie eine Verzögerung für den Beginn eines Schritts festlegen.
    Sie können das Element auch an einer bestimmten Stelle auf der Seite während eines bestimmten Schritts fixieren (Fix). Mit dieser Einstellung wird das Element fixiert, während der Benutzer auf der Seite nach oben oder unten scrollt.

    Genau wie bei der Animation, wenn ein Element auf dem Bildschirm erscheint, können Sie eine Verzögerung für den Beginn eines Schritts festlegen.
    Parallaxe
    Parallaxer Bildlauf. Wenn Sie diese Animation auf ein Element anwenden, unterscheidet sich die Geschwindigkeit, mit der es sich bewegt, von der Geschwindigkeit der Bewegung der anderen Elemente beim Scrollen einer Seite. Sie können die Geschwindigkeit der Bewegung in den Seiteneinstellungen festlegen: Bei einer langsamen Geschwindigkeit von 0 bis 100 bewegt sich das Element langsamer als der Bildlauf, bei einer hohen Geschwindigkeit von 100 bis 200 bewegt es sich viel schneller.
    Parallaxe bei der Bewegung des Mauszeigers. Ein Element mit dieser Art von Animation bewegt sich im Verhältnis zur Bewegung des Mauszeigers in die entgegengesetzte Richtung. Sie legen den Bereich der vertikalen oder horizontalen Bewegung in den Seiteneinstellungen fest.
    Fixierung von Elementen beim Scrollen
    Diese Art der Animation ermöglicht es Ihnen, die Elemente während des Scrollens zu fixieren. In den Einstellungen können Sie den Abstand angeben, innerhalb dessen das Element an einer Stelle fixiert bleibt (dies ist immer innerhalb des Blocks). Der Abstand wird in Pixeln festgelegt. Nach dem Scrollen bis zum angegebenen Abstand ist das Element nicht mehr fixiert und scrollt mit der Seite weiter.

    Sie können die Auslöser für das Scrollen in den Einstellungen festlegen: oben, unten oder in der Mitte des Fensters. Mit Trigger Offset können Sie den Abstand zwischen dem Rand des Fensters und dem Element festlegen. Dies ist auch nützlich, wenn Sie mehrere Elemente gleichzeitig in einem bestimmten Abstand zueinander fixieren möchten.
    Elemente beim Scrollen fixieren

    Die häufigsten Fehler bei der Verwendung von Zero Block

    1. Nichtbeachtung der Anpassungsfähigkeit
    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. Vergessen Sie danach nicht, die Einstellungen für die Anpassungsfähigkeit zu konfigurieren. Wenn Sie einen Text in Zero Block übersetzen und ihn einfach nur ändern, sollten Sie überprüfen, ob er in Zero Block funktioniert, auch wenn auf dem ersten Bildschirm alles gut aussieht. Aufgrund der unterschiedlichen Schriftgrößen und Zeilenlängen kann der Text auf anderen Bildschirmen anders aussehen.
    2. Unterschiedliche Positionierung der Elemente, die zusammen sein sollten
    Wenn Sie möchten, dass zwei Elemente in der gleichen Position zueinander bleiben, stellen Sie die Positionierung der Elemente als Raster- oder Fenstercontainer ein.
    Eine Überschrift wird relativ zum Rand des Bildschirms positioniert. Der Abstand auf der linken Seite bleibt unabhängig von der Größe des Browserfensters konstant. Eine Zwischenüberschrift wird relativ zum Raster positioniert. Aus diesem Grund werden beide Texte unterschiedlich zueinander positioniert.
    3. Container mit Text bricht über die Rastergrenzen hinaus
    Wenn Sie den Text relativ zum Raster positionieren und wollen, dass er immer innerhalb des Bildschirms bleibt, achten Sie darauf, dass sein Container nicht über den Rasterbereich hinausgeht. Es ist eine gute Angewohnheit, ein sauberes Layout zu erstellen; auf diese Weise vermeiden Sie unangenehme Überraschungen, wenn der Block veröffentlicht wird.
    Verwenden Sie Zero Block, um beeindruckende Websites und innovative typografische Lösungen zu erstellen. Es wird zu einem nützlichen Werkzeug für Ihre Designs. Verleihen Sie Ihrer Website mit Spezialeffekten, Typografie und ausgefallenem Seitendesign Persönlichkeit. Jetzt liegt alles in Ihrer Hand!

    Text, Gestaltung, Illustration und Layout: Masha Belaya
    Redaktionelle Bearbeitung: Varya Gurova, Julia Zass
    Übersetzung: Svetlana Graudt
    Wenn Sie diesen Artikel mögen, teilen Sie ihn bitte mit Ihren Freunden. Danke!
    Hergestellt am
    Tilda