Das ThemeForest-Handbuch zum Entfernen von Vorlagen

Neuestes Update: Wir haben mehr tolle Neuigkeiten! Unbounce hat mehrere neue Design-Funktionen hinzugefügt, mit denen Unbounce-Benutzer auf einige sehr leistungsfähige Design-Tools zugreifen können. Die neuen Funktionen sind:

  • Parallax Scrolling
  • Farbüberlagerung
  • Transparenz
  • Bildskala für Container

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

Wir haben den Beitrag erneut überarbeitet, um diese Änderungen zu berücksichtigen. Wir zeigen Ihnen, wo Sie die Funktionen finden und wie Sie sie verwenden können. Sie können mehr über die neuesten Updates am Ende von Teil 2 erfahren!

Aktualisieren: Große Neuigkeiten! Unbounce-Landing-Pages reagieren jetzt mobil. Das bedeutet, dass Designer Vorlagen erstellen und verkaufen können, die automatisch an jedes Gerät angepasst werden. Dies ist das bisher größte Produktupdate von Unbounce, und Tausende von Vermarktern werden versuchen, ihre Landing Pages so zu aktualisieren, dass sie mobil reagieren. Mit anderen Worten, sie benötigen so schnell wie möglich neue Vorlagen.

Wir haben diesen Beitrag aktualisiert, um Sie mit den Funktionen von Mobile Responsive und der Gestaltung einer auf Mobile Responsive Vorlage in Unbounce zu beginnen. Sie können zu Teil 4 weiter unten springen, wenn Sie Unbounce bereits beherrscht haben und mit dem Entwerfen für Mobilgeräte beginnen können!

In diesem Tutorial möchte ich Ihnen Unbounce vorstellen, ein Werkzeug zum Erstellen von kampagnenspezifischen Landing-Pages. Wir gehen die Anatomie verschiedener Arten von Zielseiten durch, gehen die Funktionen des Tools durch und besprechen, was erforderlich ist, um Ihre eigenen Unbounce-Vorlagen bei Themeforest zu verkaufen.


Unbounce wird vorgestellt

Unbounce wurde entwickelt, um ein sehr spezifisches Problem zu lösen. Professionelle Vermarkter in die Lage zu versetzen, schöne und leistungsstarke Kampagnen-spezifische Landing-Pages selbst zu erstellen. Das heißt, ohne die Hilfe von Entwicklern oder - hier kommen Templates ins Spiel - Designer.

Da die Hauptbenutzer von Unbounce hauptsächlich Vermarkter sind, die mit robusten Design-Tools möglicherweise nicht vertraut sind, ist der Landing Page Builder so konzipiert, dass er mit einer WYSIWYG-Drag-and-Drop-Benutzeroberfläche einfach zu bedienen ist. Das heißt, erfahrene Designer können sich gleichermaßen zu Hause fühlen. Sie können dem Pixel benutzerdefinierte JavaScript-, CSS- und HTML-Widgets hinzufügen und Seitenelemente anpassen.

Zielseiten sind eigenständige Webseiten, die ein bestimmtes, vordefiniertes Ziel für Vermarkter erfüllen. Wenn Vermarkter versuchen, ein Produkt oder eine Dienstleistung zu verkaufen, können sie eine Zielseite verwenden, um den Benutzer zu informieren, bevor er sie auf die Preisseite leitet. Wenn sie für ein neues E-Book werben, benötigen sie eine Landing Page, um Kontaktinformationen von ihren Besuchern zu sammeln, bevor sie die Datei übergeben. Für diese beiden Kampagnen (und für fast jede Kampagne!) Würde das Senden von Besuchern zu ihrer Homepage anstelle einer dedizierten Landing Page das Scheitern des Marketings bedeuten.

Kurz gesagt, Zielseiten dienen dazu, Benutzer auf ein bestimmtes, auf Conversion ausgerichtetes Ziel voranzutreiben.

Wer nutzt Unbounce??

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

Wie nutzen Vermarkter Unbounce??

Wenn die Kunden von Unbounce nicht die Möglichkeit haben, eine Seite von Grund auf neu zu gestalten, beginnen sie mit einer Vorlage oder lassen sich von ihrem Designer eine Vorlage erstellen. Nachdem sie eine Vorlage an die Bedürfnisse ihrer Kampagne angepasst haben, verwenden Kunden häufig dieselbe Vorlage für jede ähnliche Kampagne, die sie ausführen.

