{"id":818,"date":"2025-03-20T14:37:45","date_gmt":"2025-03-20T14:37:45","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/einfuegen-eines-bildes-im-website-designer\/"},"modified":"2025-06-27T09:39:14","modified_gmt":"2025-06-27T09:39:14","slug":"einfuegen-eines-bildes-im-website-designer","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/de\/knowledge-base\/einfuegen-eines-bildes-im-website-designer\/","title":{"rendered":"Einf\u00fcgen eines Bildes im Website-Designer"},"content":{"rendered":"\n<p>Sie k\u00f6nnen Bilder sowohl als Hintergrundbilder als auch als Elemente auf Ihrer Website hinzuf\u00fcgen. Auf diese Weise k\u00f6nnen Sie Ihre Website visuell ansprechender gestalten und den Besuchern einen st\u00e4rkeren Eindruck geben. <\/p>\n\n\n\n<p>Denken Sie daran, dass die Ansicht der Website auf kleineren Ger\u00e4ten wie Tablets und Smartphones dazu f\u00fchrt, dass Hintergrundbilder entsprechend der Ger\u00e4tegr\u00f6\u00dfe zugeschnitten werden, w\u00e4hrend Bilder als Elemente entsprechend der Ger\u00e4tegr\u00f6\u00dfe skaliert werden. Daher eignen sich Bilder, die abstrakt oder landschaftlich sind, am besten als Hintergrund. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bild als Hintergrund einf\u00fcgen<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf <strong>Website <\/strong>klicken.<\/li>\n\n\n\n<li>Auf <strong>Design und Aktivierung <\/strong>klicken.<\/li>\n\n\n\n<li>Auf <strong>Website-Designer \u00f6ffnen <\/strong>klicken.<\/li>\n\n\n\n<li>Auf das Symbol <strong>Einstellungen<\/strong> in der linken Seitenleiste klicken.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147-1024x462.png\" alt=\"\" class=\"wp-image-1926\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147-1024x462.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147-300x135.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147-768x346.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-147.png 1031w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Unter <strong>Einstellungen<\/strong> und <strong>Hintergrund<\/strong> k\u00f6nnen Sie entweder eine Hintergrundfarbe oder ein Bild hinzuf\u00fcgen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf <strong>Bild w\u00e4hlen<\/strong> klicken.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148-1024x467.png\" alt=\"\" class=\"wp-image-1930\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148-1024x467.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148-768x351.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-148.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Falls Sie Ihr Bild noch nicht in das Medienarchiv hochgeladen haben, auf <strong>Dateien hochladen <\/strong>klicken.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf <strong>Dateien zum Hochladen ausw\u00e4hlen oder Dateien hierher ziehen<\/strong> klicken.<\/li>\n\n\n\n<li>Das Bild in Ihrem Datei-Explorer ausw\u00e4hlen.<\/li>\n\n\n\n<li>Auf <strong>Hochladen<\/strong> klicken.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"478\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149-1024x478.png\" alt=\"\" class=\"wp-image-1934\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149-1024x478.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149-300x140.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149-768x359.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-149.png 1139w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Jetzt befindet sich Ihr Bild im Medienarchiv und kann bei anderen Gelegenheiten wiederverwendet werden.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf das Bild im Medienarchiv klicken, sodass es einen gr\u00fcnen Umriss erh\u00e4lt.<\/li>\n\n\n\n<li>Auf <strong>Ausf\u00fchren<\/strong> klicken.<\/li>\n<\/ul>\n\n\n\n<p>In der linken Seitenleiste k\u00f6nnen Sie nun anpassen, ob das Bild die Breite ausf\u00fcllen oder in der Breite begrenzt werden soll. Wenn die Bildgr\u00f6\u00dfe klein ist, k\u00f6nnen Sie hier auch ausw\u00e4hlen, wie es wiederholt werden soll. Speichern Sie Ihre Fortschritte.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"517\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-150.png\" alt=\"\" class=\"wp-image-1938\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-150.png 272w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-150-158x300.png 158w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-150-26x50.png 26w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bild als Hintergrund in einem Bereich einf\u00fcgen<\/h3>\n\n\n\n<p>Falls Sie nur ein Bild als Hintergrund in einem einzelnen Bereich verwenden m\u00f6chten, haben Sie auch diese M\u00f6glichkeit.<br>Folgen Sie den gleichen Schritten wie oben, aber wenn Sie im Website-Designer sind, w\u00e4hlen Sie nun die Sektion aus, in der Sie das Bild einf\u00fcgen m\u00f6chten. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf den gew\u00fcnschten Bereich klicken.<\/li>\n\n\n\n<li>In der rechten Seitenleiste haben Sie nun die Werkzeugkiste <strong>Bereich<\/strong>.<\/li>\n\n\n\n<li>Men\u00fc f\u00fcr <strong>Hintergrund<\/strong> ausklappen.<\/li>\n\n\n\n<li>Auf <strong>Bild w\u00e4hlen <\/strong>klicken.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151-1024x465.png\" alt=\"\" class=\"wp-image-1942\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151-1024x465.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151-300x136.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151-768x349.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-151.png 1043w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dann folgen Sie den gleichen Schritten wie oben, w\u00e4hlen das Bild im Medienarchiv und passen es an den Bereich an.<br>Speichern Sie Ihre Fortschritte. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bild als Element einf\u00fcgen<\/h3>\n\n\n\n<p>Sie k\u00f6nnen auch ein Bild als Element im Mittelteil oder Fu\u00dfzeile Ihrer Website einf\u00fcgen. Bilder k\u00f6nnen auch in Spalten eingef\u00fcgt werden, wenn Sie z.B. eine Anordnung mit Bildern und Text nebeneinander w\u00fcnschen. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In den <strong>Website-Designer<\/strong> gehen und auf der Seite stehen, auf der Sie Ihr Bild einf\u00fcgen m\u00f6chten.<\/li>\n\n\n\n<li>Auf das Symbol<strong> Elemente<\/strong> in der linken Seitenleiste klicken.<\/li>\n\n\n\n<li><strong>Bild<\/strong> unter Medien finden.<\/li>\n\n\n\n<li>Element auf die Seite ziehen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152-1024x468.png\" alt=\"\" class=\"wp-image-1946\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152-1024x468.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152-768x351.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-152.png 1045w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Das Element kann nur in den gestrichelten Rechtecken platziert werden.<\/p>\n\n\n\n<p>Wenn Sie das Element mit dem Cursor halten und auf die Seite ziehen, k\u00f6nnen Sie an dem Cursor sehen, ob Sie das Element korrekt platzieren. Wenn der Cursor rot ist, bedeutet dies, dass Sie kein gestricheltes Rechteck getroffen haben.<br>Wenn Sie das Element in einem gestrichelten Rechteck loslassen, erscheint ein durchgestrichenes Kamera-Symbol. Dies ist ein Platzhalter, in den wir nun das eigentliche Bild einf\u00fcgen m\u00fcssen.   <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auf das Element<strong> Bild <\/strong>klicken, das ein Kamera-Symbol ist.<\/li>\n\n\n\n<li>In der rechten Seitenleiste haben Sie die Werkzeugkiste f\u00fcr das <strong>Bild<\/strong>.<\/li>\n\n\n\n<li>Auf <strong>Bild w\u00e4hlen<\/strong> unter <strong>Layout<\/strong> klicken.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1013\" height=\"460\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-153.png\" alt=\"\" class=\"wp-image-1950\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-153.png 1013w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-153-300x136.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-153-768x349.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-153-50x23.png 50w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/figure>\n\n\n\n<p>Falls Sie Ihr Bild noch nicht in das Medienarchiv hochgeladen haben, folgen Sie der Anleitung weiter oben.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Das gew\u00fcnschte Bild ausw\u00e4hlen, sodass es einen gr\u00fcnen Umriss hat.<\/li>\n\n\n\n<li>Auf <strong>Ausf\u00fchren<\/strong> klicken.<\/li>\n<\/ul>\n\n\n\n<p>Sie k\u00f6nnen die Breite und H\u00f6he des Bildes in der Werkzeugkiste in der rechten Seitenleiste sowie die Seitenr\u00e4nder zwischen dem Bildelement und anderen Elementen auf der Seite anpassen.<br>Speichern Sie Ihre Fortschritte. <\/p>\n\n\n\n<div class=\"author-box\" style=\"display: flex; align-items: center; gap: 20px; padding: 30px 0; font-family: 'Titillium Web', sans-serif; margin-top: 50px; border: none;\"> \n  <img decoding=\"async\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/04\/image-5.png\" alt=\"Gu\u00f0ri\u00f0 Simonsen\" style=\"width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 12px rgba(24, 90, 188, 0.5);\">\n  <div style=\"display: flex; flex-direction: column; justify-content: center;\">\n    <div style=\"font-size: 20px; font-weight: 700; color: #185ABC; margin: 0;\">Gu\u00f0ri\u00f0 Simonsen<\/div>\n    <div style=\"font-size: 14px; color: #555; margin: 0;\">Ver\u00f6ffentlicht: 01.06.2025<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sie k\u00f6nnen Bilder sowohl als Hintergrundbilder als auch als Elemente auf Ihrer Website hinzuf\u00fcgen. Auf diese Weise k\u00f6nnen Sie Ihre Website visuell ansprechender gestalten und den Besuchern einen st\u00e4rkeren Eindruck geben. Denken Sie daran, dass die Ansicht der Website auf kleineren Ger\u00e4ten wie Tablets und Smartphones dazu f\u00fchrt, dass Hintergrundbilder entsprechend der Ger\u00e4tegr\u00f6\u00dfe zugeschnitten werden, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/de\/knowledge-base\/einfuegen-eines-bildes-im-website-designer\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eEinf\u00fcgen eines Bildes im Website-Designer\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[226],"ht-kb-tag":[1646,1641,1647,1640,188,1642,1644,1473,1648,2583,1645,884,1643,205],"class_list":["post-818","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-supportartikel","ht_kb_tag-abschnittshintergrund","ht_kb_tag-bild-einfuegen","ht_kb_tag-bild-upload","ht_kb_tag-bildelement","ht_kb_tag-conference-manager-de","ht_kb_tag-hintergrundbild","ht_kb_tag-layout-2","ht_kb_tag-medienbibliothek","ht_kb_tag-responsives-design","ht_kb_tag-responsives-design-de","ht_kb_tag-visuelles-design","ht_kb_tag-website-designer-2","ht_kb_tag-website-anpassung","ht_kb_tag-website-designer-de","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/comments?post=818"}],"version-history":[{"count":4,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/818\/revisions"}],"predecessor-version":[{"id":6506,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb\/818\/revisions\/6506"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/media?parent=818"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-category?post=818"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}