Sprache auswählen

Dokumentation zu den Website-Tools

In dieser Dokumentation wird erläutert, wie das Modul „Site Tools“ für die „Sticky Sidebar“ und die „Scroll Reveal“-Funktion verwendet wird.

Festsetzbare Seitenleisten-Spalten.

Hier wird erklärt, wie man zwei Spalten links und rechts fixiert

  • 1. Klicken Sie auf Ihrer Website mit der rechten Maustaste und wählen Sie die Option „Element untersuchen“ aus.

Überprüfen Sie die Struktur der Seite, um festzustellen, wo sich die Spalten befinden.

Auf dem Bild unten sind drei Spalten zu sehen: links, in der Mitte und rechts.

  • 2. Suchen Sie nach den Namen der Spalten, die Sie festsetzen möchten. Wichtig ist, dass Sie das erste `div` der Spalte nehmen.

Auf dem Bild unten überprüfen wir den Code der linken Spalte, nämlich „mx-leftcol“. In diesem Fall handelt es sich um ein `div`-Element mit einer ID, daher sollte der Code „#mx-leftcol“ lauten.

 

Auf dem nächsten Bild überprüfen wir den Code der rechten Spalte, nämlich „mx-rightcol“. Auch hier handelt es sich um ein `div`-Element mit einer ID, daher sollte der Code lauten: `#mx-rightcol`

 

  • 3- Gehen Sie in den Moduleinstellungen auf die Registerkarte „Site Tools“ und wählen Sie dort unter „Typ“ die Option „Sticky Sidebar“ aus. Fügen Sie unter „Div- oder Klassenname“ die Namen hinzu. Für die Codes in unserem Beispiel sollte es also #mx-leftcol, #mx-rightcol lauten. Dokumentation zur Sticky Sidebar. Da es mehr als eine Spalte gibt, sollten diese durch ein Komma getrennt werden.

 

In unserem Beispiel gab es zwei `div`-Elemente mit ID, aber möglicherweise verwenden Sie eine Klasse anstelle einer ID.

Siehe das Bild unten

In diesem Fall handelt es sich um eine Klasse. Der Code müsste dann lauten: .right2

 


Anzeige beim Scrollen

  • 1. Klicke auf deiner Website mit der rechten Maustaste und wähle die Option „Element untersuchen“ aus.

Überprüfen Sie die Struktur der Seite an der Stelle, an der Sie „Beim Scrollen anzeigen“ haben möchten. In unserer Modul-Demo haben wir das Bild mit der Klasse „scrollr“. Sehen Sie sich das Bild unten an.

Da es sich um eine Klasse handelt, sollte der Code „.scrollr“ lauten

  • 3. Gehen Sie in den Moduleinstellungen auf die Registerkarte „Site Tools“ und wählen Sie dort unter „Typ“ die Option „Scrollreveal“ aus. Geben Sie unter „Div- oder Klassenname“ den Code ein.

Für den Code aus der Modul-Demo sollte dies also „.scrollr“ sein.

Siehe das Bild unten.

Wählen Sie als Effekt einen beliebigen aus. Wenn als Effekt „Animated Masker“ ausgewählt ist, stellen Sie sicher, dass unter „Masker“ eine der Optionen ausgewählt ist. Bei anderen Effekten lassen Sie das Feld „Masker“ leer.

Verwenden Sie die Schaltfläche „Hinzufügen“, um beliebig viele Elemente hinzuzufügen. Überprüfen Sie für alle Elemente einfach den Code im Frontend und fügen Sie ihn in den Moduleinstellungen ein.

Wenn es sich um ein `div`-Element handelt, fügen Sie ein `#` ein, und wenn es sich um eine Klasse handelt, fügen Sie ein `.` ein.

Verwandte Artikel

Abonnieren Sie unseren Newsletter

Bleiben Sie über Verkäufe, Werbeaktionen, Produktaktualisierungen und neue Produktversionen auf dem Laufenden.