Der ThemeForest-Autorenleitfaden für Unbounce-Vorlagen

Neuestes Update: Wir haben weitere tolle Neuigkeiten! Unbounce hat mehrere neue Designfunktionen hinzugefügt, die den Benutzern von Unbounce Zugriff auf einige sehr leistungsstarke Designtools geben. Die neuen Funktionen sind:

• Parallax-Scrolling
• Farbüberlagerung
• Transparenz
• Bildgröße an Container anpassen

Diese Updates ermöglichen es Unbounce-Kunden, diese Funktionen hinzuzufügen, ohne Code-Problemumgehungen von Drittanbietern zu verwenden. Alle in diesem Update hinzugefügten Operationen können schnell und einfach ausgeführt werden – Webdesigner aller Couleur können die neuen Funktionen von Unbounce nutzen.

Wir haben den Beitrag erneut aktualisiert, um diese jüngsten Änderungen widerzuspiegeln. Wir zeigen Ihnen, wo Sie die Funktionen finden und wie Sie sie verwenden. Weitere Informationen zu den neuesten Updates finden Sie am Ende von Teil 2 unten!

Update: Große Neuigkeiten! Unbounce-Landingpages sind jetzt mobil-responsive, was bedeutet, dass Designer Vorlagen erstellen und verkaufen können, die sich automatisch an jedes Gerät anpassen. Dies ist das bisher größte Produkt-Update von Unbounce und Tausende von Vermarktern werden versuchen, ihre Landingpages zu aktualisieren, damit sie mobil-responsiv sind. Mit anderen Worten, sie werden so schnell wie möglich neue Vorlagen benötigen.

Wir haben diesen Beitrag aktualisiert, um Ihnen zu zeigen, was mobile-responsiv ist und wie Sie in Unbounce eine mobile-responsive Vorlage entwerfen können. Sie können zu Teil 4 unten springen, wenn Sie Unbounce bereits beherrschen und bereit sind, mit dem Design für Mobilgeräte zu beginnen!

In diesem Tutorial stelle ich Ihnen Unbounce vor, ein Tool zum Erstellen kampagnenspezifischer Zielseiten. Wir werden die Anatomie verschiedener Arten von Landingpages durchgehen, die Funktionen des Tools durchgehen und dann behandeln, was erforderlich ist, um Ihre eigenen Unbounce-Vorlagen auf Themeforest zu verkaufen.

Einführung von Unbounce

Unbounce wurde entwickelt, um ein sehr spezifisches Problem zu lösen. um professionelle Vermarkter in die Lage zu versetzen, selbst schöne und leistungsstarke kampagnenspezifische Landingpages zu erstellen. Das heißt, ohne die Hilfe von Entwicklern oder – hier kommen Vorlagen ins Spiel – Designern.

Da die Hauptnutzerbasis von Unbounce Vermarkter sind, die möglicherweise nicht mit robusten Designtools vertraut sind, ist der Landing Page Builder mit einer WYSIWYG-Drag-and-Drop-Oberfläche einfach zu bedienen. Abe auch erfahrene Designer können sich ebenso zu Hause fühlen; es ist möglich, benutzerdefinierte JavaScript-, CSS- und HTML-Widgets hinzuzufügen und Seitenelemente zum Pixel zu optimieren.

Landing Pages sind eigenständige Webseiten, die einem bestimmten, vordefinierten Ziel für Marketer dienen. Wenn Werbetreibende versuchen, ein Produkt oder eine Dienstleistung zu verkaufen, können sie eine Zielseite verwenden, um den Benutzer zu informieren, bevor sie ihn zur Preisseite leiten. Wenn sie für ein neues E-Book werben, benötigen sie eine Zielseite, um Kontaktinformationen von ihren Besuchern zu sammeln, bevor sie die Datei übergeben. Für diese beiden Kampagnen (und fast jede Kampagne!) Besucher einfach auf ihre Homepage zu schicken – anstelle einer dedizierten Landingpage – würde ein Marketingversagen bedeuten.

Kurz gesagt, Zielseiten sind so konzipiert, dass sie Benutzer zu einem bestimmten, auf die Conversion ausgerichteten Ziel führen.

Wer verwendet Unbounce?

