Best of Notion Bild kleiner v2

Best of Notion

Hol dir mei­ne kosten­lo­sen Noti­on Res­sour­cen, wie den Noti­on Mini-Kurs, Noti­on Anlei­tun­gen, Vor­la­gen, Tricks zum Schnel­ler­wer­den sowie Tool-Tipps.

Noti­on Web­sei­te erstel­len – so geht’s

Noti­on Anlei­tung | Noti­on Updates. Lese­dau­er: 14 min.

Mit dem Notion-Release der neu­en Web­pu­bli­ka­ti­ons­funk­ti­on war es noch nie ein­fa­cher, eine Noti­on Web­sei­te erstel­len zu las­sen und umge­hend online zu stellen.

Du kennst viel­leicht bereits die Mög­lich­keit, jede Sei­te öffent­lich zu schal­ten. Aber jetzt kannst du das unter einer Notion-Domain oder eben unter einer eige­nen Domain tun.

In die­sem Arti­kel fas­se ich zusam­men, was alles mög­lich ist, und gebe dir eine Anlei­tung, um selbst eine Web­sei­te mit Noti­on zu publizieren.

Notion Webseite erstellen

Web­site mit Noti­on erstellen

Mit Noti­on erstellst du eine benut­zer­freund­li­che Web­site, die kei­ne Pro­gram­mier­kennt­nis­se benö­tigt. Nut­ze die viel­fäl­ti­gen Funk­tio­nen von Noti­on, um Inhal­te bereit­zu­stel­len und schnell als Web­sei­te zu ver­öf­fent­li­chen. Mit­tels Drag-and-Drop kannst du Blöcke orga­ni­sie­ren und dei­ne Web­site nach dei­nen Vor­stel­lun­gen gestalten.

Was ist neu?

  • Jede Notion-Seite kann zu einer Web­sei­te werden
  • Du wählst aus, unter wel­cher Domain (eine eige­ne oder eine von Notion)
  • Inte­gra­ti­on mit Goog­le Ana­ly­tics (ab Plus Plan)
  • Such­ma­schi­nen Inde­xie­rung, Umfang abhän­gig vom Noti­on Abomodell
  • Neue Preis­ge­stal­tung der Noti­on Abo­mo­del­le (sie­he Kapitel)

