Verwendung der neu überarbeiteten Seitenleiste im Funnel- & Website-Builder

Dieser Artikel stellt die überarbeitete rechte Seitenleiste in ProfitBoosts Funnel- & Website-Builder vor und zeigt, wie die drei kontextabhängigen Tabs – General, Styles und Animations – die Elementsteuerung für eine schnellere und intuitivere Bearbeitung organisieren. Du erfährst, was jeder Tab bietet, lernst einklappbare Panels und persistente Zustände kennen und erhältst Tipps, wie du die aktualisierte Benutzeroberfläche optimal nutzt.

INHALTSVERZEICHNIS

Was ist die überarbeitete Seitenleiste?
Wichtige Vorteile der überarbeiteten Seitenleiste
Navigation durch die neuen Tabs der Seitenleiste

  1. General-Tab

  2. Styles-Tab

  3. Animations-Tab
    Einklappbare Panels verstehen
    Persistentes Verhalten von Panels & Tabs
    UI-Verbesserungen und Styling-Optimierungen
    Häufig gestellte Fragen
    Nächste Schritte
    Verwandte Artikel

Was ist die überarbeitete Seitenleiste?

Die überarbeitete Seitenleiste ist eine umfassende UI-Aktualisierung des rechten Panels im Funnel- & Website-Builder von ProfitBoost. Sie organisiert die Steuerungselemente in drei Haupt-Tabs – General, Styles und Animations – und gruppiert zusammengehörige Einstellungen in einklappbaren Panels. Diese Änderungen reduzieren visuelle Unruhe, helfen dir, schneller die richtigen Einstellungen zu finden, und behalten deine Layout-Präferenzen beim Wechsel zwischen Elementen und Sitzungen bei.

Wichtige Vorteile der überarbeiteten Seitenleiste

Dieses Redesign verbessert das Bearbeitungserlebnis und die Gesamtleistung des Builders, indem Stil- und Layout-Anpassungen intuitiver gestaltet werden.

Schnellerer Zugriff auf Einstellungen: Inhalte, Styling und Animationsoptionen sind sofort über klar strukturierte Tabs erreichbar.

Aufgeräumter Arbeitsbereich: Einklappbare Panels gruppieren verwandte Einstellungen, sodass du nur siehst, was du wirklich brauchst.

Konsistente Benutzererfahrung: Die Seitenleiste „merkt“ sich während deiner Sitzung den zuletzt verwendeten Tab und Panel-Status.

Moderne, minimalistische UI: Verbesserte Abstände, Typografie und Icons sorgen für eine leichtere und übersichtlichere Oberfläche.

Verbesserte Benutzerfreundlichkeit: Sowohl Einsteiger als auch erfahrene Nutzer profitieren von einer klaren Struktur, die den Workflow beschleunigt.

Navigation durch die neuen Tabs der Seitenleiste

In der neuen rechten Seitenleiste sind alle Elementsteuerungen in drei klaren, kontextabhängigen Tabs organisiert: General, Styles und Animations. Durch den Wechsel zwischen diesen Tabs erhältst du schnellen Zugriff auf Inhaltseinstellungen, Layout- und Styling-Optionen oder Bewegungssteuerungen – ohne durch irrelevante Panels scrollen zu müssen.

1. General-Tab

Im General-Tab findest du alles, was du zur Anpassung von Inhalt und Verhalten eines Elements benötigst. Oben befindet sich das Feld Element Name, mit dem du Ebenen umbenennen kannst (z. B. „Headline“ in „Hero Title“). Darunter folgen die Element Options, die je nach Elementtyp variieren – etwa Textfelder für Überschriften, URL-Felder für Buttons und Links, Alt-Text für Bilder oder Beschriftungen für Formularfelder.

Im Bereich Element Actions weist du Interaktionen zu, wie On click, Navigate to URL, Submit form oder Open lightbox. Weiter unten findest du Typografie-Einstellungen: Schriftart auswählen, Schriftgröße und -stärke anpassen, Deckkraft festlegen sowie Line Height, Letter Spacing, Texttransformationen (Groß-/Kleinschreibung) oder sogar Rotation und Schrägstellung definieren. Abschließend stehen dir Farbsteuerungen zur Verfügung, um Hintergrund-, Text-, Link- oder Icon-Farben per Farbwähler oder Hex-Wert festzulegen.

2. Styles-Tab

Im Styles-Tab optimierst du Layout und visuelles Erscheinungsbild eines Elements für alle Geräte-Breakpoints. Du kannst Margin (Außenabstand) und Padding (Innenabstand) anpassen, Rahmen definieren (Breite, Stil, Radius, Farbe) sowie Text- oder Objektausrichtung festlegen.

