Zero Block: Wie man einen benutzerdefinierten Block erstellt

Um eine Zero Block zur Seite hinzuzufügen, klicken Sie ganz unten auf der Seite auf Null. Sie finden sie auch unten in der Blockbibliothek, direkt unter der Kategorie "Sonstige".

Ein Zero Block verfügt über alle normalen Blockfunktionen - er kann kopiert, entfernt, gelöscht und ausgeblendet werden. Er verfügt über Einstellungen, aber statt einer Schaltfläche "Inhalt" gibt es eine Schaltfläche "Blockeditor". Klicken Sie darauf, wenn Sie den Block bearbeiten möchten, und der Blockeditor wird geöffnet.

Zero Block hat zwei Arbeitsbereiche oder Container: den Raster-Container und den Fenster-Container, die die Grenzen eines Browser-Bildschirms angeben.

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

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

Eine Zero Block unterstützt alle grundlegenden Mausmanipulationen: Elemente können verschoben, in der Größe verändert und kopiert werden (bei gedrückter Alt-Taste), und es können mehrere Elemente ausgewählt werden.

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

Die Höhe der Textelemente ändert sich automatisch in Abhängigkeit von der Textmenge.

Die Größe von Schaltflächen und Formen kann in alle Richtungen verändert werden.

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

Die Bearbeitung von Blockelementen mit der Tastatur beschleunigt den Arbeitsprozess erheblich, weshalb wir die Verwendung von Hotkeys empfehlen.

Sie können die Liste der Tastenkombinationen auch über das Kontextmenü im Blockeditor aufrufen.

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

Standardmäßig ist das Einstellungsfeld ausgeblendet, damit der Arbeitsbereich übersichtlich bleibt.

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

Die Koordinaten des Elements sehen Sie unten. Sie können in Pixel oder Prozent angegeben werden. Im Folgenden gehen wir auf diese Funktion im Detail ein.

Der Ursprung ist durch ein blaues Kreuz gekennzeichnet.

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

Wenn Sie ein Bild hochladen, nimmt es die Größe des Rahmens an, in dem es hochgeladen wird. Klicken Sie im Einstellungsbereich 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 Abrundungsradius ein.

Um einen gleichmäßigen Kreis zu erstellen, sollte das Originalbild eine quadratische Form haben und der Abrundungsradius sollte der Hälfte der Seitenlänge entsprechen. Wenn das Bild zum Beispiel 100×100 Pixel groß ist, stellen Sie einen Radius von 50 ein.

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

Jedes Bild kann mit einem alternativen Text (Alt-Tag) versehen werden. Suchmaschinen interpretieren den alternativen Text als Schlüsselwörter und verwenden ihn, um die Seite zu indizieren. Achten Sie also darauf, dass der alternative Text für den Inhalt Ihrer Website im Allgemeinen relevant ist und den Inhalt des Bildes widerspiegelt.

Jedes Bild kann in einen Link umgewandelt werden, so dass der Benutzer, wenn er darauf klickt, auf eine andere Seite weitergeleitet wird. Gehen Sie zum Einstellungsfeld des Elements und geben Sie den Link an und ob er im gleichen oder in einem neuen Fenster 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 geben Sie die Werte in den Elementeinstellungen an.

Kreis. Um einen Kreis zu erstellen, legen Sie einen Rundungsradius fest, 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 erzeugen Sie eine Linie.

Formen können einen Schatten, einen Rahmen und eine Verknüpfung zugewiesen bekommen.

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

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

Sie können das Verhalten der Schaltfläche einstellen. So ändern sich beispielsweise die Hintergrundfarbe, die Textfarbe und die Farbe des Rahmens, wenn der Mauszeiger über die Schaltfläche bewegt wird.

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

Sie können die Farbe, den Schatten und die Größe der QuickInfo anpassen, das im Kreis angezeigte Symbol einstellen, das Bild hochladen, das angezeigt wird, wenn Sie mit dem Mauszeiger darüber fahren, und eine Animation erstellen.

Stellen Sie sicher, dass Sie die Position der QuickInfo auf allen Bildschirmauflösungen überprüfen, nachdem Sie die Elemente im Block angeordnet haben, damit die QuickInfo 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 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 Einstellungsbereich 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 Einstellungsfenster des Elements und klicken Sie auf Dienste. Dort können Sie die Datenerfassungsdienste mit dem Formular verbinden.

In Zero Block können Sie eine Bildergalerie hinzufügen. Sie können die Breite und Höhe der Galerie genau wie beim Element "Form" ändern.

Schauen wir uns die Galerieeinstellungen an:

Stretch: Es gibt zwei Parameter: Cover und Contain.

Bei Cover füllen die Bilder den Galeriebereich vollständig aus, so dass sie beschnitten werden können, wenn ihr Format von dem der Galerie abweicht.

