Zum Inhalt

Skripte-Platzhalter

Mit dem Plugin Skripte-Platzhalter können Sie für Elemente mit einem festen Platz auf der Website Platzhalter erstellen und einfügen lassen. Für die Nutzung sind Kenntnisse über HTML, CSS und wahlweise JavaScript notwendig. Ein Anwendungsbeispiel wäre für die über eine JavaScript eingefügte Karte einen Platzhalter zu erstellen, damit der Bereich der Karte während der Blockierung keine weiße Fläche auf der Seite hinterlässt.

Platzhalter reCAPTCHA2.png

Übersicht über die vorhandenen Platzhalter

Alle erstellten Platzhalter werden hier untereinander aufgelistet. In der Übersicht enthalten Sie den selbstgewählten Namen, die verknüpfte Einbindung, den Status und die Optionen der Bearbeitung und der Löschung des Platzhalters.

Neue Platzhalter können über den grünen Knopf mit der Aufschrift Eintrag erstellen erstellt werden. Sie werden zur Erstellungsmaske weitergeleitet und beginnen mit den grundlegenden Daten.

Grundlegende Daten

In den grundlegenden Daten füllen Sie die Daten aus, die mindestens notwendig sind, um einen Platzhalter zu speichern

Grundlegende Daten.png

Name

Hier definieren Sie den Namen der Einbindung. Der Name dient nur der Zuordnung für Sie und hat im Frontend keine Bewandtnis.

Einbindung

Voraussetzung für die Erstellung eines Platzhalters ist eine Einbindung, für die Sie einen Platzhalter erstellen wollen. Mit einem Klick auf das Feld, erhalten Sie eine Auswahl aus allen erstellten Einbindungen.

Aktiv

Sie können den Platzhalter aktivieren und deaktivieren.

Inhalt

Der Inhalt ist das Herzstück des Plugins. Hier definieren Sie je nach Anwendungsfall das Aussehen und/oder das Verhalten des Platzhalters. Sie haben 3 Möglichkeiten den Inhalt als Platzhalter zu erstellen. Alle 3 Möglichkeiten können simultan bzw. ergänzend genutzt werden.

inhalt.png

HTML

Um im Platzhalter Textinhalt erscheinen zu lassen, können Sie hier HTML einfügen. CSS-Klassen der Website können hier ergänzend genutzt werden und müssen nicht zwingend in CCM19 erstellt werden.

Platzierung

Ihnen stehen 3 Optionen zur Platzierung zur Verfügung. Je nach Anwendungsfall empfiehlt sich die entsprechende Option zu nutzen. Die Optionen sind:

Einzelner Platzhalter – Am Ende eines Body-Tags

Nutzen Sie diese Auswahl, wenn das Element keinen festen Platz im <body> hat. Ein Anwendungsbeispiel wäre hier ein Livechat, der mitscrollt.

Mehrere Platzhalter – Nach Elementen, die dem Selektor entsprechen

Nutzen Sie diese Auswahl, wenn Sie Elemente haben, die sowohl im <head>, wie auch im <body> Skripte platzieren lassen. Ein Anwendungsbeispiel wäre hier die Google Maps.

Mehrere Platzhalter – Nach Skript-Tags, die den Text enthalten

Nutzen Sie diese Auswahl, wenn die zu blockierenden Elemente mehrfach im <body> erscheinen. Ein Anwendungsbeispiel wäre hier Elemente von Social Media Plattformen.

Textbausteine

Textbausteine können nach der Erstellung unter dem Reiter Textbausteine mit definierten Ausdruck in geschweiften Klammern im HTML eingefügt werden. Dadurch lassen sich Texte sprachübergreifend erstellen und beliebig oft duplizieren. Die Erstellten Textbausteine werden mit dem definierten Ausdruck aufgelistet und können mit Kopieren und Einfügen im Feld HTML platziert werden. Wählen Sie die gewünschte Sprache aus und fügen Sie sowohl einen Namen wie auch den dazugehörigen Text hinzu. Der Text sollte der Sprache entsprechen. Der Name bleibt in allen Sprachen gleich und wird nicht im Frontend angezeigt.

textbausteine.png

textbausteine2.png

Aktionen

Um dem Nutzer im Frontend eine der zwei Aktionen, load-embedding (Blendet den Platzhalter aus und lädt die Einbindung anschließend) oder more-info (Öffnet die Details für die verknüpfte Einbindung), anzuzeigen, müssen Sie in Ihrem HTML-Code einem Element (beispielsweise einem ) das Attribut data-placeholder-action hinzufügen. Das sähe beispielsweise bei einem Video so aus:

<button type="button" data-placeholder-action="load-embedding>YouTube nachladen</button>

CSS

Sie können CSS eigens für diesen Platzhalter schreiben. Der Code wird nur auf den HTML-Code des Platzhalters angewendet.

JavaScript

Möchten Sie, dass nach der Zustimmung der Einbindung eine Aktion mittels JavaScript ausgeführt wird, dann können Sie in dieses Feld entsprechende befehle in der Programmiersprache formulieren. WICHTIG: Hier darf kein HTML eingefügt werden.

Anzeigebedingungen

Mit Anzeigenbedingungen kann man den Platzhalter nur zu bestimmten Wochentagen und zu bestimmten Zeiten aktivieren.

Zeitabhängige Ausgabe

Mit dem Button "Begrenzung hinzufügen" lassen sich neue Begrenzungen definieren. Im Anschluss besitzt man die Möglichkeit Tage und Zeiten von bis festzulegen.

15f421c5-3c4d-4dbb-96c7-5b82bb841481.png

Vorlagen

Google reCAPTCHA: recaptcha-placeholder-v3.zip

Google Maps: googlemaps-placeholder-v1.zip