Share
Im ersten Teil dieser kurzen Serie haben wir die Grundlagen der Zielseiten behandelt. In diesem Teil werden wir den Konstruktionsprozess einer Instapage-Landing-Page durchlaufen.
Entwürfe, die zuerst in Photoshop erstellt wurden, sollten auf der Instapage-Plattform in eine pixelgenaue Zielseite umgewandelt werden. Alle Seiten sind so strukturiert, dass sie dem 960-Rastersystem folgen und horizontale Seitenabschnitte verwenden, die unten erläutert werden.
Instapage bietet seinen Benutzern eine Vielzahl von Vorlagen zur Auswahl. Während wir uns auf branchenspezifische Vorlagen für allgemeine Benutzer konzentrieren, beginnen Sie mit einer leeren Leinwand.
Sie müssen kein anderes Programm verwenden, um Ihre Instapage-Vorlage vollständig auszufüllen. Sie können jedoch auch Ihre anderen zuvor entworfenen Designs konvertieren oder importieren, wenn Sie dies wünschen. CSS und benutzerdefiniertes JavaScript werden ebenfalls unterstützt.
Mit Instapage können Sie mit dem Hinzufügen Ihrer Zielseitenelemente beginnen, indem Sie auf klicken NEUE HINZUFÜGEN Option in der Hauptsymbolleiste und wählen Sie dann aus, welches Element Sie Ihrer Seite hinzufügen möchten.
Normalerweise ist das Hinzufügen eines Elements zu einem klar definierten Seitenabschnitt ideal. Sie haben jedoch die volle Fähigkeit, Ihre Seite nach Belieben zu strukturieren. Sie können auch die Höhe der Seitenbereiche entsprechend den hinzugefügten Elementen anpassen.
In der Anwendung gibt es eine X / Y-QuickInfo, die angezeigt wird, wenn Sie ein Element verschieben. Dies ist hilfreich, wenn Sie es gewohnt sind, über diese Methode zu entwerfen oder wenn Sie von einem anderen Thema aus konvertieren. Die Koordinaten werden dadurch bestimmt, dass die Mitte des Elements relativ zu dem Abstand von links oben in der Hauptspalte verschoben wird.
Die Hauptspalte hat eine definierte Standardseitenbreite von 960px.
Sie können der benutzerdefinierten Zielseitenvorlage die folgenden Elemente hinzufügen:
Alle diese werden hinzugefügt, indem Sie auf das Element klicken, das Sie hinzufügen möchten, und dann auf Ihrer Seite platzieren / bearbeiten. Das Hinzufügen von Elementen wird nachstehend ausführlicher beschrieben.
Seitenabschnitte werden verwendet, um verschiedene Inhaltsbereiche auf Ihrer Zielseite zu trennen. Der Abschnitt erstreckt sich immer über die gesamte Breite der Seite und kann nicht horizontal skaliert werden. Seitenbereiche können an beliebiger Stelle auf der Seite vertikal positioniert werden (im Video gezeigt)
Sie können den Inhalt mit Abschnitten und Feldern auf zwei Arten gruppieren. Wenn Sie bereits Inhalt auf Ihrer Seite haben, können Sie ein Feld hinzufügen (indem Sie es aus dem Formenelement auswählen) und dann Ihren Inhalt in dieses Feld ziehen. Sie können auch zuerst die Box erstellen und dann Objekte direkt in die Box ziehen, um sie zu verschachteln.
Sobald die Objekte verschachtelt sind, können Sie sie jetzt als einzelnes Objekt auf Ihrer Seite verschieben. Wählen Sie die Box aus und fahren Sie fort.
Die Box-Form wird normalerweise zum Erstellen eines Standardquadrats oder -rechtecks verwendet, mit dem Sie Formulare, Bilder, Text usw. markieren können. Sie sollte sich nicht über die gesamte Seitenbreite erstrecken.
Beim Bearbeiten von Seitenabschnitten oder Boxformen erhalten Sie folgende Attribute:
Sie können eine Überschrift und einen Absatztext hinzufügen, indem Sie in der Symbolleiste auf die entsprechenden Optionen klicken. Wenn Sie auf die Absatz- oder Überschriftenschaltfläche klicken, wird auf Ihrer Seite ein voreingestellter Absatz angezeigt. Sie können diesen Absatz dann entsprechend bearbeiten.
Mit dem Texteditor können Sie Farbe, Schriftgröße und Ausrichtung ändern. Außerdem können Sie nummerierte Listen hinzufügen oder einen Link erstellen.
Nachdem Sie auf ein neues Bildelement geklickt haben, haben Sie die Möglichkeit, ein vorhandenes aus einem Ordner auszuwählen oder ein neues hochzuladen. Alle Bilder, die Sie hochladen, werden auf unseren Servern gespeichert und Sie können sie zu einem späteren Zeitpunkt ohne erneutes Hochladen verwenden.
Sie können Bilder jederzeit ersetzen, indem Sie das Bild auswählen und auf Bearbeiten klicken.
Verwenden Sie Bilder, um Ihr Produkt oder Ihre Dienstleistung zu verbessern (Bilder sagen mehr als tausend Worte), aber lassen Sie sich nicht zu sehr mitreißen. Zu viel visuell wird Benutzer vom Konvertierungsziel ablenken.
Weitere Informationen dazu, wie Sie die Konvertierung von Bildern auf einer Zielseite verbessern können, finden Sie unter Verwenden von Bildern auf der Zielseite zur Steigerung der Conversion.
Sie können ein Video auf Ihre Zielseite hochladen, indem Sie die Videooption auswählen und eine Verknüpfung zu Ihrem gewählten YouTube- oder Vimeo-Video herstellen. Sie können das Video entsprechend Ihren Anforderungen skalieren und positionieren. Wählen Sie dann aus, ob das Video automatisch abgespielt oder die Fortschrittsleiste ausgeblendet werden soll.
Wählen NEUE HINZUFÜGEN aus der Hauptsymbolleiste und klicken Sie dann auf FORMEN. Dadurch wird ein Formular auf Ihrer Zielseite ausgefüllt. Sie können Ihr Formular per Drag-and-Drop verschieben und dessen Größe ändern, um es an Ihre spezifischen Designanforderungen anzupassen. Sie können den Schaltflächenstil, den Formularstil, die Farbe und die Schriftart anpassen, indem Sie auf klicken BEARBEITEN Schaltfläche, nachdem Sie auf das Formular geklickt haben.
Sie können auch vorgefertigte Felder festlegen oder eigene Dropdown-Listen erstellen. Formulare können mit unseren integrierten E-Mail-Diensten wie Mailchimp oder Aweber verknüpft werden oder können alleine arbeiten. Wir bieten auch eine Umleitungsoption an (Integrationen und Formularumleitungen sollten auf Ihrer Seite nicht verwendet werden.).
Um Ihrer Seite eine Schaltfläche hinzuzufügen, klicken Sie auf NEUE HINZUFÜGEN aus der Hauptsymbolleiste. Dadurch wird eine Schaltfläche auf Ihrer Zielseite gefüllt. Wenn Sie auf die Schaltfläche klicken, können Sie die Größe ändern, die Farbe oder Schriftart ändern und die Funktion per Drag & Drop an eine beliebige Stelle ziehen.
Nachdem Sie auf die Schaltfläche geklickt haben, wird oben ein Link-Symbol angezeigt. Das ist ein Link-Ereignis Merkmal. Daraufhin wird ein Link-Manager geöffnet, mit dem Sie einen ausgehenden Link zu Ihrer Schaltfläche, ein Popup (Lightbox) zu Ihrer Schaltfläche, einen Dateidownload oder einen Link zu einer anderen Instapage-Landing-Page hinzufügen können.
Viele Landing-Pages verwenden einen Anmeldevorgang in zwei Schritten, bei dem ein Besucher auf eine Schaltfläche klickt, die ein Popup öffnet. Im Pop-Up befindet sich die Lead-Generierungsform. Aus diesem Grund und weil Popups nützlich sein können, um weitere Informationen anzuzeigen, haben wir es sehr einfach gemacht, Popups zu Schaltflächen, Bildern und Textlinks hinzuzufügen.
Klicken Sie einfach auf eine dieser drei Arten von Elementen> klicken Sie auf den Link-Button> und wählen Sie dann die Popup-Option aus.
Sie können die Größe des Popup-Fensters wie jedes andere Element ändern. Jede Art von Inhalt kann im Popup hinzugefügt werden.
Da Instapage eine vollständige Anpassung durch Drag & Drop bietet, unterstützen wir derzeit kein automatisches Responsive Design. Aus diesem Grund müssen Sie Ihre Desktopseite in der mobilen Ansicht basierend auf der kleineren Bildschirmgröße und dem, was in einem mobilen Kontext sinnvoll ist, rekonstruieren.
Sie können Elemente zwischen dem Desktop und der mobilen Version verschieben, indem Sie sie kopieren und einfügen.
Mac-Benutzer:
PC-Benutzer:
Um das endgültige Layout Ihrer eigenen Instapage-Vorlage anzuzeigen, klicken Sie auf Vorschau Option und überprüfen Sie Ihre Vorlage, bevor Sie auf klicken Veröffentlichen.
Hinweis: Durch das Veröffentlichen Ihrer Seite können Sie eine Live-Vorschau in Vorlagenmarktplätzen bereitstellen.
Alle Zielseitenvorlagen müssen anpassbar sein. Instapage-Benutzer sollten in der Lage sein, jedes gewünschte Element leicht auszutauschen.
Um sicherzustellen, dass Vorlagen ihre Qualität nicht verlieren, wenn der Endbenutzer Änderungen vornimmt, ist es wichtig, dass Ihre Seite von ThemeForest genehmigt wird. Bitte beachten Sie die folgenden Richtlinien:
Um Ihre fertige Vorlage verwenden, weitergeben oder verkaufen zu können, müssen Sie sie herunterladen. Zum Download klicken Sie auf Mehr Optionen Klicken Sie im Dashboard auf die Schaltfläche und wählen Sie Seite herunterladen.
Die Datei wird die Erweiterung ".instapage" haben. Wenn Sie Ihre Datei heruntergeladen haben, können Sie sie nach Bedarf umbenennen, die Erweiterung ".instapage" jedoch beibehalten.
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 haben. Dies verringert die Verwirrung durch den Downloader, da Varianten speziell für A / B-Tests verwendet werden.
Ich hoffe, dass Sie damit eine gründliche Einführung in Instapage und das Erstellen von Instapage-Vorlagen erhalten haben, die auf Marktplätzen wie ThemeForest zum Verkauf angeboten werden. Es gibt jedoch noch viel mehr zu lernen. Wenn Sie Fragen haben, können Sie sie gerne in den Kommentaren abfragen.
Informieren Sie sich auch über den Most Wanted Instapage-Wettbewerb von Envato, der gerade stattfindet!
Accentsconagua