Bei Contain bleiben die Bilder in der Galerie in ihrem ursprünglichen Format, so dass sie in Galerien beliebigen Formats nicht beschnitten werden.

Position. Definiert die Position des Bildes in Bezug auf den Galeriebereich. Wenn zum Beispiel der Parameter Links oben ausgewählt ist, wird das Bild in Bezug auf die linke obere Ecke der Galerie positioniert.

Schleife. Mit dieser Einstellung werden die Dias (Bilder) in der Galerie in einer Schleife angezeigt. Sie hat zwei Parameter: Schleife und Keine.

Bei der Option Schleife werden die Dias in der Galerie in einer Endlosschleife angezeigt, d. h. das erste Dia erscheint nach dem letzten Dia.

Bei der Option Keine findet keine Schleife statt, und die Galerie bleibt beim letzten Dia stehen.

Dia-Geschwindigkeit definiert den Animationstyp für den Diawechsel. Sie hat drei Parameter: Keine, Langsam und Schnell.

Bei der Option Keine wird beim Folienwechsel keine Animation verwendet.

Bei der Option Langsam werden die Folien langsam umgeschaltet.

Bei der Option Schnell werden die Folien schnell umgeschaltet.

Autoplay legt die Geschwindigkeit des automatischen Folienwechsels in Sekunden fest.
Wenn Sie den Wert in Sekunden nicht angegeben haben, erfolgt kein automatischer Folienwechsel.

Die Option Zoombar ermöglicht das Zoomen der Galeriebilder beim Anklicken. Sie hat zwei Parameter: Zoom bei Klick und Keine.

Bei der Option Zoom bei Klick werden die Bilder bei Klick vergrößert.

Bei der Option Keine werden die Bilder bei Klick nicht vergrößert.

Die Registerkarte Pfeile enthält Einstellungen, die festlegen, wie die Pfeile (Schaltflächen) aussehen.

Die Registerkarte Punkte enthält Einstellungen, die festlegen, wie die Punkte unter der Galerie aussehen. Die Punkte zeigen die Anzahl der Dias an.

Jedes Dia (Bild) hat seine eigenen Einstellungen:

Hier können Sie eine Bildunterschrift und einen Alt-Tag für SEO hinzufügen, ein YouTube- oder Vimeo-Video einbinden sowie einen Link angeben, zu dem Sie springen, wenn Sie auf diese Folie klicken.

Tilda unterstützt responsives Design für alle grundlegenden Bildschirmtypen:
1200-max (Desktops)
980-1200 (horizontale Tablets)
640-980 (vertikale Tablets)
480-640 (horizontale Smartphones)
320-480 (vertikale Smartphones)

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

Nachdem Sie ein Zero Block auf der Hauptzeichenfläche angepasst haben, wechseln Sie die Bildschirmtypen und nehmen Sie gegebenenfalls Anpassungen vor, z. B. an der Breite der Textspalte, der Bildgröße, der Schriftgröße, der Höhe der Zeichenfläche oder dem Layout der Elemente.

Die Einstellungen, die für einen bestimmten Bildschirmtyp geändert wurden, sind hervorgehoben. Die Einstellungen, die die Einstellungen eines anderen Bildschirmtyps widerspiegeln, sind grau. Auf diese Weise ist es einfach zu erkennen, welche Einstellungen geändert wurden.

Im folgenden Beispiel sind alle Einstellungen des Textelements grau hinterlegt. 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 nur für diesen Bildschirmtyp gelten.

Wenn Sie auf eine leere Fläche klicken, werden die Artboard-Einstellungen angezeigt.

Sie können die Höhe des Raster-Containers in Pixeln über die Tastatur festlegen. Sie können den Wert durch Ziehen am Rand des Containers ändern. Die Breite des Raster-Containers ist auf 1200 Pixel festgelegt.

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

Sie können in den Zeichenflächeneinstellungen ein Hintergrundbild für den gesamten Block hochladen.

Sie können auch die Darstellung des Hintergrundbildes (Filterstart/Filterende) und das Verhalten des Inhalts in Bezug auf das Hintergrundbild anpassen: Wenn Sie den Wert "Fest" einstellen, bewegt sich der Inhalt (Text und Formen) beim Scrollen, während das Bild an seinem Platz bleibt.

Damit ein Block beim Klicken auf eine Schaltfläche oder einen Link erscheint, fügen Sie den Modifikatorblock T1093 aus der Kategorie "Sonstige" hinzu.

Geben Sie auf der Registerkarte "Inhalt" des Blocks die ID der Zero Block an, die Sie benötigen (oder wählen Sie sie manuell aus, indem Sie auf den Link "Choose Zero Block" klicken). Standardmäßig ist der Link zum Pop-up der Link #zeropopup, Sie können diesen Namen beliebig ändern, sollten aber das Rautezeichen 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,
Ihren eigenen Z-Index und andere Parameter auswählen.