A / B-Tests sind ein Kernmerkmal von Unbounce. Benutzer können ihre fertige Seite duplizieren, eine Änderung am Design oder an der Kopie der neuen Seite vornehmen, den Verkehr zwischen den beiden Seiten aufteilen und anhand der Berichterstellung von Unbounce feststellen, welche Version besser konvertiert wird. Mit A / B-Tests können Kunden ihre Landing Pages und Marketingkampagnen ständig verbessern.


Entwerfen von Landing-Pages ohne Bouncen

Dieses Handbuch hilft Ihnen beim Entwurf und der Erstellung einer Landing Page mit hoher Conversion für die Unbounce-Plattform.

Wir empfehlen Vorlagenautoren, sich für das kostenlose Konto von Unbounce anzumelden und emailen Sie [email protected], um sie darüber zu informieren, dass Sie Vorlagen für den Weiterverkauf entwerfen. Wenn Sie unser Team per E-Mail kontaktieren, wird sichergestellt, dass Ihr Konto kostenlos bleibt, wenn Sie die 200 Einzelbesucher überschreiten, die normalerweise im kostenlosen Tarif zulässig sind.

Was wir abdecken werden

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

  • Entwerfen von Landing-Pages ohne Bouncen
  • Teil 1: Was ist auf einer Zielseite??
    • Homepages vs. Landing Pages
    • Anatomie einer Zielseite
    • Lead-Gen vs. Klick-Zielseiten
  • Teil 2: Gestaltungsrichtlinien
    • Design aus einem Unbounce-Raster
    • Schriftart-Optionen
    • Beispiel-Landing-Pages
    • Auf Behältergröße skalieren
    • Parallax Scrolling
    • Farbüberlagerung und Deckkraft
    • Elemente zu vermeiden
    • Inspiration
  • Teil 3: Erstellen einer Zielseite in Unbounce
  • Teil 4: Mobiles Ansprechen Ihrer Landing Page
    • Was ist mobil ansprechbar??
    • Wie funktioniert das in Unbounce??
  • Teil 5: Senden Sie Ihre Vorlage an Themeforest
    • Ihre wesentliche Checkliste
    • Zulassungsvoraussetzungen für Themeforest
    • Eine Seite herunterladen
    • Mehrere Layouts zusammen verpacken

Teil 1: Was ist eine Zielseite??

Homepages vs. Landing Pages

Vergleichen wir die Webtrends-Startseite (links) mit einer ihrer Landing-Pages (rechts). Die Homepage ist wunderschön gestaltet und erlaubt dem Besucher, eine Reihe von Aufgaben zu erledigen. Es gibt fünf Konzepte im Hauptbereich der Werbung (über ein rotierendes Banner), darunter vier ergänzende Meldungen und insgesamt 28 Interaktionspunkte.

Marketingkampagnen sollten jedoch auf Laser fokussiert sein und Nutzer zu einer einzigen Aktion führen. Bei der Gestaltung einer Landing Page für Marketingkampagnen wird das Konzept von Aufmerksamkeitsverhältnis muss berücksichtigt werden. Der Aufmerksamkeitsgrad (AR) ist definiert als das Verhältnis interaktiver Elemente (Links / Lecks) auf der Seite zu der Anzahl der Kampagnen-Conversion-Ziele (die eins ist). Auf dieser Homepage ist das Aufmerksamkeitsverhältnis 28: 1, was bedeutet, dass es 27 ablenkende Aktionen und eine gewünschte Aktion gibt.


Homepage vs. Landing Page

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


Anatomie einer Zielseite

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

  1. Ihr Alleinstellungsmerkmal (USP)
    • Die Hauptschlagzeile
    • Eine unterstützende Schlagzeile
  2. Der Held geschossen (Bilder / Videos zeigen den Nutzungskontext)
  3. Die Vorteile Ihres Angebots
    • Eine Aufzählung der Leistungsübersicht
    • Nutzen und Funktionen 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 der Ort der fünf Elemente werden von der Geschichte bestimmt, die Sie Ihren Besuchern mitteilen möchten. Sie kann von diesem Beispiel abweichen. Es ist jedoch hilfreich, sich dieses Dokument als Referenz anzusehen, wenn wir durch jedes Element gehen.

Lead-Gen vs. Klick-Zielseiten

Es gibt zwei Haupttypen von Zielseiten: Lead-Generierung (Lead-Gen) und Click-through.

Lead-Gen-Landing-Pages

