Hilfe

Zurück zur Übersicht

Was möchtest du wissen?

Tutorials

Briefing
Lernziele
Länge
Material
WBT Arten
Titel
Zielgruppe
Konzeption und Kreation
Aufbau
Big Slider
Kapitelübersicht
Willkommen
Elemente
Reflektion

How To´s

Management Bereich
Registrierung
Login
WBT anlegen
WBTs verwalten
Dashboard
Optionen / Nutzerprofil
Nutzerverwaltung / Teams
Aufgaben
Mediathek
Kategorien
Vorlagen
Aufbau
Kapitel
Kapitelstart
Creator - Basis Elemente
Audio
Trenner
Module und Elemente
Text
Bild
Space
Video
Button
Box
Creator - Inhalt - Elemente
Big Slider
Infografik
Hotspots
Slider
Teaser
Flashcards / Memorycards
Tabs
Anleitung
Tabelle
Akkordeon
Scrollable Text
Vorher / Nacher
Image Zoom
Overlay bearbeiten
Suchbild
Panorama
Highlight
Creator - Reflexion Elemente
Interview
Pinnwand
Freitextfeld
Creator - Quiz Elemente
Drag & Drop
Single Choice
Paare
Szenario
Multiple Choice
Multiquiz
Menüleiste im Creator
Lernpfade
Home Button
Hilfe
Verlauf
Als Vorlage speichern
WBT Einstellungen
Vorschau
Review System
Mehrsprachigkeit
Export
Anordung
KI
Theme Builder
Theme Erstellen
Theme Editor
Typografie
Hintergründe
Buttons
Elemente
Stil
Schriften
Kästen
Navigation
KI
WBT mit KI  erstellen
WBT mit der KI bearbeiten
WBT mit KI übersetzen
Elemente mit KI bearbeiten
Mit KI aus Text einen Sprecherton erstellen

Buttons

Anwendung #

Entscheide, wie die Buttons in deinem Theme aussehen. Angepasst werden der primäre und der sekundäre Button. Diese kannst du sehr leicht und super präzise mit dem Theme Builder gestalten. Wir zeigen dir hier Schritt für Schritt, wie die Einstellungen unter „Buttons“ funktionieren.

Button Übersicht finden #

Um deine Buttons anzupassen, klicke auf den sechsten Punkt „Buttons“.

1
Schriften
Wähle Buttons aus, um weitere Einstellungen zu sehen.

Buttons Übersicht #

In der Buttons Übersicht findest du an erster Stelle all deine bestehenden Hintergründe. An zweiter Stelle findest du die Einstellungen für die primären und sekundären Buttons.

1
Hintergrund Auswahl
Klicke auf einen deiner bestehenden Hintergründe, um die primären und sekundären Buttons an diesen Hintergrund anzupassen.
2
Buttons Einstellungen
Die Buttons Übersicht besteht aus den primären und sekundären Buttons. Welche Anpassungsmöglichkeiten sich dahinter verbergen, schauen wir uns im nächsten Schritt an.

Option 1 –  Flächige Buttons #

Nachdem du den Hintergrund ausgewählt hast, für den du die Buttons anpassen möchtest, klicke auf „Primär“, um die primären Buttons zu bearbeiten.

1
Button Typ
Dir stehen drei Möglichkeiten zur Verfügung, um den perfekten Button Typ zu finden. Du kannst zwischen Flächen Button, Kontur oder Ghost wählen.
2
Standart und Hover States
Zusätzlich kannst du die States deiner Buttons anpassen: den Standard und den Hover State.

Schritt 1 –  Standard State des flächigen Buttons anpassen #

1
Button Farbe
Wenn du den flächigen Button gewählt hast, passe die Farbe des Buttons mit dem Farben Picker an.
2
Kontur
Entscheide, ob dein primärer Button eine Kontur hat oder nicht. Wenn ja, vergebe diese wieder mit dem Farben-Picker und stelle die Stärke der Kontur ein.
3
Eckenradius
Entscheide, welchen Eckenradius dein primärer Button bekommt. Du kannst einen Wert von 0 bis 3 einstellen: 0 ist ganz eckig und 3 komplett rund.
4
Schatten
Entscheide, ob dein primärer Button einen Schatten hat oder nicht. Wenn ja, vergebe diesen wieder mit dem Farben Picker und stelle die Größe des Schattens ein.
5
Schrift
Weise dem Button Text eine Schrift, einen Schriftschnitt sowie eine Farbe zu und formatiere ihn anschließend.
6
Versalien
Lege fest, ob der Text deines Buttons komplett in Großbuchstaben dargestellt werden soll.

