Hilfe

Was möchtest du wissen?

How to´s

Briefing
Lernziele
Länge
Material
WBT Arten
Sprache
Titel
Zielgruppe
Konzeption und Kreation
Aufbau
Big Slider
Elemente
Reflektion
Kapitelübersicht
Willkommen
Management Bereich
Registrierung
Login
WBT anlegen
Vorlagen
WBTs verwalten
Dashboard
Nutzerverwaltung / Teams
Aufgaben
Mediathek
Kategorien
Optionen / Nutzerprofil
Aufbau
Kapitel / Kapitel Start
Kapitelstart
Creator - Basis Elemente
Audio EN
Labels
Trenner
Module und Elemente
Text
Bild
Space
Video
Button
Box
Creator - Inhalt - Elemente
Infografik
Slider
Teaser
Flashcards / Memorycards
Tabs
Tabelle
Akkordeon
Scrollable Text
Creator - Reflexion Elemente
Creator - Quiz Elemente
Multiquiz
Multiple Choice
Menüleiste im Creator
WBT Coworking
Versionierung
Reorder
Theme Builder
Theme Erstellen
Theme Editor
Typografie
Hintergründe
Buttons
Elemente
Stil
Schriften
Kästen
Navigation

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 #

Nach dem du den Hintergrund an dem du die buttons anpassen möchtest gewählt hast, klicke auf „Primär“, um die primären Buttons anzupassen.

1
Button Typ
Dir stehen drei Möglichkeiten zur Verfügung, um den perfekten Button Typen 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
Entscheide, ob der Text in deinem Button komplett großgeschrieben sein 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 nur noch 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 dieselben. Du hast nach wie vor die drei Button Styles. Wenn du dich für einen entscheidest, definiere die zwei Zustände für Standard und Hover, diese sind ebenfalls identisch wie die Prämere Buttons.

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