{"id":910,"date":"2025-03-20T14:37:45","date_gmt":"2025-03-20T14:37:45","guid":{"rendered":"https:\/\/cmacademy.events\/knowledge-base\/satta-in-en-bild-i-website-designer\/"},"modified":"2025-05-13T10:17:01","modified_gmt":"2025-05-13T10:17:01","slug":"satta-in-en-bild-i-website-designer","status":"publish","type":"ht_kb","link":"https:\/\/cmacademy.events\/sv\/knowledge-base\/satta-in-en-bild-i-website-designer\/","title":{"rendered":"S\u00e4tta in en bild i Website Designer"},"content":{"rendered":"\n<p>Du kan l\u00e4gga till bilder b\u00e5de som bakgrundsbilder och som element p\u00e5 din webbplats. P\u00e5 detta s\u00e4ttet kan du g\u00f6ra din hemsida mer visuellt tilltalande och g\u00f6ra ett st\u00f6rre intryck p\u00e5 de bes\u00f6kande till din webbplats. <\/p>\n\n\n\n<p>Kom ih\u00e5g att visningen av hemsidan kan vara annorlunda p\u00e5 mindre enheter, som t.ex. tabletts eller mobiltelefoner. Bakgrundsbilder sk\u00e4rs ner i storlek beroende p\u00e5 enhetens storlek, men bilder som lagts in som element i st\u00e4llet skalas, s\u00e5 de alltid \u00e4r helt synliga. D\u00e4rf\u00f6r rekommenderar vi att endast v\u00e4lja bilder som bakgrund som \u00e4r abstrakta eller sceniska \u2013 allts\u00e5 bilder d\u00e4r det inte g\u00f6r n\u00e5got att de sk\u00e4rs p\u00e5 andra enheter. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">S\u00e4tt in bild som bakgrund<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>G\u00e5 till <strong>Webbplats<\/strong><\/li>\n\n\n\n<li>G\u00e5 till <strong>Design och aktivering<\/strong><\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>\u00d6ppna Website Designer<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"461\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1-1024x461.png\" alt=\"\" class=\"wp-image-2137\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1-1024x461.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1-300x135.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1-768x346.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-131-1.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 ikonen <strong>Inst\u00e4llningar <\/strong>i menyn i v\u00e4nster sida (kugghjulet)<\/li>\n<\/ul>\n\n\n\n<p>Under <strong>Bakgrund <\/strong>kan du nu l\u00e4gga till antigen en bakgrundsf\u00e4rg eller en bild.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 <strong>V\u00e4lj bild<\/strong> <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"463\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-132.png\" alt=\"\" class=\"wp-image-2141\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-132.png 1012w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-132-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-132-768x351.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-132-50x23.png 50w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/figure>\n\n\n\n<p>Om du inte redan laddat upp din bild till mediearkivet, klickar du p\u00e5 <strong>Ladda upp filer<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 <strong>V\u00e4lj filer f\u00f6r uppladdning eller dra filer hit<\/strong><\/li>\n\n\n\n<li>V\u00e4lj bilden bland dina filer<\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>Ladda upp<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1-1024x488.png\" alt=\"\" class=\"wp-image-2149\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1-1024x488.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1-300x143.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1-768x366.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1-50x24.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-135-2-1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Nu ligger din bild i mediearkivet och kan \u00e5teranv\u00e4ndas igen senare.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 bilden i mediearkivet s\u00e5 det f\u00e5r en gr\u00f6n kontur<\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>Utf\u00f6r<\/strong><\/li>\n<\/ul>\n\n\n\n<p>I menyn p\u00e5 h\u00f6ger sida kan du nu anpassa om bilden ska fylla hela bredden eller vara begr\u00e4nsad i bredd. Om bildens storlek \u00e4r f\u00f6r liten, och den repeterar sig, kan du h\u00e4r v\u00e4lja hur den repeterar sig. Kom ih\u00e5g att spara.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"518\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-134-1.png\" alt=\"\" class=\"wp-image-2153\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-134-1.png 278w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-134-1-161x300.png 161w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-134-1-27x50.png 27w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">S\u00e4tt in bild som bakgrund i en <strong>sektion<\/strong><\/h2>\n\n\n\n<p>Du har ocks\u00e5 m\u00f6jlighet att anv\u00e4nda en vild som bakgrund f\u00f6r en sektion. <br>Funktionen f\u00f6r detta \u00e4r mycket lik ovanst\u00e5ende, men h\u00e4r ska du i st\u00e4llet v\u00e4lja sektionen du vill ha bilden i f\u00f6rst: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 den \u00f6nskade sektionen<\/li>\n\n\n\n<li>Till h\u00f6ger kommer det nu upp en verktygsl\u00e5da kallad <strong>Sektion<\/strong><\/li>\n\n\n\n<li>Klicka p\u00e5 \u00f6verskriften <strong>Bakgrund <\/strong>i verktygsl\u00e5dan<\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>V\u00e4lj bild<\/strong><\/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-136-1-1024x468.png\" alt=\"\" class=\"wp-image-2157\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-136-1-1024x468.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-136-1-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-136-1-768x351.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-136-1-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-136-1.png 1087w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Efter\u00e5t f\u00f6ljer du samma steg som ovan n\u00e4r du v\u00e4ljer bilden i mediearkivet och anpassar bilden till sektionen. Kom ih\u00e5g att spara. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>S\u00e4tt in bild som element<\/strong><\/h2>\n\n\n\n<p>Du kan ocks\u00e5 infoga en bild som ett element i mittsektionen eller sidfoten p\u00e5 din webbplats. Bilder kan ocks\u00e5 ligga som del i kolumner om du t.ex. vill ha en upps\u00e4ttning med b\u00e5de bilder och text bredvid varandra. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>G\u00e5 in i <strong>Website Designer<\/strong> och ordna s\u00e5 du st\u00e5r p\u00e5 den sidan d\u00e4r bilden ska ligga<\/li>\n\n\n\n<li>Klicka p\u00e5 ikonen <strong>Element <\/strong>(pluset) i menyn till v\u00e4nster<\/li>\n\n\n\n<li>Hitta <strong>Bild <\/strong>under Medier<\/li>\n\n\n\n<li>Dra elementet in p\u00e5 sidan<\/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-137-1-1024x467.png\" alt=\"\" class=\"wp-image-2161\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-137-1-1024x467.png 1024w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-137-1-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-137-1-768x350.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-137-1-50x23.png 50w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-137-1.png 1027w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Elementet kan bara placeras i de randiga rektanglarna.<\/p>\n\n\n\n<p>N\u00e4r du h\u00e5ller i elementet med musen, och drar det in p\u00e5 sidan, kan du se p\u00e5 mark\u00f6ren om du placerar elementet p\u00e5 korrekt st\u00e4lle. Om din mark\u00f6r \u00e4r r\u00f6d betyder det att du inte h\u00e5ller musen \u00f6ver en randig rektangel, och att elementet d\u00e4rf\u00f6r inte kan ligga d\u00e4r. N\u00e4r du sl\u00e4pper elementet i en randig rektangel kommer du se en kamera med ett streck \u00f6ver. Detta \u00e4r en platsh\u00e5llare f\u00f6r bilden som inte \u00e4n har satts in.   <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klicka p\u00e5 <strong>kamerasymbolen<\/strong><\/li>\n\n\n\n<li>P\u00e5 h\u00f6ger sida ser du verktygsl\u00e5dan f\u00f6r <strong>Bild<\/strong><\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>V\u00e4lj bild<\/strong> under <strong>Layout<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"458\" src=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-138-1-1.png\" alt=\"\" class=\"wp-image-2169\" srcset=\"https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-138-1-1.png 1002w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-138-1-1-300x137.png 300w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-138-1-1-768x351.png 768w, https:\/\/cmacademy.events\/wp-content\/uploads\/2025\/03\/Group-138-1-1-50x23.png 50w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/figure>\n\n\n\n<p>Om du inte redan har laddat upp din bild till mediearkivet, f\u00f6lj stegen ovan. Annars:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>V\u00e4lj bilden du \u00f6nskar, s\u00e5 att den har en gr\u00f6n kontur<\/li>\n\n\n\n<li>Klicka p\u00e5 <strong>Utf\u00f6r<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Du kan justera bildens bredd och h\u00f6jd i verktygsl\u00e5dan i h\u00f6ger sida samt marginalerna mellan bildelementet och andra element p\u00e5 sidan. Kom ih\u00e5g att spara. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Du kan l\u00e4gga till bilder b\u00e5de som bakgrundsbilder och som element p\u00e5 din webbplats. P\u00e5 detta s\u00e4ttet kan du g\u00f6ra din hemsida mer visuellt tilltalande och g\u00f6ra ett st\u00f6rre intryck p\u00e5 de bes\u00f6kande till din webbplats. Kom ih\u00e5g att visningen av hemsidan kan vara annorlunda p\u00e5 mindre enheter, som t.ex. tabletts eller mobiltelefoner. Bakgrundsbilder sk\u00e4rs &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/cmacademy.events\/sv\/knowledge-base\/satta-in-en-bild-i-website-designer\/\" class=\"more-link\">Forts\u00e4tt l\u00e4sa<span class=\"screen-reader-text\"> \u201dS\u00e4tta in en bild i Website Designer\u201d<\/span><\/a><\/p>\n","protected":false},"author":6,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[437],"ht-kb-tag":[1662,1666,1659,1661,1022,538,1660,1665,1664,1482,2665,1663,477],"class_list":["post-910","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-artiklar-for-support","ht_kb_tag-anpassa-webbplats","ht_kb_tag-bakgrund-i-sektion","ht_kb_tag-bakgrundsbild","ht_kb_tag-bildelement-2","ht_kb_tag-blogg","ht_kb_tag-conference-manager-sv","ht_kb_tag-infoga-bild","ht_kb_tag-ladda-upp-bild","ht_kb_tag-layout-4","ht_kb_tag-mediebibliotek","ht_kb_tag-responsive-design-sv","ht_kb_tag-visuellt-design","ht_kb_tag-website-designer-sv","entry"],"_links":{"self":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/comments?post=910"}],"version-history":[{"count":3,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/910\/revisions"}],"predecessor-version":[{"id":2174,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb\/910\/revisions\/2174"}],"wp:attachment":[{"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/media?parent=910"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb-category?post=910"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/cmacademy.events\/sv\/wp-json\/wp\/v2\/ht-kb-tag?post=910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}