Der Content Toggle Block ermöglicht es Ihnen, zwei verschiedene Textabschnitte mit einem interaktiven Schalter anzuzeigen. Dieser Block bietet eine bequeme und effektive Möglichkeit, mehrere Informationssätze auf Ihrer Website darzustellen, sodass Benutzer einfach zwischen verschiedenen Textinhaltsbereichen wechseln können.
Mit dem Content Toggle Block können Sie Vergleichsanzeigen erstellen, alternative Preispläne anzeigen, Vorher-Nachher-Szenarien präsentieren oder jede Art von umschaltbarem Textinhalt liefern. Dies schafft ein übersichtliches Surferlebnis und maximiert gleichzeitig den Wert Ihres Seitenbereichs.
Hinzufügen des Content Toggle Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Content Toggle Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Unter Design > Blöcke ziehen Sie den Content Toggle Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Suchen Sie den Content Toggle Block im Block-Panel und ziehen Sie ihn an die gewünschte Stelle auf der Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Content Toggle Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie die beiden Textinhaltsbereiche konfigurieren, zwischen denen die Benutzer wechseln.
Inhaltsbereich 1:
- Überschrift 1: Geben Sie den Überschriftentext ein, der über dem ersten Inhaltsbereich angezeigt wird. Diese Beschriftung hilft Benutzern zu verstehen, welche Inhalte sie gerade sehen.
- Abschnittsinhalt: Wählen Sie, ob Sie benutzerdefinierten Textinhalt, vorhandene Inhalte von Ihrer Website oder Vorlagenteile im ersten Toggle-Bereich anzeigen möchten.
- Inhalt 1: Fügen Sie Ihren Textinhalt hinzu, der angezeigt wird, wenn der Schalter auf die erste Position gestellt ist.
Inhaltsbereich 2:
- Überschrift 2: Geben Sie den Überschriftentext ein, der über dem zweiten Inhaltsbereich angezeigt wird. Diese Beschriftung beschreibt die alternative Inhaltsoption.
- Abschnittsinhalt: Wählen Sie, ob Sie benutzerdefinierten Textinhalt, vorhandene Inhalte von Ihrer Website oder Vorlagenteile im zweiten Toggle-Bereich anzeigen möchten.
- Inhalt 2: Fügen Sie Ihren Textinhalt hinzu, der angezeigt wird, wenn der Schalter auf die zweite Position umgelegt ist.
Konfigurieren Sie die Überschriften und Textinhalte für beide Toggle-Bereiche im Inhalts-Tab.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Content Toggle Blocks anpassen:
Überschrift / Inhalt:
- Typografie Überschrift 1: Passen Sie Schriftfamilie, Größe, Stärke, Zeilenhöhe und Buchstabenabstand für die erste Überschrift an. Klicken Sie auf Bearbeiten, um detaillierte Typografie-Steuerelemente aufzurufen.
- Typografie Überschrift 2: Passen Sie Schriftfamilie, Größe, Stärke, Zeilenhöhe und Buchstabenabstand für die zweite Überschrift an. Klicken Sie auf Bearbeiten, um detaillierte Typografie-Steuerelemente aufzurufen.
- Typografie Inhalt 1: Passen Sie die Typografie-Einstellungen für den ersten Textinhaltsbereich an. Klicken Sie auf Bearbeiten, um detaillierte Typografie-Steuerelemente aufzurufen.
- Typografie Inhalt 2: Passen Sie die Typografie-Einstellungen für den zweiten Textinhaltsbereich an. Klicken Sie auf Bearbeiten, um detaillierte Typografie-Steuerelemente aufzurufen.
- Farbe der Überschrift 1: Legen Sie die Textfarbe für die erste Überschrift fest, damit sie zu Ihrem Seitendesign passt.
- Farbe der Überschrift 2: Legen Sie die Textfarbe für die zweite Überschrift fest, damit sie zu Ihrem Seitendesign passt.
- Farbe Inhalt 1: Legen Sie die Textfarbe für den ersten Inhaltsbereich fest.
- Farbe Inhalt 2: Legen Sie die Textfarbe für den zweiten Inhaltsbereich fest.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe für den gesamten Content Toggle-Block fest.
Umschalter:
- Umschaltstil: Wählen Sie den visuellen Stil für Ihren Umschalter. Optionen sind Rund (kreisförmiger Schalter), Quadratisch (rechteckiger Schalter) und Beschriftungsfeld (textbasierter Schalter mit Feld-Styling).
- Umschaltgröße: Wählen Sie die Größe Ihres Umschalters. Optionen sind Groß, Mittel, Klein und Mini, passend zu Ihren Designanforderungen.
- Erste Hintergrundfarbe: Legen Sie die Hintergrundfarbe für die erste Umschaltposition fest (wenn Inhaltsbereich 1 aktiv ist).
- Zweite Hintergrundfarbe: Legen Sie die Hintergrundfarbe für die zweite Umschaltposition fest (wenn Inhaltsbereich 2 aktiv ist).
- Farbe des Umschalters: Legen Sie die Farbe des Umschaltelements selbst fest.
Abstand:
- Abstand außen: Steuern Sie den äußeren Abstand um Ihren Content Toggle-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Schalter und den umgebenden Elementen erscheint.
- Abstand innen: Passen Sie den inneren Abstand innerhalb Ihres Content Toggle-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Textinhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Content Toggle-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder zur gezielten JavaScript-Nutzung erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Umschalters beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-section|comparison).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Content Toggle-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Content Toggle-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Content Toggle-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Content Toggle ins Sichtfeld scrollt. Optionen umfassen Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies hilft, die Aufmerksamkeit auf Ihren interaktiven Umschalter zu lenken und schafft visuelles Interesse.
Passen Sie Typografie, Farben, das Aussehen des Umschalters und Abstände im Tab 'Erweitert' an.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Content Toggle-Blocks fertig sind und dessen Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Content Toggle-Block zu Ihrer Seite hinzugefügt! Der Content Toggle-Block verbessert die Benutzerinteraktion, indem er eine interaktive Möglichkeit bietet, alternative Textinhaltsoptionen darzustellen, ohne Ihre Seite zu überladen. Experimentieren Sie mit verschiedenen Umschaltstilen, Farben und Inhaltskombinationen, um eine effektive Vergleichs- oder Informationsanzeige zu erstellen, die Ihrem Publikum dient.