Layouts für das Erscheinungsbild von Gebäuden
Was finden Sie hier?
Über die Gestaltung des Gebäudeerscheinungsbildes
Tipp: In den Abschnitten auf dieser Seite wird beschrieben, wie Sie ein Overlay-Motiv in Appearance Studio bearbeiten können. Informationen zum Bearbeiten eines eingebetteten Werbemittels finden Sie unter „Eingebett ete Werbemittel“.
Auf dieser Seite wird erläutert, wie man ein Erscheinungsbild-Layout für einen digitalen Intercept erstellt. Ein Layout besteht aus mehreren Elementen. Jedes einzelne Element ist ein anderer Bestandteil Ihrer digitalen Überwachung. Dazu gehören Textfelder, Grafiken, eingebettete Umfragen und vieles mehr.
Das Layout Ihres Designs erstellen Sie auf der Registerkarte „Build“ im Appearance Studio.
Zur Anpassung Ihres Layouts stehen Ihnen folgende Elemente zur Verfügung:
- Text: Füge ein Textfeld ein.
- Grafik: Fügen Sie eine Grafik ein.
- Schaltfläche: Fügen Sie eine Schaltfläche hinzu, auf die Besucher klicken können, um eine Umfrage zu starten oder einen externen Link zu öffnen.
- Einbettungsfunktion: Eine Umfrage oder einen Agenten direkt in den Intercept einbetten.
- Feedback-Schaltfläche: Fügen Sie eine Feedback-Schaltfläche hinzu, auf die Benutzer klicken können, um das Intercept-Fenster zu öffnen.
- Zeile: Fassen Sie Elemente in Zeilen zusammen, damit sie horizontal statt vertikal angezeigt werden.
- Abstandhalter: Fügt zwischen anderen Elementen einen Leerraum ein.
Änderungen rückgängig machen und speichern
Appearance Studio ist ein flexibler Editor, mit dem Sie Änderungen an Ihrem Erscheinungsbild-Layout speichern und rückgängig machen können. Während Sie Ihr Layout bearbeiten, können Sie die Schaltflächen „Rückgängig“ und „Wiederherstellen“ verwenden, um Aktionen bei Bedarf rückgängig zu machen bzw. wiederherzustellen (beispielsweise, wenn Sie versehentlich ein Textfeld-Element gelöscht haben).
Ihre Änderungen werden erst übernommen, wenn Sie unten im Editor auf die Schaltfläche „Darstellung speichern“ klicken.
Achtung: Sobald Sie die Änderungen gespeichert haben, können Sie die vor dem Speichern durchgeführten Aktionen nicht mehr rückgängig machen oder wiederholen. Bitte beachten Sie, dass Sie Ihr Layout nicht auf eine zuvor gespeicherte Version zurücksetzen können.
Nachdem Sie das Erscheinungsbild gespeichert haben, können Sie das neue Design auf Ihrer Website testen und die Änderungen anschließend im Live-Intercept veröffentlichen. Das funktioniert genauso wie das Veröffentlichen einer beliebigen Änderung an einem Live-Intercept. Weitere Informationen finden Sie auf den folgenden Seiten:
- Prüfung unveröffentlichter Intercept-Änderungen
- Aktivieren, Veröffentlichen und Verwalten von Intercepts
Elemente verschieben
Die Elemente werden im Appearance Studio in einer vertikalen Liste angezeigt. Die Reihenfolge, in der die Elemente in dieser Liste aufgeführt sind, bestimmt die Reihenfolge, in der das Element in Ihrem Layout erscheint. Das oberste Element befindet sich ganz links, während das unterste Element ganz rechts steht; alle anderen Elemente werden dazwischen angezeigt.
Am einfachsten lassen sich Elemente neu anordnen, indem Sie sie mit der Maus anklicken und an eine neue Stelle in der Liste ziehen.
Sie können ein einzelnes Element jedoch bearbeiten, indem Sie mit der Maus darüber fahren und eine Option auswählen:
- Kopieren: Erstellt ein Duplikat des Elements.
- Löschen: Löscht das Element.
- An den Anfang der Struktur verschieben: Verschiebt das Element an den Anfang der Liste der Elemente.
- Element nach oben verschieben: Verschiebt das Element in der Liste der Elemente um eine Position nach oben.
- Element nach unten verschieben: Verschiebt das Element in der Liste der Elemente um eine Position nach unten.
- An das Ende der Struktur verschieben: Verschiebt das Element an das Ende der Elementliste.
Einrichten des Intercept-Containers
Der Container enthält alle Elemente Ihres Intercepts und legt fest, wie diese auf Ihrer Website angezeigt werden. Alle Elemente werden unterhalb des Containers verschachtelt.
Tipp: Ein einzelner Container unterstützt bis zu 15 Elemente. Die Schaltfläche „Feedback“ ist von dieser Beschränkung ausgenommen.
Klicken Sie auf einen Container, um dessen Einstellungen zu öffnen. Anschließend können Sie Folgendes anpassen:
Einstellungen für „Intercept“ schließen:
- Aktivieren: Symbol zum Schließen hinzufügen – Falls Sie ein „X“ zum Schließen Ihres Intercepts einfügen möchten. Beachten Sie, dass Sie kein „X“ angeben müssen. Sie können stattdessen eine Schaltfläche hinzufügen, mit der sich die Intercept-Abfrage schließen lässt.
- Lege die Farbe des Symbols fest.
- Bestimmen Sie den vertikalen und horizontalen Versatz in Pixeln.
Die Layout -Einstellungen steuern Folgendes:
- Anzeigetyp: Legt die Platzierung der Werbeanzeige fest. Wählen Sie zwischen „Overlay“ (wird über dem Seiteninhalt eingeblendet) oder „Inline“ (wird in die Seite eingebettet, wodurch der Inhalt nach oben oder unten verschoben wird).
- Breite (px): Legt die maximale Breite des Erscheinungsbilds in Pixeln fest. Sie können außerdem die Option „ : Vollbild“ aktivieren, damit der Container immer die gesamte Breite Ihrer Webseite einnimmt.
- Elementabstand (px): Legt den standardmäßigen vertikalen Abstand zwischen den Elementen fest, die innerhalb des Containers übereinander angeordnet sind.
- Padding (px): Legt die Größe des Randes innerhalb der Umrandung des Containers fest und verschiebt alle darin enthaltenen Elemente nach innen. Wählen Sie „Gleichmäßigen Abstand verwenden“, um für alle vier Seiten denselben Wert festzulegen, oder deaktivieren Sie diese Option, um den Abstand oben, unten, links und rechts individuell festzulegen.
Wenn als Anzeigetyp „Overlay“ eingestellt ist, legen Sie die Position des Containers auf der Webseite fest, indem Sie die horizontale und vertikale Ausrichtung festlegen und auswählen, ob Sie einen Rand einfügen möchten.
Mit „UnderStyle“ können Sie das Erscheinungsbild des Containers anpassen:
- Hintergrundfarbe: Wählen Sie eine Farbe aus oder geben Sie den HEX- oder RGBA-Wert ein. Sie können auch „Transparent“ auswählen, indem Sie die Option „Keine Farbe“ verwenden.
- Rahmen: Legen Sie die Rahmenbreite (px) und die Rahmenfarbe fest.
- Abgerundete Ecke (px): Erhöht die Rundung der äußeren Ecken des Intercepts. Wählen Sie „Benutzerdefinierte abgerundete Ecken verwenden“, um unterschiedliche Kurven für die obere, untere, linke und rechte Ecke festzulegen, oder wählen Sie „Gleichmäßige abgerundete Ecken verwenden“, um für alle Ecken dieselbe Einstellung anzuwenden.
- Schlagschatten: Wendet einen Schatten hinter dem Intercept-Rahmen an. Wählen Sie zwischen „Keine“, „Leicht“, „Mittel“ oder „Stark“.
Tipp: Aktivieren Sie die Option „Abstandsrichtlinien anzeigen“, um die Abstände und Innenabstände des ausgewählten Elements anzuzeigen, die rosa hervorgehoben sind. Sie können die Abstandsrichtlinien auf Container-Ebene, auf Zeilenebene und auf der Ebene einzelner Elemente einsehen. Richtlinien zur Abstandsgestaltung können Ihnen helfen, sich vorzustellen, wie Ihre Elemente zueinander angeordnet sind.
Text formatieren
Sie können den Text in Ihrem Layout anpassen. Dazu gehören Textelemente und andere Elemente, die Textkomponenten enthalten, wie beispielsweise Schaltflächen und Feedback-Schaltflächen.
In diesem Abschnitt wird erläutert, wie Sie ein Textelement hinzufügen können. Die allgemeinen Grundsätze zur Textbearbeitung gelten jedoch überall dort, wo Sie in Appearance Studio Text bearbeiten können.
Klicken Sie auf „Zum Container hinzufügen“.
Auswählen Text.
Geben Sie Ihren Text in das Textfeld ein. Markieren Sie den Text, den Sie formatieren möchten.
Verwenden Sie die Symbolleiste, um die Textformatierung anzupassen:
- Schriftfamilie: Die verwendete Schriftart. Wählen Sie „Systemstandard“, um automatisch die Schriftart der Website zu übernehmen, auf der das Intercept eingesetzt wird.
- Schriftgröße: Die Größe des Textes in Pixeln. Der Standardwert ist 12.
- Textformat: Zu den Optionen gehören „Fett“, „Kursiv“, „Unterstrichen“, „Textfarbe“ und „Hervorhebungsfarbe“.
- Ausrichtung: Richtet den Text links, mittig oder rechts im Containerblock aus.
- Hyperlink: Verlinken Sie auf eine externe URL oder starten Sie Ihre verknüpfte Umfrage.
- Formatierung entfernen: Die Formatierung des ausgewählten Textes wird entfernt, sodass die Standardeinstellungen wiederhergestellt werden.
Unter „Layout“ können Sie die Größe des Textfelds mit den folgenden Einstellungen anpassen:
- Breite: Passen Sie die Breite des Feldes an.
- Prozent (%): Passt die Größe des Textfelds relativ zu seinem Container an.
- Fest (px): Feste Pixelbreite des Textfelds.
- Abstand (px): Passen Sie den Abstand an, um innerhalb des Hintergrunds des Textblocks zusätzlichen Platz zu schaffen. Sie können für die Seiten oben, unten, links und rechts ein einheitliches oder benutzerdefiniertes Abstandselement verwenden.
Wenn das Textfeld weniger als 100 % der Breite des Containers einnimmt, können Sie seine Position festlegen, indem Sie zwischen den Ausrichtungen „Links“, „Zentriert“ und „Rechts“ wählen.
Mit den „Style “-Einstellungen können Sie Folgendes anpassen:
- Hintergrund und Rahmen: Legen Sie eine bestimmte Hintergrundfarbe, Rahmenbreite und Rahmenfarbe fest.
- Abgerundete Ecken: Passen Sie die Abrundung der Ecken des Textfelds unabhängig vom Gesamterscheinungsbild des Containers an. Sie können für alle vier Ecken gleichmäßige oder benutzerdefinierte abgerundete Ecken verwenden.
Grafiken einfügen
Mit dem Element „Graphic“ können Sie Bilder in Ihr Layout einfügen.
Tipp: Unterstützte Dateiformate sind JPEG, PNG und GIF. Die maximale Dateigröße beträgt 25 MB.
Click Add to container.
Wählen Sie „Grafik“ aus.
Klicken Sie auf „Grafik auswählen“ und wählen Sie ein beliebiges Bild aus, auf das Sie Zugriff haben.
Tipp: Um eine neue Grafik hinzuzufügen, wählen Sie „Zur Bibliothek gehen “ und laden Sie die Grafik anschließend in Ihre Bibliothek hoch.
Konfigurieren Sie die Bildgröße im Abschnitt „Layout “:
- Breite: Wählen Sie „ Fixed (px)“, um die Breite des Bildes auf einen bestimmten Pixelwert festzulegen. Wählen Sie „ -Prozent (%)“, um das Bild relativ zu seinem Container zu skalieren.
- Abstand (px): Passen Sie den Abstand an, um einen Rahmen um das Bild zu erstellen. Sie können für jede Seite des Bildes den gleichen Abstand festlegen oder auf „Benutzerdefinierten Abstand verwenden“ klicken, um für jede Seite eine eigene Abstandsbreite festzulegen.
Wenn das Bild weniger als 100 % der Breite des Containers einnimmt, können Sie seine Position im Abschnitt „Position“ festlegen. Stellen Sie die Ausrichtung des Bildes auf „Links“, „Zentriert“ oder „Rechts“ ein.
Im Abschnitt „TheStyle“ können Sie einen Rahmen und einen Schlagschatten festlegen:
- Rahmen, Rahmenfarbe und abgerundete Ecken: Fügen Sie der Grafik einen farbigen Rahmen hinzu und passen Sie den Eckenradius an, um abgerundete oder kreisförmige Bilder zu erstellen.
- Schlagschatten: Wendet einen Schatteneffekt an. Zur Auswahl stehen „Keine“, „Leicht“, „Mittel“ oder „Stark“.
Schaltflächenelemente
Schaltflächen regen Besucher zum Handeln an. Sie können Ihrem Layout eine Schaltfläche hinzufügen und festlegen, was beim Klicken auf die Schaltfläche geschehen soll, wobei Sie deren Darstellung in verschiedenen Interaktionszuständen individuell anpassen können.
Click Add to container.
Schaltfläche „Auswählen“.
Passen Sie den Text für Ihre Schaltfläche an. Verwenden Sie die Symbolleiste oben, um die Schriftart und -größe festzulegen und weitere Formatierungen wie beispielsweise ein Symbol hinzuzufügen. Weitere Informationen finden Sie unter „Text anpassen “.
Tipp: Wählen Sie „Systemstandard“, um automatisch die Schriftart der Website zu übernehmen, auf der der Intercept eingesetzt wird. Aus Gründen der Barrierefreiheit müssen der Text und das Symbol einer Schaltfläche dieselbe Farbe haben, weshalb eine Farbformatierung nach Wörtern oder Buchstaben bei Schaltflächen nicht möglich ist.
Wählen Sie den Schaltflächentyp aus und nehmen Sie die zusätzlichen Einstellungen vor:
- Verbindung starten: Öffnet eine verknüpfte Qualtrics-Verbindung, die in den Einstellungen für „interceptconnection“ festgelegt wurde. Sie können wählen, ob die Verbindung in einem neuen Tab, einem neuen Fenster, dem aktuellen Fenster oder in einem neuen Overlay geöffnet werden soll.
Tipp: Pro Intercept ist nur eine Verbindung zulässig. Das bedeutet, dass Sie zwar beliebig viele Verbindungsschaltflächen hinzufügen können, diese Schaltflächen jedoch nur auf ein einziges Verbindungsziel verweisen können. Dies ist dieselbe Verbindung, auf die das Element „Embed Connection“ verweist.
- Externer Link: Leitet den Nutzer zu einer angegebenen URL weiter. Geben Sie die vollständige URL der Seite ein. Sie können wählen, ob Sie die URL in einem neuen Tab, einem neuen Fenster oder im aktuellen Fenster öffnen möchten.
- Schließen: Schließt den Intercept.
Konfigurieren Sie das Layout für die Schaltfläche:
- Passen Sie die Breite der Schaltfläche an. Wählen Sie „ Breite (%)“, um die Breite der Schaltfläche relativ zu ihrem Container zu skalieren. Wählen Sie „ “ (Feste Breite) und verwenden Sie „ “ (feste Breite in px), um die Schaltfläche auf eine bestimmte Pixelbreite festzulegen.
- Ändern Sie den Wert für „Padding“ (px), der den Abstand zwischen dem Schaltflächentext und dem Rahmen bestimmt. Klicken Sie auf „ “. Verwenden Sie benutzerdefinierte Abstände, um den Abstand auf jeder Seite der Schaltfläche individuell anzupassen.
Wenn die Schaltfläche weniger als 100 % der Breite des Containers einnimmt, können Sie „itsPosition“ konfigurieren. Wählen Sie eine Ausrichtung für „ “ aus: linksbündig, zentriert oder rechtsbündig.
Sie können das Erscheinungsbild für jeden einzelnen Button-Zustand individuell anpassen:
- Standard: So sieht die Schaltfläche aus, bevor der Benutzer mit ihr interagiert.
- Hover: So sieht die Schaltfläche aus, wenn der Benutzer den Mauszeiger darüber bewegt.
- Aktiv: So sieht die Schaltfläche aus, wenn sie angeklickt wird.
Legen Sie das Aussehen Ihrer Schaltfläche für den ausgewählten Zustand fest
- Farben: Legen Sie die Hintergrundfarbe, die Textfarbe und die Symbolfarbe fest (sofern ein Symbol verwendet wird).
- Rahmen und Ecken: Legen Sie die Rahmenbreite, die Rahmenfarbe und den Radius der abgerundeten Ecken (px) fest (stellen Sie beispielsweise einen großen Eckenradius ein, um pillenförmige Schaltflächen zu erstellen).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Tipp: Sie können die Hintergrundfarbe, die Textfarbe und den Rahmen für jeden Zustand separat festlegen. Um Zeit zu sparen und eine einheitliche Darstellung in allen Zuständen zu gewährleisten, konfigurieren Sie den Standardzustand und klicken Sie anschließend auf die Option „Stil auf alle Schaltflächenzustände anwenden“.
Tipp: Sie können den Text der Schaltfläche durch eine Grafik ersetzen, indem Sie auf „Eigene Schaltfläche verwenden“ klicken und anschließend ein Bild aus Ihrer Grafikbibliothek auswählen .
Verbindung einbetten
Mit dem Einbettungselement „ “ können Sie eine Umfrage, einen Agenten oder eine externe Website in Ihr Werbemittel einbetten. Dieses Element lässt sich wie jedes andere Element in Ihrem Layout platzieren, in der Größe anpassen und verschieben.
Tipp: Möchten Sie eine Umfrage einbetten, die mit einer Schaltfläche (einer Feedback-Schaltfläche oder einem Schieberegler) verknüpft ist? Verwenden Sie stattdessen das Element „Feedback-Button “.
Zunächst müssen Sie Ihrem Werbemittel eine Verknüpfung hinzufügen. Klicken Sie im Assistenten für die Intercept-Konfiguration auf „Verbindung hinzufügen “ und wählen Sie die Ressource aus, die Sie anzeigen möchten.
Befolgen Sie anschließend diese Anweisungen, um das Element zu Ihrem Layout hinzuzufügen:
Click Add to container.
Wählen Sie „Verbindung einbetten“ aus.
Automatisches Schließen nach Abschluss der Umfrage: Ist diese Option aktiviert, wird versucht, das Intercept automatisch zu schließen, sobald der Nutzer die Meldung „Ende der Umfrage“ erreicht hat.
Im Abschnitt „TheBehavior“ wird angezeigt, was den Besuchern angezeigt wird. Klicken Sie auf „ClickView-Umfrage“, um die Umfrage im Umfrage-Editor anzuzeigen.
Layout: Passen Sie an, wie das Element in die Anzeige passen soll:
- Breite: Wählen Sie zwischen „Füllen“, „Fest“ (px) oder „Prozent“ (%).
- Ausfüllen: Füllt den Bereich, in dem sich die Umfrage befindet, vollständig aus. Befindet es sich in einer Zeile, füllt es die gesamte verfügbare Breite der Zeile aus. Befindet sich die Verbindung nicht in einer Zeile, füllt sie 100 % der festgelegten Breite des Erscheinungsbilds aus (unabhängig davon, ob das Erscheinungsbild auf volle Breite, 500 px usw. eingestellt ist).
- Fest (px): Legt die Verbindung auf eine bestimmte Pixelbreite fest. Sie können nur eine Pixelbreite festlegen, die kleiner ist als die Darstellungsbreite oder kleiner als die Spaltenbreite, in der die Verbindung platziert ist.
- Prozent (%): Legt die Breite der Verbindung im Verhältnis zu ihrem Container fest (1–100 %). Befindet sich der Wert in einer Zeile, entspricht dies einem Prozentsatz der verfügbaren Spaltenbreite in dieser Zeile. Wenn es nicht in einer Zeile steht, handelt es sich um einen Prozentsatz der verfügbaren Darstellungsbreite.
Tipp: Beginnen Sie mit „Füllen“, es sei denn, Sie benötigen eine detailliertere Anpassung von Größe und Abstand aufgrund anderer gestalterischer Vorgaben.
- Höhe: Wählen Sie zwischen „Auto“ oder „Höhe (px)“:
- „Auto“: Legt die Größe der Verbindung basierend auf der Konfiguration der Umfrage fest (beispielsweise ergibt eine Umfrage mit nur einer Frage eine geringere automatische Höhe als eine Umfrage mit 3–4 Fragen). Die automatische Höhenanpassung versucht, alle Fragen und die Schaltfläche „Weiter“ anzuzeigen. Wenn die Höhe der Umfrage die Höhe der Webseite überschreitet, wird die Umfrage auf die Größe der Webseite verkleinert.
- Höhe (px): Legen Sie manuell eine bestimmte Pixelhöhe für die Verbindung fest, beachten Sie dabei jedoch die Höhe Ihrer Umfrage. Wenn Ihre Umfrage höher ist als die festgelegte Höhe, wird eine Bildlaufleiste angezeigt. Wenn Ihre Umfrage kürzer ist als die festgelegte Höhe, wird zusätzlicher Leerraum eingefügt.
Position: Wählen Sie die Ausrichtung des Elements aus (links, zentriert oder rechtsbündig). Wenn die Einbettungsverbindung weniger als 100 % der Breite ausmacht (ohne „Füllen“ und bei Verwendung von % unter 100 %), können Sie ihre Ausrichtung festlegen.
Stil: Füge dem Element einen farbigen Rahmen hinzu.
Optimierung für eingebettete Umfragen
Umfragen, die Ihrem Erscheinungsbild-Layout hinzugefügt wurden, verfügen im Umfrage-Editor ebenfalls über eigene Bearbeitungsfunktionen, Farben und Konfigurationsmöglichkeiten. Auf diese Weise können Sie aussagekräftige, in hohem Maße individuell anpassbare Umfragen erstellen; Sie müssen jedoch darauf achten, dass das Erscheinungsbild und der Inhalt Ihrer Umfrage aufeinander abgestimmt sind. Hier sind einige Tipps und Tricks, die Sie beachten sollten:
- Fügen Sie Ihr Logo an einer Stelle ein. Wenn Ihre Umfrage ein Logo enthält, benötigen Sie wahrscheinlich keines in Ihrer Darstellung, und umgekehrt.
- Verwenden Sie denselben primären Hex-Code aus Ihrer Umfrage für die Darstellung von Text, Schaltflächen, Umrandungen usw.
- Um eine Umfrage auf einer Website oder auf Mobilgeräten kompakter darzustellen, probieren Sie folgende Design-Einstellungen aus:
- Der Frageabstand ist auf „Kompakt“ eingestellt.
- Die Textbreite der Anzeige ist auf „Volle Breite“ eingestellt.
- Sie können Ihrer Umfrage benutzerdefiniertes CSS hinzufügen, um das Erscheinungsbild weiter anzupassen.
Achtung: Funktionen für benutzerdefiniertes Coding werden unverändert bereitgestellt und erfordern Programmierkenntnisse zur Implementierung. Der Qualtrics Support bietet keinerlei Hilfestellung oder Beratung im Zusammenhang mit eigenem Programmcode an. Sie können es stattdessen jederzeit bei unserer Community engagierter Nutzer versuchen. Wenn Sie mehr über unsere maßgeschneiderten Programmierdienstleistungen erfahren möchten, wenden Sie sich bitte an Ihren Qualtrics-Account Executive.
Beispiel: Mit diesem CSS lässt sich der Abstand zwischen den Fragen und der Schaltfläche „Weiter“ verringern:
#navigation { padding-bottom: 0rem; padding-top: 1rem; }Mit diesem CSS kann der Header-Container entfernt werden (blendet alle im Theme-Header festgelegten Elemente aus):
#header-container { display: none !important; }
Tipp: Sie können eine Umfrage auf drei Arten präsentieren: Sie können sie mithilfe des Elements „Einbettungsverbindung“ direkt in die Darstellung einbetten, sie über eine Schaltfläche als „Startverbindung“ verlinken oder sie als externe URL (mit dem anonymen Link) hinzufügen. Es empfiehlt sich, Ihre Umfrage als „Embed Connection“ einzurichten, da sich diese über die vorgefertigte Verbindungskarte am einfachsten bearbeiten, wechseln und verwalten lässt.
Feedback-Schaltfläche
Die „Feedback“-Schaltfläche ist ein spezielles Element, das Sie Ihrem Erscheinungsbild hinzufügen können. Es fügt an der Seite Ihres Werbemittels eine Schaltfläche hinzu, auf die Nutzer klicken können, um das Intercept-Fenster zu öffnen.
Achtung: Wenn Sie eine Schaltfläche für Feedback zu Ihrem Layout hinzufügen, werden alle vorhandenen Inhalte gelöscht.
Click Add to container.
Wählen Sie die Schaltfläche Feedback.
Customize the text for your button. Use the toolbar at the top to set the font, size, and add additional formatting like an icon. See Customizing Text for more information.
Qtip: Select “System Default” to automatically inherit the font of the website where the intercept is deployed. For accessibility, the button text and icon must share the same color, so per-word or per-letter color formatting isn't available on buttons.
Dem Feedback-Button wird automatisch ein externer Link hinzugefügt. Hier können Sie die Beurteilung der verbundenen Geräte durchführen. Wenn Sie keine Verbindung wünschen, können Sie das Element „Einbettungsverbindung“ löschen.
Qtip: You are limited to 1 connection per intercept. This means that while you can add as many connection buttons as you like, those buttons can only link to the single connection destination. This is the same connection referenced by the Embed Connection element.
Konfigurieren Sie das Layout für die Schaltfläche:
- Adjust the Width of the button. Wählen Sie „Breite (%) “, um die Breite der Schaltfläche relativ zur gesamten Seite zu skalieren. Wählen Sie „Feste Breite (px)“ , um die Schaltfläche auf eine bestimmte Pixelbreite festzulegen.
Tipp: Wir empfehlen eine Breite zwischen 15 und 30 %.
- Change the Padding (px), which controls the space between the button text and border. Klicken Sie auf „Benutzerdefinierten Abstand verwenden“, um den Abstand auf jeder Seite der Schaltfläche individuell anzupassen.
Konfigurieren Sie die Position der Schaltfläche , die bestimmt, wo die Schaltfläche und der Intercept auf Ihrer Website angezeigt werden:
- Position: Wählen Sie aus, ob sich die Schaltfläche rechts, links oder oberhalb des Intercepts befinden soll. Dies hat Auswirkungen darauf, wo der Intercept auf der Seite angezeigt wird (wenn sich die Schaltfläche beispielsweise oben und zentriert befindet, wird der Intercept am unteren Rand der Seite angezeigt).
- Ausrichtung: Wählen Sie zwischen „Links“, „Zentriert“ und „Rechts“ oder einer benutzerdefinierten Ausrichtung.
Sie können das Erscheinungsbild für jeden einzelnen Button-Zustand individuell anpassen:
- Default: How the button looks before the user interacts with it.
- Hover: How the button looks when the user hovers their cursor over it.
- Active: How the button looks when clicked.
Legen Sie das Aussehen Ihrer Schaltfläche für den ausgewählten Zustand fest:
- Colors: Define the Background color, Text color, and Icon color (if an icon is used).
- Border & Corners: Set the Border width, Border color, and Rounded corner (px) radius (e.g., set a high corner radius to create pill-shaped buttons).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qtip: You can set the Background color, Text color, and Border for each state independently. Um Zeit zu sparen und eine einheitliche Darstellung in allen Zuständen zu gewährleisten, konfigurieren Sie den Standardzustand und klicken Sie anschließend auf die Option „ “ (Stil auf alle Schaltflächenzustände anwenden).
Klicken Sie auf den Container und wählen Sie eine Anzeigemethode für die Schaltfläche aus:
- Schieberegler: Der Container ist mit der Schaltfläche verknüpft. Wenn Nutzer auf die Schaltfläche klicken, gleitet der Container darunter oder daneben heraus.
- Overlay: Der Container ist nicht mit der Schaltfläche verknüpft. Wenn Nutzer auf die Schaltfläche klicken, erscheint in der Mitte der Seite ein Overlay-Fenster. Mit „Overlay“ können Sie außerdem einen ausgeblendeten Hintergrund hinter dem Overlay-Fenster auswählen.
- Neues Fenster: Öffnet den Container in einem neuen Browserfenster.
Tipp: Da es sich um ein neues Browserfenster handelt, kann nur eine „Embed Connection“ in den Container eingefügt werden. Andere Elemente (Text, Grafik, Schaltfläche, Zeile, Abstandhalter) werden in neuen Fenstern nicht unterstützt. Auch die Steuerelemente für Layout, Höhe und Stil stehen nicht zur Verfügung, da diese vom Browserfenster gesteuert werden.
Wenn Sie den Container als Schieberegler oder Overlay anzeigen, können Sie das Layout und den Stil anpassen:
- Breite und Höhe: Legen Sie die Breite des Containers als Prozentsatz der Seitenbreite oder als feste Pixelbreite fest und wählen Sie eine feste Pixelhöhe oder eine prozentuale Höhe.
- Abstand / Elementabstand: Wie bei den Standard-Container-Steuerelementen.
- Padding (px): Steuert den Abstand innerhalb des Rahmens des Containers und verschiebt die darin enthaltenen Elemente nach innen.
Tipp: Klicken Sie auf „Gleichmäßigen Abstand verwenden“, um für alle vier Seiten denselben Wert festzulegen, oder legen Sie die Abstände oben, unten, links und rechts individuell fest.
- Element spacing (px): Defines the default vertical gap between elements stacked within the container.
- Farben, Hintergrund, abgerundete Ecken und Schlagschatten: Wie bei den Standard-Container-Steuerelementen.
Sie können Ihrer Feedback-Schaltfläche weitere Elemente hinzufügen (beispielsweise Text, um einen Hinweis auf die Datenschutzerklärung einzufügen).
Mobile Version
Sie können die Platzierung und Ausrichtung der Feedback-Schaltfläche für mobile Geräte individuell anpassen:
Aktivieren Sie die Mobile-Ansicht.
Klicken Sie auf die Schaltfläche „ “ von ClickFeedback, um die folgenden Einstellungen zu bearbeiten:
- Platzierung: Wählen Sie aus, wo die Schaltfläche für Feedback auf dem Element angezeigt werden soll.
- Ausrichtung: Wählen Sie aus, an welcher Stelle auf dem Bildschirm die Schaltfläche für Feedback angezeigt werden soll.
- Element auf Mobilgeräten ausblenden: Aktivieren Sie diese Option, um die Schaltfläche für Feedback auf Mobilgeräten vollständig auszublenden.
Klicken Sie auf „Container“, um die Methode „Display“ zu bearbeiten, die festlegt, wie die Schaltfläche für Feedback auf Mobilgeräten angezeigt wird:
- Pull-up: Der Container gleitet vom unteren Bildschirmrand nach oben. Wählen Sie den Prozentsatz des mobilen Bildschirms aus, den das Pull-up einnehmen soll.
- Neuer Tab: Durch Antippen der Feedback-Schaltfläche wird der Inhalt des Containers in einem neuen Browser-Tab geöffnet, anstatt als Schieberegler oder Overlay angezeigt zu werden.
Tipp: Unter „Elemente auf Mobilgeräten ausblenden“ finden Sie Informationen dazu, wie Sie einzelne Elemente auf Mobilgeräten ausblenden können (z. B. eine Grafik).
Zeilen
Standardmäßig ordnet das Appearance Studio die Elemente in Ihrer Grafik vertikal übereinander an. Sie können Elemente jedoch horizontal neu anordnen, indem Sie sie innerhalb einer Zeile gruppieren. Man kann sich die Zeile als einen Untercontainer vorstellen, in den man Elemente einfügt, um sie horizontal anzuordnen.
Tipp: Wenn Ihre Elemente in einer Reihe angeordnet sind, kann die Größe des Elements im Abschnitt „Layout“ nicht angepasst werden. Die Größe eines Elements in einer Zeile wird stattdessen auf Zeilenebene festgelegt.
So fügen Sie Elemente in einer Zeile hinzu:
Click Add to container.
Zeile auswählen.
Um ein neues Element in die Zeile einzufügen, klicken Sie auf „Zur Zeile hinzufügen“. Innerhalb einer Zeile können Sie Text-, Grafik-, Schaltflächen- und Abstandselemente einfügen. Weitere Informationen zur Anpassung dieser Elemente finden Sie im verlinkten Abschnitt.
Sie können vorhandene Elemente verschieben, indem Sie sie innerhalb des Zeilencontainers per Drag & Drop verschieben.
Tipp: Eine Zeile darf bis zu 5 Elemente enthalten. Die Elemente werden im Werbemittel von links nach rechts in derselben Reihenfolge angezeigt, in der sie im Editor aufgeführt sind.
Klicken Sie auf die Zeile, um ein Seitenpanel zu öffnen, in dem Sie das Erscheinungsbild der Zeile anpassen können. Für die Bearbeitung der Zeile stehen folgende Optionen zur Verfügung:
- Zeile auflösen: Die Elemente auflösen und das Zeilenelement löschen.
- Kopieren: Erstelle eine Kopie der Zeile und aller darin enthaltenen Elemente. Diese Option eignet sich ideal, um ein einheitliches Raster aus Elementen zu erstellen.
- Löschen: Löscht die Zeile und alle darin enthaltenen Elemente.
Achtung: Beim Löschen einer Zeile werden alle darin enthaltenen Inhalte gelöscht. Bei Bedarf können Sie Ihre Änderungen sofort rückgängig machen.
Die Layout -Optionen enthalten die folgenden Einstellungen zur Anpassung der Anordnung der Elemente innerhalb der Zeile:
- Breite: Passen Sie die Gesamtbreite der Zeile an:
- Fest (px): Legt eine bestimmte Breite in Pixeln für die Zeile fest.
- Prozent (%): Skaliert die Zeile relativ zum Creative-Container.
- Elementbreite: Passen Sie die Breite einzelner Elemente in der Zeile an:
- Gleiche Breite: Die Zeilenbreite wird gleichmäßig auf die Elemente aufgeteilt.
- Benutzerdefiniert: Legen Sie für jedes Element benutzerdefinierte Breitenprozentsätze fest. Der Gesamtprozentsatz darf 100 % nicht überschreiten, kann aber unter 100 % liegen. Liegt der Wert unter 100 %, passt Qualtrics die Größe an und fügt an geeigneten Stellen Abstände zwischen den Elementen ein.
- Abstand: Passen Sie den Abstand zwischen den Elementen innerhalb der Zeile an:
- Elementabstand (px): Legt den horizontalen Abstand direkt zwischen den nebeneinander liegenden Elementen fest. Erhöhen Sie diesen Wert, wenn die Elemente zu dicht beieinander liegen.
- Padding (px): Fügt innerhalb der Zeile Abstand hinzu und verschiebt alle darin enthaltenen Elemente von der äußeren Begrenzung der Zeile weg.
Wählen Sie die Elementausrichtung aus, die festlegt, wie jedes Element innerhalb der Zeile vertikal ausgerichtet wird. Sie können zwischen „Oben“, „Mitte“ und „Unten“ wählen.
Tipp: Die vertikale Positionierung wirkt sich nur auf Elemente aus, die kürzer sind als die gesamte Höhe der Zeile. Ein Element, dessen Höhe auf 100 % festgelegt ist, füllt die Zeile aus und ist davon nicht betroffen.
Passen Sie das Erscheinungsbild Ihrer Zeile mit den „Style “-Optionen an:
- Legen Sie die Hintergrundfarbe fest.
- Rahmen und Ecken: Legen Sie die Rahmenbreite, die Rahmenfarbe und den Radius der abgerundeten Ecken (px) fest (stellen Sie beispielsweise einen großen Eckenradius ein, um eine pillenförmige Zeile zu erstellen).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Tipp: Farben und Bearbeitungen in den Zeilen haben Vorrang vor den für den Container festgelegten Farben. Wenn Sie möchten, dass Ihre Zeile transparent ist und die Farbe des Containers übernimmt, legen Sie für die Zeile die Option „Keine Farbe“ fest.
Tipp: Mit Zeilen und deren Formatierung lassen sich verschiedene Felder und Abschnitte in Ihrem Layout erstellen. Wenn Sie beispielsweise möchten, dass Ihr Erscheinungsbild zur Hälfte weiß und zur Hälfte blau ist, können Sie zwei Zeilen hinzufügen und deren jeweilige Farben festlegen.
Abstandshalter
Abstandhalter sorgen für präzise vertikale Abstände zwischen anderen Elementen. Fügen Sie sie in eine Zeile ein, um einen horizontalen Abstand zwischen den Elementen derselben Zeile zu erzeugen.
Klicken Sie auf „Zum Container hinzufügen“.
Wählen Sie „Spacer“ aus.
Stellen Sie die Höhe (px) des Abstandselements in Pixeln ein. Der Standardwert beträgt 50 px.
Tipp: Befindet sich das Trennzeichen in einer Zeile, wird dies stattdessen durch die Zeileneinstellungen gesteuert.
Individuelle Nutzererlebnisse für Mobilgeräte
Sie können die Darstellung für mobile Geräte anpassen, indem Sie bestimmte Elemente ausschließlich auf mobilen Geräten ausblenden.
Mobile Ansicht aktivieren.
- Klicken Sie auf die Option „Element auf Mobilgeräten ausblenden“.
Tipp: In der Mobilansicht wird eine responsive Vorschau Ihres Werbemittels sowie eine Reihe speziell auf Mobilgeräte zugeschnittener Steuerelemente angezeigt (Ausblenden von Elementen sowie Platzierung, Ausrichtung und Darstellung der Feedback-Schaltfläche). Alle anderen Änderungen am Layout und am Stil müssen in der Desktop-Vorschau vorgenommen werden.
Layoutvorlagen
Es stehen Ihnen verschiedene Layoutvorlagen zur Verfügung, die Ihnen beim Jumpstart in die Erstellung von Werbemitteln helfen. Sie können entweder mit einer Vorlage beginnen oder später zu einer solchen wechseln.
Um das Layout zu ändern, klicken Sie auf das Menü mit den drei Punkten neben der Schaltfläche „Zum Container hinzufügen“ und wählen Sie dann eine Option aus:
- Aktuelles Layout zurücksetzen: Wenn Sie mit einer Vorlage begonnen haben, wird die Vorlage dadurch auf die ursprüngliche Konfiguration zurückgesetzt.
- Neues Layout auswählen: Zu einer anderen Layoutvorlage wechseln. Die Auswahl einer Vorlage überschreibt alle derzeit in Ihrem Werbemittel enthaltenen Elemente.
- Alle Einstellungen löschen: Stellt die Standardansicht wieder her.
Achtung: Wenn Sie Ihr Motiv durch einen Reset oder durch den Wechsel zu einem anderen Layout löschen oder überschreiben, können Sie die vorherige Version nicht wiederherstellen.
Standard-Overlay-Vorlagen
Zu den folgenden vorkonfigurierten Layouts gehören:
- Center Popover: Ein gut sichtbares Overlay, das über den Inhalten Ihrer Website eingeblendet wird, um die Aufmerksamkeit der Nutzer auf eine bestimmte Botschaft zu lenken.
- Informationsleiste: Ein Streifen in voller Breite, der oben oder unten am Seiteninhalt angeordnet ist oder den Inhalt Ihrer Seite nach oben oder unten verschieben kann.
- Eckbenachrichtigung: Eine höfliche Benachrichtigung, die in die Ecke des Ansichtsfensters eingeblendet wird. Es benachrichtigt die Nutzer, ohne deren Hauptansicht zu verdecken.
- Eingebettete Umfrage: Ein Sidebar-Overlay, das am Bildschirmrand geöffnet wird, um Benutzereingaben über eine vollständig integrierte Umfrage zu erfassen.
- Feedback-Schieberegler: Eine Schaltfläche, die an einer der Seiten des Browserfensters verankert ist. Wenn man darauf klickt, gleitet es aus der Seite heraus und bildet eine Verbindung.
- Feedback-Schaltflächen-Overlay: Eine Schaltfläche, die an einer der Seiten des Browserfensters verankert ist. Beim Klicken auf die Schaltfläche werden die Verbindungen in einem Overlay-Fenster geöffnet.
Standard-Einbettungsvorlagen
Die folgenden vorkonfigurierten Layouts stehen für eingebettete Werbemittel:
- Inline-Umfrage: Eine direkt in Ihre Website eingebettete Umfrage, bei der die Nutzer antworten können, ohne beim Surfen unterbrochen zu werden.
- Aufforderung zum Handeln: Eine direkt in Ihre Website integrierte Aufforderung, die es den Nutzern ermöglicht, innerhalb der Seite zu interagieren.
- Callout-Karte: Eine in den Seiteninhalt eingebettete Karte, die wichtige Botschaften hervorhebt, ohne das umgebende Layout zu stören.
Eingebettete Werbemittel
In diesem Abschnitt wird beschrieben, wie man ein eingebettetes Werbemittel bearbeitet, und welche Optionen speziell für eingebettete Werbemittel zur Verfügung stehen. Um ein eingebettetes Werbemittel in Appearance Studio zu bearbeiten,wählen Sie bei der Erstellung eines geführten Intercepts „Eingebettet“als Intercept-Typ aus . Informationen zum Bearbeiten von Overlay-Anzeigen finden Sie in den anderen Abschnitten auf dieser Seite.
Darstellungslayouts
Im Design-Editor können Sie aus einer vorhandenen Layoutvorlage, ein Layout von Grund auf neu erstellen oder vorbereitetes Feedbackauswählen.
Tipp: Sie können nach der Erstellung zwischen verschiedenen Layouts wechseln, es sei denn, Sie wählen die Option „Feedback nach Vorlage“. Das vorlagenbasierte Feedback erstellt automatisch eine Umfrage, die mit dem Intercept und dem Erscheinungsbild verknüpft ist. Wenn Sie mit einem vorgefertigten Feedback beginnen und dieses anschließend entfernen, können Sie weder das ursprüngliche Erscheinungsbild noch die damit verknüpfte Umfrage wiederherstellen.
Unterschiede im Erscheinungsbild eingebetteter Elemente
Eingebettete Darstellungen werden auf dieselbe Weise wie Overlay-Darstellungen erstellt, nämlich mithilfe von Containern, Zeilen und Elementen. Beachten Sie die folgenden Tipps, wenn Sie das Erscheinungsbild eines eingebetteten Werbemittels bearbeiten:
- Hintergrundinformationen zu Containern: Stelle die Hintergrundfarbe des Containers auf Keine Farbe wenn Sie möchten, dass das Erscheinungsbild den Hintergrund Ihrer Webseite übernimmt.
- Rahmen des Containers: Fügen Sie dem Container einen Rahmen hinzu, wenn Sie möchten, dass er auf der Seite wie eine eigenständige Karte wirkt.
- Nicht unterstützte Elemente: Die folgenden Elemente stehen in eingebetteten Darstellungen nicht zur Verfügung:
- Eine Schaltfläche zum Schließen auf dem Container
- Ein Schlagschatten auf dem Container
- Ein- und Ausblendanimationen oder Anzeigetimer
- Feedback-Schaltfläche / Schieberegler-Elemente
Einen CSS-Selektor hinzufügen
Bei eingebetteten Intercepts wird mithilfe eines CSS-Selektors festgelegt, an welcher Stelle auf Ihrer Webseite das Element angezeigt wird.
Öffnen Sie die Entwicklertools Ihres Browsers und suchen Sie das Element auf der Seite, das das eingebettete Erscheinungsbild enthalten soll.
Klicken Sie mit der rechten Maustaste auf das Element und kopieren Sie dessen Selektor.
Klicken Sie auf CSS-Selektor auswählen in Appearance Studio.
Fügen Sie den Selektor in das Feld „CSS-Selektor“ ein.
Legen Sie bei Bedarf fest, wie oft die Einblendung auf der Seite angezeigt werden soll, wenn Ihr Selektor mehrere Elemente findet. Sie können beispielsweise nach jedem Artikelabschnitt auf einer Seite dasselbe Layout einfügen.
Klicken Sie auf CSS-Selektor speichern.
Tipp: Das eingebettete Erscheinungsbild wird immer am Ende des Elements hinzugefügt, das Ihrem CDSS-Selektor entspricht. Man kann es nicht an einer anderen Stelle innerhalb des Elements einfügen.
Einbettungsgrößenbestimmung
Für die Breite und Höhe von eingebetteten Darstellungen stehen mehr Anpassungsoptionen zur Verfügung als für Overlay-Darstellungen. Diese Einstellungen legen fest, wie sich die Darstellung innerhalb des Elements, auf das Ihr CSS-Selektor abzielt, anpasst.
Breite:
- Füllung: Der Container nimmt 100 % der Breite des übergeordneten Elements ein.
- Behoben: Der Container erhält eine feste Breite.
Höhe:
- Auto: Die Höhe des Behälters wird entsprechend seinem Inhalt angepasst. Beispielsweise ist eine Umfrage mit nur einer Frage kürzer als eine Umfrage mit 3–4 Fragen.
- Höhe: Der Container wird eine festgelegte Höhe haben.
Tipp: Wenn Sie einen Agenten einbetten, wird eine feste Höhe empfohlen. Da die Antworten der Agenten variieren können, ist es besser, eine einheitliche Größe beizubehalten, als die Höhe automatisch anzupassen. Wenn Sie einen eingebetteten Inhalt einbetten, der sich dynamisch an alle Bildschirmgrößen anpassen oder zur Aufnahme von Inhalten erweitert werden soll, werden die automatische Höhe und Breite empfohlen.
Großartig! Vielen Dank für die Rückmeldung!
Vielen Dank für die Rückmeldung!