Gestaltung der Website-Integration

Zusätzlich zur Momoyoga-App für Yogis und der Online-Adminumgebung für Studios hast du auch die Möglichkeit, den Kursplan auf deiner eigenen Website zu integrieren. Mit dem Momoyoga-Website-Widget können neue und bestehende Kund:innen ganz einfach Kurse über deine eigene Website buchen. Es war noch nie so einfach, einen Kursplan auf deiner eigenen Website zu platzieren!

In diesem Artikel

• So gestaltest du deine Website-Integration mithilfe der Widget-Einstellungen von Momoyoga
• So gestaltest du deine Website-Integration mit CSS

So gestaltest du deine Website-Integration mithilfe der Widget-Einstellungen von Momoyoga

Wir bieten Integrationsmöglichkeiten für WordPress, Squarespace, Wix.com, Joomla und JavaScript an. Du kannst hier mehr über die spezifischen Integrationsmöglichkeiten von Momoyoga lesen.

Wenn du deinen Momoyoga-Kursplan in deine Website integrierst, hast du die Möglichkeit, deine Integration so anzupassen, dass sie deine Marke und dein gewünschtes Layout widerspiegelt.

Um deinen Momoyoga-Kursplan auf deiner Website individuell zu gestalten, befolge einfach diese Schritte:

1. Logge dich auf Momoyoga ein
2. Gehe im linken Menü auf Einstellungen
3. Klicke auf den Reiter Website-Widget
4. Wähle deinen Website-Anbieter in der Übersicht aus
   
   
   
5. Anschließend kannst du das Design an das Branding und die Vorlieben deines Studios anpassen, z. B:
   
   Format der Anzeige des Kursplans: Wochenansicht oder Listenansicht
   Was deine Yogis sehen: Lehrer:innen, Endzeiten der Kurse, Bilder von Kursen oder Events
   Möglichkeit, die Yogis nach Lehrer:innen zu filtern
   Benutzerdefinierte Farben, wenn du Momoyogas benutzerdefinierte Branding-Funktion nutzt
   
   
6. Schau dir die Vorschau an, um sicherzustellen, dass sie wie gewünscht aussieht
7. Klicke auf Einrichtungsanleitung anzeigen
8. Gehe zu deinem Website-Adminbereich und folge den Anweisungen von Momoyoga

Du bist fertig! Nachdem du diese Schritte befolgt hast, sollte der Kursplan auf deiner Website sichtbar und an dein gewünschtes Design angepasst sein.

So gestaltest du deine Website-Integration mit CSS

Mehrere Integrationen auf einer Seite für eine benutzerdefinierte HTML-Website

Du kannst jetzt mehr als einen Kursplan auf einer einzigen Webseite platzieren, und für jeden Kursplan können unterschiedliche Einstellungen verwendet werden (z. B. kann einer die Listenansicht und ein anderer die Wochenansicht sein). Gehe dazu zu Einstellungen → Website-Integration und befolge die dortigen Anweisungen. Wenn du den Code zu deiner Website hinzufügst, kannst du so viele <div>-Container einfügen, wie du brauchst, und jeden genau dort platzieren, wo ein Kursplan auf der Seite erscheinen soll.

CSS-Kurs-Referenz

• .momo-schedule-wrapper - Formatvorlagen für den gesamten Kursplanbereich
• .momo-schedule-item__image - Formatvorlagen für das Kursbild
• .momo-schedule-item__button - Formatvorlagen für den Kursbutton
• .momo-schedule-item__title - Formatvorlagen für den Kurstitel
• .momo-schedule-item__location - Formatvorlagen für den Ort des Kurses
• .momo-schedule-item__description - Formatvorlagen für den Text der Kursbeschreibung
• .momo-schedule-item__duration - Formatvorlagen für die Kursdauer
• .teacher-avatar - Formatvorlagen für den Avatar/das Foto der Lehrer:in
• .momo-list-schedule - Formatvorlagen für das Layout der Listenansicht
• .momo-date-pagination - Formatvorlagen für die Datumsnavigation (Blättern zwischen den Daten)
• .momo-schedule-day-title - Formatvorlagen für den Titel des Tages im Kursplan
• .momo-read-more__more - Formatvorlagen für den Text Mehr lesen
• .momo-teacher-filter - Formatvorlagen für den Filter der Lehrer:innen

Tipps zur responsiven Anzeige

Der Kursplan ist standardmäßig responsiv, das heißt, er passt sich automatisch an den verfügbaren Platz an. Er reagiert auf die Breite des Containers, in dem er platziert ist. Selbst auf einem Desktop-Computer kann der Kursplan also wie eine „mobile Ansicht“ aussehen, wenn er sich in einem schmalen Bereich der Seite befindet (z. B. in einer kleineren Spalte oder Seitenleiste). Wenn du bestimmte Details auf größeren Layouts ausblenden möchtest (oder anpassen willst, was bei verschiedenen Größen angezeigt wird), kannst du eine CSS-Regel wie diese verwenden:

@container (min-width: 800px) {

.momo-schedule-item__duration { display: none; }

}

Hinweis:  Bitte beachte, dass das Momoyoga-Supportteam dich zwar bei der allgemeinen Einrichtung unterstützen kann, aber keine detaillierte technische Fehlerbehebung für Website-Integrationen anbietet. Wenn du auf Probleme stößt, kontaktiere am besten deinen Website-Entwickler.