Individuelle Anpassung des Designs Ihres Beraters
Mit Neocom haben Sie die Möglichkeit, das Design Ihres Beraters ganz nach Ihren Wünschen zu gestalten. Die benutzerfreundliche Oberfläche ermöglicht Ihnen schnelle und unkomplizierte Anpassungen, sodass Sie problemlos saisonale Änderungen, Verkaufsaktionen oder andere Werbeaktionen umsetzen können.
Zugriff auf den Theme Designer
Um auf den Theme Designer zuzugreifen, melden Sie sich einfach im Neocom-Admin-Portal an. Wählen Sie den gewünschten Berater aus und navigieren Sie zum Setup-Bereich, den Sie in der oberen horizontalen Symbolleiste finden. Im Setup-Bereich finden Sie den Theme Designer in der vertikalen Symbolleiste auf der linken Seite der Seite.
Vorschau, Speichern & Verwerfen von Anpassungen
Bevor wir fortfahren, sei angemerkt, dass sämtliche Anpassungen erst übernommen werden, wenn Sie auf Apply klicken. Wenn Sie zur zuletzt gespeicherten Version zurückkehren möchten, können Sie auf Discard klicken. Bitte beachten Sie, dass keine Änderungen gespeichert werden, bis Sie auf Apply geklickt haben. Wenn Sie den Theme Designer verlassen, ohne Ihre Änderungen zu speichern, werden Sie aufgefordert zu bestätigen, ob Sie fortfahren möchten, ohne zu speichern.
Die Vorschau wird automatisch aktualisiert, sodass Sie sehen können, wie Ihre Änderungen aussehen, bevor Sie diese übernehmen oder verwerfen. Sie können auch zwischen den Ansichten für Mobilgeräte, Tablets und Desktops wechseln, indem Sie die Symbole oben rechts auf der Seite verwenden.
Inhalt dieses Artikels
Dieser Artikel bietet Ihnen umfassende Informationen, um sich durch die vielfältigen Funktionen des Neocom Theme Designers zu navigieren. Die Themen umfassen:
💡 Es empfiehlt sich, bei der Gestaltung Ihres Beraters von oben nach unten vorzugehen, da einige der getroffenen Anpassungen Auswirkungen auf verschiedene Elemente Ihres Beraters haben.
Basics
1) Schriftart (Font)
Die Schriftart ist ein wesentliches Element Ihrer Website und Ihres Beraters. Sie trägt zur Markenidentifikation bei und sollte daher sorgfältig ausgewählt werden.
Schriftart anpassen
Geben Sie den Namen Ihrer gewünschten Schriftart in das oberste Feld mit dem Namen Font Family Name ein. Hinter Ihrer bevorzugten Font müssen Sie auch mindestens eine Backup Font angeben. Als Backup schlagen wir Sans Serif vor, da dies eine Schriftart ist, die auf allen Browsern funktioniert.
Sie können auch mehrere Backup Fonts hinzufügen, die jeweils durch ein Komma getrennt sind. Die Notwendigkeit eines Backups besteht darin, dass Sie unter Umständen eine bestimmte Schriftart auf Ihrem Gerät gespeichert haben, während Besucher:innen Ihrer Website diese möglicherweise nicht auf Ihren Geräten verfügbar haben. In diesem Fall würde das Backup zum Einsatz kommen.
Um sicherzustellen, dass die Schriftart auf allen Browsern für sämtliche Nutzende funktioniert, wurde ein Feld integriert, in dem Sie eine benutzerdefinierte URL eingeben können, die einen Link zu einer Font enthält, welche in einer sogenannten CSS-Datei verankert ist. Die Eingabe dieser URL erfolgt im Feld mit der Bezeichnung Embed Custom Font.
Dies ist der Link, der es jedem Gerät ermöglicht, unter Verwendung eines beliebigen Browsers die erforderliche Schriftart sofort herunterzuladen. Ihre Website verfügt auch über einen Link zu einer CSS-Datei, damit Ihre Webseite mit der richtigen Schriftart geladen wird. Sie können die URL verwenden, die Ihre Website verwendet, oder einen Link von einem GDPR-zugelassenen Font Anbieter generieren, wie zum Beispiel Bunny Font (https://fonts.bunny.net/). Wählen Sie einfach die gewünschte Schriftart aus, fügen Sie zwei Größen (400 & 700) hinzu, indem Sie auf Add Variant klicken, und kopieren Sie dann die URL.
Hier ist ein Beispiel wie der CSS-Link aussehen sollte:
https://fonts.bunny.net/css?family=abel:400|abhaya-libre:400,700|are-you-serious:400|signika:400,700
Fügen Sie diese URL einfach ins Feld Embed Custom Font ein, um sicherzustellen, dass alle Gäste den Berater genauso sehen, wie Sie es beabsichtigen.
2) Größe und Platzierung (Size & Placement)
Der Bereich Size & Placement ermöglicht es Ihnen, die Maße und Positionierung Ihres Beraters so anzupassen, dass dieser sich nahtlos in Ihre Online-Präsenz einfügt.
Max Width reguliert die maximale Breite Ihres Beraters, sodass er optimal auf Ihrer Website erscheint. Falls Sie die maximale Breite Ihrer Seite nicht kennen, können Sie die Entwicklertools von Google verwenden. Diese finden Sie, indem Sie auf die drei Punkte rechts von der URL in Ihrem Browser unter Weitere Tools klicken, um jedes Element zu inspizieren und dessen Breite in Pixel zu ermitteln.
Top Margin ermöglicht es Ihnen, die Inline-Berater nach oben oder unten zu verschieben. Dies ist besonders praktisch, wenn Sie eine Symbolleiste oben oder unten auf der Website haben, die Sie nicht verdecken möchten. Sie können zwei Werte eingeben, einen für Mobile und einen für Desktop.
Modal Top Margin ermöglicht es Ihnen, die Full Page-Berater nach unten zu verschieben. Obwohl der Berater im Vollbildmodus angezeigt wird, möchten Sie möglicherweise immer noch bestimmte Elemente am oberen Bildschirmrand sichtbar haben, wie eine Kopfzeile oder eine Navigationsleiste. Auch hier können Sie zwei Werte eingeben, einen für Mobilgeräte und einen für Desktop.
💡 Jedes Element verfügt über ein Informations-Icon ⓘ, um während des Anpassungsprozesses Transparenz zu bieten.
3) Farben des Beraters (Theme Colors)
In diesem Abschnitt haben Sie die Möglichkeit, die Primary und Secondary Color per Pipette und RGB oder HEX-Farbcode festzulegen. Die Änderungen der Primary Color sehen Sie direkt anhand des Weiter-Button oder dem Preisschild-Icon. Bei der Secondary Color hingegen beeinflusst die Auswahl die Farbe des Textes unterhalb der Progress Bar. Diese Farbanpassungen erstrecken sich über verschiedene Elemente auf sämtlichen Seiten Ihres Beraters – von den anfänglichen Fragen bis hin zur Ergebnisseite. Selbstverständlich bleibt es Ihnen überlassen, Ihre Farbpalette zu einem späteren Zeitpunkt im Prozess weiter zu individualisieren.
4) Corner Radius
Dieses Element ermöglicht es Ihnen, den Corner Radius verschiedener Elemente Ihres Beraters anzupassen, einschließlich der Buttons und Fragekarten (die Karte, auf der Sie Ihre Antwort auswählen).
Advisor
Hier können Sie die verschiedenen Elemente während des Fragenteils des Beraters anpassen:
1) Advisor Frame
Dies passt die Background Color an, die sich hinter dem Fragefeld und den Result Cards befindet.
2) Texts
Hier haben Sie die Option, das Gewicht und den Stil des Fragetexts zu ändern.
3) Progress Bar
Dies ist die Leiste, die Ihren Fortschritt durch den Berater am oberen Rand der Seite darstellt.
4) Price Filter
Wenn Sie den Price Filter betonen möchten, können Sie eine neue Farbe für das Preisschild-Icon auswählen. Werden hier keine Anpassungen vorgenommen, bleibt es bei der zuvor ausgewählten Primary Color.
5) Slider
Hier können Sie alle Farben innerhalb des Price Filters ändern. Um die Änderungen zu sehen, müssen Sie auf das Preisschild-Icon klicken.
6) Primary Button
Ermöglicht es Ihnen, die Farbe des Weiter-Buttons zu ändern oder bei Bedarf einen Rahmen (Border) hinzuzufügen. Falls Sie dies nicht ändern, wird weiterhin die zuvor ausgewählte Primary Color verwendet.
7) Secondary Button
Sie haben die gleichen Anpassungsoptionen wie beim Primary Button. Schriftgewicht, Schriftfarbe und Schriftgröße können Sie sowohl für den Primary als auch den Secondary Button anpassen. Sie haben auch die Möglichkeit, die Hover-Farbe anzupassen. Dies bedeutet, dass der Button automatisch die Farbe ändert, wenn Benutzer:innen mit der Maus darüber fahren.
Answers
1) Card
Der Abschnitt Card ermöglicht es Ihnen, die Antwortkarten anzupassen. Jede Antwort einer Frage ist auf den sogenannten Cards positioniert, die vollständig individualisierbar sind. In diesem Abschnitt können Sie die Background Color und den Border anpassen.
2) Text
In diesem Abschnitt haben Sie, wie in allen anderen Bereichen, die Option, die Schriftart auf jeder Card individuell anzupassen. Spielen Sie mit der Größe, betonen Sie den Text, fügen Sie Kursivschrift hinzu - gestalten Sie es ganz nach Ihren Wünschen.
3) Controls
Um eine bestimmte Antwort auszuwählen und mit der Beratung fortzufahren, müssen Nutzende auf eine Card klicken. Im Abschnitt Controls können Sie festlegen, welche Farbe angezeigt wird, wenn die Card ausgewählt wurde oder nicht.
Results
1) Card
Dies bezieht sich auf die einzelnen Result Cards (wie oben mit dem hervorgehobenen Rahmen zu sehen). Sie können die Background Color jeder Result Card anpassen, einen Rahmen (Border) hinzufügen und dessen Breite anpassen.
2) Text
Bezieht sich auf den Titel (meist Produktname) jeder Result Card. Sie können Größe oder Farbe anpassen und Fettdruck oder kursiven Effekt auswählen. Die Schrift selbst ist immer mit der Schrift gekoppelt, die Sie im ersten Schritt hinzugefügt haben.
3) Price
Hier können Sie den Default Price, den Discounted Price und den Strikethrough-Price sowie das Price-Prefix und -Suffix (z. B. $ / €) anpassen.
4) CTA Button
Dieser Button führt direkt zur Produktdetailseite Ihrer Website. Ein ansprechendes Design dieses Buttons sorgt für eine klare Navigation und fördert den reibungslosen Checkout. Genauso wie bei anderen Elementen können Sie Background, Border, Schriftfarbe, Schriftgröße und das Schriftgewicht individuell anpassen.
5) Add to Cart
Dieser Button platziert das ausgewählte Produkt direkt im Warenkorb. Daher handelt es sich um einen Button, auf den Sie die Aufmerksamkeit lenken sollten, während Sie weiterhin den Stilrichtlinien Ihrer Online-Präsenz treu bleiben. Diese Funktion erfordert zusätzliche Informationen im Feed, den Sie Neocom bereitstellen. Falls Sie Interesse daran haben, setzen Sie sich mit Ihrem Customer Success Manager in Verbindung.
6) Comparative Features
Diese befinden sich unterhalb der Result Cards. Hier haben Sie die Möglichkeit, die Farbe der Häkchen anzupassen, die sichtbar werden, wenn ein Produkt die gewählten Anforderungen der Beratung erfüllt. Ebenso können Sie die Farbe des Icons anpassen, das jene Merkmale repräsentiert, die das Produkt nicht aufweist. Gleich wie in anderen Abschnitten können Sie auch hier die Schriftgröße und das Schriftgewicht nach Ihren Vorstellungen gestalten.
End of Conversation
Der Abschnitt End of Conversation betrachtet, was Nutzer:innen sehen, wenn sie den Berater abgeschlossen haben – insbesondere das, was anstelle der zuvor gestellten Fragen angezeigt wird.
1) Conversation Summary
Hier haben Sie die Möglichkeit, nicht nur die Background Color des gesamten Ergebnisbereichs zu gestalten, sondern auch das Design der angezeigten Checkmark anzupassen. Jedes Checkmark repräsentiert eine beantwortete Frage des Nutzenden und fungiert gleichzeitig als Link, um direkt zu dieser spezifischen Frage zurückzukehren.
2) Floating Arrow Button
Dies betrifft den Floating Arrow Button, welcher sich zentral unterhalb des Textes befindet. Diese Option ermöglicht es Ihnen, sowohl die Background Color als auch den Arrow selbst nach Ihren Wünschen anzupassen.
3) Restart Button
Den Berater erneut starten-Button finden Sie unten rechts. Hier haben Sie die Möglichkeit, sowie in den anderen Bereichen, die Farben von Text, Icon und Hintergrund nach Ihren Wünschen anzupassen oder Schriftgewicht und -größe zu verändern. Darüber hinaus besteht die Option, das Icon vollständig auszublenden.
User Feedback
1) Banner
Hier haben Sie die Möglichkeit, die Background Color des Abschnitts User Feedback zu definieren, sowie die angezeigte Text Color.
2) Banner Buttons
Dies ermöglicht es Ihnen, das Schriftgewicht und die -größe anzupassen sowie Rahmen (Borders) für die Daumen-hoch | Daumen-runter-Button hinzuzufügen.
Tips & Tricks
Keep it simple.
Die Gestaltungsmöglichkeiten sind nahezu unbegrenzt. Wir empfehlen jedoch, die Ästhetik Ihres Beraters in Einklang mit Ihrer Website zu halten. Konzentrieren Sie sich auf einige zentrale Elemente, um eine klare und elegante Benutzerführung zu gewährleisten.
Legen Sie den Fokus darauf, die Grundlagen präzise zu gestalten. Nehmen Sie sich Zeit, um Größe und Positionierung sorgfältig anzupassen, und stellen Sie sicher, dass Schriftart sowie Primär- und Sekundärfarben harmonisch aufeinander abgestimmt sind.
Baby Steps.
Feilen Sie schrittweise an einzelnen Elementen, überprüfen Sie diese und wenden Sie die Änderungen über Apply an. Auf diese Weise sehen Sie sofort, wie Ihre Anpassungen wirken, und minimieren das Risiko ungewollter Änderungen.