Landingpages gestalten

Vorlagen

Kostenfreie Vorlagen laden

Quentn stellt Ihnen 30 Templates gratis zur Verfügung, die Sie alle nach Ihren Wünschen bearbeiten können. Wählen Sie also das Template nicht nach dem Inhalt aus, sondern nach der Gestaltung und Anordnung von Texten und Bildern. Wirklich alles kann jederzeit ausgetauscht und angepasst werden.

  • Klicken Sie auf den Menüpunkt Kampagnen und Vorlagen.
  • Zuerst werden Ihnen Ihre gespeicherten Templates angezeigt. Um sich vorgefertigte Vorlagen auszusuchen, klicken Sie auf den Reiter Quentn-Vorlagen.
  • Suchen Sie sich ein Template aus. Sie können Suchbegriffe eingeben, um eine Vorauswahl zu erhalten. Suchen Sie z. B. nach “Webinar”, werden Ihnen Vorlagen für die Bewerbung eines Webinars angezeigt.
  • Um die gewünschte Vorlage zu nutzen, gehen Sie mit der Maus über die Vorlage. Es erscheint ein grüner Button “Neue erstellen”, den Sie bitte klicken.

Neue Vorlage erstellen

Natürlich können Sie auch Ihre eigene Vorlage von Grund auf selbst erstellen. 

  • Klicken Sie auf den Menüpunkt Kampagnen und Vorlagen. Sie landen direkt bei “Meine Vorlagen”. 
  • Klicken Sie auf “Neue Vorlage erstellen”.

Alternativ:

  • Erstellen Sie in der Kampagne Ihre Landingpage.
  • Klicken Sie im Editor auf den orangen Button “Als Vorlage speichern”.

Allgemeine Orientierung

Die verschiedenen Seiten

Sobald Sie eine Vorlage bzw. das Ereigniselement “Landingpage” öffnen, sehen Sie drei Reiter: Landingpage, Dankeschönseite sowie Danke-Seite (bereits bestätigte). Die letzten zwei sind relevant für alle Kontakte, die sich in Ihr Formular auf der Landingpage eintragen.

Die Landingpage sollte mindestens ein Formular enthalten, in dass sich die Besucher eintragen.

Die Bestätigungsseite erscheint, sobald der bis dato unbekannte Besucher sich im Formular eingetragen hat.

Die Bestätigungsseite (bereits bestätigte) wird für Kontakte angezeigt, die in der Vergangenheit bereits den Double Opt-in bei Ihnen vollzogen haben.

Seitentitel und -URL

Vergeben Sie bitte einen Seitentitel. Dieser sollte kurz und knapp sein, denn er wird den Besuchern im Browser-Tab angezeigt.

Aus diesem Titel wird auch die Seiten-URL generiert. Diese können Sie jedoch mit einem Klick auf das Stift-Symbol bearbeiten. Bitte beachten Sie, dass hier nur kleine Buchstaben und keine Sonderzeichen verwenden dürfen.

Anzeige und Navigation // Bearbeitungstools

Am oberen Rand der Vorlage sehen Sie drei Buttons:

  • Mit “Vollbild” wechseln Sie in den Vollbildmodus (empfohlen).
  • Mit “Struktur anzeigen” sehen Sie die Umrandungen der einzelnen Blöcke, Zeilen und Spalten.
  • Unter “Vorschau” sehen Sie, wie Ihre Landingpage am PC und auch mobil aussieht. 
  • Sie kommen wieder in die normale Ansicht, sobald Sie erneut auf den jeweiligen Button klicken.
  • Um einen Ihrer Gestaltungsschritte rückgängig  zu machen, finden sie unten links drei Symbole: Ein runder Pfeil mit einer Uhr, ein Pfeil nach links und ein Pfeil nach rechts. 
    • Mit einem Klick auf das Uhren-Symbol werden Ihnen die letzten Arbeitsschritte angezeigt. So können Sie an einen bestimmten Punkt in der Bearbeitung zurückkehren. Das Layout wird dann genau so wiederhergestellt, wie es zum gewählten Zeitpunkt aussah. 
    • Der Pfeil nach links macht die letzte Aktion rückgängig. 
    • Der Pfeil nach rechts bringt Sie wieder einen Schritt vorwärts.

Gestaltung: Inhalt

