{"id":128999,"date":"2019-01-02T17:56:00","date_gmt":"2019-01-02T16:56:00","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/pinned-elements\/"},"modified":"2025-02-13T18:48:58","modified_gmt":"2025-02-13T17:48:58","slug":"pinned-elements","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/angepinnte-elemente","title":{"rendered":"Angepinnte Elemente"},"content":{"rendered":"<p>Elemente k\u00f6nnen an der gleichen Position auf dem Bildschirm bleiben, wenn der Benutzer nach oben oder unten scrollt. Dies wird Pinning genannt, und Sie k\u00f6nnen damit Parallax-Effekte mit schwebenden Beschriftungen, zentrierten Inhalten, klebenden Kopfzeilen und vielem mehr erzeugen. <video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/pinned-element.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/pinned-element.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/pinned-element.png\" alt=\"Angepinnte Elemente\">Angepinnte Elemente<\/source><\/video><\/p>\n<h3>Zum Anheften eines Elements:<\/h3>\n<ol>\n<li>W\u00e4hlen Sie das Element Ihrer Wahl aus, gehen Sie zur Eigenschaften-Palette und klicken Sie auf die Stecknadel im oberen rechten Bereich der Palette. Dadurch werden die Parameter &#8218;X&#8216; und &#8218;Y&#8216; editierbar. <\/li>\n<li>W\u00e4hlen Sie aus der Dropdown-Liste die Art der Anheftungsposition, die Sie f\u00fcr das Element w\u00fcnschen. Sie k\u00f6nnen einen Rand in Pixel von der angehefteten Position hinzuf\u00fcgen, wenn Sie einen gewissen Abstand von der angehefteten Position haben m\u00f6chten. <\/li>\n<\/ol>\n<h3>Optionen f\u00fcr Stiftpositionen<\/h3>\n<p>Im Folgenden finden Sie die Optionen zum Anheften eines Elements. Die Optionen X und Y k\u00f6nnen kombiniert werden, so dass Sie ein Element oben und links anheften k\u00f6nnen. <\/p>\n<h4>X-Achse<\/h4>\n<ol>\n<li><strong>Nicht angeheftet (Standard):<\/strong> Das Element wird nicht angeheftet; es wird nicht mit dem Bildschirm verschoben.<\/li>\n<li><strong>Links anheften:<\/strong> Das Element wird am linken Rand des Bildschirms angeheftet.<\/li>\n<li><strong>Mitte anheften:<\/strong> das Element wird in der Mitte des Bildschirms angeheftet<\/li>\n<li><strong>Rechts anheften:<\/strong> Das Element wird am rechten Rand des Bildschirms angeheftet.<\/li>\n<\/ol>\n<h4>Y-Achse<\/h4>\n<ol>\n<li><strong>Nicht angeheftet (Standard):<\/strong> Das Element wird nicht angeheftet; es wird nicht mit dem Bildschirm verschoben.<\/li>\n<li><strong>Oben anheften:<\/strong> das Element wird am oberen Rand des Bildschirms angeheftet<\/li>\n<li><strong>Mitte anheften:<\/strong> das Element wird in der Mitte des Bildschirms angeheftet<\/li>\n<li><strong>Unten anheften:<\/strong> das Element wird am unteren Rand des Bildschirms angeheftet<\/li>\n<\/ol>\n<h3>Wie man mehrere Elemente anheftet<\/h3>\n<p>Gruppen k\u00f6nnen nicht angeheftet werden, nur einzelne Elemente. Als Alternative zum Anheften von Gruppen k\u00f6nnen Sie Elemente in einem dynamischen Panel gruppieren und das Panel anheften. So k\u00f6nnen Sie z. B. ein Navigationsmen\u00fc erstellen, das beim Bl\u00e4ttern am oberen Rand der Seite verbleibt:  <\/p>\n<ol>\n<li>Ziehen Sie vier Textelemente auf die Leinwand und geben Sie ihnen Titel, als ob es sich um verschiedene Abschnitte Ihrer Website handeln w\u00fcrde.<\/li>\n<li>W\u00e4hlen Sie alle aus und klicken Sie dann mit der rechten Maustaste, wenn Sie mit dem Mauszeiger \u00fcber einem Element stehen, und gehen Sie zu Gruppieren &#8211; Gruppieren im dynamischen Fenster.<\/li>\n<li>Ordnen Sie sie in der gew\u00fcnschten Reihenfolge an und gehen Sie dann zur Palette Eigenschaften und klicken Sie auf die Pin-Nadel. Setzen Sie dann das Dropdown-Men\u00fc Y auf &#8218;Oben anheften&#8216;. <\/li>\n<li>F\u00fcgen Sie dann dem Bildschirm Inhalte hinzu, so dass Sie eine lange Seite erstellen. Simulieren Sie und das Ergebnis sollte dem folgenden Bild \u00e4hnlich sein <\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15103\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/09\/pin-multiple-elements.png\" alt=\"Abgeheftetes Element\" width=\"755\" height=\"500\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elemente k\u00f6nnen an der gleichen Position auf dem Bildschirm bleiben, wenn der Benutzer nach oben oder unten scrollt. Dies wird Pinning genannt, und Sie k\u00f6nnen damit&#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,8555],"tags":[],"class_list":["post-128999","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\/128999"}],"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=128999"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128999\/revisions"}],"predecessor-version":[{"id":129226,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128999\/revisions\/129226"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=128999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=128999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=128999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}