Im Visibility-Bereich kannst du Elemente gezielt auf Desktop, Tablet oder Mobile ein- oder ausblenden. Für Textelemente bietet das Text Shadow-Panel die Möglichkeit, Schatten mit horizontalem/vertikalem Versatz, Unschärferadius und Farbe zu definieren. Am unteren Rand kannst du über Custom Class und CSS Selector eigene Klassen oder Selektoren für individuelles Styling oder Skripte hinzufügen.

3. Animations-Tab

Im Animations-Tab bringst du deine Elemente in Bewegung. Der Entrance Animation-Selektor bietet Effekte wie Fade, Slide (Up/Down/Left/Right), Bounce oder Zoom, die beim Scrollen ins Sichtfeld ausgelöst werden. Du kannst Richtung und Geschwindigkeit (leicht, mittel, stark) definieren.

Im Bereich Infinite Loop lassen sich dauerhafte Animationen wie Glow, Rocking oder kontinuierliches Bounce aktivieren. Mit dem Clear-Button setzt du alle Animationen jederzeit auf „None“ zurück.

WICHTIG: Diese Übersicht deckt die häufigsten Einstellungen ab, jedoch nicht alle. Jeder Elementtyp verfügt über eigene spezifische Panels und Optionen (z. B. Zuschneiden bei Bildern, Hover-Status bei Buttons oder Validierungsregeln bei Formularen). Die angezeigten Optionen hängen vom ausgewählten Element ab.

Einklappbare Panels verstehen

Um Fokus und Übersicht zu verbessern, sind die Einstellungen innerhalb jedes Tabs in einklappbare Panels gruppiert.

Du kannst einzelne Panels nach Bedarf öffnen oder schließen.

Panels behalten ihren Status während deiner Sitzung bei.

Selten genutzte oder erweiterte Einstellungen können eingeklappt bleiben.

Das sorgt besonders bei komplexen Projekten für eine strukturierte Arbeitsumgebung.

Persistentes Verhalten von Panels & Tabs

Die aktualisierte Seitenleiste speichert Tabs und Panel-Zustände sitzungsbasiert.

Tab-Speicherung: Der zuletzt aktive Tab bleibt beim Wechsel zwischen Elementen ausgewählt.

Panel-Speicherung: Ein- oder ausgeklappte Panels behalten ihren Zustand.

Neues Element-Verhalten: Beim Hinzufügen eines neuen Elements sind alle Panels standardmäßig geöffnet.

Das spart Zeit, da wiederholtes Öffnen von Panels entfällt.

UI-Verbesserungen und Styling-Optimierungen

Das Update bringt ein modernes, minimalistisches Design im Einklang mit weiteren UI-Verbesserungen von ProfitBoost.

Weniger visuelle Unruhe durch optimierte Abstände und Layouts.

Einheitliches Styling und konsistente Abstände.

Klare Typografie und vereinfachte Icons.

Konsistente Designmuster im gesamten Builder.

Diese Anpassungen reduzieren mentale Belastung und fördern konzentriertes Arbeiten.

Häufig gestellte Fragen

F: Beeinflusst dieses Update meine bestehenden Funnels oder Website-Designs?
Nein. Deine Live-Designs bleiben unverändert. Das Update betrifft nur die Benutzeroberfläche.

F: Werden meine bisherigen Einstellungen verändert?
Nein. Es ändert sich lediglich das Layout der Seitenleiste, nicht deine gespeicherten Einstellungen.

F: Beeinflusst die neue Seitenleiste die Performance?
Ja, positiv. Die Struktur ist für flüssigere Navigation und schnellere Anpassungen optimiert.

F: Gibt es neue Design-Steuerelemente?
Nein. Dieses Release konzentriert sich auf UI/UX-Verbesserungen. Neue Funktionen sind geplant.

Nächste Schritte

Bearbeite Elemente mit der neuen Tab-Struktur, um dich mit dem Ablauf vertraut zu machen.

Klappe selten genutzte Panels ein, um einen aufgeräumten Arbeitsbereich zu schaffen.

Nutze die persistente Speicherfunktion, um deine Design-Sessions zu beschleunigen.

Verwandte Artikel

Überarbeitung der rechten Seitenleiste im Formular- und Umfrage-Builder

Überarbeitung des Navigationsmenüs mit Mega-Navigation-Unterstützung

So erstellst du ein Exit-Intent Pop-Up in ProfitBoost


War dieser Artikel hilfreich?