{"id":1866,"date":"2019-05-25T14:10:08","date_gmt":"2019-05-25T14:10:08","guid":{"rendered":"https:\/\/blog.tchop.io\/?p=1866"},"modified":"2024-08-19T06:53:14","modified_gmt":"2024-08-19T06:53:14","slug":"die-neuen-teaser-templates-und-wie-man-damit-den-eigenen-news-feed-noch-interessanter-macht","status":"publish","type":"post","link":"https:\/\/blog.tchop.io\/de\/die-neuen-teaser-templates-und-wie-man-damit-den-eigenen-news-feed-noch-interessanter-macht\/","title":{"rendered":"Die neuen Teaser-Templates &#8211; den eigenen Newsfeed noch interessanter gestalten!"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"807\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/space-corp.png\" loading=\"lazy\" alt=\"iPhone mit gro\u00dfen Nachrichten-Teaser, der Alexander Gerst zeigt\" class=\"wp-image-1867\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/space-corp.png 974w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/space-corp-800x663.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/space-corp-300x249.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/space-corp-768x636.png 768w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><figcaption>Big Image Teaser verleiht Ihren Inhalten &#8222;Kraft&#8220; und macht Eindruck<\/figcaption><\/figure>\n\n\n\n<p>Erfolgreiche mobile Content-Angebote leben heute vor allem von einem spannenden, aktuellen <a href=\"https:\/\/blog.tchop.io\/de\/10-entwicklungen-nachrichtenjournalismus-2026\/\">News<\/a> Feed. Dieser muss dem Nutzer relevante Inhalte und interessante Informationen auf visuell ansprechende Art und Weise pr\u00e4sentieren. Ein wesentlicher Faktor dabei ist der Rhythmus aus Gleichf\u00f6rmigkeit und Abwechslung. Die Inhalte m\u00fcssen beim Scrollen schnell und effizient erfassbar sein, aber dennoch gilt es redaktionelle Inhalte auch abwechslungsreich und spannend zu pr\u00e4sentieren. Schliesslich erh\u00f6ht dies die Wahrscheinlichkeit das Nutzer das Angebot regelm\u00e4\u00dfig und intensiv nutzen. <\/p>\n\n\n\n<p>tchop bietet bereits unterschiedliche Templates f\u00fcr die Darstellung der verschiedenen Inhaltstypen. Aus einer Mischung an nativen Inhalten wie Videos, Audio-Streams, Text-Posts, Social Media Posts oder auch Links zu interessanten Inhalten ergibt sich schnell ein spannender Mix f\u00fcr den Nutzer. Dennoch dachten wir uns: besonders die Teaser f\u00fcr Artikel und Links aller Art haben noch mehr Potenzial. <\/p>\n\n\n\n<p>Deswegen gibt es ab jetzt die M\u00f6glichkeit neben der Standard-Darstellung zwischen drei Optionen zu w\u00e4hlen. Und die Darstellung der eigenen Inhalte so noch hochwertiger zu gestaltet.   <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Big Image Teaser<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-1024x768.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1871\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-1024x768.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-768x576.jpg 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big-1100x825.jpg 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/image-big.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Empfehlenswert ist dieser Teaser vor allem dann, wenn Sie das Bild mit seinem <a href=\"https:\/\/blog.tchop.io\/de\/wie-baut-man-eine-loyale-digitale-community-auf\/\">Inhalt<\/a> hervorheben wollen. Geeignet sind dabei besonders Bilder mit mindestens einem quadratischen Format, noch besser mit einem Hochformat. Denn die Headline &#8222;im Bild&#8220; bedeckt den unteren Teil des Bildes (siehe Beispiel). Achten Sie daher darauf, dass die wichtigen Bildelemente eher in der oberen H\u00e4lfte des Motivs zu finden sind.<\/p>\n\n\n\n<p>Der Intro-Text des Teaser wird in diesem Template aus Platzgr\u00fcnden nicht dargestellt. Daher ist es um so wichtiger, dass die Headline aussagekr\u00e4ftig genug ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Small Image Teaser (mit Intro-Text)<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-1024x768.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1874\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-1024x768.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-768x576.jpg 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text-1100x825.jpg 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-with-text.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Dieser Teaser legt den Fokus auf den Text, weniger auf das Bild<\/figcaption><\/figure>\n\n\n\n<p>Oftmals liegt kein hochwertiges oder ausreichend hoch aufgel\u00f6stes Bildmotiv f\u00fcr den Teaser vor. Dann bietet sich die Verwendung eines kleinen Teaser an. Dieser stellt das Teaser-Bild kleiner auf der rechten oberen Seite als Quadrat (siehe oben) dar. Ein entscheidender Vorteil dieser Variante: es es lassen sich mehr Inhalte auf der gleichen Fl\u00e4che pr\u00e4sentieren, d.h. der Nutzer muss weniger Scrollen. <\/p>\n\n\n\n<p>Dieses Format ist ein bei praktisch allen gro\u00dfen News-Angeboten g\u00e4ngiges und erprobtes Format. Im Gegensatz zu dem Teaser mit gro\u00dfem Bild oben, legt es mehr Fokus auf Headline und Text. Es eignet sich vor allem f\u00fcr Standard-Nachrichten im News Feed. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Small Image Teaser (ohne Intro-Text)<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-1024x768.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1885\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-1024x768.jpg 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-800x600.jpg 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-300x225.jpg 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-768x576.jpg 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text-1100x825.jpg 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/small-without-text.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Image Teaser ohne Text schaffen mehr &#8222;Dichte&#8220; und sparen Platz<\/figcaption><\/figure>\n\n\n\n<p>Die kleinen Teaser gibt es zudem als Variante ohne Intro-Text. Damit sparen Sie nochmal Platz und bekommen wie in dem Beispiel zu sehen drei Teaser auf einem iPhone X Screen unter. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Einfache Einstellung im Edit-Modus<\/h3>\n\n\n\n<p>F\u00fcr jeden Artikel- bzw. Link-Teaser mit Bild l\u00e4sst sich eine der oben beschriebenen Darstellungsformen ganz einfach ausw\u00e4hlen &#8211; entweder direkt bei der Erstellung der Karte oder jederzeit sp\u00e4ter im Edit-Modus. Voraussetzung ist bei all diesen Varianten, dass ein Bild vorliegt. Die Einstellung erfolgt dementsprechend in der grauen Box in der Mitte. Nach dem Speichern der Karte wird eine \u00c4nderung sofort wirksam.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-1024x650.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-1877\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-1024x650.png 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-800x508.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-300x190.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-768x488.png 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/05\/Demo-1-1100x698.png 1100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ausblick: automatische Verwendung von Templates<\/h3>\n\n\n\n<p>Die M\u00f6glichkeit die Darstellung jedes Teasers manuell zu bestimmen er\u00f6ffnet viele M\u00f6glichkeiten und geht spielend leicht. Mindestens ebenso spannend ist es jedoch die Zuweisung der Teaser-Varianten zu automatisieren &#8211; so dass die Redaktion damit keinerlei Aufwand mehr hat.<\/p>\n\n\n\n<p>Daf\u00fcr gibt es eine einfache und sehr effiziente L\u00f6sung: im oberen Bereich der Mix-Spalte rechts kann ein Teaser-Design ausgew\u00e4hlt werden. Alle Artikel-Dieser dieses Mixes mit Bild (das ist notwendig) nutzen dann dieses voreingestellte Design.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/08\/image.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2045\" width=\"580\" height=\"400\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/08\/image.png 710w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/08\/image-300x207.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p>Abwechslung und Rhythmus lassen sich so einfach &#8222;feinjustieren&#8220; ohne dass dadurch ein manueller Mehraufwand entsteht. Es ergibt sich ein visuell hochprofessionelles Angebot, welches aus Sicht des Anbieters gleichzeitig hochflexibel und effizient ist. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Erfolgreiche mobile Content-Angebote leben heute vor allem von einem spannenden, aktuellen News Feed. Dieser muss dem Nutzer relevante Inhalte und interessante Informationen auf visuell ansprechende&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1868,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,64,177],"tags":[],"coauthors":[134],"class_list":["post-1866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beste-praktiken","category-tchop-apps-de","category-tchop-verwenden"],"_links":{"self":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/comments?post=1866"}],"version-history":[{"count":22,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1866\/revisions"}],"predecessor-version":[{"id":2858,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1866\/revisions\/2858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media\/1868"}],"wp:attachment":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media?parent=1866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/categories?post=1866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/tags?post=1866"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/coauthors?post=1866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}