Diese Website verwendet nur erforderliche Cookies, um sicherzustellen, dass unsere Website optimal genutzt werden kann. Wir verwenden keine Cookies, die personenbezogene Daten ohne Ihre vorherige Zustimmung verarbeiten. Cookie Richtlinien

book reader icon
3 Minuten
facebook logo gray
linkedin logo gray
mail logo gray

HTML & CSS Guide

HTML & 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.

Inspector
Inspektor zum Untersuchen von Elementen auf der Landing Page

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

Mediathek mit einem Bild und einer PDF-Datei
Mediathek mit einem Bild und einer PDF-Datei

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

youtube embedded
Eingebettetes YouTube Video

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

vimeo video auf smartphone
Video von Vimeo per iFrame einbinden

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

html5 videos embed
HTML5 Videos im MP4 Format einbinden

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

google maps embed
Standort auf Google Maps einbinden

Sie können einen responsive Iframe in einen Google Maps-Standort integrieren.

  1. Suchen Sie Ihren Standort in Google Maps und kopieren Sie den HTML-Code "Freigeben> Karte einbetten" (iframe).
  2. 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.

lead form register
Formular zur Datenübermittlung

Formulardaten abrufen

Die übermittelten Formulardaten zu einer Landingpage können Sie gesammelt unter dem Menüpunkt Kundenkontakte oder über die API abfragen.

kunden kontakte download
Kundenkontakte herunterladen

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

Letzte Aktualisierung vor einem Monat

Was ist ein Call-2-Action (C2A)-Button?

Call-2-Action-Buttons bieten dem Nutzer an eine bestimmte Aktion z.B. einen Anruf tätigen oder ein PDF anzuzeigen, die bei Klick auf den Button ausgelöst wird.

Was ist ein Call-2-Action (C2A)-Button?