Meist erfahrene professionelle Vermarkter. Sie führen ständig Marketingkampagnen durch und können/wollen sich nicht darauf verlassen, dass ihre internen Entwickler eine einzigartige Landingpage für jede Kampagne erstellen. Etwa ein Drittel unserer Kunden sind Teil des Marketingteams eines Unternehmens, ein weiteres Drittel arbeitet in einer Marketingagentur und das restliche Drittel sind Unternehmer.

Wie nutzen Marketer Unbounce?

Wenn Unbounce-Kunden nicht das nötige Design haben, um eine Seite von Grund auf neu zu erstellen, beginnen sie mit einer Vorlage oder lassen ihren Designer eine Vorlage für sie erstellen. Nachdem sie eine Vorlage an die Anforderungen ihrer Kampagne angepasst haben, verwenden Kunden häufig dieselbe Vorlage für jede ähnliche Kampagne, die sie ausführen.

A/B-Tests sind eine Kernfunktion von Unbounce. Benutzer können ihre fertige Seite duplizieren, eine Änderung am Design oder an der Kopie der neuen Seite vornehmen, den Datenverkehr auf die beiden Seiten aufteilen und die Berichte von Unbounce verwenden, um festzustellen, welche Version besser konvertiert. A/B-Tests ermöglichen es Kunden, ihre Landingpages und Marketingkampagnen ständig zu verbessern.

Entwerfen von Unbounce-Landingpages

Dieser Leitfaden hilft Ihnen beim Entwerfen und Erstellen einer Zielseite mit hoher Conversion-Rate für die Unbounce-Plattform.

Wir empfehlen Vorlagenautoren, sich für das kostenlose Konto von Unbounce anzumelden und eine E-Mail an templates@unbounce.com zu senden, um sie wissen zu lassen, dass Sie Vorlagen für den Weiterverkauf entwerfen. Eine E-Mail an unser Team stellt sicher, dass Ihr Konto kostenlos bleibt, wenn Sie die 200 einzelnen Besucher überschreiten, die normalerweise im kostenlosen Plan zulässig sind.

Was wir abdecken werden

Lassen Sie uns kurz zusammenfassen, was wir in diesem Tutorial behandeln werden.

• Entwerfen von Unbounce-Landingpages
• Teil 1: Was ist in einer Landingpage enthalten?
  • Homepages vs. Landing Pages
  • Anatomie einer Landing Page
  • Lead Gen vs. Click-through Landing Pages
• Teil 2: Designrichtlinien
  • Design aus einem Unbounce-Raster
  • Schriftartoptionen
  • Beispiel-Landingpages
  • Auf Container skalieren
  • Parallax-Scrolling
  • Farbüberlagerung und Deckkraft
  • Zu vermeidende Elemente
  • Inspiration
• Teil 3: Wie kann man eine Landing Page in Unbounce erstellen?
• Teil 4: Ihre Landing Page Mobile Responsive machen
  • Was ist mobile-responsiv?
  • Wie funktioniert es in Unbounce?
• Teil 5: Senden Sie Ihre Vorlage an Themeforest
  • Ihre unverzichtbare Checkliste
  • Genehmigungsanforderungen für Themeforest
  • Herunterladen einer Seite
  • Mehrere Layouts zusammenpacken

Teil 1: Was ist eine Landingpage?

Homepages vs. Landing Pages

Vergleichen wir die Webtrends-Homepage (links) mit einer ihrer Landingpages (rechts). Die Homepage ist schön gestaltet und ermöglicht es einem Besucher, eine Reihe von Aufgaben zu erledigen. Im Hauptpromobereich werden fünf Konzepte (über ein rotierendes Banner), vier ergänzende Botschaften darunter und insgesamt achtundzwanzig Interaktionspunkte präsentiert.

Marketingkampagnen sollten jedoch laserfokussiert sein und die Benutzer zu einer einzigen Aktion führen. Bei der Gestaltung einer Landing Page, die in Marketingkampagnen verwendet werden soll, muss das Konzept der Aufmerksamkeitsquote berücksichtigt werden. Das Aufmerksamkeitsverhältnis (Attention Ratio, AR) ist definiert als das Verhältnis zwischen interaktiven Elementen (Links/Leaks) auf der Seite und der Anzahl der Konversionsziele der Kampagne (die eins ist). Auf dieser Homepage beträgt das Aufmerksamkeitsverhältnis 28:1, was bedeutet, dass es siebenundzwanzig ablenkende Aktionen und eine gewünschte Aktion gibt.