Vor- und Nachteile

  • Schnell und effi­zi­ent eine neue Web­sei­te veröffentlichen
  • Kosten­gün­sti­ge Web­sei­te unter eige­nem Domain
  • Kein Unter­halts­auf­wand, wie Plug­in Updates, Back­ups, Sei­ten­speed und Sicherheitspflege

 

  • Limi­tiert auf Noti­ons Design-Sprache (vor­erst)
  • Unschö­ne Link­pfa­de (vor­erst, ein Update wird dazu folgen
  • Eige­ne Domains sind nur ab dem Abo-Modell Plus mög­lich und kosten­pflich­tig (Noti­ons Preis­li­ste)
  • Kei­ne Inte­gra­ti­on mit Plug­ins (SEO, Coo­kie Con­sent, Pop-ups, etc.)

Bei­spie­le für Webseiten

  • Sales Pages für unter­schied­li­che Ziel­grup­pen (Klein­un­ter­neh­men, KMU)
  • Fir­men­web­sei­te
  • Fir­men­blog
  • Öffent­li­ches Firmen-Wiki
  • Event­sei­te oder Hochzeitsseite
  • Alter­na­ti­ve zu Link­tree oder in Kom­bi­na­ti­on mit einer NFC Visi­ten­kar­te
  • Port­fo­lio
  • Lebens­lauf
  • Über mich Sei­te mit Kontaktformular
  • Rei­se­tipps
  • Rei­se­blog

Dupli­zie­re die Web­sei­te Workspace Werk­statt um gleich eini­ge Bei­spie­le in dei­nem Workspace zu haben.

Wann soll­test du eine Noti­on Web­sei­te in Betracht ziehen?

Je tie­fer dei­ne tech­ni­schen Kennt­nis­se sind und je schnel­ler eine Web­sei­te online sein soll, umso mehr spricht es dafür, dei­ne Sei­te mit Noti­on zu betreiben.

Ich habe mir vor 10 Jah­ren Word­Press bei­gebracht und für Pro­jek­te wo es schnell gehen soll oder kurz­fri­sti­ge Ver­wen­dungs­zeit­räu­me, wer­de ich Noti­on Sites verwenden.

Auf jeden Fall wer­de ich mei­ne Social Media Landing Page, die ähn­lich funk­tio­niert wie zB. Link­tree, damit ablö­sen. Aktu­ell nut­ze ich dafür Tal­ly. Ein Vor­teil von Tal­ly ist, dass ich die Klicks pro But­ton sehe und die Dar­stel­lung etwas kom­pak­ter gestal­tet wer­den kann. Eine Notion-Seite hat immer den glei­chen Leer­raum über dem Seitentitel.

Anlei­tung: Web­sei­te mit Noti­on bauen

Team­space erstellen

Als erstes emp­feh­le ich dir, für dei­ne neue Web­sei­te einen Team­space anzu­le­gen. Dort kannst du dei­ne Live Web­sei­te hin­ter­le­gen und gleich­zei­tig eine “Sta­ging” Umge­bung füh­ren. Sta­ging bedeu­tet, dass du dort Inhal­te vor­schrei­ben kannst und auf einen pas­sen­den Zeit­punkt ein­fach auf die Live-Umgebung ziehst.

Nut­ze dafür den Sync-Block, um Inhal­te auf der Staging-Umgebung vor­zu­schrei­ben und bet­te den Block auf der Live-Umgebung ein.

Da die Staging-Umgebung nicht live ist, wirst nur du die­se Inhal­te sehen.

So kannst du ganz bequem neue Inhal­te und Lay­outs ent­wickeln und siehst gleich­zei­tig, wie es auf der Live Umge­bung aus­se­hen würde.

Wäh­le einen Domain

Den Stu­den­ten mei­nes Noti­on Alma­nach Kur­ses emp­feh­le ich in einer der ersten Lek­tio­nen, sich umge­hend einen Notion-Domain zu sichern. Wie “ech­te” Domains ist jeder nur ein­mal vorhanden.

Klicke auf Ein­stel­lun­gen / Web­sites und klicke auf Neue Domain. Wäh­le eine Bezeich­nung aus. Ich habe zum Bei­spiel nbcom.notion.site reserviert.

Du kannst auch einen eige­nen Domain, gegen Auf­preis, nut­zen und das Noti­on Bran­ding entfernen.

Fun Fact, ich fra­ge schon 2019 bei Noti­on ob wir Cus­tom Domains haben kön­nen, hier mein Tweet von damals:

Indi­vi­du­el­ler Domain verwenden

Wäh­rend du Inhal­te für dei­ne neue Web­sei­te erstellst, emp­feh­le ich dir dei­nen Domain im Domain-Directory dei­nes Domain-Registrars zu aktua­li­sie­ren. Das funk­tio­niert so wie wenn man einen Brief­ka­sten mit sei­nem Namen beschrif­tet. Der Regi­strar kennt die Beschrif­tung (MeineNotionSeite.de) und muss von dir wis­sen, wo sich das neue Post­fach (Ser­ver von Noti­on) befin­det, um Webseiten-Besucher an den rich­ti­gen Ort zu senden.

Je nach Regi­strar dau­ert das ein Weil­chen (bei mir waren es weni­ger als 60 Minu­ten), wes­halb ich das vor­zie­hen würde.

Domain-Mapping auf Noti­on vornehmen

Die­ser Pro­zess geht sehr einfach!

  1. Gehe auf Ein­stel­lun­gen / Web­sites / Neue Domain
  2. Wäh­le Indi­vi­du­el­le Domain aus

Für Notion Webseite neue Domain anlegen

Gib den Pfad dei­ner indi­vi­du­el­len Domain ein.

Wich­tig! Begin­ne mit einem WWW, ver­wen­de kein http:// oder https:// davor und set­ze kein /-Zeichen am Ende der Domain.

Sonst klappt es nicht.

Für Notion Webseite neue Domain anlegen

Aktua­li­sie­re die DNS Ein­trä­ge bei dei­nem Registrar.

Je nach Regi­strar sieht das anders aus, aber es sind nur zwei Ein­trä­ge anzupassen/einzutragen:

  • DNS Record
  • TXT Record

Für Notion Webseite neue Domain anlegen

Bei mei­nem Regi­strar sieht die Ober­flä­che so aus:

Für Notion Webseite neue Domain anlegen
Für Notion Webseite neue Domain anlegen

Veri­fi­zie­ren bestätigen

Sobald du die bei­den Ein­trä­ge vor­ge­nom­men hast, klickst du in Noti­on auf verifizieren.

Und Noti­on infor­miert dich, dass du eine E‑Mail erhältst, sobald die Domain ver­wen­det wer­den kann.

Bei mei­nen Tests erhielt ich kei­ne E‑Mail. Du kannst nach einer Stun­de schon mal aus­pro­bie­ren, ob der Domain nun erreich­bar ist.

Für Notion Webseite neue Domain anlegen

Domain-Verifizierung kon­trol­lie­ren

Kon­trol­lie­re zuerst den Sta­tus der Veri­fi­zie­rung. Gehe auf Ein­stel­lun­gen / Web­sites und checke den Status.

Sobald die­ser von Ausstehend zu Live (1) gewech­selt hat, kannst du dei­ne Home-Seite zuwei­sen (2).

Solan­ge der Sta­tus auf Ausstehend steht, kannst du noch kei­ne Notion-Seite zuweisen.

Du kannst für eine Kon­trol­le auch eine ande­re Dummy-Seite bei 2 zuwei­sen und nach­se­hen, wie die Sei­te unter der neu­en Domain erscheint.

Für Notion Webseite neue Domain anlegen

Geduld zahlt sich aus

Falls du unge­dul­dig wirst und auf Vali­die­ren klickst, star­test du den Pro­zess neu.

Es wird ein neu­er TXT Daten­satz erstellt und den von vor­hin wird ungültig.

Du musst dann den neu­en TXT Daten­satz wie­der­um beim Regi­strar hinterlegen.

Die Validieren-Option ist also kein Refresh, son­dern ein Neutstart!

Du kannst dir vor­stel­len, wes­halb ich das so genau weiss, hüstel…

Für Notion Webseite neue Domain anlegen

Noti­on Site gestalten

Star­te nun mit der Gestal­tung dei­ner neu­en Web­sei­te. Lege eine Top-Seite in dei­nem neu­en Team­space “Web­sites” an und behand­le die­se Sei­te wie dei­ne Home-Seite.

Füge Text und Bil­der hin­zu, spie­le mit der Sei­ten­brei­te und teste wel­che Schrift­art am besten passt.

Bei Bil­dern kannst du auch GIF hin­ter­le­gen oder auch mit Vide­os ergän­zen. In der Gestal­tung sind dir da kei­ne Gren­zen gesetzt.

Damit es visu­ell anspre­chend wirkt, ver­wen­de die glei­che Far­be im Cover-Bild, Icon und als Akzent­far­be im Text (Text­stel­len, Icons, far­bi­ge Absät­ze und Hervorhebungen).

Über­le­ge dir, wel­che Unter­sei­ten dei­ne Web­sei­te benö­tigt und lege inner­halb der Top-Seite an. Damit es visu­ell anspre­chend wirkt, orga­ni­sie­re dei­ne Unter­sei­ten in Spal­ten zum Fus­sen­de der Seite.

Check­li­ste für dei­ne neue Noti­on Site

  • Lege Unter­sei­ten inner­halb der Haupt­sei­te an. Ver­lin­ke auf sie in der Navi­ga­ti­ons­lei­ste oben rechts (Details wei­ter unten).
  • Ver­wen­de Her­vor­he­bungs­blöcke, um wich­ti­ge Inhal­te hervorzuheben
  • Stim­me Far­ben und Emo­jis auf­ein­an­der ab
  • Erstel­le einen Foo­ter der als Navi­ga­ti­on zu den ande­ren Sei­ten fungiert

Neue Sei­te veröffentlichen

Gehe wie gehabt oben rechts auf Teilen und wechs­le zum Tab Veröffentlichen. Die­ser zeigt dir eine Webseiten-Vorschau der aktu­el­len Sei­te an.

Klicke auf Ver­öf­fent­li­chen und die Webseiten-Vorschau weicht den Ein­stel­lun­gen für ver­öf­fent­lich­te Seiten.

Notion Seite als Webseite veröffentlichen
Best of Notion Bild kleiner v2

Best of Notion.

Hol dir die besten Noti­on Res­sour­cen für Anfän­ger
und Notion-Enthusiasten.

Klicke nun auf Seite individuell anpassen und es erscheint eine ganz neue Ansicht. Hier kannst du das Erschei­nungs­bild der Web­sei­te wei­ter festlegen:

  • Vor­schau tei­len (1)
    Ent­schei­de wel­ches Bild gezeigt wer­den soll, wenn du den Link auf dei­ne Web­sei­te auf sozia­len Medi­en teilst.
    Die­ses Bild kann ein ande­res sein als das ver­wen­de­te Cover-Bild.

  • The­ma (2)
    Ent­schei­de, ob die Web­sei­te stets hell oder dun­kel ist, oder sich der Zeit­zo­ne des Web­sei­ten­be­su­chers anpasst und die Web­sei­te je nach Tages­zeit hell oder dun­kel anzeigt

  • Favicon (3)
    Lege hier ein Icon für dei­ne Web­sei­te fest. Die­ses wird im Browser-Tab ange­zeigt und hilft Besu­chern dei­ne Web­sei­te schnel­ler zu erkennen.

  • Google-Analytics (5)
    Hin­ter­le­ge hier dei­nen Goog­le Ana­ly­tics Code. Wie man einen kosten­lo­sen Goog­le Ana­ly­tics Account anlegt, fin­dest du mit Googeln.

Notion Seite als Webseite veröffentlichen

Ein­stel­lun­gen für die Kopf­zei­le (4)

In der Welt der Web­sei­ten nennt man das den Hea­der. Schaut man sich den HTML Code einer Web­sei­te an, ste­hen im ober­sten Bereich die wich­tig­sten Infor­ma­tio­nen zur Seite.

Noti­on akti­viert stan­dard­mäs­sig alle Optio­nen (was ich nicht gut finde).

Deak­ti­vierst du ein­zel­ne Optio­nen, siehst du links auf der Vorschau-Seite gleich, was sich ändert. Spie­le mit den Optio­nen, um ein Gefühl dafür zu bekommen.

  1. Lege hier fest, ob dei­ne Web­sei­te eine Pfad­na­vi­ga­ti­on (Bread­crumb) haben soll. Die­ser erscheint oben links und lässt sich nicht anders­wo plat­zie­ren. Es gibt (noch) kei­ne Opti­on, dort ein Logo zu platzieren.

  2. Wenn du umfang­rei­che Sei­ten­in­hal­te hast, auch in Unter­sei­ten, dann akti­vie­re die Seitensuche.

  3. Wenn du möch­test, dass dei­ne Sei­te dupli­ziert wer­den kann, dann las­se die Opti­on aktiviert.

  4. Das Notion-Wasserzeichen (oben rechts) kannst du nur deak­ti­vie­ren, wenn du eine eige­ne Domain­adres­se ver­wen­dest (und dafür bezahlst).

  5. Wenn du Unter­sei­ten auf dei­ner Web­sei­te hast, dann füge die­se der Sei­ten­na­vi­ga­ti­on hin­zu. Die Sei­ten­na­vi­ga­ti­on erscheint oben rechts.

Notion Seite als Webseite veröffentlichen
Notion Seite als Webseite veröffentlichen
Best of Notion Bild kleiner v2

Best of Notion.

Hol dir die besten Noti­on Res­sour­cen für Anfän­ger
und Notion-Enthusiasten.

Dupli­zie­re mei­ne Beispielsseite

Zu Demon­stra­ti­ons­zwecken habe ich eine Bei­spiels­sei­te erstellt, die du dupli­zie­ren kannst. Gehe auf www.workspace-werkstatt.com (respek­ti­ve auf die Notion.Site, falls die Veri­fi­zie­rung noch nicht durch ist) und dupli­zie­re sie in dei­nen Workspace.

Bit­te ver­wen­de das GIF Bild nicht wei­ter – es ist Eigen­tum mei­ner Firma.

Auf was du sonst noch bei dei­ner neu­en Noti­on Web­sei­te ach­ten solltest

  • URL Pfa­de sehen nicht hübsch aus
    Aktu­ell wer­den die Sei­ten­be­zeich­nun­gen bei Noti­on Web­sei­ten mit indi­vi­du­el­ler Domain ange­zeigt. Sieht nicht schön aus… das haben wir Noti­on Ambassa­do­ren beim Testen gemel­det und dazu wird es einen Update geben
  • Dupli­zie­ren von Sei­ten ist schwe­rer zu deak­ti­vie­ren
    Die Dupli­ka­ti­ons­funk­ti­on von Notion-Seiten wird stan­dard­mäs­sig akti­viert, wenn man eine Sei­te ver­öf­fent­licht. Aus mei­ner Anwen­der­sicht fin­de ich das grund­sätz­lich nicht anwen­der­freund­lich. Mit der neu­en Pulika­ti­ons­mög­lich­keit, wurd die Dupli­ka­ti­ons­op­ti­on tie­fer in den Ein­stel­lun­gen ver­gra­ben. Man sieht nun nicht mehr auf einen Blick, dass eine Sei­te dupli­zier­bar ist. Ich hof­fe, dass sich dies noch bes­sert.
    Um die Dupli­ka­ti­ons­funk­ti­on zu deak­ti­vie­ren musst du im blau­en Bal­ken der ver­öf­fent­lich­ten Sei­te auf Webseiten-Einstellungen / Sei­te indi­vi­du­ell anpas­sen / Kopf­zei­le / Die Sei­te als Vor­la­ge dupli­zie­ren klicken – das sind 4 Klicks!
  • Nut­zung von Daten­ban­ken
    Wenn du auf dei­ner Noti­on Web­sei­te Daten­ban­ken ver­wen­dest dann wür­de ich fol­gen­de Ein­stel­lun­gen vor­neh­men:

     

    • Fil­ter und Sor­tie­rung festlegen
    • Daten­bank sperren
  • Wenn du mit @-Mention auf ande­re Sei­ten ver­weist, die­se aber nicht öffent­lich sind, wer­den sie Besu­cher mit Kein Zugriff ange­zeigt. Das kann ggf. Ver­wir­rung auslösen.

Ände­rung bei der Preis­ge­stal­tung der Abomodelle

Unab­hän­gig vom der neu­en Noti­on Site Funk­ti­on über­ar­bei­te­te Noti­on die Preis­ge­stal­tung sei­ner Abo­mo­del­le. Die­se Preis­ge­stal­tung ist unab­hän­gig von den Kosten eines eige­nes Domains für eine Web­sei­te – bei­de Ände­run­gen wur­den ein­fach gleich­zei­tig kom­mu­ni­ziert. Details fin­dest du hier.

Oft gestell­te Fragen

Wel­che Noti­on Blocks wer­den auf der Noti­on Web­sei­te unterstützt?

Alle!

Es gibt Anbie­ter wie Super.so, Fea­ther, Host­No­ti­on, Daft­Pa­ge, Sim­pleInk, etc. die nicht alle Notion-Blöcke unter­stüt­zen, dafür mehr Design-Optionen und bes­se­res SEO als Noti­on bieten.

Ver­lie­ren Notion-Webseiten Anbie­ter nun ihre Grundlage?

Nein, das sehe ich nicht kom­men. Anbie­ter wie Super.so, Fea­ther, Host­No­ti­on, Daft­Pa­ge, Sim­pleInk, wer­den spe­zi­fi­sche­re Funk­tio­nen anbie­ten und stets näher am Markt und Trends sein, als Noti­on selbst.

Mit der Mög­lich­keit Noti­on Web­sei­ten erstel­len zu las­sen, erschliesst sich für viel mehr Nut­zer die Mög­lich­keit einer Webseiten-Publikation direkt aus Noti­on. Bald wer­den Tester mehr wol­len und auf spe­zia­li­sier­te Anbie­ter, wie oben genannt, ausweichen.

Noti­on wird sei­ne Webseiten-Funktionen sicher noch erwei­tern, aber grund­sätz­lich gene­risch blei­ben, weil eine viel grös­se­re und brei­te­re Kun­den­ba­sis vor­han­den ist. Da decken sol­che Anbie­ter spe­zi­fi­sche­re Funk­tio­nen ab und wir wer­den bei ihnen sicher noch inter­es­san­te Anbin­dun­gen sehen (Web­shop, E‑Mail-Marketing, etc.).

Kann man auch Wid­gets auf Noti­on Web­sei­ten nutzen?

In mei­nen Tests habe ich Wid­gets von Anbie­tern wie App­ti­on aus­pro­biert und es funk­tio­niert! Du kannst damit Wet­ter­vor­her­sa­gen, Uhren, Kalen­der, Musik-Playlisten, etc. einbetten.

Was kostet eine Noti­on Webseite?

Ab dem Plus Plan kostet eine Noti­on Web­sei­te mit eige­nem Domain $8 oder $10 pro Monat, abhän­gig davon, ob du monat­lich oder jähr­lich zahlst.

Du bezahlst einer­seits den Preis des Plus Plan und zusätz­lich für eine eige­ne Domain.

Kosten­los ist nur mit der Noti­on eige­nen Domain mög­lich (deindomain**.notion.site**).

Wem das zu teu­er ist und eh nur eine Sei­te benö­tigt (ohne Unter­sei­te), dem kann ich Carrd.co emp­feh­len. Für $19 im Jahr kannst du eine Web­sei­te mit eige­ner Domain haben.

Kön­nen Sei­ten mit Pass­wort geschützt werden?

Lei­der nein. Wir Noti­on Ambassa­do­ren haben dies als Wunsch ein­ge­bracht und es ist z.Z nicht klar, ob und wann eine sol­che Zusatz­funk­ti­on kom­men wird.

Bie­tet Noti­on auch eine For­mu­lar­ein­ga­be an?

Nein, nicht dass mir das bewusst wäre. Ich ver­wen­de für alle For­mu­la­re Tal­ly und las­se neue Ein­trä­ge direkt in die ent­spre­chen­de Daten­bank übertragen.

Falls du das For­mu­lar und die Ziel­da­ten­bank auf einer öffent­li­chen Sei­te hast, dann erfas­se kei­ne Per­so­nen­da­ten. Ein­mal ein­ge­tra­gen sind sie öffent­lich und die ein­tra­gen­de Per­son kann nicht selbst den Ein­trag rück­gän­gig machen.

Kann Web­traf­fic mit ande­ren Tools gemes­sen wer­den als Goog­le Analytics?

Zur Zeit lei­der noch nicht. Toll wäre es, wenn man daten­schutz­freund­li­che Tools wie Fathom oder Plau­si­ble nut­zen könnte.

Sind ande­re Far­ben oder cus­tom CSS möglich?

Zur Zeit lei­der noch nicht.

Wo fin­de ich wei­te­re Hil­fe zu Noti­on Sites?

Schau dir den Hilfs­be­reich von Noti­on an, wie man Sei­ten publi­ziert und unter­hält.

War­um ich eine Noti­on Sei­te haben werde

Was für mich für eine Noti­on Sei­te spricht ist die Schnel­lig­keit, mit der Inhal­te online gestellt wer­den kön­nen. Abge­se­hen vom Schrei­ben die­ses Arti­kels, hat das Hoch­la­den und “hübsch” machen über eine Stun­de gedauert.

Da ich mei­ne Inhal­te, dank des Profi-Redaktionsplaners, schon in Noti­on schrei­be, wäre das ein ech­ter Zeitgewinn!

Und wie erwähnt, für kurz­fri­sti­ge Pro­jek­te wie für Events, Wett­be­wer­be und für alle Per­so­nen die wenig tech­ni­sche Vor­kennt­nis­se haben, ist eine Notion-Site das Richtige!

Mein näch­stes Noti­on Web­sei­ten Projekt

Ich neh­me mir mei­ne eng­lisch­spra­chi­ge Web­sei­te https://asynch.works/ und die Sei­te für den Noti­on Wed­ding Plan­ner als Pro­jekt vor! Wenn du eine Noti­on Web­sei­te rea­li­siert hast, dann lass es mich wissen.

Ich neh­me den Link ger­ne hier auf, damit ande­re von Sty­ling inspi­riert wer­den können.

Best of Notion Bild 200px breit

Best of Notion

Hol dir die besten Noti­on Res­sour­cen für Anfän­ger und Notion-Enthusiasten direkt in dei­ne Inbox.