Wie fügt man einen Kalender in eine Website ein?
Ein interaktiver Kalender ist ein Muss für jedes Unternehmen, das Veranstaltungen plant, Termine verwaltet oder wichtige Daten festlegt. Besucher können Ihren Zeitplan einfach einsehen und auf dem Laufenden bleiben – damit wird er zu einem zentralen Bestandteil jeder Website, die sich auf Events, Terminbuchung oder Planung konzentriert. Angesichts der Vielzahl an Optionen ist es entscheidend, eine Lösung zu wählen, die effizient und einfach zu verwalten ist.
Vermutlich möchten Sie einen interaktiven Kalender auf Ihrer Website, um Termine zu erstellen, zu verwalten und zu synchronisieren. Sie möchten nicht viel Zeit und Aufwand in das Programmieren oder das Erstellen aus benutzerdefinierten Blöcken mit ständigen manuellen Updates investieren, oder?
So erhalten Sie es:
- Beginnen Sie unten mit dem Editor. Eine Anmeldung ist erst nötig, wenn Sie alles ausprobiert haben!
- Fügen Sie Ihre Veranstaltungen manuell hinzu oder verbinden Sie einfach Ihren Google-Kalender.
- Gestalte das Aussehen des Widgets ganz nach deinem Geschmack.
- Erhalten Sie den HTML-Code Ihres Widgets und betten Sie den Kalender einfach in Ihre Website ein, indem Sie diesen Code in Ihr CMS einfügen.
Just check out the editor and test its functionality for yourself! ⇓
Ausführliche Anleitung: Kalender-Einbettung erstellen und anpassen.
Lassen Sie uns jetzt unseren kostenlosen eingebettbaren Kalender von Grund auf neu erstellen. Das dauert nur wenige Minuten – ganz ohne Gefummel mit Code und Co. Wir fügen außerdem zu jedem Schritt Illustrationen hinzu, damit der Ablauf noch bequemer für Sie wird.
- Gestalten Sie das Aussehen nach Ihren Wünschen. Ihr Kalender-Embed ist fast fertig. Jetzt lässt es sich wirklich an Ihre Website anpassen – das geht einfach, weil nahezu alles geändert werden kann.
Integrieren Sie das Kalender-Widget in Ihren Website-Builder oder Ihr CMS
Wie versprochen ist es ganz einfach, das Widget in jede Website einzubinden. Wir schauen uns einige Anleitungen an, die den Prozess für die beliebtesten CMS-Plattformen abdecken.
Kalender in HTML-Website einbetten
Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das Kalender-Widget schnell in jede HTML-basierte Website einbetten. Es ist hilfreich, den Vorgang in Aktion zu sehen, bevor Sie loslegen. Wenn Sie es bevorzugen, können Sie auch den untenstehenden, einfachen schriftlichen Schritten folgen.
- Gehen Sie zum Backend Ihrer Website. Stellen Sie sicher, dass Sie den HTML-Code in Ihrem Admin-Bereich bearbeiten können, um das Widget nahtlos zu integrieren.
- Fügen Sie den Elfsight-Code in den HTML-Code Ihrer Website ein. Wählen Sie den Ort, an dem Ihr Kalender erscheinen soll, um Ihre Geschäftsziele zu verfolgen.
- Speichern Sie die Änderungen auf Ihrer Website. Prüfen Sie, ob alles wie geplant funktioniert und auf der Seite konsistent aussieht.
Kalender zur WordPress-Website hinzufügen
Sie können Ihr codefreies Widget schnell in Ihre Website einbetten, indem Sie den bereitgestellten Code in einen Block einfügen. So erscheint Ihr Kalender genau an der Stelle, die Sie benötigen.
- Melden Sie sich bei Ihrem WordPress-Konto an. Sie müssen im Admin-Bereich arbeiten, um Änderungen am HTML-Code vorzunehmen.
- Gehen Sie zu „Seiten“ und wählen Sie die gewünschte Seite aus. Berücksichtigen Sie Ihre Geschäftsziele und Ihre Gründe für das Einbetten des Plugins in einen bestimmten Bereich.
- Fügen Sie einen benutzerdefinierten HTML‑Block hinzu. Er muss im vorgesehenen Bereich der Website erscheinen, in den Sie den Kalender eingebettet haben.
- Fügen Sie den generierten Code in diesen Block ein. Vergessen Sie nicht, die Seite zu „Aktualisieren“ und die Funktionsweise des Widgets zu überprüfen.
Kalender in WordPress erstellen→
Kalender zur Wix-Website hinzufügen
Das Hinzufügen des Widgets mit Ihrem Kalender zu einer Wix-Seite ist einfach. Der von Elfsight bereitgestellte benutzerdefinierte Code lässt sich nahtlos in einen gewünschten Bereich der Seite integrieren.
- Greifen Sie auf den Wix-Editor zu. Loggen Sie sich in Ihr Wix-Konto ein und wählen Sie die Website aus, die Sie bearbeiten möchten. Öffnen Sie das Dashboard Ihrer Website und klicken Sie auf „Site bearbeiten“, um den Editor zu öffnen.
- Fügen Sie einen HTML-Block für das Kalender-Widget hinzu. Klicken Sie im linken Menü auf das Plus-Symbol und wechseln Sie zum Abschnitt Einbetten. Wählen Sie im Tab ‚Benutzerdefinierte Einbettungen‘ die Option ‚Widget einbetten‘ aus, um Ihrer Seite einen neuen HTML-Block hinzuzufügen.
- Installieren Sie den Kalender-Widget-Installationscode. Klicken Sie auf ‘Code eingeben’ und fügen Sie den Installationscode ein, der von Ihrem Kalender-Widget-Editor bereitgestellt wird. Nachdem Sie den Code eingegeben haben, klicken Sie auf ‘Aktualisieren’, um das Widget in Ihre Seite einzubetten.
- Passen Sie die Abmessungen und die Platzierung des Widgets an. Passen Sie Größe und Position des Widgets auf der Seite an. Stellen Sie sicher, dass es perfekt passt und optisch überzeugt, indem Sie Größe und Position sorgfältig festlegen.
- Für mobile Geräte optimieren. Wechseln Sie zum mobilen Editor und passen Sie das Widget nach Bedarf an. Stellen Sie sicher, dass das Widget auf Mobilgeräten gut aussieht, und veröffentlichen Sie Ihre Änderungen, sobald Ihnen das Layout gefällt.
Kalender zur Shopify-Website hinzufügen
Sie können das Kalender-Widget schnell zu jeder Seite Ihrer Shopify-Website hinzufügen. Sie müssen lediglich den fertigen Code von Elfsight in einen entsprechenden Bereich Ihrer Website einfügen.
- Gehen Sie zum Shopify-Admin-Bereich. Sie müssen den Bereich „Online Store“ der Website finden.
- Wählen Sie im Dropdown-Menü ‘Anpassen’. Danach wählen Sie im linken Menü ‘Abschnitt hinzufügen’.
- Unter ‘Benutzerdefinierte Inhalte’ auf ‘Hinzufügen’ klicken. Sie müssen die vorinstallierten Shopify-Elemente entfernen.
- Wählen Sie „Benutzerdefiniertes HTML“. Es ist die Option, die Sie im Menü „Inhalt hinzufügen“ finden.
- Finden Sie den ‚HTML‘-Bereich. Dort können Sie den Kalender-Installationscode einbetten und alle Änderungen speichern.
Kalender in Shopify erstellen→
Kalender zur Squarespace-Website hinzufügen
Jeder kann den Kalender der Veranstaltungen schnell auf der gewünschten Seite einer Squarespace-Website einbetten. Alles, was Sie tun müssen, ist den generierten Code von Elfsight in einen bestimmten Block auf der Seite einzufügen.
- Melden Sie sich bei Ihrem Squarespace-Konto an. Melden Sie sich bei Ihrem Squarespace-Konto an und wählen Sie die Website für das Widget aus. Navigieren Sie zum Dashboard Ihrer Website und wählen Sie die Website aus, die Sie bearbeiten möchten.
- Gehen Sie zum Abschnitt „Website“. Wählen Sie die Seite aus, auf der Sie das Kalender-Widget hinzufügen möchten. Gehen Sie im Hauptmenü zum Abschnitt „Website“ und wählen Sie die gewünschte Seite aus.
- Klicken Sie auf Bearbeiten und anschließend Abschnitt hinzufügen. Klicken Sie auf der ausgewählten Seite auf Bearbeiten und wählen Sie dann Abschnitt hinzufügen, wo Sie das Widget platzieren möchten. So erstellen Sie einen neuen Abschnitt auf Ihrer Seite für das Widget.
- Fügen Sie einen Codeblock hinzu. Wählen Sie ‘Einen leeren Abschnitt hinzufügen’, klicken Sie dann auf ‘Block hinzufügen’ und wählen Sie ‘Code’ aus der Liste. Hier fügen Sie den Kalender-Widget-Code ein.
- Fügen Sie den Installationscode des Kalender-Widgets ein. Im ‘Bearbeiten’ Icon fügen Sie den Installationscode des Kalender-Widgets ein und passen die Breite des Blocks an. Stellen Sie sicher, dass das Widget gut platziert und visuell ansprechend auf Ihrer Seite aussieht.
Kalender in Squarespace erstellen→
Kalender zur Webflow-Website hinzufügen
Das Hinzufügen des Widgets zu Webflow-Seiten läuft reibungslos, da Sie lediglich ein Embed-Element hinzufügen müssen, in dem Sie den generierten Code Ihres Kalenders einbetten.
- Starten Sie in Webflow. Melden Sie sich bei Ihrem Webflow-Konto an und wählen Sie die Website aus, in der Sie das Widget einbetten möchten.
- Das Widget einbetten. Im Webflow-Editor klicken Sie auf das Plus-Symbol. Ziehen Sie anschließend das Embed-Element aus dem linken Menü an die gewünschte Stelle, an der die Veranstaltungen angezeigt werden sollen.
- Code einfügen. Fügen Sie den Installationscode des Kalenders in den angezeigten HTML-Einbettungscode-Editor ein, der erscheint. Anschließend klicken Sie auf ‘Speichern & Schließen’
- Anpassung und Veröffentlichung. Passe die Kalender-Einstellungen an, drücke dann „Veröffentlichen“ und wähle die Domains für die Aktivierung aus.
Kalender in Webflow erstellen →
Kalender zur Elementor-Website hinzufügen
Das Einbetten des Kalender-Widgets in Elementor ist einfach und bequem. Sie benötigen lediglich einen leeren Block auf Ihrer Seite, in dem Sie den Widget-Code einfügen.
- Im WordPress-Backend starten. Loggen Sie sich in das Backend Ihrer WordPress-Website ein, gehen Sie zu ‚Pages‘ und wählen Sie die Seite aus, auf der Sie das Kalender-Widget hinzufügen möchten.
- Elementor-Bearbeitung starten. Wählen Sie ‘Mit Elementor bearbeiten’, um Ihre gewählte Seite anzupassen.
- HTML-Element einfügen. Verwenden Sie die Drag-and-Drop-Funktion, um das HTML-Element auf Ihrer Seite zu platzieren.
- Fügen Sie den Widget-Code in Ihre Website ein. Fügen Sie den Elfsight-Kalender-Installationscode in das HTML-Code-Feld ein.
- Aktualisieren und genießen. Klicken Sie auf ‚Update‘, um Ihre Änderungen anzuwenden und zu sehen, wie sich Ihre Seite mit dem eingebetteten Kalender verwandelt.
Kalender in Elementor erstellen →
Warum ist ein eingebetteter Veranstaltungskalender wertvoll für Ihr Unternehmen?
Das Hinzufügen des Widgets zu Ihrer Website ist ganz unkompliziert. Werfen wir jetzt einen Blick darauf, was Sie gewinnen, wenn Sie den Elfsight Event Calendar in Ihre Seiten einbetten. Hier sind die wichtigsten Vorteile des Widgets im Hinblick auf den Wert für Ihr Unternehmenswachstum.
Wert 1: Ihre Website-Nutzer verpassen nie die wichtigsten Veranstaltungen.
Unser Kalender ermöglicht es Ihnen, Veranstaltungen in Kategorien zu gliedern und Besuchern das Filtern zu ermöglichen, damit sie die für sie relevanten Termine schnell finden. So verpassen Ihre Kunden keine Konferenz oder Roundtable, weil der Zeitplan klar ersichtlich ist.
Wert 2: Mit einem Klick aktuelle Ereignisse synchronisieren
Warum einen neuen Kalender erstellen, wenn bereits alles im Google-Konto Ihres Unternehmens geplant ist? Mit einer einzigen Google Kalender-Integration können Sie Ihre geplanten Termine sofort auf der Website anzeigen.
Wert 3: Ereignisse klar anzeigen und Interaktivität steigern
Besucher können die Veranstaltung im Popup-Modus ansehen, wodurch weitere Details sichtbar werden und die Veranstaltung detailliert beworben wird. Sie können außerdem jede Veranstaltungs-Karte mit CTA-Elementen wie Buttons und Links ausstatten, die die Teilnahme erhöhen und Ihre Conversions steigern.
Wert 4: Dies wird Ihr individueller, vollständig anpassbarer Kalender sein.
Layouts, Schriftarten, Farben und Stil der Elemente anpassen. Um Ihre Anpassungsreise noch reibungsloser zu gestalten, bieten wir vorgefertigte Vorlagen für gängige Anwendungsfälle an.
Beispiele für Kalender auf Websites
Sie fragen sich vielleicht, wie Sie einen Kalender auf Ihrer Website auf möglichst ansprechende und effektive Weise hinzufügen können. Um Ihnen den Einstieg zu erleichtern, haben wir verschiedene Vorlagen erstellt, die gängige Anwendungsfälle mit vorgefertigten Layouts zeigen, die auf Ihre Bedürfnisse zugeschnitten sind.
#1 Konferenz-Agenda-Kalender
Die Konferenzagenda-Vorlage ist ideal, um regelmäßig stattfindende Meetings zu organisieren. Sie liefert alle wesentlichen Details zu jeder Veranstaltung auf einen Blick, sodass Besucher der Website ihre Teilnahme einfach zu den am besten passenden Terminen planen können.
#2 Grid-Kalender
Die Grid-Kalender-Vorlage bietet eine klassische, strukturierte Ansicht des gesamten Monats und zeigt alle verfügbaren Termine in einem übersichtlichen Raster. Dieses Layout eignet sich ideal für Besucher, die eine schnelle Übersicht wünschen, besonders nützlich bei Kalendern mit vielen Informationen.
#3 Sports Scheduler Kalender
Nr. 4: Scrollender Kalender
Scrolling Calendar template displays events one by one. This is an excellent option for sites with fewer events or where embedding a full calendar might not fit the design.”>Für einen minimalistischen Ansatz zeigt die Vorlage Scrolling Calendar Ereignisse nacheinander an. Dies ist eine ausgezeichnete Option für Seiten mit weniger Veranstaltungen oder wenn das Einbetten eines vollständigen Kalenders nicht zum Design passt.
#5 Veranstaltungslisten-Kalender
Die Veranstaltungsliste-Vorlage ermöglicht Besuchern, Veranstaltungen in einem sauberen, zeilenweisen Format zu durchsuchen. Sie ist platzsparend und informativ und bietet eine klare, kompakte Art, Ihre Veranstaltungen darzustellen, ohne die Seite zu überladen.
Stöbern Sie bequem in unserem Vorlagenkatalog, um eine perfekte Kalender-Einbettung für Ihre Website einzurichten:
Entdecken Sie 30+ Eventkalender-Vorlagen
Welche Unternehmen profitieren von eingebettbaren Kalendern?
Unser Veranstaltungskalender lässt sich ganz einfach an jede Website, jeden Zweck oder Bedarf anpassen und wird so zu einem wertvollen Instrument zur Förderung Ihres Unternehmens. Hier sind nur einige Beispiele dafür, wer von der Nutzung dieses Widgets profitieren kann:
🧑💻Event-Profis
Unser Widget macht das Veranstaltungsmanagement jeder Art einfach. Es hilft, den Anlass zu bewerben und detaillierte Informationen über eine Website oder einen Link strukturiert an eine große Anzahl von Gästen zu übermitteln. Der Kalender kann einer Website oder Landing Page hinzugefügt werden, die dem Anlass gewidmet ist, oder über einen Link geteilt und an alle Teilnehmer versendet werden.
🌟 Persönliche Marken
Das Einbetten einer solchen Anwendung ist wichtig für jeden, der unterrichtet oder öffentlich spricht. Wer an vielen Veranstaltungen teilnimmt und eigene ausrichtet, braucht effektive Promotion für maximale Reichweite und Teilnahme. Eine persönliche Website oder ein Social-Media-Profil eignet sich ideal, um den Kalender mit Ihren kommenden Terminen einzubetten.
🛍️Kleinbetriebe
Wenn Sie Veranstaltungen durchführen, um die Bekanntheit Ihres Unternehmens zu steigern, hilft Ihnen das Einbetten unseres Tools, das Beste aus Ihren Unternehmensveranstaltungen herauszuholen. Eine sorgfältig geplante und gut beworbene Veranstaltung sorgt dafür, dass mehr Online-Traffic auf Websites gelenkt wird und potenzielle Kunden erreicht werden – so erreichen Sie ein breiteres Publikum.
🌍Zivilgesellschaftliche Organisationen
Unser Veranstaltungskalender-Widget eignet sich perfekt für alle Arten gemeinnütziger oder öffentlicher Einrichtungen, da wir auf Anfrage eine kostenlose Version unserer Produkte anbieten. Dazu gehören Schul-, Hochschul- und Universitäts-Websites, verschiedene Gemeinschaftsgruppen und zivilgesellschaftliche Verbände, die eine Form von Wohltätigkeit oder sinnstiftender Aktivität durchführen.
FAQ (Häufig gestellte Fragen)
Kann ich einen Veranstaltungskalender kostenlos auf meiner Website einbetten?
Klar. Sie können den Kalender kostenlos erstellen, anpassen und zu Ihrer Website hinzufügen. Alle Funktionen bleiben verfügbar, solange Sie das Widget verwenden. Falls Sie mit diesem oder anderen Widgets weitere Möglichkeiten benötigen, schauen Sie sich unseren Pricing-Bereich an und ziehen Sie ein Upgrade in Betracht.
Ist das Veranstaltungskalender-Widget mobilfreundlich?
Klar! Sie können prüfen, wie der Kalender auf verschiedenen Geräten in der Bildschirmansicht im Editor angezeigt wird.
Unterstützt Ihr Kalender-Widget Zeitzonen?
Ja, Sie können die Zeitzone Ihrer Veranstaltungen festlegen, und Besucher Ihrer Website sehen die Zeitangaben entsprechend ihrer Browser-Zeitzone.
Weitere Ideen, um Ihre Website zu erweitern
- Sind Sie in den Medien aktiv? Wir haben eine Lösung, die Ihnen hilft, Ihre Social-Media-Aktivitäten auf der Website anzuzeigen. Prüfen Sie das Social Feed Widget von Elfsight, um Kunden zu begeistern und mehr Besucher zu Ihren Veranstaltungen zu ziehen.
- Feedback erhalten? Es gibt eine Möglichkeit, Ihre Kommunikation mit den Kunden zu verbessern. Sie können detailliertes Direkt-Feedback einholen oder Umfragen zu neuen Entwicklungs-Ideen oder Verbesserungen bei der Veranstaltungsplanung mit dem Formular-Builder von Elfsight durchführen. Erstellen Sie benutzerfreundliche Formulare, die mehr Antworten einladen und die Zahl der Leads erhöhen.
- Kundentreue steigern? Binden Sie Bewertungen von Amazon, Facebook, Yelp und über 30 weiteren Unternehmen in unser All-in-One-Bewertungen-Widget ein. Auf diese Weise können Sie die Bewertungen der relevantesten Plattformen dem Publikum Ihrer Veranstaltungen anzeigen. Sie gewinnen mehr Vertrauen und ziehen noch mehr Besucher für kommende Veranstaltungen an.
list of all widgets that Elfsight has developed to simplify e-commerce, social presence, and website management.”>Oder werfen Sie einfach einen Blick auf die Liste aller Widgets, die Elfsight entwickelt hat, um E-Commerce, Social-Media-Auftritt und Webseitenverwaltung zu vereinfachen.
Haben Sie eine Frage?
Wir hoffen, dieser Leitfaden war hilfreich. Kontaktieren Sie uns wenn Sie weitere Informationen zur Einbettung des Eventkalender-Widgets benötigen oder Unterstützung benötigen. Wir sind hier, um sicherzustellen, dass Ihre Erfahrung reibungslos und erfolgreich verläuft.
Elfsight bietet eine vollständige No-Code-Lösung für Ihre Website-Bedürfnisse. Wir sind außerdem eine lebendige Community, in der Ideen und Expertise zusammenkommen – also zögern Sie nicht, Ihre kreativen Vorschläge in unserer Wishlist zu teilen!
