{"id":650,"date":"2016-11-03T11:30:49","date_gmt":"2016-11-03T10:30:49","guid":{"rendered":"https:\/\/www.mynewsletter.rocks\/?page_id=650"},"modified":"2016-11-03T12:15:34","modified_gmt":"2016-11-03T11:15:34","slug":"newsletter-design-tutorial","status":"publish","type":"page","link":"http:\/\/mynewsletter.rocks\/en\/newsletter-design-tutorial\/","title":{"rendered":"Newsletter Design Tutorial"},"content":{"rendered":"\n\n\n
 <\/p>\n\n\n\n

\n<\/p>\n\n\n\n
\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
Newsletter Tutorial<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
\n\n\n\n
Tutorial #1: Der cobra Kunden Newsletter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Die cobra Computers‘ Brainware GmbH ausKonstanz ist Entwickler der preisgekr\u00f6nten CRM Software AddressPlus, CRM und CRM Pro. In diesem Tutorial zeigen wir, wie der cobra Kundennewsletter aufgebaut ist und wie man ein solches Design mit MyNewsletter.rocks realisiert<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Die Vorgabe<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Der Newsletter
\nsollte nicht nur in etwa, sondern genau so
\naussiehen wie hier:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\n
\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
Erstellung der Vorlage<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
Erstellen wir einen neuen Newsletter. Klicke hierf\u00fcr auf
\ndie Schaltfl\u00e4che „Neu“ in der Toolbar und w\u00e4hle
\naus den Systemvorlagen die Vorlage mit dem Namen
\n„Leer“.Das System l\u00e4dt eine leere Vorlage, die sozusagen ein
\nwei\u00dfes Blatt Papier auf einem grauen Hintergrund
\nabbildetet. Der Bildschirm sieht nun folgenderma\u00dfen aus:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
Oben gibt es das Abo-Verwaltungs-Element mit Optionen zum
\n\u00d6ffnen der Browserversion des Newsletters, unten ist ein
\nBeispieltext f\u00fcr ein Impressum eingef\u00fcgt. Beides brauchen
\nwir f\u00fcr den cobra Newsletter nicht.Um das Abo-Verwaltungs-Element zu entfernen, tu
\nfolgendes:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\n
\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
\n
\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Das
\nImpressums-Element ist einfacher zu entfernen:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\n
\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Kopfzeile, Banner und Men\u00fcleiste<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Sehen wir uns den oberen Teil des Newsletters an:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Ganz oben ist ein Text mit einem Hinweis auf die
\nBrowserversion des Newsletters. Darunter ist ein Banner,
\ngefolgt von 5 Men\u00fcpunkten, die nichts weiter sind als
\nLinks in einer Textbox, abgetrennt mit einem senkrechten
\nStrich.F\u00fcgen wir also die entsprechenden Elemente per Drag &
\nDrop in den Newsletter ein. Anschlie\u00dfend sieht der
\nBildschirm folgenderma\u00dfen aus:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Geben wir die
\nentsprechenden Text ein und ersetzen den Banner durch die
\ngew\u00fcnschte Bilddatei. Das Ergebnis sieht so aus:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Links f\u00fcgst Du folgenderma\u00dfen ein: Markiere den
\nText, klick auf „Link“ in der Toolbar und w\u00e4hle
\nHyperlink.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Der
\nLink wird in den Text eingef\u00fcgt. Wiederhole den Vorgang
\nmit den f\u00fcnf Men\u00fcpunkten unterhalb des Banners.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
Begr\u00fc\u00dfung<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Werfen wir als n\u00e4chstes einen Blick auf die Begr\u00fc\u00dfung.
\nSie ist folgenderma\u00dfen aufgebaut:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Ein
\nzweispaltiges Layout, links mit einem Text, rechts mit
\neinem Bild.F\u00fcge erst das zweispaltige Layout-Element ein und passe
\ndie Breite an:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
F\u00fcge ein Textelement in die linke und ein Bild in die
\nrechte Spalte ein…<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n
F\u00fcge den entsprechenden Text ein und lad das
\nentsprechende Bild hoch, und wir sind mit dem
\nBegr\u00fc\u00dfungstext fertig:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Das Inhaltsverzeichnis<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Unter dem Begr\u00fc\u00dfungstext befindet sich das
\nInhaltsverzeichnis, das dem werten Lesern einen \u00dcberblick
\n\u00fcber die Themen dieser Ausgabe des Newsletters gibt.Der Aufbau ist deutlich interessanter:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Genau wie oben besteht der Inhalt aus einem zweispaltigen
\nLayout. In jede der beiden Spalten kommt eine
\n\u00dcberschrifts-Element vom Typ H2 Heading (Schritt 1).In die linke Spalte setzen wir dann ein weiteres
\nzweispaltiges Layout (Schritt 2). Zum Schlu\u00df f\u00fcgen wir in
\njede der drei Spalten ein Text-Element hinzu (Schritt 3).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
M\u00f6glicherweise fragst Du Dich, warum wir nicht gleich
\neinfach ein dreispaltiges Layout verwenden.Der Grund ist ganz einfach: wir wollen, dass die linken
\nbeiden Spalten eine gemeinsame \u00dcberschrift haben.<\/p>\n

Im Moment sieht unsere Konstruktion dem gew\u00fcnschten
\nLayout noch nicht allzu \u00e4hnlich, aber das wird sich
\nschnell \u00e4ndern.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Definiere den Rahmen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Das
\nInhaltsverzeichnis ist (wie die weiteren Artikel auch)
\nvon einer blauen Umrandung umgeben. Die wollen wir
\nnat\u00fcrlich auch implementieren.Klicke daf\u00fcr auf eines der Elemente in dem Artikel und
\nw\u00e4hle dann aus der Element-Hierarchy auf der rechten
\nSeite des Editors das oberste zweispaltige Layout Element
\n(Schritt 1).<\/p>\n

Dann w\u00e4hle einen Rahmen, der 2px breit und
\n’solid‘ ist (Schritt 2).<\/p>\n

Um einen genauen Farbwert festzulegen, klick auf die
\nFarbe, w\u00e4hle ‚Eigene Farbe‘ und gibt dann den
\ngenauen Farbwert ein (Schritt 3 + 4).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Ergebnis: ein farbiger Rahmen! Aber so toll sieht es
\nimmer noch nicht aus.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\u00dcberschriften anpassen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Passen wir als n\u00e4chstes die \u00dcberschriften an. Klick das
\nH2 Element in der linken Spalte an. Nat\u00fcrlich k\u00f6nntest Du
\nauch den Text markieren, aber ehrlich: es ist viel besser
\nund einfacher, nur das Element auszuw\u00e4hlen und dann die
\nSchriftart f\u00fcr das ganze Element zu \u00e4ndern, als mit
\nmarkierten Texten zu arbeiten.Mach die \u00dcberschrift einfach Fett (Schritt 2) und \u00e4ndere
\ndie Textfarbe (Schritt 3).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Die \u00dcberschrift
\nsieht nun so aus:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Machen wir weiter mit der \u00dcberschrift in der rechten
\nSpalte. Klick auf hier einfach auf das Element (Schritt
\n1), zentriere die Schrift (2), mach sie ein wenig kleiner
\n(Schritt 3) und \u00e4ndere dann die Farbe von Hintergrund und
\nText (Schritt 4).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Geben wir dann noch in einem Anflug von \u00dcbermut die
\n\u00dcberschriften-Texte ein, sieht das Ergebnis so aus:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Auch den Inhalt kannst Du einfach so eintippen. Wenn das
\nInhaltsverzeichnis anschlie\u00dfend zu gro\u00df sein sollte,
\nkannst Du die H\u00f6he mit der Maus \u00e4ndern. Sollte es sich
\npartout nicht verkleinern lassen, schau nach, ob sich in
\nden Texten nicht vielleicht einige Leerzeilen verbergen.
\nL\u00f6sche sie, dann sollte auch das Ver\u00e4ndern der H\u00f6he kein
\nProblem mehr sein.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
\"Image\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n
\n
\n<\/p>\n\n\n\n
Lass uns faul sein<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n


\n<\/p>\n\n\n\n
Lorem Ipsum Dolor is a sample text that acts as a
\nplaceholder for your own text. Lorem Ipsum Dolor is a
\nsample text that acts as a placeholder for your own text.
\nLorem Ipsum Dolor is a sample text that acts as a
\nplaceholder for your own text. Lorem Ipsum Dolor is a
\nsample text that acts as a placeholder for your own text.
\nLorem Ipsum Dolor is a sample text that acts as a
\nplaceholder for your own text. Lorem Ipsum Dolor is a
\nsample text that acts as a placeholder for your own
\ntext.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>","protected":false},"excerpt":{"rendered":"

  Newsletter Tutorial Tutorial #1: Der cobra Kunden Newsletter Die cobra Computers‘ Brainware GmbH ausKonstanz ist Entwickler der preisgekr\u00f6nten CRM Software AddressPlus, CRM und CRM Pro. In diesem Tutorial zeigen wir, wie der cobra Kundennewsletter aufgebaut ist und wie man ein solches Design mit MyNewsletter.rocks realisiert Die Vorgabe Der Newsletter sollte nicht nur in etwa, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-650","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/pages\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":0,"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/pages\/650\/revisions"}],"wp:attachment":[{"href":"http:\/\/mynewsletter.rocks\/en\/wp-json\/wp\/v2\/media?parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}