Lead-Gen-Seiten werden zur Erfassung von Benutzerdaten verwendet, z. B. Name und E-Mail-Adresse. Der einzige Zweck der Seite ist das Sammeln von Informationen, die eine weitere Kommunikation mit dem Interessenten zu einem anderen Zeitpunkt ermöglichen. Eine Lead-Gen-Seite enthält ein Formular und eine Beschreibung, was der Besucher für die Übermittlung seiner persönlichen Daten erhält.

Lead Gen Flow

Klick-Zielseiten

Click-through-Landing-Pages haben das Ziel, den Besucher davon zu überzeugen, auf eine andere Seite zu klicken.

Sie werden in der Regel in E-Commerce-Trichtern eingesetzt und bieten Details zu einem Produkt oder einer Dienstleistung, um den Besucher „aufzuwärmen“ und ihm eine Kaufentscheidung näher zu bringen. Wenn der Interessent auf die folgende Seite klickt, wird er mit allen Informationen bestückt, die er benötigt, und er wird mit größerer Wahrscheinlichkeit kaufen.


Click-through-Flow

Teil 2: Gestaltungsrichtlinien


Design aus einem Unbounce-Gitter

Bei Unbounce verwenden wir ein Standardgittersystem, das 12 Spalten verwendet, wodurch ein 940px-Container entsteht. Das folgende Beispiel zeigt die verfügbaren Spaltenkombinationen. Es wird empfohlen, das Raster "Unbounce" zu verwenden, um die besten Ergebnisse für das Design der Zielseite zu erhalten.

Schriftart-Optionen

Unbounce bietet einen Standardsatz von Schriftarten in seinem Zielseiten-Builder sowie einen Satz von Google Web Fonts. Es wird empfohlen, beim Entwerfen von Unbounce die folgenden Schriftarten zu verwenden.

Google Web Fonts

Im Folgenden finden Sie eine Liste der in Unbounce verfügbaren Google Web-Schriften. Bitte verwenden Sie / laden Sie nur die folgenden Schriften aus der Google Web Fonts-Bibliothek.

  • Abril Fatface
  • Allan
  • Arvo
  • Kabine
  • Tanzendes Skript
  • Droid Sans
  • Gravitas Eins
  • Josefin Sans
  • Josefin Slab
  • Lato
  • Hummer
  • Merriweather
  • Alter Standard TT
  • Offene Sans
  • PT Sans
  • PT Serif
  • Playfair-Anzeige
  • Quantico
  • Ubuntu
  • Vollkorn

Standardschriftarten

Im Folgenden finden Sie eine Liste der in Unbounce verfügbaren Standardschriftarten.

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

Beispiel-Landing-Pages

Jede Landing Page hat ein Ziel vor Augen; Besucher dazu bewegen, einen Handlungsaufruf auszuführen, z. B. das Ausfüllen eines Formulars oder das Klicken auf eine andere Seite. Nachfolgend finden Sie eine Auswahl der häufigsten Arten von Zielseiten.

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


Lead-Gen-Seiten
Click-Through-Seiten

NEU: Kompliziertes Design leicht gemacht

Wenn Sie auf gängige Webdesign-Trends eingehen, kann dies helfen, Ihre Zielseite von anderen zu unterscheiden. Die Implementierung kann jedoch schwierig zu codieren sein. Damit Unbounce-Benutzer einige der neuesten und effektivsten Designtrends nutzen können, haben wir neue Tools in den Unbounce-Builder integriert. Sie können jetzt Funktionen wie das Parallax-Scrollen in Ihre Zielseite mit einem Klick auf eine Schaltfläche integrieren, ohne sich auf den Code von Drittanbietern verlassen zu müssen. 

Auf Behältergröße 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. Es gibt eine einfache Lösung für dieses Problem in Unbounce.

Nachdem Sie das Bild zu Ihrem Seitenbereich hinzugefügt haben, wählen Sie einfach aus Dehnen Sie sich auf den Seitenbereich. Wenn Sie möchten, dass die gesamte Seite ausgefüllt wird, können Sie auswählen Zum Anpassen an die Seite dehnen

Parallax Scrolling

Um ein festes Bild zu erstellen, das beibehalten wird, während Besucher die Seite nach unten scrollen (Parallaxe), aktivieren Sie einfach das Kontrollkästchen "Fixierter Hintergrund beim Scrollen". Parallax-Scrolling ist ein Designelement, das auf Landing-Pages eine große Auswirkung haben kann. Mit Unbounce können Sie diese Funktion mit einem Klick auf eine Schaltfläche hinzufü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 Deckkraftfunktion auswählen. Eine Farbüberlagerung von 100 wird Ihren Hintergrund vollständig mit der von Ihnen gewählten Farbe durchdringen. 

