Deutsch
English
Español
Português
ItalianoHTML & CSS Guide
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>Lernen Sie mehr über CSS-Anweisungen im CSS-Tutorial von W3 Schools
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.
Google 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.
Testen von CSS
Bevor Sie CSS-Code in Ihre Seite einfügen, testen Sie diesen immer auf dessen Richtigkeit mit dem CSS-Validator
Multimedia Inhalte einbinden
Bilder
In 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
Folgendes 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
Folgendes 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
Sie 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
Sie 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
Formulare
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.
Formulardaten abrufen
Die übermittelten Formulardaten zu einer Landingpage können Sie gesammelt unter dem Menüpunkt Kundenkontakte oder über die API abfragen.
Formulardaten übermitteln
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>Optionale Form Felder
<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