Vergleichen Sie die Homepage mit einer der Landingpages zur Lead-Generierung (rechts). Auf der Zielseite muss nur eine Aktion ausgeführt werden. Benutzer werden gebeten, das Formular auszufüllen und auf die CTA-Schaltfläche zu klicken, um die Konvertierung abzuschließen. Dies führt zu einem viel fokussierteren Erlebnis für die Besucher und hält das Aufmerksamkeitsverhältnis bei 1:1.

Anatomie einer Landing Page

Auf jeder Landingpage gibt es fünf unverzichtbare Kernelemente, die weiter in eine detailliertere Liste von Bausteinen unterteilt werden können:

1. Ihr Alleinstellungsmerkmal (USP)
   • Die Hauptüberschrift
   • Eine unterstützende Schlagzeile
2. Die Heldenaufnahme (Bilder/Video mit Nutzungskontext)
3. Die Vorteile Ihres Angebots
   • Eine Zusammenfassung der Vorteile in einer Aufzählungsliste
   • Vorteile und Features im Detail
4. Sozialer Beweis ("Ich werde haben, was sie hat")
5. Ein einziges Conversion-Ziel – Ihr Call-to-Action (CTA) (mit oder ohne Formular)

Das folgende Diagramm zeigt ein Beispiellayout. Die Reihenfolge und Position der 5 Elemente hängt von der Geschichte ab, die Sie Ihren Besuchern erzählen möchten, und kann von diesem Beispiel abweichen. Es ist jedoch hilfreich, sich dies als Referenz anzusehen, während wir jedes Element durchgehen.

Lead Gen vs. Click-through Landing Pages

Es gibt zwei Haupttypen von Landing Pages: Lead-Generierung (Lead-Gen) und Click-Through.

Landingpages der Lead-Generation

Lead-Gen-Seiten werden verwendet, um Benutzerdaten wie Name und E-Mail-Adresse zu erfassen. Der einzige Zweck der Seite besteht darin, Informationen zu sammeln, die eine weitere Kommunikation mit dem Interessenten zu einem anderen Zeitpunkt ermöglichen. Eine Lead-Gen-Seite enthält ein Formular zusammen mit einer Beschreibung dessen, was der Besucher für die Übermittlung seiner personenbezogenen Daten erhält.

Click-Through-Landingpages

Click-through-Landingpages haben das Ziel, den Besucher davon zu überzeugen, sich zu einer anderen Seite durchzuklicken.

Sie werden normalerweise in E-Commerce-Trichtern verwendet und können Details zu einem Produkt oder einer Dienstleistung anbieten, um einen Besucher „aufzuwärmen“ und ihn einer Kaufentscheidung näher zu bringen. Wenn der Interessent sich zur folgenden Seite durchklickt, wird er mit allen Informationen versorgt, die er benötigt, und wird viel wahrscheinlicher kaufen.

Teil 2: Designrichtlinien

Entwerfen Sie aus einem unbounce-Raster

Bei Unbounce verwenden wir ein Standard-Rastersystem, das 12 Spalten verwendet, was einen 940-px-Container ergibt. Im folgenden Beispiel werden die verfügbaren Spaltenkombinationen aufgeschlüsselt. Wir empfehlen Ihnen, das Unbounce-Raster zu verwenden, um die besten Ergebnisse beim Design der Zielseite zu erzielen.

Schriftartoptionen

Unbounce bietet in seinem Landing Page Builder einen Standardsatz von Schriftarten sowie ein Google Web Fonts-Set. Wir empfehlen, beim Entwerfen für Unbounce die folgenden Schriftarten zu verwenden.

Google Webfonts

Unten finden Sie eine Liste der Google Web Fonts, die in Unbounce verfügbar sind. Bitte verwenden/laden Sie nur die folgenden Schriftarten aus der Google Web Fonts Library herunter.

• Abril Fatface
• Allan
• Arvo
• Cabin
• Dancing Script
• Droid Sans
• Gravitas One
• Josefin Sans
• Josefin Slab
• Lato
• Lobster
• Merriweather
• Old Standard TT
• Open Sans
• PT Sans
• PT Serif
• Playfair-Display
• Quantico
• Ubuntu
• Vollkorn

