Du möchtest deiner Wix-Website einen interaktiven Touch verleihen? Eine tolle Möglichkeit dafür ist es, einen Abschnitt unter einem Button zu verstecken und ihn erst bei Klick sichtbar zu machen. Das ist besonders nützlich für FAQs, detaillierte Produktbeschreibungen, zusätzliche Informationen oder Kontaktformulare. In diesem umfassenden Tutorial zeige ich dir Schritt für Schritt, wie du das mit Wix realisieren kannst – ganz ohne Programmierkenntnisse!
Warum einen ausklappbaren Abschnitt unter einem Button verwenden?
Bevor wir loslegen, lass uns kurz darüber sprechen, warum diese Technik so nützlich ist. Ein ausklappbarer Abschnitt bietet viele Vorteile:
- Übersichtlichkeit: Du reduzierst die Informationsflut auf deiner Seite und machst sie übersichtlicher. Besucher sehen zuerst die wichtigsten Informationen und können bei Bedarf tiefer eintauchen.
- Platzersparnis: Versteckte Inhalte nehmen keinen Platz weg, bis sie benötigt werden. Das ist besonders auf mobilen Geräten wichtig.
- Interaktivität: Es macht Spaß, mit deiner Website zu interagieren. Ein Klick-Reveal sorgt für ein dynamisches Nutzererlebnis.
- SEO-Vorteile: Gut strukturierter Inhalt, auch wenn er versteckt ist, kann sich positiv auf dein SEO auswirken. Achte aber darauf, dass der versteckte Inhalt relevant und qualitativ hochwertig ist.
Vorbereitung: Das brauchst du
Für dieses Tutorial benötigst du:
- Ein Wix-Konto und eine Website.
- Einen Button, unter dem du den Abschnitt verstecken möchtest.
- Einen Abschnitt, den du ausklappen möchtest. Dieser kann aus Text, Bildern, Videos oder anderen Elementen bestehen.
Schritt-für-Schritt-Anleitung: So geht’s
Los geht’s! Befolge diese Schritte, um den ausklappbaren Abschnitt zu erstellen:
Schritt 1: Den Editor öffnen
Logge dich in dein Wix-Konto ein und öffne den Editor deiner Website. Stelle sicher, dass du dich im Bearbeitungsmodus befindest.
Schritt 2: Den Button hinzufügen oder auswählen
Wenn du noch keinen Button hast, füge einen hinzu. Klicke im linken Menü auf das „+”-Symbol (Hinzufügen) und wähle „Button”. Wähle einen Button-Stil aus, der dir gefällt, und ziehe ihn an die gewünschte Position auf deiner Seite. Bearbeite den Button-Text so, dass er aussagekräftig ist, z.B. „Mehr anzeigen” oder „Details lesen”.
Wenn du bereits einen Button hast, klicke ihn an, um ihn auszuwählen.
Schritt 3: Den Abschnitt erstellen oder auswählen
Erstelle nun den Abschnitt, den du ausklappen möchtest. Du kannst einen leeren Abschnitt hinzufügen oder einen bestehenden Abschnitt verwenden.
- Neuen Abschnitt hinzufügen: Klicke im linken Menü auf das „+”-Symbol (Hinzufügen) und wähle „Abschnitt”. Wähle einen leeren Abschnitt oder einen mit einem vorgefertigten Layout. Füge die gewünschten Elemente (Text, Bilder, etc.) hinzu.
- Bestehenden Abschnitt verwenden: Wähle den Abschnitt aus, den du verwenden möchtest. Du kannst ihn anpassen, indem du Elemente hinzufügst oder entfernst.
Wichtig: Achte darauf, dass der Abschnitt unter dem Button platziert ist, da er nach dem Klick unter dem Button erscheinen soll.
Schritt 4: Den Abschnitt initial ausblenden
Dieser Schritt ist entscheidend. Wir müssen den Abschnitt zunächst ausblenden, damit er erst beim Klicken auf den Button sichtbar wird.
- Klicke auf den Abschnitt, um ihn auszuwählen.
- Klicke auf das „Animation” Symbol (sieht aus wie ein Stern mit Schweif).
- Klicke auf „Benutzerdefinierte Animation”.
- Klicke auf „Hinzufügen” bei „Beim ersten Laden der Seite”.
- Wähle „Ausblenden” aus.
- Setze die Dauer auf 0.5 Sekunden.
Schritt 5: Interaktion hinzufügen (mit Velo)
Jetzt kommt der spannende Teil: Wir schreiben den Code, der den Abschnitt bei Klick auf den Button einblendet. Keine Angst, es ist einfacher als es aussieht!
- Aktiviere den Velo-Entwicklermodus: Klicke in der oberen Menüleiste auf „Entwickler-Tools” und aktiviere den Schalter „Velo aktivieren”. Du siehst nun die Velo-Symbolleiste am unteren Rand des Editors.
- Wähle den Button aus: Klicke auf den Button, den du in Schritt 2 ausgewählt hast.
- Füge ein „onClick” Event-Handler hinzu: Klicke auf das „+”-Symbol in der Velo-Symbolleiste (Ereignishandler). Wähle „onClick”. Dadurch wird automatisch eine Funktion in deinem Code-Editor erstellt, die ausgeführt wird, wenn auf den Button geklickt wird.
- Schreibe den Code: Füge den folgenden Code in die automatisch erstellte Funktion ein. Ersetze
#mySectiondurch die ID deines Abschnitts. Um die ID deines Abschnitts herauszufinden, klicke auf den Abschnitt, den du in Schritt 3 erstellt hast und schaue in den Eigenschaften nach (normalerweise auf der rechten Seite des Editors).$w.onReady(function () { $w("#myButton").onClick( (event) => { $w("#mySection").show("fade", {"duration": 500}); }); });Erläuterung des Codes:
$w.onReady(function () { ... });stellt sicher, dass der Code erst ausgeführt wird, wenn die Seite vollständig geladen ist.$w("#myButton").onClick( (event) => { ... });definiert, was passiert, wenn auf den Button mit der ID „myButton” geklickt wird.$w("#mySection").show("fade", {"duration": 500});macht den Abschnitt mit der ID „mySection” sichtbar."fade"gibt einen Fade-In-Effekt an, und{"duration": 500}legt die Dauer des Fade-Ins auf 500 Millisekunden (0,5 Sekunden) fest. Du kannst hier auch andere Effekte verwenden, z.B. „slide”.
Schritt 6: Testen und Anpassen
Speichere deine Änderungen und veröffentliche deine Website. Teste, ob der Button wie erwartet funktioniert. Klicke auf den Button und überprüfe, ob der Abschnitt ein- oder ausfährt. Wenn etwas nicht funktioniert, überprüfe den Code und die IDs der Elemente. Passe die Dauer des Fade-In-Effekts an, bis er dir gefällt.
Zusätzliche Tipps und Tricks
- Animationen anpassen: Experimentiere mit verschiedenen Animationen anstelle von „fade”, z.B. „slide”, „zoom” oder „flip”.
- Button-Text ändern: Ändere den Button-Text, nachdem der Abschnitt angezeigt wurde (z.B. von „Mehr anzeigen” zu „Weniger anzeigen”). Dafür benötigst du etwas mehr Code. Du könntest z.B. eine Variable verwenden, um den Zustand des Abschnitts zu speichern und den Button-Text entsprechend anzupassen.
- Fehlerbehebung: Wenn der Abschnitt gar nicht angezeigt wird, überprüfe, ob die IDs im Code korrekt sind. Stelle sicher, dass der Abschnitt nicht durch andere Elemente verdeckt wird. Konsultiere die Wix Velo Dokumentation für weitere Informationen und Beispiele.
Fazit
Mit dieser Anleitung kannst du ganz einfach einen ausklappbaren Abschnitt unter einen Button auf deiner Wix-Website einfügen. Das ist eine großartige Möglichkeit, deine Website interaktiver und benutzerfreundlicher zu gestalten. Probiere es aus und experimentiere mit verschiedenen Animationen und Effekten, um das perfekte Ergebnis für deine Website zu erzielen! Denke daran, SEO-optimierten Content zu verwenden, auch im versteckten Bereich, um das Ranking deiner Seite zu verbessern.