{"id":329303,"date":"2020-12-11T04:35:42","date_gmt":"2020-12-11T04:35:42","guid":{"rendered":"https:\/\/www.ezoic.com\/erstellen-einer-benutzerdefinierten-amp-story-fuer-wordpress-mit-photoshop-html-und-css\/"},"modified":"2021-07-26T20:51:44","modified_gmt":"2021-07-26T20:51:44","slug":"erstellen-einer-benutzerdefinierten-amp-story-fuer-wordpress-mit-photoshop-html-und-css","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/de-lang\/erstellen-einer-benutzerdefinierten-amp-story-fuer-wordpress-mit-photoshop-html-und-css\/","title":{"rendered":"Erstellen einer benutzerdefinierten AMP-Story f\u00fcr WordPress mit Photoshop, HTML und CSS"},"content":{"rendered":"

[et_pb_section bb_built=”1″ admin_label=”section” _builder_version=”3.22.3″][et_pb_row admin_label=”Reihe” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.22.7″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” header_font=”Oswald Light||||||||” text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ z_index_tablet=”500″]<\/p>\n

<\/span>Wie man eine benutzerdefinierte AMP-Story f\u00fcr WordPress erstellt <\/strong><\/span><\/h2>\n

“Stories” haben sich zum bevorzugten Weg f\u00fcr Nutzer sozialer Medien entwickelt, um Informationen anzuzeigen, mit ihnen zu interagieren und sie zu teilen. Im Jahr 2018 ver\u00f6ffentlichte TechCrunch einen Artikel, in dem es hie\u00df, dass die Stories zwischen Q2 2016 und Q3 2017 15 Mal schneller wuchsen<\/a> als die Feeds.<\/p>\n

Vorreiter der Story war Snapchat<\/a>, das im Oktober 2013 Stories einf\u00fchrte. Daraufhin ver\u00f6ffentlichte Instagram im August 2016 ihre Version der Stories, WhatsApp im Februar 2017 und Facebook Stories im M\u00e4rz 2017. Jetzt haben auch Unternehmen wie Medium, Skype und YouTube ihre eigenen Versionen von Stories.<\/p>\n

Im Februar 2018 k\u00fcndigte Google in seinem Entwickler-Blog an<\/a>, dass die neu ver\u00f6ffentlichten AMP-Stories eine “…Erg\u00e4nzung des AMP-Projekts sind, die Content-Publishern ein auf mobile Endger\u00e4te ausgerichtetes Format f\u00fcr die Bereitstellung von Nachrichten und Informationen als visuell reichhaltige, durchschlagende Stories bietet”.<\/p>\n

<\/p>\n

<\/span>Werden AMP-Stories in den Suchergebnissen erscheinen?<\/strong><\/span><\/h2>\n

AMP Stories funktionieren \u00e4hnlich wie die Stories vieler anderer Plattformen, konzentrieren sich aber weniger auf das Soziale als vielmehr auf das Informative. Sie tauchen bereits in einigen Suchergebnissen auf.<\/p>\n

Seit seiner Ver\u00f6ffentlichung haben Publisher es f\u00fcr die Erstellung von Stories f\u00fcr ihre Inhalte verwendet, indem sie Ausschnitte von Informationen auf einfache, interaktive Weise zur Verf\u00fcgung stellten. Zu einigen dieser Publisher geh\u00f6ren CNN und SB Nation, die das Story-Format verwenden, um schnelle, aber informative, visuell fokussierte Nachrichten zu liefern.<\/p>\n

\"Werden<\/p>\n

Der R\u00fcckgang des Story-Trends ist nirgends in Sicht, und daher ist es f\u00fcr Publisher, die relevant bleiben und ein breiteres Publikum erreichen wollen, wichtig, zu verstehen, wie Stories funktionieren, und sie m\u00f6glicherweise in ihre Publishing-Strategie zu implementieren.<\/p>\n

<\/span>Wie f\u00fcgt man eine AMP-Story zu einer Webseite hinzu?<\/strong><\/span><\/h2>\n

Zurzeit gibt es ein AMP Stories-Plugin f\u00fcr WordPress, mit dem Textfelder einfach per Drag & Drop verschoben, Bilder hochgeladen, \u00dcberg\u00e4nge bezeichnet und Elemente auf verschiedenen Seiten einer Story einfach angeordnet werden k\u00f6nnen. Das Plugin macht es zwar einfach, schnell eine Story zu erstellen, aber es schr\u00e4nkt die Vielseitigkeit Ihrer Story ein.<\/p>\n

\"Wie<\/p>\n

F\u00fcr diejenigen, die ein wenig mehr kreative Freiheit oder Kontrolle w\u00fcnschen, kann das AMP-Stories-Plugin eine Einschr\u00e4nkung darstellen. Gl\u00fccklicherweise k\u00f6nnen Sie mit ein wenig HTML-, CSS- und Photoshop-Kenntnissen Ihre eigene AMP-Story anpassen, indem Sie den von Google AMP bereitgestellten Code verwenden.<\/p>\n

Im Folgenden werde ich Ihnen zeigen, wie ich verschiedene Seiten in Photoshop erstellt und eine AMP-Story f\u00fcr Ezoic \u00fcber unsere Pubtelligence-Veranstaltung in New York individuell kodiert habe.<\/p>\n

\n

Sie k\u00f6nnen sich die vollst\u00e4ndige Story hier ansehen<\/a> oder sich das Video unten ansehen, um zu sehen, wie ich meinen Prozess Schritt f\u00fcr Schritt durchlaufe.<\/p>\n<\/blockquote>\n