Standardschriftarten

Nachfolgend finden Sie eine Liste der Standardschriften, die in Unbounce verfügbar sind.

• Arial
• Courier New
• Georgia
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Beispiel-Landingpages

Jede Landing Page hat ein Ziel vor Augen; Besucher dazu bewegen, einen Call-to-Action auszuführen, z. B. das Ausfüllen eines Formulars oder das Durchklicken auf eine andere Seite. Nachfolgend finden Sie eine Auswahl der gängigsten Arten von Landingpages.

Es werden sowohl einfache minimalistische Designs als auch vollständig gestylte Beispiele gezeigt.

NEU: Kompliziertes Design einfach gemacht

Die Nutzung beliebter Webdesign-Trends kann dazu beitragen, Ihre Zielseite von anderen abzuheben, aber die Implementierung kann schwierig zu programmieren sein. Damit Unbounce-Benutzer von einigen aktuellen und effektiven Designtrends profitieren können, haben wir neue Tools in den Unbounce-Builder integriert. Sie können jetzt Funktionen wie Parallax-Scrolling per Mausklick in Ihre Landingpage integrieren, ohne auf Code von Drittanbietern angewiesen zu sein.

Auf Container skalieren

Sie haben das Internet nach dem perfekten Bild für Ihre Seite durchsucht. Sie fügen es Ihrem Abschnitt hinzu und es ist größer als der Container. Dafür gibt es in Unbounce eine einfache Lösung.

Nachdem Sie das Bild zu Ihrem Seitenabschnitt hinzugefügt haben, wählen Sie einfach Auf Seitenabschnitt anpassen. Wenn Sie möchten, dass es die gesamte Seite ausfüllt, können Sie Auf Seite anpassen auswählen.

Parallax-Scrolling

Um ein festes Bild zu erstellen, das an Ort und Stelle bleibt, während Besucher auf der Seite nach unten scrollen (Parallaxe), aktivieren Sie einfach das Kontrollkästchen "Fester Hintergrund beim Scrollen". Parallax Scrolling ist ein Designelement, das auf Landingpages sehr wirkungsvoll sein kann und erfordert normalerweise benutzerdefinierten Code. Unbounce ermöglicht es Ihnen, diese Funktion mit einem Klick auf eine Schaltfläche hinzuzufügen.

Hinweis: Diese Funktion wird nicht angezeigt, wenn sich Besucher in der mobilen Ansicht befinden.

Farbüberlagerung und Deckkraft

Mit der Farbüberlagerungsfunktion können Sie Ihren Hintergrundbildern Farbtöne hinzufügen, die eine bestimmte Farbe Ihrer Wahl in den Vordergrund bringen.

Sie können die Transparenz Ihrer Bilder anpassen, indem Sie die Funktion Deckkraft auswählen. Eine Farbüberlagerung von 100 durchdringt Ihren Hintergrund vollständig mit Ihrer gewählten Farbe.

Zu vermeidende Elemente

Um sicherzustellen, dass Ihre Seite nach der Freigabe weiterhin wie vorgesehen aussieht und funktioniert, vermeiden Sie bitte Folgendes:

• Horizontale oder mehrspaltige Layoutformulare (Formulare müssen vertikal gestapelt sein)
• Galerien, Karussells oder animierte Elemente
• Benutzerdefinierte Overlays
• Steigungen mit mehr als zwei Stopps
• Schlagschatten, die nicht als Teil eines Bildes geschnitten werden können
• Textschatten
• Entwerfen flüssiger Layouts, die sich mit dem Browser erweitern (und sicherstellen, dass Ihre Seite mittig ausgerichtet werden kann)
• Layouts, die nicht mittig auf der Seite ausgerichtet sind.

Inspiration

1. Schauen Sie sich die Unbounce-Vorlagenbibliothek an, um sich inspirieren zu lassen
2. Lesen Sie den ultimativen Leitfaden für Conversion Centered Design oder Designing for Conversion – 8 visuelle Designtechniken, um die Aufmerksamkeit auf Ihre Landing Pages zu lenken von Oli Gardner.
3. Melden Sie sich für The Landing Page Ecourse an