Zu vermeidende Elemente

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

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

Inspiration

  1. In der Unbounce-Vorlagenbibliothek finden Sie Anregungen
  2. Lesen Sie den ultimativen Leitfaden für das konvertierungszentrierte Design oder das Design für die Konvertierung - 8 Visuelle Designtechniken, um die Aufmerksamkeit auf Ihre Zielseiten von Oli Gardner zu lenken.
  3. Melden Sie sich für The Landing Page Ecourse an

Teil 3: Erstellen einer Zielseite in Unbounce

So erstellen Sie eine Zielseite

Die Übersetzung eines Designs in eine Landing Page auf der Unbounce-Plattform sollte pixelgenau ausgeführt werden. Im folgenden Beispiel ist die Landing Page nach Seitenabschnitten und -spalten unter Verwendung des Standard-Unbounce-Rasters strukturiert. Exportieren Sie alle Ihre Bildressourcen im PNG- oder JPG-Format, bevor Sie beginnen.

Beginnen Sie mit einer leeren Seite

Wenn Sie eine Landing Page aus einer Photoshop-Datei erstellen, empfehlen wir, von einer „leeren Seite“ auf der Unbounce-Plattform zu starten.

Seiteneigenschaften

Verwenden Sie Ihre ursprüngliche Photoshop-Datei als Leitfaden, und legen Sie die Seitenbreite im Seiteneigenschaftenbereich fest. Weisen Sie der Landing Page die Hintergrundfarbe zu. Laden Sie ggf. ein Hintergrundbild hoch. Legen Sie als Standardtextfarbe die am häufigsten verwendete Textfarbe in Ihrem Design fest. Weisen Sie die Link-Farbe zu, um Ihre Seiteneigenschaften zu vervollständigen.

Seitenbereiche und Baumstruktur

Nun ist es an der Zeit, die Landing Page zu strukturieren. Ziehen Sie Seitenabschnitte auf Ihre Seite. Normalerweise fügen Sie für jeden klar definierten vertikalen Teil Ihres Designs einen Seitenabschnitt hinzu. Sie können beispielsweise Seitenbereiche für Folgendes hinzufügen: Kopfzeile, Inhaltsbereich 1, Inhaltsbereich 2 usw., Fußzeile. Dann können Sie die Höhe jedes Abschnitts entsprechend den Abmessungen in Ihrer Photoshop-Datei einstellen. Wenn Sie alle Seitenabschnitte eingerichtet haben, öffnen Sie links das Baumstruktur-Menü und benennen Sie jeden Abschnitt entsprechend. Dies erleichtert das Ändern und Organisieren der Landing Page.

Jedes neue Element, das auf der Landing Page erstellt wird, wird in der Baumstruktur angezeigt. Vergewissern Sie sich daher, dass Sie jedes neue Element beim Hinzufügen als neuen Namen angeben, um später darauf zurückgreifen zu können.

Hintergrund

Sie können einem Seitenbereich eine Hintergrundfarbe oder einen Farbverlauf zuweisen oder Sie können ein Bild hochladen, das für Ihren Hintergrund verwendet werden soll. Bilder können auch gekachelt werden. Im folgenden Beispiel wurde eine Hintergrundtextur für den Hauptbereich und eine weitere für die dunkleren Streifen oben und unten hochgeladen.

Bilder und Videos

Bilder, die Sie aus Photoshop geschnitten und exportiert haben, können jetzt hochgeladen und der Zielseite hinzugefügt werden. Ziehen Sie Bilder mit dem Bildwerkzeug in der linken Symbolleiste und legen Sie sie auf der Zielseite entsprechend Ihrem Photoshop-Design ab

Denken Sie daran, sie nach ihrer Positionierung 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. Verändern Sie die Größe und positionieren Sie sie entsprechend der beabsichtigten Größe und dem gewünschten Seitenverhältnis.

Text

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

Boxen

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 bei Bedarf sogar Kreise in Kreise.

Formen

