Zum Hauptinhalt springen
Alle KollektionenConvertInteraktive Content-Formate und Funktionen
Anleitung zur Erstellung eines Finde-das-Paar
Anleitung zur Erstellung eines Finde-das-Paar
Maximilian Hoppe avatar
Verfasst von Maximilian Hoppe
Vor über 2 Jahren aktualisiert

Das Anlegen unseres beliebten Formats Finde-das-Paar geht einfach und intuitiv. Trotzdem beschreiben wir Ihnen in diesem Tutorial Schritt für Schritt, wie Sie selbstständig im contentbird Convert ein Finde-das-Paar anlegen.

Für Ihre Vorbereitung: Wie ist ein Finde-das-Paar aufgebaut?

Unser Spiel Finde-das-Paar besteht aus zwei Ebenen:

  1. Der Hintergrund: Dieser entspricht in der analogen Welt dem Untergrund, auf dem die Karten liegen. Hierfür benötigen Sie eine entsprechend große Grafik.

  2. Die Spielkarten: Ihr Finde-das-Paar kann aus beliebig vielen Spielkarten bestehen. Sie benötigen eine Grafik für die Rückseite der Karten und entsprechend viele Grafiken für die Motivbilder. Eine Besonderheit unseres Spiels: Sie können auch zusammenpassende Motivbilder suchen lassen, z. B. ein Bild eines Nationalgerichts und die passende Flagge dazu oder Promipaare.

Auf dem Hintergrund ziehen Sie die Spielfläche, auf der die Karten verteilt werden. Sie können den gesamten Hintergrund mit den Karten belegen lassen oder nur einen Teil. Letzteres ist z. B. sinnvoll, wenn Sie auf dem Hintergrund noch die Gewinne abbilden möchten.

Wie groß müssen die Grafiken sein?

Die Grafik für den Hintergrund muss mindestens so groß sein, wie das Finde-das-Paar auf Ihrer Webseite dargestellt werden soll.

Die Größe der Karten-Grafiken kann nicht so pauschal erklärt werden, da sich die Darstellung aus mehreren Faktoren berechnet: Größe der Spielfläche, Anzahl der Karten und angegebener Abstand zwischen den Karten. Wir empfehlen daher im Allgemeinen, die Grafiken für die Rückseite und die Motive in 200 x 200 px anzulegen.

Das Finde-das-Paar ist, wie jedes Format, responsiv. Sofern Ihre Webseite Responsive Design unterstützt, passt sich das Spiel der Browserbreite an. Das Seitenverhältnis des Formats sowie die Position und relative Größe der Karten werden dabei immer beibehalten.

Anlegen des Formats

Loggen Sie sich unter manager.contilla.de in den contentbird Convert ein und gehen Sie über die linke Navigation in Ihren Content-Editor. Dort wählen Sie die Kachel "Finde-das-Paar".

Hinweis: Wenn Sie ein Finde-das-Paar anlegen, befinden Sie sich zunächst im Assistenzmodus, d.h., Sie werden Schritt für Schritt durch die Erstellung geleitet und müssen nicht, wie im Folgenden beschrieben, über die Navigation gehen: Bei jedem Punkt erscheint unten ein Button mit "weiter" o.Ä. Erst wenn Sie den Assistenzmodus verlassen (Sie klicken aktiv auf einen Menüpunkt in der Navigation, loggen sich aus oder schließen den Browser), erreichen Sie die einzelnen Bearbeitungspunkte über die Navigation.

Navigationspunkt "Beschreibung"

Sprache
Wählen Sie unter "Sprache" im Dropdown-Menü die Sprache aus, in der die festen Elemente des Finde-das-Paar angezeigt werden sollen (z. B. der Start-Button).

Name
Unter "Name" geben Sie einen aussagekräftigen Namen für Ihr Finde-das-Paar ein, der Ihnen ermöglicht, es auch in Nachhinein noch in Ihrer Liste der Formate wiederzufinden. Diese finden Sie links oben auf Ihrem Dashboard oder unter dem Navigationspunkt "Content-Übersicht". Dieser Name darf nur einmal verwendet werden, daher ist es sinnvoll, beispielsweise das Datum mit anzugeben.

Titel
Unter "Titel" können Sie einen abweichenden Titel vergeben. Dieser Titel kann optional in der Titelzeile des Finde-das-Paar angezeigt werden.

"Beschreibung" ist ein optionales internes Feld für Sie, das Sie leer lassen können

Interne Vermerke
Ganz unten unter "Interne Vermerke" können Sie für sich oder Ihre Kollegen Notizen hinterlassen, z. B. für welche Aktion das Finde-das-Paar gedacht ist oder dass die Bilder noch vor der Veröffentlichung ausgetauscht werden müssen.

Navigationspunkt "Einstellungen"

In den allgemeinen Einstellungen können Sie Features für Ihr Finde-das-Paar aktivieren.

Format-Titel anzeigen
In der Kopfzeile des Finde-das-Paar wird der Titel, den Sie unter "Beschreibung" angegeben haben, angezeigt.

Stoppuhr
Auf dem Hintergrund des Spiels wird die gespielte Zeit angezeigt.