Teil 3: Wie kann man eine Landing Page in Unbounce erstellen? 

Wie kann man eine Landingpage erstellen? 

Die Übersetzung eines Designs in eine Landingpage auf der Unbounce-Plattform sollte pixelgenau erfolgen. Im folgenden Beispiel ist die Landingpage nach Seitenabschnitten und Spalten unter Verwendung des standardmäßigen Unbounce-Rasters strukturiert. Exportieren Sie alle Ihre Bildassets im PNG- oder JPG-Format, bevor Sie beginnen.

Beginnen Sie mit einer leeren Seite

Beim Erstellen einer Landingpage aus einer Photoshop-Datei empfehlen wir, mit einer „leeren Seite“ auf der Unbounce-Plattform zu beginnen.

Seiteneigenschaften

Verwenden Sie Ihre ursprüngliche Photoshop-Datei als Richtlinie und legen Sie die Breite der Seite im Bereich Seiteneigenschaften fest. Weisen Sie der Landingpage die Hintergrundfarbe zu. Laden Sie bei Bedarf ein Hintergrundbild hoch. Legen Sie die Standardtextfarbe als die am häufigsten verwendete Textfarbe in Ihrem Design fest. Weisen Sie die Linkfarbe zu, um Ihre Seiteneigenschaften zu vervollständigen.

Seitenabschnitte und Baumstruktur

Jetzt ist es an der Zeit, die Landingpage zu strukturieren. Ziehen Sie Seitenabschnitte per Drag-and-Drop auf Ihre Seite. Normalerweise würden Sie für jeden klar definierten vertikalen Teil Ihres Designs einen Seitenabschnitt hinzufügen. Sie können beispielsweise Seitenabschnitte hinzufügen für: die Kopfzeile, Inhaltsbereich 1, Inhaltsbereich 2 usw., die Fußzeile. Dann können Sie die Höhe jedes Abschnitts entsprechend den Maßen in Ihrer Photoshop-Datei einstellen. Wenn alle Seitenabschnitte eingerichtet sind, öffnen Sie das Baumstrukturmenü auf der linken Seite und benennen Sie jeden Abschnitt entsprechend. Dadurch wird es einfacher, die Zielseite zu ändern und zu organisieren.

Jedes neue Element, das auf der Zielseite erstellt wird, wird in der Baumstruktur angezeigt. Achten Sie also darauf, dass Sie jedes neue Element beim Hinzufügen benennen, damit es später darauf zurückgreifen und leicht geändert werden kann.

Hintergrund

Sie können einem Seitenabschnitt eine Hintergrundfarbe oder einen Farbverlauf zuweisen oder ein Bild für Ihren Hintergrund hochladen. Bilder können auch gekachelt werden. Im Beispiel unten wurde eine Hintergrundtextur für den Hauptbereich hochgeladen und eine weitere für die dunkleren Streifen darüber und darunter.

Bilder und Videos

Bilder, die Sie aus Photoshop ausgeschnitten und exportiert haben, können jetzt hochgeladen und zur Zielseite hinzugefügt werden. Ziehen Sie Bilder mit dem Bildwerkzeug in der linken Symbolleiste per Drag-and-Drop und positionieren Sie sie entsprechend Ihrem Photoshop-Design auf der Zielseite.

Denken Sie nach der Positionierung daran, sie in der Baumstruktur zu benennen. Um ein Video auf Ihrer Zielseite zu platzieren, verwenden Sie das Video-Tool aus der linken Symbolleiste und fügen Sie Ihren YouTube/Vimeo-Einbettungscode in das sich öffnende Fenster ein. Ändern Sie die Größe und positionieren Sie es entsprechend der beabsichtigten Größe und des Seitenverhältnisses.

Text

Ziehen Sie das Textwerkzeug per Drag-and-Drop auf die Seite. Positionieren Sie jeden Textblock entsprechend Ihrer Photoshop-Datei und fügen Sie Ihre Kopie mit dem Texteditor unten ein. Sie können Ihre Kopie, Schriftart, Größe, Zeilenhöhe und Farbe an Ihre Photoshop-Datei anpassen.

Kisten

Sie können Boxen als Container für Elemente wie Formulare, Bilder oder Text verwenden. Ändern Sie Strich, Farbe und Eckenradius für das gewünschte visuelle Ergebnis und verwandeln Sie Kästchen bei Bedarf sogar in Kreise.

