{"id":5291,"date":"2023-08-24T20:00:13","date_gmt":"2023-08-24T18:00:13","guid":{"rendered":"https:\/\/ekiwi.de\/?p=5291"},"modified":"2023-08-24T21:19:19","modified_gmt":"2023-08-24T19:19:19","slug":"magix-webdesigner-accordion-fuer-webseite","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/","title":{"rendered":"Magix Webdesigner: Accordion f\u00fcr Webseite"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/#Anleitungsvideo\" >Anleitungsvideo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/#Das_Script\" >Das Script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/#HEAD-_und_BODY-Code_einbinden\" >HEAD- und BODY-Code einbinden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/#Accordion_einbinden\" >Accordion einbinden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/5291\/magix-webdesigner-accordion-fuer-webseite\/#Fertig\" >Fertig!<\/a><\/li><\/ul><\/nav><\/div>\n<p>Ein Accordion in Magix Webdesigner, Xara Webdesigner einbauen, so geht es.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitungsvideo\"><\/span>Anleitungsvideo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/JqesJK_K5iY?si=70okqmZDhmM67IyH\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_Script\"><\/span>Das Script<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>OK, legen wir direkt los. Wir verwenden ein kleines fertiges Script, welches wir hier bei <a href=\"https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_accordion_symbol\">W3Schools finden<\/a>. Hier k\u00f6nnen wir es auch direkt im Browser anpassen und testen, bevor wir den Code \u00fcbernehmen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"HEAD-_und_BODY-Code_einbinden\"><\/span>HEAD- und BODY-Code einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Beginnen wir mit dem Einbinden des CSS- und Script-Codes vom Script. Hierzu rufen wir die Webeigenschaften auf.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_1.png\" alt=\"\" width=\"328\" height=\"126\" class=\"alignnone size-full wp-image-5292\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_1.png 328w, \/wp-content\/uploads\/2023\/08\/accordion_1-300x115.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<p>Im Reiter &#8222;Website&#8220; finden wir die beiden Buttons f\u00fcr den Body- und Head-Code. Wir beginnen mit dem Head-Code. Wir kopieren den markierten Teil des Scriptes, kopieren ihn und f\u00fcgen ihn wieder ein. In diesem Bereich k\u00f6nnen auch Anpassungen im Design vorgenommen werden. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_2.png\" alt=\"\" width=\"944\" height=\"653\" class=\"alignnone size-full wp-image-5294\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_2.png 944w, \/wp-content\/uploads\/2023\/08\/accordion_2-300x208.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_2-768x531.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/p>\n<p>Das Gleiche machen wir f\u00fcr den Body-Code, wir kopieren einfach alles mit dem Script. Im Gegensatz zum CSS-Code passen wir hier nix an.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_3.png\" alt=\"\" width=\"861\" height=\"412\" class=\"alignnone size-full wp-image-5296\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_3.png 861w, \/wp-content\/uploads\/2023\/08\/accordion_3-300x144.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_3-768x367.png 768w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Accordion_einbinden\"><\/span>Accordion einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nun binden wir das eigentliche Accordion ein, hierzu m\u00fcssen wir HTML-Code in die Webseite einbinden. Wir f\u00fcgen hierzu einen Platzhalter ein.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_4.png\" alt=\"\" width=\"969\" height=\"512\" class=\"alignnone size-full wp-image-5298\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_4.png 969w, \/wp-content\/uploads\/2023\/08\/accordion_4-300x159.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_4-768x406.png 768w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/p>\n<p>Anschlie\u00dfend bearbeiten wir die Eigenschaften des Platzhalters. Wir bearbeiten im Reiter &#8222;Platzhalter&#8220; den &#8222;HTML-Code (body)&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_5.png\" alt=\"\" width=\"999\" height=\"482\" class=\"alignnone size-full wp-image-5300\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_5.png 999w, \/wp-content\/uploads\/2023\/08\/accordion_5-300x145.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_5-768x371.png 768w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><\/p>\n<p>Hier f\u00fcgen wir nun den HTML-Code des Accordions ein. Texte und \u00dcberschriften passen wir an, neue Elemente lassen sich hier ebenfalls hinzuf\u00fcgen. Ich denke, ein kurzer Blick auf den HTML-Code zeigt, wie ein Element aufgebaut ist.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_6.png\" alt=\"\" width=\"815\" height=\"318\" class=\"alignnone size-full wp-image-5302\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_6.png 815w, \/wp-content\/uploads\/2023\/08\/accordion_6-300x117.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_6-768x300.png 768w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fertig\"><\/span>Fertig!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das wars auch schon, gehen wir nun in die Vorschau, wird unser Accordion angezeigt. Ggf. M\u00fcssen wir noch die Gr\u00f6\u00dfe des Platzhalters anpassen, damit alles dargestellt wird. Aber ansonsten sollte es direkt laufen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_7.png\" alt=\"\" width=\"869\" height=\"412\" class=\"alignnone size-full wp-image-5304\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_7.png 869w, \/wp-content\/uploads\/2023\/08\/accordion_7-300x142.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_7-768x364.png 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Ein Accordion in Magix Webdesigner, Xara Webdesigner einbauen, so geht es.<\/p>\n","protected":false},"author":1,"featured_media":61,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5,15],"tags":[288,1027],"class_list":["post-5291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","category-javascript","tag-magix","tag-xara"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=5291"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/5291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/61"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=5291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=5291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=5291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}