Zero Block: So erstellen Sie einen benutzerdefinierten Block

Um der Seite einen Zero Block hinzuzufügen, klicken Sie ganz unten auf der Seite auf Null. Du findest es auch unten in der Blockbibliothek, direkt unter der Kategorie "Sonstiges".

Ein Zero Block behält alle regulären Block-Features bei – er kann kopiert, entfernt, gelöscht und ausgeblendet werden. Es hat Einstellungen, aber anstelle einer Schaltfläche "Inhalt" hat es eine Schaltfläche "Editor blockieren". Klicken Sie darauf, wenn Sie den Block bearbeiten möchten, und der Block-Editor wird geöffnet.

Ein Zero Block verfügt über zwei Arbeitsbereiche oder Container: den Rastercontainer und den Fenstercontainer, die die Grenzen eines Browserbildschirms angeben.

Der Grid Container unterstützt das gleiche Raster wie Tilda – 12 Spalten (1200 px). Wenn Sie Objekte am Raster ausrichten und Elemente innerhalb des Rastercontainers platzieren, bleiben sie unabhängig von der Bildschirmgröße immer innerhalb der Grenzen von 12 Spalten.

Klicken Sie auf die Plus-Schaltfläche in der oberen linken Ecke des Blockeditors, um der Seite ein Element hinzuzufügen. Sie können Text, Bild, Form, Schaltfläche, Video, QuickInfo, HTML, Formular oder Galerie hinzufügen.

Ein Zero Block unterstützt alle grundlegenden Mausmanipulationen: Elemente können verschoben, in der Größe geändert, kopiert werden (durch Halten der Alt-Taste) und mehrere Elemente können ausgewählt werden.

Sie können die Größe eines Bildelements ändern, ohne seine Proportionen zu ändern.

Die Höhe der Textelemente ändert sich automatisch in Abhängigkeit vom Textvolumen.

Die Größen von Knöpfen und Formen können in alle Richtungen geändert werden.

Wenn mehrere Elemente ausgewählt werden, können diese horizontal oder vertikal zueinander oder zum Container ausgerichtet werden.

Das Editieren von Blockelementen per Tastatur beschleunigt den Arbeitsprozess erheblich, weshalb wir die Verwendung von Hotkeys empfehlen.

Sie können auch über das Kontextmenü im Blockeditor auf die Liste der Tastaturkürzel zugreifen.

Sie können auf die vollständigen Einstellungen jedes Elements zugreifen, indem Sie auf Einstellungen in der unteren rechten Ecke des Bildschirms klicken.

Standardmäßig ist das Einstellungsfenster ausgeblendet, um den Arbeitsbereich übersichtlich zu halten.

Verwenden Sie die obere Schaltflächenreihe, um ein Element schnell vertikal oder horizontal am Container auszurichten.

Sie können die Koordinaten des Elements unten sehen. Sie können in Pixel oder Prozent angegeben werden. Unten sehen wir uns diese Funktion im Detail an.

Der Ursprung ist mit einem blauen Kreuz gekennzeichnet.

Sie können auch die Parameter des Elements anzeigen: Breite und Höhe, gemessen in Pixel.

Wenn Sie ein Bild hochladen, nimmt es die Größe des Frames an, in dem es hochgeladen wird. Klicken Sie im Bereich Einstellungen des Elements auf Originalgröße, um das Bild auf seine Originalgröße zurückzusetzen.

Wenn Sie das Bild kreisförmig zuschneiden möchten, stellen Sie den Rundungsradius ein.

Um einen gleichmäßigen Kreis zu erhalten, sollte das Originalbild eine quadratische Form haben und der Rundungsradius sollte der Hälfte der Seite entsprechen. Wenn das Bild beispielsweise 100×100 px groß ist, legen Sie einen Radius von 50 fest.

Sie können dem Bild einen Schatten hinzufügen. Wählen Sie dazu Schattenfarbe, Deckkraft, x- und y-Versatz, Grad der Unschärfe und Spreizung im Einstellungsfenster des Elements aus.

Jedes Bild kann einen alternativen Text (Alt-Tag) haben. Suchmaschinen interpretieren den Alternativtext als Schlüsselwörter und verwenden sie, um die Seite zu indizieren. Stellen Sie also sicher, dass der Alternativtext für den Inhalt Ihrer Website im Allgemeinen relevant ist und den Inhalt des Bildes widerspiegelt.

Jedes Bild kann in einen Link umgewandelt werden, sodass der Benutzer, wenn er darauf klickt, zu einer anderen Seite weitergeleitet wird. Gehen Sie zum Bedienfeld „Einstellungen“ des Elements und geben Sie den Link an und geben Sie an, ob er im selben Fenster oder in einem neuen geöffnet werden soll.

Wenn Sie eine Form hinzufügen, wird auf der Seite ein Quadrat angezeigt, das in ein Rechteck, einen Kreis oder eine Linie umgewandelt werden kann.

Rechteck: Ändern Sie die Seitenlängen durch Ziehen der Kontrollpunkte.

Oder legen Sie die Werte in den Elementeinstellungen fest.

Kreis. Um einen Kreis zu erstellen, stellen Sie einen Rundungsradius ein, der der Hälfte der Seitenlänge des Quadrats entspricht.

Linie. Stellen Sie die Höhe des Rechtecks in den Elementeinstellungen auf 1-5 px ein. So werden Sie eine Linie machen.

Formen können einen Schatten, einen Rahmen und einen ihnen zugewiesenen Link haben.

