Sie können bei der Erstellung von Landing Pages in Textfeldern auch HTML und CSS-Code hinterlegen. Die folgenden Tricks zeigen Ihnen, welche Möglichkeiten Sie haben, Ihre eigene CI zu hinterlegen oder Multimedia Inhalte einzubetten.
So verpassen Sie Ihren Landing Pages einen eigenen Style
Sie können eigenen CSS-Code im Branding-Abschnitt einer Landing Page oder auch direkt in Textfeldern einbinden. Anbei finden Sie einen paar CSS Code Snippets.
<style>/* Hintegrund Farbe ändern */
body {background:#000}
/* Eigenes Hintergrund Bild */
body {background: url("/img/background-example.jpg") no-repeat}
/* Hintergrund Gradient */
body {background: linear-gradient(to right, red , yellow)}
/* Hintergrund im Vollbild Modus */
body {
background-image: url("/img/background-example.jpg");
/* Volle Höhe */
height: 100%;
/* Zentrieren und Image skalieren */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Text Farbe für Überschrift ändern */
h1 {color:#f4f !important}
/* Schriftart von Blöcken ändern */
div {
font-family: "Times New Roman", Georgia, Serif;
}
</style>Landing Page Elemente stylen
Mit dem Inspektor können Sie ein Element in der Landing Page markieren und dann wird Ihnen das Tag und die Klasse des Elementes im Inspektor unten angezeigt.
Im Branding-Abschnitt einer Landing Page können Sie nun für dieses Element einen eigenen Style im Abschnitt Benutzer definiertes CSS festlegen. Das folgende Beispiel zeigt wie man die Schriftgröße der Überschrift h1.headline ändern kann.
Wenn Sie Ihren CSS-Code für andere Landing Pages wiederverwenden möchten, können Sie den CSS-Code in einer CSS-Vorlage speichern, indem Sie auf Hinzufügen klicken.
Inspektor zum Untersuchen von Elementen auf der Landing PageGoogle Schriftarten einbinden
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}Binden Sie die @import Directive immer am Anfang Ihrer CSS-Instruktionen ein. Lernen Sie mehr über Google Fonts
Hinweis
Bitte beachten Sie, dass in Europa seit 25. Mai 2018 die neue Datenschutzgrundverordnung gilt. Wenn Sie Inhalte von externen Servern (z.B. Google Fonts) auf Ihren Landing Pages integrieren, sollten Sie einen Hinweis in Ihren Datenschutzrichtlinien auf das jeweilige Service hinterlegen. Sie können auf jeder Landing Page in der Rubrik DSGVO einen personalisierten Link zu Ihren Datenschutzrichtlinien setzen.
Binden Sie Ihre eignen Schriften in die Landing Pages ein
Um Ihre eigenen Schriftarten in Ihre Landing Pages einzubetten, gehen Sie zum Medienbereich, klicken auf die Schaltfläche Schrift hochladen und laden die Schriftart hoch, die Sie einbinden möchten.
Bitte beachten Sie, dass die folgenden Schriftartformate akzeptiert werden: woff, woff2, ttf und eot.
Alle hochgeladenen Schriftdateien werden im Medienbereich aufgelistet. Um die Schriftart auf Ihrer Landing Page zu verwenden, öffnen Sie bitte die Registerkarte „Schriftart“, indem Sie auf das Stiftsymbol der entsprechenden Schriftart klicken.
Im Tab können Sie zwischen einem Source Link und dem URL Link wählen. Um den Link zur Schriftart zu kopieren, klicken Sie auf das Kopiersymbol.
Gehen Sie zu der von Ihnen erstellten Landing Page, öffnen dann den Branding Bereich der Landing Page und fügen den Link in das Feld „Benutzerdefiniertes CSS“ ein, wie im Screenshot unten ersichtlich. Speichern Sie die Eingabe.
Testen von CSS
Bevor Sie CSS-Code in Ihre Seite einfügen, testen Sie diesen immer auf dessen Richtigkeit mit dem CSS-Validator
Bilder
Mediathek mit einem Bild und einer PDF-DateiIn der Media Library können Sie Bilder und PDF-Dateien hochladen und diese dann in einer beliebigen Landing Page einbinden. Nach dem Upload eines Bildes, können Sie auf den Bleistift klicken und Sie erhalten ein HTML Snippet, mit dem Sie das Bild einbetten können.
<img alt="qr icon" src="/img/qr-icon32.png"/>
YouTube Videos
Eingebettetes YouTube VideoFolgendes Code-Snippet zeigt, wie Sie ein YouTube Video per iFrame in Ihre Landing Page einbetten. Das Video wird automatisch an die Bildschirmbreite angepasst.
<div class="videoWrapper">
<iframe allowfullscreen="allowfullscreen" frameBorder="0" src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div> Bitte verwenden Sie immer auf YouTube den Link zum Einbetten //youtube.com/embed/1234 und nicht den Link in der Adressleiste //youtube.com/watch?v=1234
Vimeo Videos
Video von Vimeo per iFrame einbindenFolgendes Code snippet zeigt, wie Sie ein Vimeo Video per iFrame in Ihre Landing Page einbetten. Das Video wird automatisch an die Bildschirmbreite angepasst.
<div class="videoWrapper"><iframe allowfullscreen="allowfullscreen" frameBorder="0" src="//player.vimeo.com/video/44454530"></iframe>
</div>
MP4 Videos
HTML5 Videos im MP4 Format einbindenSie können auch mit HTML5 Videos im MP4 Format einbinden
<video width="100%" controls="controls">
<source src="/resources/sample.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
Google Maps
Standort auf Google Maps einbindenSie können einen responsive Iframe in einen Google Maps-Standort integrieren.
- Suchen Sie Ihren Standort in Google Maps und kopieren Sie den HTML-Code "Freigeben> Karte einbetten" (iframe).
- Verwenden Sie den folgenden Code auf Ihren Zielseiten, um die responsive Google Map anzuzeigen
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>JavaScript einbinden
Sie können auch JavaScript Code in Textfelder einbinden. Bitte fügen Sie den gesamten Code in einer Linie ein. Bei Zeilenumbrüchen im Javascript Code entsteht sonst ein Fehler.
<script>alert('hello');</script>iFrame einbinden
Inkludieren Sie ein iFrame z.B. im Über mich Teil von Ihrer Visitenkarte.
<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>
Externe Webseiten einbinden
Wenn Sie eine externe Webseite in eine eigene Landing Page einbinden möchten, sollten Sie zuerst alle externen Quellen wie JavaScript, CSS und Bild Dateien inline in die Webseite einfügen. Dafür gibt es ein praktisches Tool auf Github - Inliner
Lead Landing Page
Um ein Formular auf einer Landingpage zu erstellen und die Daten an den Server zu schicken, erstellen Sie eine Lead Landing Page.
Die übermittelten Formulardaten zu einer Landingpage können Sie gesammelt unter dem Menüpunkt Kundenkontakte oder über die API abfragen.
Um ein Formular auf einer eigenen Landingpage zu erstellen und die Daten an den Server zu schicken binden Sie folgendes Snippet ein:
<script>
$(function() {
$('#submit').on('click', function() {
$.post("/api/post", $("form").serialize()).done(
function(data) {
alert('Thank you for registration!');
});
return false;
});
});
</script>
<form>
<label>Your Name</label>
<input name="name" />
<label>Your E-Mail</label>
<input name="email" />
<a href="#" id="submit">Register</a>
</form><input name="notify" type="hidden" value="1"/>
<input name="webhook" type="hidden" value="https://qr.vc/api/webhook/lead"/>
<input name="rewardurl" type="hidden" value="https://qr.vc/resources/test.pdf"/>
- Mit dem Feld notify können Sie die E-Mail-Benachrichtigung, wenn ein neuer Lead übermittelt wurde, an- oder abstellen.
- Mit dem Feld webhook können Sie eine externe URL angeben, an die die Formulardaten übertragen werden
- Mit dem Feld rewardurl können Sie eine externe URL angeben, die der Benutzer per Mail zugesandt bekommt, wenn er sich angemeldet hat (z.B. Link zu einem E-Book, Online-Kurs, ...)
<input name="lng" type="hidden"/>
<input name="lat" type="hidden"/>
<input name="accuracy" type="hidden"/>
Die Felder lng, lat und accuracy können mit folgendem JS-Snippet befüllt werden, wenn die GPS-Funktion aktiviert ist.
<script>
$(function() {
const urlParams = new URLSearchParams(window.location.search);
$('input[name=lng]').val(urlParams.get('lng'));
$('input[name=lat]').val(urlParams.get('lat'));
$('input[name=accuracy]').val(urlParams.get('accuracy'));
});
</script>Call-2-Actions
Sie können auf jeder Landing Page eigene Call-2-Action Buttons hinzufügen. Ein Call-2-Action Button löst eine benutzerdefinierte Aktion wie zum Beispiel einen Anruf initiieren, eine Mail verschicken oder eine Webseite öffnen aus. Lernen Sie mir über die Möglichkeiten von Call-2-Action Aktionen