{"id":128996,"date":"2019-01-02T18:00:51","date_gmt":"2019-01-02T17:00:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-basic-responsive-prototype\/"},"modified":"2025-02-13T18:47:13","modified_gmt":"2025-02-13T17:47:13","slug":"create-a-basic-responsive-prototype","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/erstellen-einen-einfachen-responsiven-prototyp","title":{"rendered":"Erstellen Sie einen einfachen responsiven Prototyp"},"content":{"rendered":"

In dieser \u00dcbung erstellen wir einen einfachen responsiven Prototyp mit angehefteten Elementen und prozentualer H\u00f6he und Breite.
\n

    \n
  1. Erstellen Sie einen neuen Web-Prototyp. Ziehen Sie zwei Rechteck-Widgets auf den Canvas und platzieren Sie eines am oberen und eines am unteren Rand des Bildschirms. Diese werden als Kopf- und Fu\u00dfzeile des Prototyps dienen. <\/li>\n
  2. W\u00e4hlen Sie die Kopfzeile Rechteck. Schauen Sie in der Palette Eigenschaften in den Abschnitt Hintergrund. Laden Sie ein Bild f\u00fcr den Hintergrund des Rechtecks hoch und w\u00e4hlen Sie in der Dropdown-Liste die Option ‚Cover‘. Alternativ k\u00f6nnen Sie anstelle eines Bildes auch eine Farbe f\u00fcr den Hintergrund des Rechtecks w\u00e4hlen. \"Bild<\/li>\n
  3. Wenn das Rechteck immer noch ausgew\u00e4hlt ist und Sie sich in der Palette Eigenschaften befinden, sehen Sie sich den Abschnitt Gr\u00f6\u00dfe an. \u00c4ndern Sie f\u00fcr die Breite die Dropdown-Liste ‚px‘ in ‚%‘ und setzen Sie die Breite auf 100. Das Rechteck nimmt nun immer 100 % der Breite des Bildschirms ein. \"100<\/li>\n
  4. Ziehen Sie ein Text-Widget in die N\u00e4he des oberen Teils des Kopfzeilen-Rechtecks. Es wird als Titel des Website-Prototyps dienen. Schauen Sie in der Palette Eigenschaften in den Abschnitt Position. Markieren Sie das K\u00e4stchen „Optionen f\u00fcr die Anheftungsposition anzeigen“ und \u00e4ndern Sie in den erscheinenden Dropdowns den Parameter ‚X‘ in „Anheftung zentrieren“. Lassen Sie den Parameter ‚Y‘ unver\u00e4ndert. Der Titel Text wird nun immer in der Mitte des Bildschirms angezeigt. \"Titel<\/li>\n
  5. Sehen Sie sich das Rechteck in der Fu\u00dfzeile an und \u00e4ndern Sie seine Breite auf 100%.<\/li>\n
  6. Wenn die Fu\u00dfzeile Rechteck noch immer ausgew\u00e4hlt ist und Sie sich in der Palette Eigenschaften befinden, sehen Sie sich den Abschnitt Position an und \u00e4ndern Sie den Parameter ‚Y‘ in „Pin to bottom“. Lassen Sie den Parameter ‚X‘ unver\u00e4ndert. Die Fu\u00dfzeile wird nun immer am unteren Rand des Bildschirms angezeigt. \"Befestigen<\/li>\n
  7. Ziehen Sie in der N\u00e4he der Fu\u00dfzeile zwei Text-Widgets und ein Bild-Widget. \u00c4ndern Sie ein Text-Widget so, dass es in der Mitte und am unteren Rand mit einem Rand von 100 px angeheftet wird. \u00c4ndern Sie das andere Text-Widget so, dass es ebenfalls in der Mitte und mit einem Rand von 72 px am unteren Rand angeheftet wird, und \u00e4ndern Sie schlie\u00dflich das Bild-Widget so, dass es in der Mitte und mit einem Rand von 41 px am unteren Rand angeheftet wird. \"Text<\/li>\n
  8. Ziehen Sie ein Schaltfl\u00e4chen-Widget auf den Canvas. Gestalten Sie es so, wie Sie es w\u00fcnschen, und \u00e4ndern Sie seine Breite auf 40%. Befestigen Sie es in der Mitte und am unteren Rand mit einem Rand von 260px. Die Schaltfl\u00e4che wird nun immer in der Mitte des Bildschirms angezeigt und nimmt immer 40% der Breite des Bildschirms ein. \"Knopf<\/li>\n
  9. Ziehen Sie ein Text-Widget und ein Rechteck-Widget auf die obere rechte Seite des Canvas. Beschriften Sie den Text mit „Anmelden“ und das Rechteck mit „Sign up“. \u00c4ndern Sie den Hintergrund des Rechtecks so, dass er transparent ist, und \u00e4ndern Sie den Rand so, dass er abgerundet ist. \"Rahmen<\/li>\n
  10. W\u00e4hlen Sie den Text aus und heften Sie ihn rechts mit einem Rand von 130 px an. W\u00e4hlen Sie das Rechteck aus und heften Sie es mit einem Rand von 30 px an die rechte Seite. \"Schaltfl\u00e4che<\/li>\n
  11. Ziehen Sie ein Dynamic Panel Widget auf die Leinwand. \u00c4ndern Sie im Abschnitt „Layout“ der Palette Eigenschaften das Layout auf Vertikal und \u00e4ndern Sie die Auff\u00fcllung „Oben“ auf 40 Pixel. Nun wird ein gewisser Abstand zwischen dem oberen Rand des Panels und dem Inhalt des Panels vorhanden sein. \"Ausrichtung<\/li>\n
  12. Wenn das Panel immer noch ausgew\u00e4hlt ist, pinnen Sie es in der Mitte an und \u00e4ndern Sie seine Breite auf 90% und seine H\u00f6he auf 48%.\"Pinnwand<\/li>\n
  13. Doppelklicken Sie auf das Panel und ziehen Sie ein Text-Widget in das Panel. \u00c4ndern Sie seine Breite auf 77%. Der Text nimmt nun 77% der Breite des Panels ein, und das Panel selbst nimmt 90% der Bildschirmbreite ein. \"Absatzbreite<\/li>\n<\/ol>\n

    Klicken Sie auf „Simulieren“ und \u00e4ndern Sie die Breite des Simulationsbrowsers. Ihr Prototyp wird die Elemente automatisch so anpassen, dass sie auf die Breite des Browsers reagieren. <\/p>\n

    Hinweis:<\/strong> Die Simulationseinstellungen m\u00fcssen so eingestellt sein, dass sie sich auf die Breite des Browsers ausdehnen. Sie k\u00f6nnen dies in den Simulationseinstellungen oder im Simulationsfenster festlegen. <\/div>\n

    \"Einstellung
    \nSie k\u00f6nnen unser Beispiel hier herunterladen.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    In dieser \u00dcbung erstellen wir einen einfachen responsiven Prototyp mit angehefteten Elementen und prozentualer H\u00f6he und Breite. Reaktionsf\u00e4hige Prototypen Erstellen Sie einen neuen Web-Prototyp. Ziehen Sie…<\/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,8555],"tags":[],"class_list":["post-128996","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-reaktionsfaehiges-prototyping"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128996"}],"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=128996"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128996\/revisions"}],"predecessor-version":[{"id":129224,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128996\/revisions\/129224"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=128996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=128996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=128996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}