Sie können die Größe, Farbe und den Rundungsradius der Schaltfläche ändern. Sie können auch einen Schatten und einen Rahmen hinzufügen.

Sie können die Beschriftung und den Link der Schaltfläche im Einstellungsbereich des Elements festlegen. Dort können Sie auch Größe, Typ, Deckkraft und Schriftfarbe festlegen.

Sie können das Verhalten der Schaltfläche festlegen. Beispielsweise ändern sich die Hintergrundfarbe, die Textfarbe und die Randfarbe, wenn der Mauszeiger über die Schaltfläche bewegt wird.

Tooltip ist ein interaktives Blockelement, das einen Texthinweis und/oder ein Bild anzeigt, wenn Sie den Mauszeiger darüber bewegen.

Sie können die Farbe, den Schatten und die Größe des Tooltips anpassen, das im Kreis angezeigte Symbol festlegen, das Bild hochladen, das angezeigt wird, wenn Sie den Mauszeiger darüber bewegen, und eine Animation erstellen.

Achten Sie darauf, die Position des Tooltips bei allen Bildschirmauflösungen zu überprüfen, nachdem Sie die Elemente im Block so angeordnet haben, dass der Tooltip nicht an den Rändern des Blocks abgeschnitten wird.

Sie können einem Zero Block ein horizontales oder vertikales Formular hinzufügen. Sie haben Zugriff auf alle grundlegenden Formulareinstellungen, wie z. B. das Hinzufügen von Eingabefeldern, das Verbinden von Datenerfassungsdiensten, das Einrichten von Erfolgs- und Fehlermeldungen, das Ändern des Designs und das Erstellen einer Animation.

Um die Eingabefelder zu bearbeiten, gehen Sie zum Bereich Einstellungen des Elements und klicken Sie auf Eingabefelder. Hier können Sie die Eingabefelder wie in einem normalen Formularblock anpassen.

Um Datenerfassungsdienste mit dem Formular zu verbinden, gehen Sie zum Einstellungsbereich des Elements und klicken Sie auf Dienste. Dort können Sie die Datenerfassungsdienste mit dem Formular verbinden.

Tilda unterstützt responsives Design für alle grundlegenden Bildschirmtypen:
1200 – max. (Desktops)
980—1200 (horizontale Tablette)
640—980 (vertikale Tablette)
480—640 (horizontales Smartphone)
320—480 (vertikales Smartphone)

Dies reicht aus, damit Ihr Design auf allen Geräten korrekt angezeigt wird.

Nachdem Sie einen Zero Block auf der Hauptzeichenfläche angepasst haben, wechseln Sie die Bildschirmtypen, und nehmen Sie bei Bedarf Anpassungen vor, z. B. Textspaltenbreite, Bildgröße, Schriftgröße, Zeichenflächenhöhe oder Elementlayout.

Die Einstellungen, die für einen bestimmten Bildschirmtyp geändert wurden, werden hervorgehoben. Die Einstellungen, die denen eines anderen Bildschirmtyps entsprechen, sind grau. So ist leicht ersichtlich, welche Einstellungen geändert wurden.

Im Beispiel unten hat das Textelement alle seine Einstellungen in Grau. Das bedeutet, dass sie für den aktuellen Bildschirmtyp dieselben sind wie für den vorherigen.

Wenn wir die Schriftgröße und die Elementkoordinaten für einen bestimmten Bildschirmtyp ändern, werden die Werte nicht mehr grau eingefärbt. Dies bedeutet, dass die neuen Einstellungen für diesen Bildschirmtyp eindeutig sind.

Wenn Sie auf eine leere Stelle klicken, sehen Sie die Artboard-Einstellungen.

Sie können die Höhe des Grid-Containers über Ihre Tastatur in Pixeln angeben. Sie können den Wert ändern, indem Sie am Rand des Containers ziehen. Die Breite des Grid-Containers ist auf 1200 Pixel festgelegt.

Sie können die Hintergrundfarbe des gesamten Blocks in den Zeichenflächeneinstellungen anpassen.

In den Artboard-Einstellungen können Sie ein Hintergrundbild für den gesamten Block hochladen.

Sie können auch das Rendern von Hintergrundbildern (Filterstart/Filterende) und das Inhaltsverhalten in Bezug auf das Hintergrundbild anpassen: Wenn Sie einen "Festen" Wert festlegen, wird der Inhalt (Text und Formen) während des Scrollens verschoben, während das Bild an Ort und Stelle bleibt.

Damit ein Block durch Klicken auf eine Schaltfläche oder einen Link angezeigt wird, fügen Sie den Modifikatorblock T1093 aus der Kategorie „Andere“ hinzu.

Geben Sie auf der Registerkarte Inhalt des Blocks die ID des gewünschten Zero Block an (oder wählen Sie ihn manuell aus, indem Sie auf den Link "Zero Block auswählen" klicken). Standardmäßig ist der Link zum Popup der #zeropopup Link, Sie können dies für jeden beliebigen Namen ändern, sollten aber das Rautenzeichen am Anfang beibehalten. Dann funktioniert der Block wie ein normales Pop-up und wird auf der Seite ausgeblendet.

Lesen Sie mehr darüber, wie Pop-up-Blöcke funktionieren, im Artikel " Pop-ups" .

In den Einstellungen des T1093-Blocks können Sie die Parameter für den Hintergrund (Farbe, Deckkraft), die Farbe des Schließsymbols, die Animationsgeschwindigkeit usw. auswählen.
Ihr eigener Z-Index und andere Parameter.