{"id":3614,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-image-widget\/"},"modified":"2023-07-24T10:15:09","modified_gmt":"2023-07-24T10:15:09","slug":"bilde","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/landingsside\/lage\/bilde\/","title":{"rendered":"Landingssidens Bilde-widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p><strong>Bilde-<\/strong> widgeten hjelper deg \u00e5 legge til bilder p\u00e5 landingssiden din.<\/p>\n<p>Ved \u00e5 bruke denne widgeten kan du:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Hyperlinke bildet til en ekstern nettside.<\/li>\n<li>Som en avansert funksjon kan du ogs\u00e5 legge til forskjellige bilder for nett og mobil for samme kampanje. Ved \u00e5 gj\u00f8re det kan du utforme forskjellige seeropplevelser for folk som \u00e5pner kampanjene p\u00e5 mobile enheter i forhold til de som \u00e5pner kampanjen p\u00e5 nettet.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Hvordan bruke en bildewidget p\u00e5 en landingsside?<\/h2>\n<h2><\/h2>\n<h3>Trinn 1<\/h3>\n<h3>Naviger til landingssidebyggeren<\/h3>\n<p>Bruk <strong>hovedmenyen<\/strong> til venstre for \u00e5 opprette en <strong>landingsside<\/strong> og deretter <a href=\"\/hc\/nb_NO\/landingsside\/lage\/opprett-ny\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigere til landingssidebyggeren<\/a> .<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Trinn 2<\/h3>\n<h3>Legg et bilde widget til destinasjonssiden<\/h3>\n<p>Det tomme omr\u00e5det til venstre er <strong>arbeidsomr\u00e5det<\/strong> der du designer landingssiden din, og omr\u00e5det til h\u00f8yre er verkt\u00f8yomr\u00e5det der alle tilgjengelige designelementer vises som <a href=\"\/hc\/nb_NO\/landingsside\/lage\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<p>For \u00e5 legge til et bilde til destinasjonssiden, dra og slipp <strong>bilde widgeten<\/strong> til <strong>arbeidsomr\u00e5det<\/strong> <em>(som markert i skjermbildet nedenfor).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1772 size-full\" title=\"Landing page image widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingsside-bilde-widget.png\" alt=\"Landingssidebygger. Bildemodulen er uthevet\" width=\"521\" height=\"743\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Trinn 3<\/h3>\n<h3>Last opp det n\u00f8dvendige bildet ved \u00e5 bruke bildeinnstillingene<\/h3>\n<p>N\u00e5r du slipper widgeten inn i arbeidsomr\u00e5det, vil widget-<strong><strong>innstillinger<\/strong><\/strong>vises til h\u00f8yre<strong style=\"box-sizing: border-box; font-weight: bold; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">&nbsp;<\/strong><em style=\"box-sizing: border-box; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; font-style: italic; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">(som fremhevet i skjermbildet nedenfor)<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1774\" title=\"Landing page image settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingsside-bildeinnstillinger.png\" alt=\"Landingssidebyggerens bilde-widget. Innstillinger-fanen er uthevet\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Her har du muligheten til \u00e5 velge forskjellige bilder for nett- og mobilvisninger av denne kampanjen.<\/p>\n<p><strong>I skjermbildet ovenfor:<\/strong><\/p>\n<p><strong>3.1 Bildegalleri<\/strong> &#8211; Bruk dette omr\u00e5det til \u00e5 spesifisere bildet du vil vise n\u00e5r kampanjen vises p\u00e5 en nettenhet.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1775 size-full\" title=\"Landing page image gallery\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingsside-bildegalleri.png\" alt=\"Bildewidget for landingsside, velg bilde\" width=\"555\" height=\"282\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<p><strong>3.2 Velg spesifikt bilde for mobilvisning (valgfritt)<\/strong> &#8211; Bruk dette omr\u00e5det til \u00e5 spesifisere bildet du vil vise n\u00e5r kampanjen vises p\u00e5 en mobilenhet.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1776 size-full\" title=\"Landing page image select\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/velg-bilde-galleri.png\" alt=\"Bildewidget for landingsside, velg mobilspesifikk bildefunksjon\" width=\"557\" height=\"252\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>For begge disse omr\u00e5dene:<\/strong><\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Bruk knappen <strong>Velg bilde<\/strong>&nbsp;for \u00e5 laste opp det n\u00f8dvendige bildet; og<\/li>\n<li>Bruk feltet <strong>Angi bildeviderekobling<\/strong> for \u00e5 spesifisere den eksterne URL-adressen du vil omdirigere klikkene p\u00e5 dette bildet til.<\/li>\n<\/ul>\n<blockquote class=\"elevio-box-info\"><p><strong>Merk<\/strong> : Denne funksjonen for \u00e5 velge forskjellige bilder er valgfri. Hvis du \u00f8nsker \u00e5 vise det samme bildet p\u00e5 alle visningsenheter, bruk kun innstillingene under bildegallerioverskriften.<\/p><\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Trinn 4<\/h3>\n<h3>Stil bildet ditt i henhold til dine designpreferanser<\/h3>\n<p>Du kan redigere utseendet til bildet ditt ved \u00e5 bruke alternativene som er tilgjengelige under <strong>Stil-<\/strong>fanen <em>(som uthevet i skjermbildet nedenfor).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1777\" title=\"Landing page image style tab\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/bilde-galleri-styling.png\" alt=\"Landingssidebyggerens bilde-widget. Stilfanen er uthevet\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>Her er de forskjellige designalternativene som er tilgjengelige:<\/strong><\/p>\n<h4>4.1 Fontinnstillinger og bakgrunnsfarge for bilde<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Kantst\u00f8rrelse og farge for<\/strong> \u00e5 endre fargen p\u00e5 bildekanten (bruk den p\u00e5f\u00f8lgende st\u00f8rrelseslinjen for \u00e5 justere tykkelsen p\u00e5 rammen)<\/li>\n<li><strong>Kantstil for<\/strong> \u00e5 endre typen bildekant \u2013 hel, prikkete osv.,<\/li>\n<li><strong>Avrundede hj\u00f8rner<\/strong> \u2013 st\u00f8rrelseslinje for \u00e5 legge til avrundede hj\u00f8rner til bildet.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Bildeinnstilling<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Bredde<\/strong>&nbsp;for \u00e5 justere bredden p\u00e5 knappen<\/li>\n<li><strong>Widget-posisjon for<\/strong> \u00e5 endre justeringen av bildet i designet<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Kant til kant avmerkingsboks<\/h4>\n<p>Merk av&nbsp;<strong>Kant-til-kant for<\/strong> \u00e5 tilpasse bildet til bredden p\u00e5 arbeidsomr\u00e5det.<\/p>\n<p>Klikk <strong>Lagre,<\/strong> og det er det!<\/p>\n<p>Du har lagt til et bilde p\u00e5 landingssiden din!<\/p>\n<p>La oss fortsette og se p\u00e5 hvordan du legger til en kombinasjon av et bilde og en tekst p\u00e5 en landingsside ved \u00e5 bruke <a href=\"\/hc\/nb_NO\/landingsside\/lage\/bilde-tekst\/\" target=\"_blank\" rel=\"noopener noreferrer\">bilde + tekst-widgeten<\/a> !<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Bildewidgeten hjelper deg \u00e5 legge til bilder p\u00e5 landingssiden din. Du kan ogs\u00e5 legge til forskjellige bilder for nettvisningene og mobilvisningene for samme kampanje.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[279],"ht-kb-tag":[],"class_list":["post-3614","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder-nb_no"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb\/3614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/comments?post=3614"}],"version-history":[{"count":9,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb\/3614\/revisions"}],"predecessor-version":[{"id":10717,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb\/3614\/revisions\/10717"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/media?parent=3614"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb-category?post=3614"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb-tag?post=3614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}