Formen

Ziehen Sie Ihr Formularelement per Drag-and-Drop auf die Zielseite. Sie werden mit dem Formular-Builder-Overlay-Fenster aufgefordert. Wählen Sie vorgefertigte Felder oder erstellen Sie Ihre eigenen. Wenn Sie das vorgefertigte E-Mail-Feld verwenden, aktivieren Sie die Option "Als E-Mail-Adresse validieren". Wenn Sie fertig sind, klicken Sie, um das Formular auszuwählen und zu stilisieren, indem Sie Abstand, Schriftarten, Farben, Breite und Höhe im Eigenschaftenbereich auf der rechten Seite anpassen.

Tasten

Stilisieren Sie Schaltflächen nach Farbe, Farbverlauf oder durch Hinzufügen eines benutzerdefinierten Bildes. Rollover-Zustände können ebenfalls festgelegt werden. Bearbeiten Sie den Schaltflächentext und passen Sie die Schriftarteinstellungen an Ihr Design an.

Bestätigungsseite

Wenn Sie ein Formular auf Ihrer Seite haben, wird beim Ausfüllen des Formulars eine Bestätigungsseite ausgelöst. Sie können auf die Registerkarte der Bestätigungsseite in der oberen linken Ecke Ihrer Seite zugreifen.

Passen Sie das Design der Bestätigungsseite an das Design Ihrer Zielseite an. Dies wird den Benutzern versichern, dass sie den richtigen Weg eingeschlagen haben, und bietet eine nahtlose Erfahrung von der Landung bis zur Post-Konvertierung

Conversion-Ziel festlegen

Jede Landingpage benötigt ein Conversion-Ziel. Sie können dies festlegen, indem Sie im Eigenschaftenbereich auf die Registerkarte "Conversion-Ziel" klicken. Wenn Sie ein Formular haben, sollte es als "Formularübermittlung" eingestellt sein.

Endgültiges Layout

Sobald alle Ihre Landingpage-Elemente auf der Seite sind, ziehen Sie einfach, um die Elemente neu zu positionieren, damit sie zu Ihrer Photoshop-Datei passen, und erstellen Sie das endgültige Layout. Verwenden Sie den Vorschaumodus, um eine abschließende Überprüfung Ihrer Zielseite durchzuführen.

NEU – Teil 4: Ihre Landing Page Mobile Responsive machen

Was ist Mobile Responsive?

Mobile Responsiv in Unbounce ermöglicht es Ihnen, Besuchern je nach Browsergröße automatisch eine mobile oder eine Desktop-Version Ihrer Seite bereitzustellen, ohne eine Weiterleitung zu verwenden. Wenn Mobile Responsive auf einer Seite eingerichtet und aktiviert ist, wird jedem Besucher, der ein mobiles Gerät verwendet, die mobile Ansicht Ihrer Seite angezeigt, während jedem, der ein Desktop-Gerät verwendet, die Desktop-Ansicht angezeigt wird.

Wie funktioniert es in Unbounce?

Unbounce legt den "Breakpoint" für Ihre Mobile Responsive-Seiten auf 600px fest. Dies bedeutet, dass jedem Browserfenster mit einem Darstellungsbereich von 600px oder weniger die mobile Ansicht der Seite bereitgestellt wird. Jeder Browser mit einem Darstellungsbereich von mehr als 600 Pixeln sieht die Desktop-Version der Seite.

Hinweis: Retina-Displays wie das iPhone sind aufgrund ihrer hohen Auflösung technisch größer als 600px, aber der Viewport verhält sich wie ein kleineres Browserfenster, sodass Retina-Telefone die mobile Version der Seite anzeigen

Erstellen Sie Ihre Mobile Responsive Landing Page

Es gibt einige Dinge, die Sie benötigen, um Ihre mobile responsive Seite anzupassen und sie Ihren mobilen Besuchern bereitzustellen:

Desktop-/Mobilansicht

Klicken Sie auf die Schaltflächen unten rechts im Page Builder-Fenster, um zwischen der Desktop- und der mobilen Ansicht zu wechseln.

Textgröße ändern

