Eine der effektivsten Möglichkeiten, den Konvertierungsprozess zu zeigen oder die Ergebnisse Ihres Projekts "Vorher" und "Nachher" zu vergleichen, besteht darin, die Vorher-Nachher-Galerie zu verwenden. Tilda, eine Plattform zum Erstellen von Websites von Grund auf neu, bietet eine einfache und bequeme Möglichkeit, eine solche Galerie in wenigen Schritten zu erstellen.
Das Erstellen einer Vorher-Nachher-Galerie in Tilda zeigt nicht nur Ihre Fähigkeiten und Kreativität, sondern ermöglicht es Ihnen auch, Ihre Kunstwerke oder Produkte im hellsten Licht zu präsentieren. Dank dieser Funktion können Sie ganz einfach eine Idee vermitteln oder die Vorteile Ihrer Lösung gegenüber anderen visualisieren.
Um eine Vorher-Nachher-Galerie in Tilda zu erstellen, benötigen Sie nur ein paar einfache Schritte. Zuerst müssen Sie zwei Bilder hinzufügen: "vorher" und "nachher". Wählen Sie die repräsentativsten Bilder aus, die die Hauptidee Ihres Projekts so gut wie möglich vermitteln. Gehen Sie dann zum Tilda-Bearbeitungsbereich und wählen Sie den Block auf der Seite aus, in dem Sie Ihre Galerie platzieren möchten.
Erstellen einer Vorher-Nachher-Galerie
Wählen Sie zunächst den Block aus, in dem Sie die Galerie platzieren möchten. Suchen Sie dann in den Blockeinstellungen den Abschnitt "Module" und wählen Sie das Modul "Vorher-Nachher-Galerie" aus.
Im Modul "Vorher-Nachher-Galerie" müssen Sie zwei Bilder hochladen: "Vorher" und "Nachher". Es ist wichtig, dass beide Bilder die gleiche Größe und Ausrichtung haben. Die Formate JPG, PNG und GIF werden unterstützt.
Nachdem Sie beide Bilder heruntergeladen haben, können Sie das Aussehen der Galerie anpassen. Wählen Sie einen Anzeigestil aus: horizontaler oder vertikaler Split. Sie können auch die Breite des Rahmens zwischen den Bildern festlegen, die Farbe und die Dicke des Rahmens ändern und eine Textbeschriftung hinzufügen.
Wenn Sie mehrere Vorher-Nachher-Galerien auf einer Seite hinzufügen möchten, fügen Sie einfach mehrere Vorher-Nachher-Galerie-Module hinzu und passen Sie jede nach Ihren Wünschen an.
Nachdem Sie das Modul eingerichtet und gespeichert haben, können Sie das Ergebnis auf Ihrer Website sehen. Die Vorher-Nachher-Galerie ermöglicht es den Besuchern, beeindruckende Veränderungen zu sehen und die Ergebnisse der Arbeit zu vergleichen, was sie zu einem effektiven Vertriebs- und Marketinginstrument macht.
Schritt 1: Entwerfen eines Layouts
Zuerst müssen Sie sich für das Design der Galerie entscheiden. Sie können eines der auf Tilda angebotenen Designs auswählen oder Ihr eigenes Design mit den Tools und Funktionen von Tilda erstellen.
Bei der Gestaltung des Layouts der Galerie lohnt es sich, auf Aspekte zu achten, wie:
- Abmessungen der Elemente: bestimmen Sie die Größe der Bilder in der Galerie entsprechend, damit sie harmonisch aussehen und sich nicht überlappen.
- Anordnung der Elemente: entscheiden Sie, wie die Bilder in der Galerie angeordnet werden - in einer Reihe, in einem Raster oder auf andere Weise. Das allgemeine Erscheinungsbild der Galerie sollte logisch und benutzerfreundlich sein.
- Dekoration von Elementen: definieren Sie die Stilisierung von Bildern wie Rahmen, Schatten und die Interaktion mit ihnen, wenn Sie den Mauszeiger bewegen.
- Funktionalität: legen Sie fest, welche Aktionen für den Benutzer verfügbar sind: Öffnen von Fotos in voller Größe, Wechseln zwischen Vorher-Nachher-Bildern und anderen Funktionen.
Nachdem Sie das Layout entwickelt haben, können Sie mit dem nächsten Schritt fortfahren, indem Sie eine Vorher-Nachher-Galerie auf der Tilda-Plattform erstellen.
Schritt 2: Hinzufügen von Fotos
Befolgen Sie die folgenden Anweisungen, um Fotos vor und nach der Tilda-Plattform in Ihre Galerie einzufügen:
- Wählen Sie den Block aus, in dem Sie Ihre Galerie platzieren möchten.
- Öffnen Sie die Blockeinstellungen (das Zahnradsymbol oben rechts im Block).
- Klicken Sie im Abschnitt "Hintergrund" auf die Schaltfläche "Foto hinzufügen" oder ziehen Sie die Fotos aus einem Ordner auf Ihren Computer in den Block.
- Wählen Sie alle Fotos aus, die Sie vor und nach der Galerie hinzufügen möchten.
- Klicken Sie auf Fertig stellen.
- Passen Sie das Erscheinungsbild der Galerie an, indem Sie unter "Blockeinstellungen" den Anzeigentyp, die Übergangseinstellungen zwischen Fotos und andere Optionen auswählen.
- Speichern Sie Ihre Änderungen, indem Sie oben rechts im Bearbeitungsfenster auf die Schaltfläche Speichern klicken.
Nachdem Sie diese Schritte ausgeführt haben, fügen Sie erfolgreich Fotos zu Ihrer Vorher-Nachher-Galerie auf der Tilda-Plattform hinzu. Fahren Sie mit dem nächsten Schritt fort, um mit der Einrichtung Ihrer Galerie fortzufahren.
Schritt 3: Konfigurieren der Statusänderung
Nachdem Sie eine Vorher-Nachher-Galerie auf der Tilda-Seite erstellt haben, müssen Sie die Statusänderung konfigurieren, um die verschiedenen Bildvarianten anzuzeigen.
Dazu müssen Sie Schaltflächen oder andere Steuerelemente hinzufügen, die den Galeriestatus umschalten. Sie können Schaltflächen, Links oder sogar Bilder als Steuerelemente verwenden.
Bestimmen Sie zunächst, welche Zustände oder Optionen Sie in der Galerie anzeigen möchten. Wenn Sie beispielsweise eine Galerie erstellen, um vor und nach den Reparaturfotos zu zeigen, haben Sie möglicherweise zwei Optionen: "Vorher" und "Nachher".
Fügen Sie dann Steuerelemente hinzu, die den Galeriestatus umschalten. Sie können beispielsweise zwei Schaltflächen mit "Vorher" und "Nachher" hinzufügen. Wenn Sie auf jede Schaltfläche klicken, ändert sich der Status der Galerie.
Sie können verschiedene Methoden verwenden, um den Statuswechsel in Tilda anzupassen, einschließlich der Verwendung von JavaScript oder HTML-Code. Tilda verfügt über spezielle Module und Funktionen, mit denen Sie den Statuswechsel mit vorgefertigten visuellen Werkzeugen anpassen können.
Wenn Sie JavaScript verwenden möchten, müssen Sie dem Abschnitt "Javascript-Verbindungen" oder "Benutzerdefinierter HTML-Code" den entsprechenden Code hinzufügen. In diesem Code können Sie festlegen, welche Aktionen ausgeführt werden sollen, wenn Sie auf jede Schaltfläche klicken, um den Status der Galerie zu ändern.
Wenn Sie lieber HTML verwenden möchten, können Sie den entsprechenden Code direkt zum Abschnitt "Elementbeschreibungen" hinzufügen, in dem sich die Steuerelemente befinden. Sie können beispielsweise einen Link oder eine Schaltfläche mit dem Attribut "onclick" hinzufügen, um die gewünschte Funktion oder Methode aufzurufen, um den Status der Galerie zu ändern.
Denken Sie daran, dass Sie HTML-, CSS- und JavaScript-Kenntnisse benötigen, um den Statuswechsel in Tilda zu konfigurieren, sowie ein Verständnis für die Funktionsweise der Tilda-Plattform und ihrer Funktionen benötigen.
Nachdem Sie den Statuswechsel in Ihrer Vorher-Nachher-Galerie eingerichtet haben, stellen Sie sicher, dass alles ordnungsgemäß funktioniert und dass Benutzer die verschiedenen Bildoptionen problemlos anzeigen können.
Galerie nach Tilda importieren
Um die Galerie in Tilda zu importieren, müssen Sie einige Schritte befolgen:
- Gehen Sie zu Ihrem Projekt auf der Tilda-Plattform und wählen Sie die Seite aus, auf der Sie eine Galerie erstellen möchten.
- Gehen Sie zum Abschnitt Inhalt und wählen Sie Galerie aus der Liste der verfügbaren Blöcke aus.
- Klicken Sie auf die Schaltfläche Neue Galerie erstellen und wählen Sie den gewünschten Stil für Ihre Galerie aus.
- Klicken Sie dann auf die Schaltfläche "Bilder importieren" und wählen Sie alle Bilder aus, die Sie der Galerie hinzufügen möchten. Mit Tilda können Sie sowohl einzelne Bilder als auch ganze Ordner mit Bildern importieren.
- Nachdem Sie die Bilder ausgewählt haben, klicken Sie auf die Schaltfläche "OK" und sie werden Ihrer Galerie hinzugefügt.
Danach können Sie die Anzeige der Galerie anpassen, Bildbeschriftungen hinzufügen, den Anzeigemodus und andere Optionen auswählen.
Tilda verfügt über eine einfache und intuitive Benutzeroberfläche, so dass der Importvorgang der Galerie nicht viel Zeit und Mühe in Anspruch nimmt.
Schritt 1: Vorbereiten der Bilder
Bevor Sie eine Vorher-Nachher-Galerie in Tilda erstellen, müssen Sie die Bilder vorbereiten, die Sie verwenden möchten.
Wählen Sie zuerst die Fotos aus, bei denen es sich um "Vorher" - und "Nachher" -Bilder für Ihre Galerie handelt. Stellen Sie sicher, dass sie eine ähnliche Größe und ähnliche Proportionen haben, damit die Galerie professionell und ästhetisch aussieht.
Zweitens, verarbeiten Sie die Bilder, damit sie in Tilda verwendet werden können. Sie können dafür einen beliebigen Grafikeditor verwenden, z. B. Adobe Photoshop oder Online-Tools wie Canva oder Pixlr.
Passen Sie die Größe der Fotos so an, dass sie den Tilda-Anforderungen entsprechen. Es wird empfohlen, Bilder mit einer Auflösung von 1500 Pixeln in der Breite und in der entsprechenden Höhe zu verwenden. Beachten Sie, dass je größer das Bild ist, desto länger die Seite geladen wird. Versuchen Sie daher, die Größe und das Gewicht der Bilder zu optimieren.
Speichern Sie die Bilder im JPEG- oder PNG-Format, damit sie bei Bedarf transparent bleiben.
- Wählen Sie die Vorher- und Nachher-Fotos aus.
- Verarbeiten Sie die Bilder so, dass sie den Tilda-Anforderungen entsprechen.
- Ändern Sie die Größe der Fotos auf 1500 Pixel in der Breite.
- Speichern Sie die Bilder im JPEG- oder PNG-Format.
Schritt 2: Bilder in Tilda hochladen
Um eine Vorher-Nachher-Galerie in Tilda zu erstellen, müssen Sie die entsprechenden Bilder hochladen. Sie benötigen mindestens zwei Bilder: das Vorher-Bild und das Nachher-Bild.
Führen Sie die folgenden Schritte aus, um Bilder in Tilda hochzuladen:
1. Melden Sie sich bei Tilda in Ihrem Konto an.
2. Erstellen Sie einen neuen Block, in dem die Galerie platziert werden soll.
3. Wählen Sie im Blockbearbeitungsmodus den Abschnitt "Meine Dateien" aus.
4. Klicken Sie auf die Schaltfläche "Dateien hochladen" und wählen Sie das Bild "Bis" auf Ihrem Computer aus.
5. Nachdem Sie das Bild "Vorher" heruntergeladen haben, sehen Sie es unter "Meine Dateien".
6. Wiederholen Sie die Schritte 4 bis 5 für das Bild "Nach".
7. Wechseln Sie zurück zum Blockbearbeitungsmodus und wählen Sie den Abschnitt "Galerie" aus.
8. Klicken Sie auf die Schaltfläche "Bild hinzufügen", wählen Sie das Bild "Bis" aus und klicken Sie auf "Auswählen".
9. Fügen Sie auf die gleiche Weise das Bild "nach" hinzu.
10. Ziehen Sie die Bilder in die gewünschte Reihenfolge, damit sie in der richtigen Reihenfolge angezeigt werden.
11. Klicken Sie auf die Schaltfläche "Speichern" und überprüfen Sie, wie Ihre Galerie vorher und nachher aussieht.
Jetzt haben Sie eine Vorher-Nachher-Galerie in Tilda, die Sie auf Ihrer Website verwenden können. Denken Sie daran, die Bilder so zu optimieren, dass sie schnell geladen werden und die Seite nicht langsamer wird.
Galerie in Tilda einrichten
Befolgen Sie einige einfache Schritte, um eine Vorher-Nachher-Galerie in Tilda zu erstellen. Wählen Sie zuerst den gewünschten Block auf der Seite aus, zu dem Sie die Galerie hinzufügen möchten. Öffnen Sie dann die Blockeinstellungen und klicken Sie auf die Registerkarte Ansichten.
Im Abschnitt Ansichten finden Sie die Option "Schieberegler mit Fotos hinzufügen". Klicken Sie darauf und gehen Sie zu den Schiebereglereinstellungen. In diesem Abschnitt können Sie Fotos für die Galerie hochladen und deren Reihenfolge anpassen.
Nachdem Sie die Fotos hochgeladen haben, haben Sie die Möglichkeit, ihre Reihenfolge per Drag & Drop festzulegen. Sie können jedem Foto auch einen Titel und eine Beschreibung hinzufügen, um die vorgenommenen Änderungen weiter zu verdeutlichen.
Um die Galerie in Tilda detaillierter zu gestalten, können Sie die zusätzlichen Optionen verwenden. Zum Beispiel können Sie einen Animationstyp auswählen, um Fotos zu wechseln oder zwischen den Folien zu pausieren.
Außerdem bietet Tilda die Möglichkeit, das Erscheinungsbild der Galerie anzupassen. Sie können einen Anzeigestil für Fotos (mit oder ohne Überschriften) auswählen und die Größe und den Einzug anpassen.
Denken Sie nach dem Einrichten der Galerie daran, die Änderungen zu speichern und die Seite zu veröffentlichen. Jetzt wird Ihre Vorher-Nachher-Galerie auf Ihrer Website angezeigt und die Aufmerksamkeit der Besucher erregt.