Schritt 2 – Hover State des flächigen Buttons anpassen #

Nachdem du den Standard State deines Buttons für einen bestimmten Hintergrund angepasst hast, kannst du zusätzlich entscheiden, wie der Button aussieht, wenn deine Lerner mit der Maus darüberfahren.

1
Farbe
Stelle mit dem Farben Picker ein, zu welcher Farbe der Button beim Darüberfahren wechselt.
2
Konturfarbe
Falls gewünscht, stelle mit dem Farben Picker ein, welche Farbe die Kontur beim Darüberfahren bekommen soll.
3
Schattenfarbe
Falls ein Schlagschatten gewünscht ist, stelle diesen mit dem Farben Picker ein.
4
Schattenfarbe
Falls ein Schlagschatten gewünscht ist, stelle diesen mit dem Farben Picker ein.
5
Schrift
Bei Bedarf kann sich auch die Schriftfarbe ändern. Stelle sie neu ein oder behalte die Farbe aus dem Standard State bei.
6
Überprüfe
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus über ein Button z.B wie hier in dem Kapitelübersicht Element.

Option 2 – Kontur Buttons #

Wenn du alle Schriftschnitte hochgeladen und beschriftet hast, klicke auf den Button „Hinzufügen“, um die neue Schrift zu speichern.

1
Kontur Buttons
Die zweite Option für den primären Button: Der Kontur Button.

Schritt 1 – Standart State des Kontur Buttons anpassen #

1
Kontur Farbe
Wenn du den Kontur Button gewählt hast, passe die Farbe der Kontur mit dem Farben Picker an.
2
Kontur
Entscheide, was für eine Kontur dein primärer Button hat.
3
Eckenradius
Entscheide, welchen Eckenradius dein primärer Button bekommt. Du kannst hier auch einen Wert von 0 bis 3 einstellen: 0 ist ganz eckig und 3 komplett rund.
4
Schrift
Weise dem Button Text eine Schrift, einen Schriftschnitt sowie eine Farbe zu und formatiere ihn anschließend.
5
Versalien
Entscheide, ob der Text in deinem Button komplett großgeschrieben sein soll.

Schritt 2 –  Hover State des Kontur Buttons anpassen #

1
Kontur Farbe
Passe die Konturfarbe an, die beim Darüberfahren zu sehen sein soll
2
Schrift
Stelle ein, wie sich der Text im Button beim Darüberfahren verändert
3
Überprüfen
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus über ein Button z.B wie hier in dem Kapitelübersicht Element.

Option 3 –  Ghost Buttons #

Der letzte Button Typ steht an. Schau dir in zwei Schritten an, welche Einstellungen es gibt, um die Ghost Buttons perfekt anzupassen.

1
Ghost Buttons
Die dritte Option für den primären Button: Der Ghost Button.

Schritt 1 – Standart State des Ghost Buttons anpassen #

1
Schrift anpassen
Da der Ghost-Button nur aus Text besteht, kannst du ganz leicht die Schriftart, den Schriftschnitt und die Farbe anpassen. Diese kannst du anschließend formatieren und, falls erforderlich, die Versalien aktivieren.

Schritt 2 –  Hover State des Ghost Buttons anpassen #

1
Schrift Farbe
Stelle ein, wie sich die Schrift beim Hover verändert
2
Überprüfe
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus über ein Button z.B wie hier in dem Kapitelübersicht Element.

Sekundäre Buttons #

Die Einstellungen für die sekundären Buttons sind identisch. Auch hier stehen dir die drei Button-Stile zur Verfügung. Wenn du dich für einen Stil entscheidest, definierst du die beiden Zustände „Standard“ und „Hover“. Diese funktionieren genauso wie bei den primären Buttons.

1
Schrift Farbe
Stelle ein, wie sich die Schrift beim Hover verändert