Spielzüge zählen
Auf dem Hintergrund des Spiels werden die ausgeführten Spielzüge angezeigt (ein Spielzug = zwei Klicks auf zwei verschiedene Karten).

Neustart
Wenn der User auf den Start-Button auf dem Hintergrund klickt, beginnt das Spiel von vorne.

Lead-Generierung
Unverzichtbar, falls Sie ein Gewinnspiel machen. Aktivieren Sie die Lead-Generierung, um Kundendaten zu erfassen.

Optionen in der Fußzeile
Hier definieren Sie, welche rechtlichen Informationen Sie in der Fußzeile anzeigen möchten: "Datenschutzerklärung", "Impressum" und "Teilnahmebedingungen". Klicken Sie das Gewünschte an. Alle rechtlichen Informationen sind optional. Das Impressum ist nur notwendig, wenn die Webseite, auf der das Finde-das-Paar eingebunden ist, über kein Impressum verfügt. Gleiches gilt für die Datenschutzerklärung.

Wenn Sie eine der Checkboxen angeklickt und gespeichert haben, erscheint unter "Einstellungen" der Untermenüpunkt "Fußzeile". Hier können Sie die passenden Informationen als PDF hinterlegen.

Whitelabeling
Unterdrücken Sie das "powered by contentbird Convert" in der Fußleiste. Sollten Sie dieses Feature nicht angezeigt bekommen, erkundigen Sie sich bei Ihrem Ansprechpartner bei contentbird.

Klicken Sie wie nach jeder Bearbeitung auf "speichern".

Navigationspunkt "Gestaltung"

Kopfzeile

Dieser Menüpunkt erscheint nur, wenn Sie unter "Einstellungen" "Format-Titel anzeigen" aktiviert haben. Geben Sie die Farben für den Hintergrund und die Schrift des Titels an und definieren Sie die Schriftgröße.

Allgemein

Abmessung des Spiels
Stellen Sie unter "Abmessung des Spiels" ein, wie groß das Finde-das-Paar (exklusiv der Titelzeile) auf Ihrer Webseite angezeigt werden soll. Geben Sie die Breite und Höhe ein. Wenn Ihre Webseite responsive ist, geben Sie die maximalen gewünschten Maße des Spiels an.

Status-Elemente
Dies sind der Start-Button, die Anzeige Stoppuhr und der Anzahl der Züge. Legen Sie über das Drop-Down-Menü "Position" fest, ob diese rechts oder links unten auf dem Hintergrundbild dargestellt werden sollen ("rechter Rand" bzw. "linker Rand") oder unter der Hintergrundgrafik ("unter Spielfeld"), welche Hintergrundfarbe diese haben soll (wird mit Transparenz dargestellt, falls auf dem Hintergrundbild) und welche Farben der Start-Button, der Text und der Text auf dem Button haben sollen.

Hinweis: Die Darstellung der Status-Elemente unterhalb der Hintergrundgrafik ist vor allem für die mobile Ansicht zu empfehlen.

Spielkarten

Geben Sie an, wie viele Spielkarten Sie verwenden möchten. Die Zahl betrifft die gesamte Anzahl der Karten: Möchten Sie z. B. 5 Kartenpaare suchen lassen, geben Sie hier 10 an.

Anschließend definieren Sie die Pixelwerte für:

  • den Abstand zwischen den Karten an ("Kartenabstand")

  • für das Passepartout ("Passepartout-Breite"), falls eines gewünscht ist (betrifft nur die Motivbilder, die Rückseite der Karten hat kein Passepartout)

  • für die "Breite der Umrandung" der Karten (betrifft die Motivbilder und die Rückseite)

Zudem können Sie die Option aktivieren: "Gefundene Kartenpaare ausgegraut auf der Spielfläche belassen" (ansonsten verschwinden die gefundenen Kartenpaare einfach).

Mit der Option "Ähnliche Kartenpaare" aktivieren Sie, dass die User zusammenpassende Paare suchen müssen (z. B. Nationalgericht + Flagge des Landes oder Promipaare).

Spielfläche

Laden Sie bei "Hintergrund" Ihre Grafik für den Hintergrund hoch (als JPG oder PNG), entweder per Drag'n'Drop oder über "Datei auswählen".

Bei "Spielfläche" ziehen Sie mit der Maus den Bereich, auf dem die Karten platziert werden sollen. Der Bereich, auf dem "Platzhalter" steht, gibt Ihnen eine ungefähre Orientierung, bis wohin die Status-Elemente mit dem Start-Button und der Stoppuhr "hineinragen".

Tipp: Die Größe und Anordnung der Karten berechnet sich aus der Anzahl der Karten, den von Ihnen angegebenen Kartenabstand und der Größe der Spielfläche, die Sie hier ziehen. Deswegen muss man die Größe der Spielfläche manchmal etwas variieren, bis man zum gewünschten Ergebnis gelangt. Öffnen Sie sich am besten, wenn Sie alle Bilder hochgeladen haben, die Einstellung der Spielfläche und den Testlauf parallel in einem Tab und probieren Sie ein wenig aus.