Ziehen Sie Ihr Formularelement auf die Zielseite. Sie werden mit dem Formular-Generator-Overlay-Fenster aufgefordert. Wählen Sie vorgefertigte Felder aus oder erstellen Sie eigene Felder. Aktivieren Sie bei Verwendung des vorgefertigten E-Mail-Felds die Option "Als E-Mail-Adresse bestätigen". Klicken Sie nach Abschluss des Vorgangs auf, um das Formular und die Stilisierung auszuwählen, indem Sie im Eigenschaftenbereich auf der rechten Seite Abstand, Schriftarten, Farben, Breite und Höhe anpassen.

Tasten

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

Bestätigungsseite

Wenn sich auf Ihrer Seite ein Formular befindet, wird beim Ausfüllen des Formulars eine Bestätigungsseite ausgelöst. Sie können auf die Bestätigungsseiten-Registerkarte oben links auf Ihrer Seite zugreifen.

Passen Sie das Design der Bestätigungsseite an das Design Ihrer Landing Page an. Dadurch wird sichergestellt, dass die Benutzer den richtigen Weg eingeschlagen haben, und bietet eine nahtlose Erfahrung von der Landung bis zur Nachkonversion

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übergabe" festgelegt werden..

Endgültiges Layout

Wenn sich alle Elemente Ihrer Zielseite auf der Seite befinden, ziehen Sie sie einfach mit der Maus, um sie an Ihre Photoshop-Datei anzupassen und das endgültige Layout zu erstellen. Verwenden Sie den Vorschaumodus, um eine letzte Überprüfung Ihrer Zielseite durchzuführen.

NEU - Teil 4: Mobil reagieren auf Ihre Zielseite

Was ist Mobile Responsive??

Mit Mobile Responsive in Unbounce können Sie Besuchern abhängig von ihrer Browsergröße automatisch eine Mobil- oder Desktopversion Ihrer Seite bereitstellen, ohne eine Weiterleitung zu verwenden. Wenn Mobile Responsive auf einer Seite eingerichtet und aktiviert ist, wird für jeden Besucher, der ein mobiles Gerät verwendet, die mobile Ansicht Ihrer Seite angezeigt, während für alle Benutzer, die ein Desktop-Gerät verwenden, die Desktop-Ansicht angezeigt wird.

Wie funktioniert es in Unbounce??

Bei "Unbounce" wird der "Haltepunkt" für Ihre Mobile Responsive-Seiten auf 600px festgelegt. Dies bedeutet, dass jedes Browserfenster mit einem Ansichtsfenster von 600 Pixel oder weniger der mobilen Ansicht der Seite zur Verfügung steht. In jedem Browser mit einem Viewport von mehr als 600 Pixeln wird die Desktopversion der Seite angezeigt.

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

Erstellen einer Responsive Landing Page für Ihr Mobiltelefon

Es gibt ein paar Dinge, die Sie benötigen, um Ihre mobile responsive Seite anzupassen und an Ihre mobilen Besucher zu liefern:

Desktop- / Mobile-Ansicht

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

Textgröße ändern

Sie können die Textgröße Ihrer Desktopversion an Ihre mobile Version anpassen. Wählen Sie das Textfeld aus und verwenden Sie die Skalenleiste oben rechts auf der Seite Eigenschaften. Das Textfeld selbst kann auf Desktop und Mobile auch separat skaliert werden.

Hinweis: Alle Anpassungen der Schriftart, der Schriftgröße, des Formats oder der Zeilenhöhe (anstelle der Skalenleiste) wirken sich auf beide Ansichten aus.

Formulare und Schaltflächen

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

Objekte ausblenden / anzeigen 

Wenn Sie Objekte in der Mobil- oder Desktopansicht ausblenden möchten, klicken Sie auf das Objekt und dann auf das Symbol Sichtbarkeit im Eigenschaftenbereich.

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

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

Hinweis: Wenn Sie ein Feld oder einen Seitenabschnitt mit verschachtelten Objekten ausblenden, werden alle verschachtelten Elemente ausgeblendet.

Verschieben von Elementen zwischen Seitenabschnitten und nicht verschachtelten Elementen

Wenn ein Element zwischen Seitenabschnitten verschoben wird, wird es standardmäßig in beiden Ansichten verschoben. Um Elemente außerhalb eines Seitenabschnitts zu verschieben, ohne Seitenabschnitte tatsächlich zu ändern, halten Sie die Befehlstaste (Mac) bzw. die Steuertaste (Windows) gedrückt, während Sie ein Element ziehen. Sie werden immer dann daran erinnert, wenn Sie ein Element von einem Seitenbereich in einen anderen verschieben, ohne Befehl oder Steuerung gedrückt zu halten.