Sie können die Größe des Textes von Ihrer Desktop-Version an Ihre mobile Version anpassen. Wählen Sie das Textfeld aus und verwenden Sie die Skalierungsleiste oben rechts auf der Eigenschaftenseite. Das Textfeld selbst kann auf Desktop- und Mobilgeräten auch separat in der Größe geändert werden.

Hinweis: Alle Änderungen an Schriftart, Schriftgröße, Format oder Zeilenhöhe, die im Texteditor (anstelle der Maßstabsleiste) vorgenommen werden, wirken sich auf beide Ansichten aus.

Formulare und Schaltflächen

Formulare und Schaltflächen sind in Ihrer mobilen und Desktop-Ansicht gleich. Sie können eine Schaltfläche in einer Ansicht ausblenden und in der anderen Ansicht eine andere anzeigen. Ihr Formular muss jedoch in beiden Versionen konsistent sein.

Ausblenden / Anzeigen von Objekten

Wenn Sie Objekte haben, die Sie entweder in der mobilen oder Desktop-Ansicht ausblenden möchten, klicken Sie auf das Objekt und dann auf das Sichtbarkeitssymbol im Eigenschaftenbereich.

Sie können die Sichtbarkeit auch steuern, indem Sie unten links im Page Builder auf Seiteninhalt klicken.

Wenn Sie Objekte im Page Builder auswählen, werden sie in Ihrem Seiteninhaltsbereich hervorgehoben. Sie sehen ein Auge, wenn das Element sichtbar ist, oder einen ausgefüllten Kreis, wenn dies nicht der Fall ist. Klicken Sie, um zwischen den beiden zu wechseln.

Hinweis: Wenn Sie sich dafür entscheiden, eine Box oder einen Seitenabschnitt mit darin verschachtelten Objekten auszublenden, werden alle verschachtelten Elemente ausgeblendet.

Elemente zwischen Seitenabschnitten verschieben und verschachtelte Elemente aufheben

Wenn ein Element zwischen Seitenabschnitten verschoben wird, wird es standardmäßig in beide Ansichten verschoben. Um Elemente außerhalb eines Seitenabschnitts zu verschieben, ohne Seitenabschnitte tatsächlich zu ändern, halten Sie beim Ziehen eines Elements die Befehlstaste (Mac) bzw. die Strg-Taste (Windows) gedrückt. Sie werden daran erinnert, wenn Sie ein Element von einem Seitenabschnitt in einen anderen verschieben, ohne die Befehls- oder Strg-Taste gedrückt zu halten.

Wenn mehrere Elemente in einer Box verschachtelt sind, werden beim Verschieben dieser Elemente in einer Ansicht auch alle Elemente in die andere Ansicht verschoben. Sie können auch Befehl/Strg+Klick verwenden, um ein Element in einer Ansicht aufzuheben und es unabhängig von der anderen Ansicht zu verschieben.

Tipp: Denken Sie daran, dass Sie auch Umschalt+Klicken können, um mehr als ein Element gleichzeitig zu verschieben

Warnungen außerhalb der Grenzen: Sie sehen eine Warnung, wenn sich eines Ihrer Objekte außerhalb der Grenzen Ihrer Zielseite befindet. Verschieben Sie das Objekt einfach innerhalb Ihrer Seitengrenzen oder blenden Sie es aus, um die Warnung zu entfernen. Sie können Out-of-Bounds-Warnungen auch deaktivieren, indem Sie das Kontrollkästchen oben rechts im Page Builder verwenden.

Zeigen Sie den Besuchern die mobile Version

Wenn Sie mit der Gestaltung Ihrer mobilen Seite fertig sind, gehen Sie zum Eigenschaftenbereich auf der rechten Seite und aktivieren Sie Mobile Version für Besucher anzeigen, um die mobile Ansicht zu aktivieren. Dann speichern und veröffentlichen (oder erneut veröffentlichen) Ihre Seite.

Teil 5: Senden Sie Ihre Vorlage an Themeforest

Ihre unverzichtbare Checkliste