Rechts neben dem Template finden Sie die “Toolbar”. Unter dem Menüpunkt sehen Sie die einzelnen Bausteine, die Sie Ihrer Seite hinzufügen können. Wählen Sie den gewünschten Typ aus (Titel, Text, Bild, Button, Trenner, Social Media Button, HTML, Video, Formular, Icons, Menü, Stickers oder Gifs über den Anbieter Giphy) und ziehen ihn mit gedrückter linker Maustaste an die gewünschte Stelle in Ihrer Landingpage. Die Position kann anschließend noch beliebig verändert werden. 

Klicken Sie in Ihrer Landingpage auf den Block, den Sie bearbeiten möchten. Auf der rechten Seite sehen Sie dann erweiterte Eigenschaften und Optionen. So können Sie Text- und Linkfarben anpassen, Zeilenabstände bestimmen, die Ränder definieren und bei allen anderen Bausteinen ebenfalls weitere Bearbeitungen vornehmen. 

Bilder

Bilder hochladen

Um eigene Bilder  einzubauen, wählen Sie rechts den Typ "Bild" und ziehen das Element an die gewünschte Stelle. Klicken Sie anschließend auf "Durchsuchen". 

Sie landen nun im Dateimanager. Hier können Sie das gewünschte Bild hochladen und anschließend in Ihre Landingpage einfügen.

Achtung: Die maximale Größe für Bilder beträgt 8MB.

Aus 500.000 lizenzfreien Bildern wählen

Ihnen steht außerdem eine Datenbank mit über 500.000 lizenzfreien Bildern zur Verfügung, die Sie nutzen können. 

  • Klicken Sie im Dateimanager auf "Suche nach lizenzfreien Fotos". 
  • Geben Sie einen Suchbegriff ein, um ein passendes Bild auszuwählen.
  •  Klicken Sie auf "Import", um das gewünschte Bild in Ihren Dateimanager zu laden und anschließend auf "Einfügen", um das Bild in Ihre Landingpage einzufügen.

Buttons 

Ziehen Sie das Element des Typs “Button” an die gewünschte Stelle. Klicken Sie anschließend darauf und rechts öffnen sich die Inhaltseigenschaften. Sie können nun eine URL hinterlegen und den Button in Hintergrund- und Textfarbe anpassen.

Um die Beschriftung des Buttons zu ändern, klicken Sie einfach auf den Button selbst und schreiben den gewünschten Text.

Soziale Netzwerke hinzufügen

Ziehen Sie das Element des Typs "Sozial" an die gewünschte Stelle in Ihrer Landingpage..

Anschließend klicken Sie auf den Inhalt der Zeile. Rechts haben Sie dann die Option, weitere soziale Dienste hinzuzufügen und die voreingestellten zu entfernen. Außerdem können Sie bei jedem Dienst die entsprechende URL zu Ihrer Seite hinterlegen.

Links hinzufügen

Um Links einzufügen, markieren Sie bitte den zu verlinkenden Text. Anschließend klicken Sie in der Toolbar auf das Kettensymbol. Es öffnet sich nun ein Fenster “Link einfügen”. Bestimmen Sie den Link-Typ und geben die URL ein. Klicken Sie auf “OK”.

Eigenes HTML

Um eigenes HTML zu nutzen, ziehen Sie den Block “HTML” an die gewünschte Stelle auf Ihrer Landingpage. Klicken Sie anschließend auf den Inhalt und geben rechts den HTML-Code ein.

Video

Natürlich können Sie auch Videos auf Ihrer Landingpage einbinden. 

Ziehen Sie dafür den Block “Video” an die gewünschte Stelle Ihrer Landingpage und klicken auf den grauen Button “Video URL hinzufügen”.

Auf der rechten Seite haben Sie nun unter “Video URL” drei Optionen:

  • Miniaturbild: Es wird nur ein Bild des Videos gezeigt und mit einer URL zum Video verlinkt.
  • Eingebettet: Geben Sie den Link zum Video auf der entsprechenden Plattform ein (NICHT den Einbettungslink, sondern den ganz normalen Link) und das Video wird auf Ihrer Landingpage eingebettet, sodass es abgespielt werden kann.
  • Eigenes Video: Geben Sie den Link zu Ihrem eigenen Video ein. Der Link MUSS direkt auf das mp4-File leiten! Videos in Clouds wie Drive, Dropbox & Co. können leider nicht eingebunden werden. 

