Passen Sie das Design Ihres Beraters individuell an
Neocom ermöglicht es Ihnen, Ihren Berater individuell an das Design Ihrer Website anzupassen. Die mühelose Handhabung erlaubt prompte und unkomplizierte Änderungen, wodurch Aktualisierungen im Hinblick auf saisonale Veränderungen, Verkaufsaktionen oder andere Werbeaktivitäten problemlos umgesetzt werden können.
Wo Sie den neuen Theme Designer finden
Um Ihren persönlichen Theme Designer zu finden, melden Sie sich einfach im Neocom-Admin-Portal an, wählen Sie den gewünschten Berater aus und gehen Sie dann zum Setup-Bereich, den Sie entlang der oberen horizontalen Symbolleiste finden. Sobald Sie im Setup-Bereich sind, finden Sie den Theme Designer entlang der vertikalen Symbolleiste am linken Rand der Seite.
Vorschau, Speichern & Verwerfen von Anpassungen
Bevor wir fortfahren, sei angemerkt, dass sämtliche Änderungen, die Sie im Theme Designer vornehmen, erst dann gespeichert und übernommen werden, wenn Sie diese über Apply bestätigen. Möchten Sie zur letzten gespeicherten Version zurückkehren, genügt ein Klick auf Discard. Es wird nichts gespeichert, bis Sie auf Apply geklickt haben. Sollten Sie den Theme Designer verlassen, ohne zuvor zu speichern, erscheint eine Meldung und fragt, ob Sie wirklich fortfahren möchten, ohne zu Speichern.
Der Vorschau wird immer automatisch aktualisiert, sodass Sie sehen können, wie Ihre Änderungen aussehen, bevor Sie sie ü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.
Dieser Artikel umfasst viele Themen, um Ihnen bei der Navigation durch die umfangreichen Möglichkeiten des Neocom Theme Designers zu helfen. Die behandelten Themen sind:
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) Font
Die Auswahl der Schriftart zählt zu den prägenden Elementen Ihrer Website und Ihres Beraters. Die präzise Umsetzung dieser Entscheidung führt zur Markenidentifikation bei potenziellen Kundinnen und Kunden.
Die Schriftart aktualisieren:
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) 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) 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
An dieser Stelle haben Sie die Möglichkeit, die Elemente während des Fragenteils des Beraters präzise anzupassen.
Wir werden uns schrittweise durch die Auswahlmöglichkeiten auf der rechten Seite des Bildschirms von oben nach unten bewegen.
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) Texts: 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.
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 grenzenlos, dennoch empfehlen wir Maßhalten. Bewahren Sie die Ästhetik des Beraters im Einklang mit dem Look Ihrer Website. Betonen Sie nur eine Handvoll Elemente, um potenzielle Kund:innen elegant zu ihrem idealen Produkt zu führen, ohne den Gesamteindruck des Beraters zu überfrachten. 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 an ein oder zwei Elementen, überprüfen Sie diese und setzen Sie diese dann via Apply um. Im Theme Designer sehen Sie sofort, wie diese Anpassungen aussehen. Durch schrittweise Anpassungen minimieren Sie das Risiko, dass Sie ungewollte Veränderungen vornehmen und sorgen dafür, dass jede Anpassung genau Ihren Vorstellungen entspricht.