Wenn mehrere Elemente in einem Feld verschachtelt sind, werden durch Verschieben dieser Elemente in einer Ansicht auch alle Elemente in der anderen Ansicht verschoben. Sie können auch Befehl / Strg + klicken, um ein Element in einer Ansicht ungleichmäßig zu machen und es unabhängig von der anderen Ansicht zu verschieben.

Spitze: Denken Sie daran, dass Sie auch mit gedrückter Umschalttaste mehrere Elemente gleichzeitig verschieben können

Out-of-Bounds-Warnungen: 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.

Mobile Version für Besucher anzeigen

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

Teil 5: Senden Sie Ihre Vorlage an Themeforest

Ihre wesentliche Checkliste

  • Überprüfen Sie die Seiteneigenschaften
  • Baumstruktur überprüfen
  • Bilder und Layout überprüfen
  • Überprüfen Sie die Kopien und Schriftarten
  • Test Links
  • Testformular und Schaltfläche
  • Conversion-Ziel überprüfen und festlegen (wenn Ihre Seite ein Formular enthält)
  • Überprüfen Sie die Bestätigungsseiten für Desktop- und mobile Formulare (wenn Ihre Seite über ein Formular verfügt).
  • Vergewissern Sie sich, dass die Option "Mobile Responsive anzeigen" aktiviert ist (wenn Ihre Seite über eine Mobile Responsive-Version verfügt).
  • Seite veröffentlichen
  • Fügen Sie bei der Erstellung Ihres Hilfedokuments für die Vorlage diesen Link in die Gebrauchsanweisung ein. Wenn Sie benutzerdefiniertes Javascript / CSS in Ihre Vorlage eingefügt haben, sollten Sie detaillierte Anweisungen zum Verwenden oder Aktualisieren der Skripts und Funktionen enthalten.

Hinweis: Durch das Veröffentlichen Ihrer Seite können Sie eine Live-Vorschau in Vorlagenmarktplätzen bereitstellen.

Genehmigungsanforderungen für ThemeForest

Eine Zielseitenvorlage sollte anpassbar sein. Der Endbenutzer sollte in der Lage sein, Heldenbilder oder fotografische Hintergründe problemlos auszutauschen. Um sicherzustellen, dass die Qualität Ihrer Zielseite erhalten bleibt und Ihre Seite von ThemeForest genehmigt wird, befolgen Sie bitte die folgenden Richtlinien:

  1. Bearbeiten Sie nicht die Quelle eines Textelements
  2. Lassen Sie die Seiten- und Abschnittshandbücher aktiviert
  3. Ränder in Seitenabschnitten sollten zum Erstellen von Lücken verwendet werden, nicht für leere Seitenabschnitte
  4. Platzhalter sind Bilder und einfach auszutauschen
  5. Alle benutzerdefinierten Stylesheets oder Javascrips müssen mit einem Kommentar beginnen, der die Kontaktinformationen des Autors und Anweisungen für den Support enthält
  6. Ihre Baumstruktur darf keine defekten Elemente enthalten
  7. Die Schaltfläche eines Formulars muss ordnungsgemäß an das Formular angehängt sein
  8. Wenn Ihre Vorlage ein Formular enthält, sollte das Conversion-Ziel auf "Formularübergabe" gesetzt sein.
  9. Wenn Ihre Vorlage über eine Handy-Responsive-Version verfügt, sollte die Option "Mobile Responsive anzeigen" aktiviert sein

Eine Seite herunterladen

Nachdem Sie eine schöne, leicht anpassbare Landing-Page-Vorlage erstellt haben, müssen Sie sie herunterladen, bevor Sie sie mit der ganzen 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 aufführt), suchen Sie das Zahnrad / Zahnrad-Symbol oben rechts und klicken Sie auf „Seite herunterladen“.

Ein Dialogfenster wird angezeigt, in dem Sie per E-Mail benachrichtigt werden, wenn die Datei zum Herunterladen bereit ist. Die Datei wird die Erweiterung ".unbounce" haben. Wenn Sie Ihre Datei heruntergeladen haben, können Sie sie nach Bedarf umbenennen, die Erweiterung ".unbounce" jedoch beibehalten.

Mehrere Layouts zusammen verpacken

Möchten Sie mehrere Layouts derselben Vorlage verpacken? Vermeiden Sie die Verwendung von Seitenvarianten zum Verpacken mehrerer Layouts.

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 erhalten und die Verwirrung durch den Downloader verringert, da Varianten speziell für A / B-T