ACHTUNG: Bei Vimeo-Videos, die eingebettet werden, muss rechts im Editor "Eigenschaften" aktiviert werden. Andernfalls wird nur das Vorschaubild angezeigt und nicht das Video abgespielt.

Unterschiedliche Designs für Desktop und Mobile

Sie haben die Option, Ihre Landingpages auf Desktop und Mobilgeräten unterschiedlich darzustellen. So können Sie z. B. Bilder für die Mobilversion ausblenden, damit der Leser auf dem Telefon schneller die Inhalte erfassen kann (nur als Beispiel).

Klicken Sie dafür auf den Inhaltsblock, den Sie für Desktop oder mobil verbergen möchten. Auf der rechten Seite, in unserer “Werkbank”, klicken Sie bei dem Menüpunkt "nicht sichtbar auf" das entsprechende Icon entweder für Desktop oder Mobil. 

Gestaltung: Zeile

Unter diesem Menüpunkt finden Sie eine Vielzahl verschiedener Zeilenlayouts, die Sie in Ihre Landingpage ziehen können. 

Wenn Sie links in Ihrem Layout auf einen Bereich außerhalb des Inhalts klicken, wählen Sie eine Zeile aus. Diese können Sie beliebig im Inhalt verschieben, indem Sie mit der Maus auf das Kreuz auf der linken Seite klicken, die Maustaste gedrückt halten und das Element dann verschieben.

Ist eine Zeile angewählt, erscheint auf der rechten Seite unter dem Menüpunkt “Zeile” ein Bereich, in dem Sie die Zeilen- und Spalteneigenschaften vornehmen können. So können Sie die Hintergrundfarbe der Zeile und des Inhalts separat definieren, Hintergrundbilder für die Zeile bestimmen, einzelne Spalten definieren und einiges mehr.

Ebenso können Sie eine Zeile speichern, löschen oder kopieren, indem Sie am rechten Rand entweder auf die Diskette, den Papierkorb oder das Kopier-Symbol klicken.

Um einst gespeicherte Zeilen wieder aufzurufen, klicken Sie auf “Zeile” und wählen im Fenster nicht “leer”, sondern “benutzerdefinierte Zeilen” auf. Hier finden Sie alle gespeicherten Zeilen, die Sie nun via Drag & Drop einfügen können.

Eine Übersicht aller gespeicherten Zeilen finden Sie unter “Kampagnen” → “Vorlagen” und dann unter dem Reiter “Meine Zeilen”.

Statische Seiten

Impressum anlegen

Um ein Impressum anzulegen, das zum Design Ihrer Landingpage passt, gehen Sie wie folgt vor:

  • Klicken Sie auf den Menü-Punkt Kampagnen und Statische Seiten.
  • Klicken Sie nun auf den grünen Button “Neues Impressum hinzufügen”.
  • Erstellen Sie nun im gewünschten Design eine Landingpage, die Ihr Impressum enthält.
  • Unter dem Editor haben Sie nun die Möglichkeit, diese Seite auch gleich als Standardseite für Ihr Impressum auszuwählen, indem Sie den Haken setzen.

Datenschutzerklärung anlegen

Um eine Datenschutzerklärung anzulegen, gehen Sie wie folgt vor:

  • Klicken Sie auf den Menü-Punkt Kampagnen und Statische Seiten.
  • Klicken Sie nun auf den grünen Button “Neue Datenschutzerklärung hinzufügen”.
  • Erstellen Sie nun im gewünschten Design eine Landingpage, die ausschließlich Ihre Datenschutzerklärung enthält.
  • Unter dem Editor haben Sie nun die Möglichkeit, diese Seite auch gleich als Standardseite für Ihre Datenschutzerklärung auszuwählen, indem Sie den Haken setzen.

Seiteneinstellungen

Bei allen Seiten können Sie zusätzliche Informationen in den Header, Body und Footer eingeben (z. B. Scripts von Google, etc.).

Klicken Sie dafür unten auf “Seiteneinstellungen” und geben an der gewünschten Stelle die Informationen ein.

Beim Header werden die Informationen, wie man sich denken kann, in den Header gepackt.

Im Body kommen die Informationen als erstes nach dem öffnenden Body-Tag.

Im Footer kommen die Informationen als letztes vor dem schließenden Body-Tag.

Hinweis: Beachten Sie bitte, dass die Scripts nicht validiert werden. Sollten diese Fehler enthalten, kann das dazu führen, dass die Seite nicht ordnungsgemäß angezeigt wird.