Speichern Sie die Spielfläche

Fußzeile

Geben Sie die Hintergrundfarbe, die Schriftfarbe und die Schriftgröße der Fußzeile an.

Navigationspunkt "Inhalt"

Motive

Legen Sie die Motivbilder fest, also die Bilder, die vom User gefunden werden müssen.

Klicken Sie bei "Neue Vorderseite anlegen" auf "Anlegen".

Übersicht der Spielkartenmotiv eines "Finde das Paar" in contentbird Convert.

Unter "Spielkarte" sehen Sie die Information, wie groß nach den aktuellen Einstellungen die Karten dargestellt werden.

Laden Sie die Grafik per Drag'n'Drop oder über "Datei auswählen" hoch (als JPG oder PNG).

Falls Sie unter "Gestaltung" "Ähnliche Kartenpaare" aktiviert haben, können Sie "Bild für die korrespondierende Spielkarte" anklicken und das passende Bild hochladen.

Konfiguration von ähnlichem Spielkartenmortiv in contentbird Convert.

Um bestehende Motivbilder zu bearbeiten oder zu entfernen, gehen Sie auf "Inhalt/Motive" und klicken beim entsprechenden Bild auf "Bearbeiten" bzw. "Entfernen".

Deckblätter

Das Deckblatt ist die Rückseite der Karten. Das Hochladen, Bearbeiten und Entfernen funktioniert genauso wie bei den Motivbildern.

Wenn Sie mehrere Deckblätter hochladen, werden diese abwechselnd im Spiel dargestellt.

Konfiguration der Spielkartenrückseite für ein "Finde das Paar" in contentbird Convert.

Abschluss

In dem Navigationspunkt "Abschluss" geben Sie den Text ein, der nach der Lösung des Finde-das-Paar angezeigt wird.

Geben Sie unter "Überschrift" einen Titel ein und darunter bei "Nachricht" einen passenden Text.

Konfiguration des Abschlusstext für ein "Finde das Paar" in contentbird Convert.

Tipp 1: Fahren Sie mit der Maus über das blaue Fragezeichen, um sich über die jeweiligen Möglichkeiten der Formatierung und Datenergänzung des jeweiligen Texts zu informieren.

Folgende Daten eines "Finde das Paar" können eingesetzt werden:

  • {time}
    Die insgesamt benötigte Zeit zum Beenden des Spiels.

  • {moves}
    Die insgesamt benötigte Anzahl an Spielzügen, um das Spiel zu beenden.

Tipp 2: Formatieren Sie Ihren Abschlusstext oder fügen einen Link oder Button hinzu.

Klicken Sie wie nach jeder Bearbeitung auf "speichern" und schauen Sie sich unter dem Navigationspunkt "Testlauf" Ihr Ergebnis an.

Navigationspunkt "Testlauf"

Im Testlauf können Sie Ihr Finde-das-Paar bereits vor der Integration vollständig betrachten und durchklicken. Bitte beachten Sie, dass das abschicken eines Leads nicht im Testlauf getestet werden kann. Testen Sie dies bitte nach Ihrer Integration des Finde-das-Paar.

Hinweis: Im Testlauf ist es nicht möglich, alle Eigenschaften Ihrer Webseite zu berücksichtigen, sodass die Ansichten im Testlauf und auf Ihrer Webseite abweichen können (z. B. Schriftart, Zeilenabstände, Link-Farben).

Fehlersuche und Integration

Unter dem Navigationspunkt "Live-Integration" können Sie das Finde-das-Paar auf Fehler prüfen, aktualisieren und integrieren.

Fehlersuche
im Menü "Live-Integration" sollte ein grünes Häkchen mit dem Hinweis "Ihr Format weist keine Probleme auf und kann aktualisiert werden." erscheinen. Ansonsten werden Ihnen Warnhinweise angezeigt. Falls ein Warnhinweis angezeigt wird, können Sie diesen über den Pfeil links neben dem Hinweis weiter ausklappen, um Details zu erfahren und zu der Fehlerquelle zu springen.

Aktualisieren
Klicken Sie auf den Button "Aktualisieren", um ein bereits eingebundenes Finde-das-Paar, an dem Sie Änderungen vorgenommen haben, auch in der Live-Version auf den neusten Stand zu bringen. Alle Änderungen, die Sie im Finde-das-Paar vornehmen, werden erst nach dieser Aktualisierung in Ihrer Veröffentlichung übernommen.

Übersicht Anforderungen

Hier noch einmal im Kurzen die Dinge, die Sie mindestens vorbereiten müssen, um ein Finde-das-Paar zu erstellen:

  • Grafiken: Grafik für Hintergrund (mindestens so groß, wie das Finde-das-Paar dargestellt werden soll), Grafiken für die Motivbilder (am besten 200 x 200 px), Grafik für die Rückseite der Spielkarten (am besten 200 x 200 px); alle Grafiken als JPG oder PNG

  • Texte: Abschluss: Überschrift und Nachricht

Wir wünschen Ihnen eine erfolgreiche Aktion!

Ihr contentbird Convert-Team

Hat dies Ihre Frage beantwortet?