{"id":129055,"date":"2018-03-08T15:31:34","date_gmt":"2018-03-08T14:31:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/templates-and-masters\/"},"modified":"2025-02-13T17:51:30","modified_gmt":"2025-02-13T16:51:30","slug":"templates-and-masters","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/vorlagen-master","title":{"rendered":"Vorlagen und Master"},"content":{"rendered":"<p>Mit Vorlagen und Mastern k\u00f6nnen Sie globale Layouts und Stile f\u00fcr viele Bildschirme in Ihren Prototypen definieren.<\/p>\n<h2><a id=\"templates\"><\/a>Vorlagen<\/h2>\n<p>Vorlagen sind n\u00fctzlich, um Bildschirmraster zu erstellen und Standarddesigns f\u00fcr Elemente festzulegen.<\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862690\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h3>Ein Bildschirmlayout designen<\/h3>\n<p>Mit einem Bildschirmraster k\u00f6nnen Sie die Formatierung und die Abst\u00e4nde in Ihrem Prototyp konsistent halten. Das Hinzuf\u00fcgen eines Rasters ist einfach: <\/p>\n<ol>\n<li>Gehen Sie zur Palette Vorlagen und w\u00e4hlen Sie &#8222;Vorlage 1&#8220;, wodurch sich eine leere Leinwand \u00f6ffnet. Wenn Sie die Vorlagenpalette nicht sehen, vergewissern Sie sich, dass sie im Men\u00fc Fenster sichtbar ist. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42930\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/Templates-Palette.png\" alt=\"Anzeigen der Palette Vorlagen im Men\u00fc Fenster\" width=\"1458\" height=\"824\"><\/li>\n<li>Bewegen Sie den Mauszeiger \u00fcber die Lineale auf dem Canvas und klicken Sie, wenn Sie eine Layout-Hilfe platzieren m\u00f6chten. Sie k\u00f6nnen auf eine bereits platzierte Hilfslinie klicken und ziehen, um ihre Position zu verschieben. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.png\" alt=\"Leitf\u00e4den hinzuf\u00fcgen\"><br \/>\nLeitf\u00e4den hinzuf\u00fcgen<\/source><\/video><\/li>\n<li>Gehen Sie zu einem Bildschirm in Ihrem Prototyp zur\u00fcck und achten Sie darauf, wie die von Ihnen angelegten Hilfslinien reflektiert werden. Sie werden diese Hilfslinien auf jedem Bildschirm sehen, den Sie mit dieser Vorlage erstellen. <\/li>\n<\/ol>\n<p>Als N\u00e4chstes beginnen Sie mit dem Aufbau des Inhalts des Layouts. Verwenden Sie Elemente und Widgets, um g\u00e4ngige Designs zu erstellen, die Sie voraussichtlich h\u00e4ufig verwenden werden, wie z.B. Kopfzeilen und Navigations-Sidebars.<\/p>\n<p>Sie k\u00f6nnen sogar Ereignisse wie <strong>Links<\/strong> und <strong>Mouse-Over-Effekte<\/strong> zu Elementen innerhalb der Vorlage hinzuf\u00fcgen, die dann auf allen Bildschirmen funktionieren, die diese Vorlage verwenden.<\/p>\n<p>Wenn Sie zu einem Bildschirm in Ihrem Prototyp zur\u00fcckkehren, sehen Sie den Inhalt, den Sie soeben auf dem Canvas hinzugef\u00fcgt haben. Der Inhalt der Vorlage wird eingef\u00e4rbt, damit Sie wissen, dass er aus einer Vorlage stammt. Sie k\u00f6nnen die F\u00e4rbung im Men\u00fc Ansicht deaktivieren.  <\/p>\n<h3>Erstellen und Zuweisen einer neuen Vorlage<\/h3>\n<p>Sie k\u00f6nnen eine neue leere Vorlage zu Ihrem Prototyp hinzuf\u00fcgen, indem Sie auf die Schaltfl\u00e4che &#8218;+&#8216; in der Palette Vorlagen klicken.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42932\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/AddnewTemplate.png\" alt=\"Klicken Sie auf die Plus-Schaltfl\u00e4che, um eine neue Vorlage zu erstellen\" width=\"1062\" height=\"684\"><br \/>\nNachdem Sie eine neue Vorlage erstellt haben, k\u00f6nnen Sie sie einem Bildschirm in Ihrem Prototyp zuweisen:<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/change-template.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" change-template.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/change-template.png\" alt=\"Vorlage \u00e4ndern\"><br \/>\nVorlage \u00e4ndern<\/video><\/p>\n<ol>\n<li>W\u00e4hlen Sie einen Bildschirm, auf dem Sie die Vorlage verwenden m\u00f6chten.<\/li>\n<li>Klicken Sie auf den Namen des Bildschirms in der Ebenenpalette oder doppelklicken Sie auf den Canvas, um den Bildschirm auszuw\u00e4hlen.<\/li>\n<li>Sehen Sie sich die Palette Eigenschaften an und \u00e4ndern Sie die Vorlage in der Dropdown-Liste &#8218;Vorlage&#8216;.<\/li>\n<\/ol>\n<h3>Definieren Sie Standard-Elementstile<\/h3>\n<p>Sie k\u00f6nnen auch grundlegende Widget-Eigenschaften wie Gr\u00f6\u00dfe, Farbgebung und Schriftarten in einer Vorlage festlegen:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42861\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/Edit-Template-Element-Styling.png\" alt=\"Standard-Elementstile bearbeiten\" width=\"2058\" height=\"1163\"><\/p>\n<ol>\n<li>Klicken Sie mit der rechten Maustaste auf eine Vorlage in der Vorlagenpalette und w\u00e4hlen Sie &#8218;Vorlagenstil bearbeiten&#8216;.<\/li>\n<li>W\u00e4hlen Sie Elemente aus der Popup-Liste aus und passen Sie deren Aussehen an.<\/li>\n<\/ol>\n<p>Nun werden alle neuen Elemente, die Sie auf der Vorlage platzieren, und alle Bildschirme, die diese Vorlage verwenden, die von Ihnen festgelegten Stile anzeigen.<\/p>\n<h2><a id=\"masters\"><\/a>Masters<\/h2>\n<p>Master sind Elemente oder Gruppen von Elementen, die Sie in Ihrem Prototyp wiederverwenden k\u00f6nnen. Sie sind n\u00fctzlich f\u00fcr die Erstellung von Basisdesigns, die Sie h\u00e4ufig verwenden m\u00f6chten, wie CTA-Schaltfl\u00e4chen, Texte und Dropdowns. <\/p>\n<p>Alle \u00c4nderungen, die Sie an einer Vorlage vornehmen, werden in jeder Instanz dieser Vorlage, die Sie in Ihrem Prototyp verwenden, \u00fcbernommen. Im Gegensatz zu Vorlagen k\u00f6nnen Sie viele verschiedene Vorlagen auf einem Bildschirm verwenden. <\/p>\n<h3>Einen Master erstellen<\/h3>\n<p>Das Hinzuf\u00fcgen einer neuen Vorlage zu Ihrem Prototyp ist ganz einfach:<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742188835\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Gehen Sie zur Palette Master und klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216;, um einen neuen Master zu erstellen. Wenn Sie die Masters-Palette nicht sehen, vergewissern Sie sich, dass sie im Men\u00fc Fenster sichtbar ist. <\/li>\n<li>Beachten Sie, dass Sie keine leere wei\u00dfe Leinwand sehen, auf der Sie designen k\u00f6nnen, wie es bei einer Vorlage der Fall ist. Da Vorlagen unabh\u00e4ngig von einem Bildschirm sind, haben sie keinen regul\u00e4ren Hintergrund wie Bildschirme und Vorlagen. Stattdessen k\u00f6nnen Sie Elemente einfach per Drag &amp; Drop auf die transparente Leinwand ziehen. Wie bei Vorlagen k\u00f6nnen Sie den Elementen in einer Vorlage Ereignisse hinzuf\u00fcgen.   <\/li>\n<\/ol>\n<h3>Einen Master bearbeiten<\/h3>\n<p>Um einen Master zu bearbeiten oder zu \u00e4ndern, klicken Sie ihn in der Masters-Palette an, oder doppelklicken Sie auf die Master-Instanz auf einem Bildschirm, um sie zur Bearbeitung zu \u00f6ffnen.<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742188894\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Denken Sie daran, dass alle \u00c4nderungen, die Sie an einem Master vornehmen, auf alle seine Instanzen im gesamten Prototyp angewendet werden.<\/p>\n<p>Wenn Sie einen Master nur f\u00fcr einen bestimmten Bildschirm bearbeiten m\u00f6chten, klicken Sie mit der rechten Maustaste auf die Master-Instanz auf dem Canvas und w\u00e4hlen Sie &#8218;Vom Master l\u00f6sen&#8216;. Die Elemente des Masters auf diesem Bildschirm werden in einem Dynamic Panel-Container gruppiert, den Sie nach Belieben \u00f6ffnen und bearbeiten k\u00f6nnen. <\/p>\n<div><strong>Hinweis:<\/strong> Wenn Sie einen Master l\u00f6schen, l\u00f6schen Sie auch alle seine Instanzen auf allen Bildschirmen. Sie k\u00f6nnen jedoch eine Master-Instanz aus einem Bildschirm oder einer Vorlage l\u00f6schen, ohne dass sich dies auf die \u00fcbrigen Instanzen auswirkt. <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mit Vorlagen und Mastern k\u00f6nnen Sie globale Layouts und Stile f\u00fcr viele Bildschirme in Ihren Prototypen definieren. Vorlagen Vorlagen sind n\u00fctzlich, um Bildschirmraster zu erstellen und&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8560],"tags":[],"class_list":["post-129055","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-erste-schritte"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129055"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129055"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129055\/revisions"}],"predecessor-version":[{"id":129203,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129055\/revisions\/129203"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}