<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>widgets Archive - House of Spaces</title>
	<atom:link href="https://www.houseofspaces.de/schlagwort/widgets/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.houseofspaces.de/schlagwort/widgets/</link>
	<description>Deutschlands erster Notion Agentur</description>
	<lastBuildDate>Fri, 28 Feb 2025 05:36:42 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://www.houseofspaces.de/wp-content/uploads/2024/01/House-of-Notion-Favicon-150x150.png</url>
	<title>widgets Archive - House of Spaces</title>
	<link>https://www.houseofspaces.de/schlagwort/widgets/</link>
	<width>32</width>
	<height>32</height>
</image> 
<image>
    <title>House of Spaces</title>
    <url>https://www.houseofspaces.de/wp-content/uploads/2024/01/House-of-Notion-Favicon.png</url>
    <link>https://www.houseofspaces.de</link>
    <width>150</width>
    <height>150</height>
    </image>	<item>
		<title>Kostenlose Notion Widgets 2025, die du unbedingt verwenden solltest</title>
		<link>https://www.houseofspaces.de/blog/notion-widgets/</link>
		
		<dc:creator><![CDATA[Patrick Santa Maria]]></dc:creator>
		<pubDate>Fri, 27 Dec 2024 07:44:03 +0000</pubDate>
				<category><![CDATA[Beitrag]]></category>
		<category><![CDATA[Notion Basics]]></category>
		<category><![CDATA[besten widgets]]></category>
		<category><![CDATA[feature]]></category>
		<category><![CDATA[notion anmelden]]></category>
		<category><![CDATA[notion tutorial]]></category>
		<category><![CDATA[notion widgets]]></category>
		<category><![CDATA[widgets]]></category>
		<guid isPermaLink="false">https://www.houseofspaces.de/?p=14874</guid>

					<description><![CDATA[Widgets machen Notion-Seiten interaktiver und funktionaler. Mit wenigen Klicks kannst du Kalender, Uhren oder andere Tools einbinden, die deinen Arbeitsbereich perfekt ergänzen. Hier erfährst du, wie du Widgets einfach integrierst und wo du sie findest.]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Widgets machen Notion-Seiten interaktiver und funktionaler. Mit wenigen Klicks kannst du Kalender, Uhren oder andere Tools einbinden, die deinen Arbeitsbereich perfekt ergänzen. Hier erfährst du, wie du Widgets einfach integrierst und wo du sie findest.</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="473" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget-1024x473.webp" alt="" class="wp-image-14884" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget-1024x473.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget-300x138.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget-768x354.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget-1536x709.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-progress-widget.webp 1842w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Quelle: indify.co</figcaption></figure>



<h2 class="wp-block-heading">Was sind Widgets?</h2>



<p class="wp-block-paragraph">Widgets sind kleine, interaktive Anwendungen, die in eine größere Plattform oder Website integriert werden, um deren Funktionalität zu erweitern. Sie zeigen oft Informationen an oder ermöglichen eine direkte Interaktion, wie zum Beispiel Kalender, Uhren, Wetterberichte oder To-Do-Listen. Widgets lassen sich einfach in bestehende Systeme einfügen und bieten eine schnelle Möglichkeit, nützliche Funktionen hinzuzufügen, ohne dass du dafür viel Aufwand betreiben musst. Sie sind praktisch, um häufig benötigte Informationen oder Tools auf einen Blick verfügbar zu machen.</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="603" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget-1024x603.webp" alt="" class="wp-image-14885" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget-1024x603.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget-300x177.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget-768x453.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget-1536x905.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/indify-weather-widget.webp 1816w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Quelle: indify.co</figcaption></figure>



<h2 class="wp-block-heading">Was sind Notion Widgets?</h2>



<p class="wp-block-paragraph">Notion Widgets machen deine Seiten interaktiver und funktionaler. Du integrierst Kalender, Aufgabenlisten oder Wetteranzeigen direkt in deinen Arbeitsbereich, ohne die Plattform zu verlassen. Statt ständig zwischen Apps zu wechseln, hältst du alles an einem Ort bereit. Widgets erlauben dir, Aufgaben abzuhaken, Termine zu planen oder Informationen schnell abzurufen. Das spart Zeit und schafft Übersicht, sodass du effizienter arbeiten kannst.</p>



<p class="wp-block-paragraph"><strong>Hier ein Überblick über die besten Plattformen für Notion Widgets:</strong></p>



<p class="wp-block-paragraph"><a href="https://indify.co/"><strong>Indify</strong></a>: Du wählst aus neun Widgets und passt sie individuell an. Du bestimmst Form, Farbe und Design nach deinem Geschmack und kannst sie sogar an den Light- oder Dark-Mode von Notion anpassen. Perfekt, wenn du auf Ästhetik und Personalisierung Wert legst.</p>



<p class="wp-block-paragraph"><a href="https://apption.co/"><strong>Apption</strong></a>: Eine offene Plattform, auf der jeder Widgets beisteuern kann. Das bedeutet eine große Auswahl, aber auch Widgets, die nicht immer getestet sind. Mit dem integrierten Editor kannst du sogar eigene Widgets mit HTML-Code erstellen. Ideal, wenn du programmieren kannst oder einen Code anpassen willst.</p>



<p class="wp-block-paragraph"><a href="https://wotion.co/">Wotion</a>:ist eine Bibliothek dynamischer Widgets für Notion, die ohne Registrierung oder Abonnement verfügbar sind. Alle Widgets sind Open Source und bieten Funktionen wie einen Live-Aktienkurs-Tracker oder einen minimalistischen Spotify-Player, die du direkt in deine Notion-Dokumente einbetten kannst. </p>



<p class="wp-block-paragraph"><a href="https://widgetbox.app/"><strong>Widget Box</strong></a>: Diese Plattform kombiniert einfache Handhabung mit einer breiten Auswahl. In der kostenlosen Version erstellst du bis zu fünf Widgets aus einer eingeschränkten Auswahl. Für rund 2 USD im Monat schaltest du die Premium-Version frei, die einzigartige Widgets bietet, die du anderswo nicht findest.</p>



<h2 class="wp-block-heading">So bindest du Widgets in Notion ein:</h2>



<ol class="wp-block-list">
<li><strong>Widget auswählen</strong></li>
</ol>



<p class="wp-block-paragraph">Entscheide dich für ein Widget, das du verwenden möchtest. Beliebte Plattformen wie <strong>Indify</strong>, <strong>Apption</strong> oder <strong>Widget Box</strong> bieten dir eine breite Auswahl. Alternativ kannst du ein eigenes Widget erstellen und hosten.</p>



<ol start="2" class="wp-block-list">
<li><strong>Widget-Link kopieren</strong></li>
</ol>



<p class="wp-block-paragraph">Auf der Plattform findest du für jedes Widget einen <strong>Einbettungslink (Embed-Link)</strong>. Kopiere diesen Link. Falls du ein eigenes Widget nutzt, erstellst du den Link über Hosting-Dienste wie <strong>GitHub Pages</strong> oder <strong>Netlify</strong>.</p>



<ol start="3" class="wp-block-list">
<li><strong>In Notion einfügen</strong></li>
</ol>



<ul class="wp-block-list">
<li>Gehe zu der Notion-Seite, auf der du das Widget einfügen möchtest.</li>



<li>Schreibe /embed in einen neuen Block, um einen Einbettungsblock zu erstellen.</li>



<li>Füge den kopierten Link in das Eingabefeld ein und bestätige mit <strong>Embed Link</strong>.</li>
</ul>



<ol start="4" class="wp-block-list">
<li><strong>Anpassen und positionieren</strong></li>
</ol>



<ul class="wp-block-list">
<li>Passe die Größe des Widgets an, indem du die Ecken des eingebetteten Blocks ziehst.</li>



<li>Verschiebe es, um es an der gewünschten Stelle auf der Seite zu platzieren.</li>
</ul>



<h2 class="wp-block-heading">Notion Widgets für die Uhrzeit</h2>



<p class="wp-block-paragraph">Hier sind direkt ein paar Widgets, deren URL du dir direkt kopieren und bei Notion einbetten kannst. So kannst du direkt loslegen, ohne dich auf den Plattformen anmelden zu müssen.</p>



<p class="wp-block-paragraph"><strong>Flix</strong></p>



<p class="wp-block-paragraph"><a href="https://flipclock.app">Hier geht es zum Widget</a>.</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="573" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-1024x573.webp" alt="" class="wp-image-14877" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-1024x573.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-300x168.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-768x430.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-1536x860.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/flip-clock-widget-2048x1146.webp 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>Aura Clock</strong></p>



<p class="wp-block-paragraph"><a href="https://flocus.com/online-aura-clock/">Hier geht es zum Widget</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="566" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-1024x566.webp" alt="" class="wp-image-14875" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-1024x566.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-300x166.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-768x424.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-1536x848.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/aura-widget-clock-2048x1131.webp 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>Minimalist Clock</strong></p>



<p class="wp-block-paragraph"><a href="https://flocus.com/online-minimal-clock/">Hier geht es zum Widget</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="533" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-1024x533.webp" alt="" class="wp-image-14876" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-1024x533.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-300x156.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-768x400.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-1536x799.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/minimalist-clock-2048x1065.webp 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Notion Widgets Wetter</h2>



<p class="wp-block-paragraph">Es gibt viele Wetter Widgets auf den Plattformen, die wir oben vorgestellt haben, aber sie erfordern fast immer eine Anmeldung. <a href="https://www.windy.com/">Windy Widget</a> kannst du allerdings direkt kopieren und in dein Notion einfügen.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="570" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-1024x570.webp" alt="" class="wp-image-14878" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-1024x570.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-300x167.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-768x428.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-1536x855.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/windy-notion-widget-2048x1140.webp 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Pomodoro Widget</h2>



<p class="wp-block-paragraph">Schwierigkeiten, konzentriert zu arbeiten? Binde diesen <a href="https://shop.gridfiti.com/products/aesthetic-pomodoro-notion-widget">Pomodoro-Wecker</a> in dein Dashboard ein:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="477" height="338" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/notion-widget-pomodoro.webp" alt="" class="wp-image-14879" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/notion-widget-pomodoro.webp 477w, https://www.houseofspaces.de/wp-content/uploads/2024/12/notion-widget-pomodoro-300x213.webp 300w" sizes="auto, (max-width: 477px) 100vw, 477px" /></figure>



<p class="wp-block-paragraph">Du bekommst ihn kostenlos, aber du musst in in einen Warenkorb legen, um den Link zu erhalten.</p>



<h2 class="wp-block-heading">Whiteboard Widget</h2>



<p class="wp-block-paragraph">Kopiere <a href="https://witeboard.com/1e2ed810-9e42-11ed-833d-53049a1537ba">diesen Link</a> in dein Notion und du kannst Notizen und Zeichnungen mit der Hand (bzw. Mouse) erstellen.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="489" src="https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-1024x489.webp" alt="" class="wp-image-14880" srcset="https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-1024x489.webp 1024w, https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-300x143.webp 300w, https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-768x366.webp 768w, https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-1536x733.webp 1536w, https://www.houseofspaces.de/wp-content/uploads/2024/12/whiteboard-widget-notion-2048x977.webp 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><strong>Custom Notion Widgets erstellen</strong></h2>



<p class="wp-block-paragraph">Wenn du etwas Einzigartiges für deine Notion-Seiten schaffen möchtest, ist die Erstellung eigener Widgets eine großartige Möglichkeit. Es erfordert zwar technisches Grundwissen, aber mit einer einfachen Anleitung kannst du loslegen.</p>



<p class="wp-block-paragraph"><strong>1. Grundlagen lernen</strong></p>



<p class="wp-block-paragraph">Um eigene Widgets zu erstellen, brauchst du Basiskenntnisse in <strong>HTML</strong>, <strong>CSS</strong> und <strong>JavaScript</strong>. Plattformen wie <strong>Codecademy</strong> oder <strong>freeCodeCamp</strong> bieten dafür kostenlose Tutorials.</p>



<p class="wp-block-paragraph"><strong>2. HTML-Datei erstellen</strong></p>



<p class="wp-block-paragraph">Beginne mit einer einfachen HTML-Datei, die als Struktur für dein Widget dient. Ein Beispiel für ein einfaches Uhr-Widget könnte so aussehen (<a href="https://www.thebricks.com/resources/how-to-make-notion-widgets-a-step-by-step-guide">Quelle</a>):</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p class="has-vivid-red-color has-text-color has-link-color wp-elements-1 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;html&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-2 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;body&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-3 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;div id="clock"&gt;&lt;/div&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-4 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;script&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-5 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>function updateClock() {</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-6 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>const now = new Date();</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-7 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>const time = now.toLocaleTimeString();</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-8 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>document.getElementById('clock').innerText = time;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-9 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>}</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-10 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>setInterval(updateClock, 1000);</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-11 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>updateClock();</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-12 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;/script&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-13 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;/body&gt;</code></p>



<p class="has-vivid-red-color has-text-color has-link-color wp-elements-14 wp-block-paragraph" style="font-style:normal;font-weight:500"><code>&lt;/html&gt;</code></p>
</div></div>



<p class="wp-block-paragraph">Dieses Beispiel aktualisiert die Uhrzeit jede Sekunde und zeigt sie im Widget an.</p>



<p class="wp-block-paragraph"><strong>3. Widget online hosten</strong></p>



<p class="wp-block-paragraph">Damit du dein Widget in Notion einbetten kannst, musst du es online hosten. Nutze kostenlose Dienste wie <strong>GitHub Pages</strong> oder <strong>Netlify</strong>, um dein Projekt zu veröffentlichen.</p>



<ol class="wp-block-list">
<li>Lade deine HTML-Datei hoch.</li>



<li>Erstelle eine öffentliche URL für dein Widget.</li>
</ol>



<p class="wp-block-paragraph"><strong>4. Widget in Notion einbetten</strong></p>



<ol class="wp-block-list">
<li>Kopiere die URL deines gehosteten Widgets.</li>



<li>Gehe in Notion auf die Seite, auf der du das Widget nutzen möchtest.</li>



<li>Füge ein <strong>Embed</strong>-Block hinzu und füge die URL ein.</li>
</ol>



<p class="wp-block-paragraph"><strong>Warum eigene Widgets?</strong></p>



<p class="wp-block-paragraph">Eigene Widgets bieten dir volle Kontrolle über Design und Funktionalität. Du passt sie genau an deine Anforderungen an und machst deine Notion-Seiten noch individueller und nützlicher. Mit ein wenig Übung kannst du Funktionen hinzufügen, die es so in fertigen Widgets nicht gibt.</p>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