• Seiteneigenschaften überprüfen
• Baumstruktur überprüfen
• Bilder und Layout überprüfen
• Kopie und Schriftarten überprüfen
• Testlinks
• Testformular und Schaltfläche
• Conversion-Ziel überprüfen und festlegen (wenn Ihre Seite über ein Formular verfügt)
• Überprüfen Sie die Formularbestätigungsseiten für Desktops und Mobilgeräte (wenn Ihre Seite ein Formular enthält)
• Stellen Sie sicher, dass die Option "Mobile Responsive anzeigen" aktiviert ist (wenn Ihre Seite über eine mobile responsive Version verfügt).
• Seite veröffentlichen
• Bitte fügen Sie bei der Erstellung Ihres Hilfedokuments zur Vorlage diesen Link zur Verwendungsanleitung hinzu. Wenn Sie benutzerdefiniertes Javascript/CSS in Ihre Vorlage aufgenommen haben, sollten Sie detaillierte Anweisungen zur Verwendung oder Aktualisierung der Skripte und Funktionen hinzufügen.

Hinweis: Wenn Sie Ihre Seite veröffentlichen, können Sie auf Vorlagen-Marktplätzen einen Link zur Live-Vorschau bereitstellen.

ThemeForest-Genehmigungsanforderungen

Eine Zielseitenvorlage sollte anpassbar sein. Der Endbenutzer sollte in der Lage sein, alle Hero Shot-Bilder oder fotografischen Hintergründe einfach auszutauschen. Um sicherzustellen, dass die Qualität Ihrer Zielseite erhalten bleibt und Ihre Seite die Genehmigung durch ThemeForest besteht, befolgen Sie bitte diese Richtlinien:

1. Bearbeiten Sie nicht die Quelle eines Textelements
2. Lassen Sie Seitenhilfslinien und Abschnittshilfslinien aktiviert
3. Ränder in Seitenabschnitten sollten verwendet werden, um Lücken zu erzeugen, keine leeren Seitenabschnitte
4. Platzhalter sind Bilder und können einfach ausgetauscht werden
5. Alle benutzerdefinierten Stylesheets oder Javascripts müssen mit einem Kommentar beginnen, einschließlich der Kontaktinformationen des Autors und Anweisungen für den Support
6. Ihre Baumstruktur darf keine defekten Elemente enthalten
7. Die Schaltfläche eines Formulars muss ordnungsgemäß an das Formular angehängt werden
8. Wenn Ihre Vorlage ein Formular enthält, sollte das Conversion-Ziel auf "Formularübermittlung" gesetzt werden.
9. Wenn Ihre Vorlage eine responsive Version für Mobilgeräte hat, sollte die Option "Mobile Responsive anzeigen" aktiviert sein

Herunterladen einer Seite

Sobald Sie eine schöne, einfach anpassbare Zielseitenvorlage erstellt haben, müssen Sie sie herunterladen, bevor Sie sie mit der Welt teilen (oder an sie verkaufen) können. Um eine Seite herunterzuladen, gehen Sie in die Seitenübersicht (der Abschnitt, der alle Varianten und Statistiken Ihrer Seite auflistet), suchen Sie das Zahnradsymbol oben rechts und klicken Sie auf „Seite herunterladen“.

Es erscheint ein Dialogfenster, das Sie per E-Mail benachrichtigt, wenn die Datei zum Download bereit ist. Die Datei hat die Erweiterung „.unbounce“. Nachdem Sie Ihre Datei heruntergeladen haben, können Sie sie bei Bedarf umbenennen, aber die Erweiterung „.unbounce“ intakt lassen.

Mehrere Layouts zusammenpacken

Möchten Sie mehrere Layouts derselben Vorlage verpacken? Bitte vermeiden Sie Seitenvarianten, um mehrere Layouts zusammen zu packen.

Erstellen Sie stattdessen jedes Layout als separate Seite und laden Sie jedes Layout separat herunter. Dadurch wird sichergestellt, dass Sie für jedes Layout einen funktionalen Vorschau-Link haben und Verwirrung durch den Downloader vermeiden, da Varianten speziell für A/B-Tests verwendet werden.

Schlussfolgerung

Ich hoffe, dies hat Ihnen eine gründliche Einführung in Unbounce und das Erstellen von auf Mobilgeräten ansprechenden Unbounce-Vorlagen zum Verkauf auf Marktplätzen wie ThemeForest gegeben. Es gibt jedoch noch viel mehr zu lernen. Wenn Sie also Fragen haben, können Sie diese gerne in den Kommentaren stellen.