{"id":3618,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-progress-bar-widget\/"},"modified":"2023-07-28T10:34:05","modified_gmt":"2023-07-28T10:34:05","slug":"fremdriftslinje","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/landingsside\/lage\/fremdriftslinje\/","title":{"rendered":"Landingssidens Fremdrift-widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p><strong>P<\/strong> <strong>rogress Bar<\/strong> widget hjelper du legge til en animert Progress Bar til destinasjonssiden.<\/p>\n<p>Fremdriftslinjen viser hvor mye arbeid en kunde allerede har lagt ned og hvor lite som gjenst\u00e5r for \u00e5 oppn\u00e5 det tiltenkte resultatet!<\/p>\n<blockquote class=\"elevio-box-success\"><p><strong>For eksempel<\/strong> kan en fremdriftslinje brukes til \u00e5 visuelt indikere antall vurderinger kunden m\u00e5 ta f\u00f8r han fullf\u00f8rer et kurs og f\u00e5r et sertifikat? Eller hvor mange trinn gjenst\u00e5r i en betalings-\/registreringsprosess?<\/p><\/blockquote>\n<p>Med en fremdriftslinje kan du minne kundene dine p\u00e5 hvor langt de har kommet i en bestemt prosess og dytte dem til \u00e5 fullf\u00f8re den.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>Slik bruker du en fremdriftslinje p\u00e5 en landingsside<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Trinn 1<\/h3>\n<h3>Naviger til landingssidebyggeren<\/h3>\n<p>Bruk <strong>hovedmenyen<\/strong> til venstre for \u00e5 lage en <strong>landingsside<\/strong><strong>&nbsp;<\/strong>og <a href=\"\/hc\/nb_NO\/landingsside\/lage\/opprett-ny\/\" target=\"_blank\" rel=\"noopener noreferrer\">naviger til landingssidebyggeren<\/a> .<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Trinn 2<\/h3>\n<h3>Legg til en fremdriftslinje p\u00e5 landingssiden<\/h3>\n<p>Som forklart i de forrige artiklene, er det tomme omr\u00e5det til venstre <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 en fremdriftslinje p\u00e5 landingssiden din, dra og slipp <strong>Progress Bar-<\/strong> widgeten til arbeidsomr\u00e5det <em>(som vist i skjermbildet nedenfor)<\/em> .<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1802 size-full\" title=\"Landing page progress bar widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingssidefremdriftslinje.png\" alt=\"Landingsside fremdriftslinje. Fremdrifts-widgeten er uthevet\" width=\"558\" height=\"774\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Trinn 3<\/h3>\n<h3>Tilpass fremdriftslinjen i henhold til dine krav<\/h3>\n<p>N\u00e5r du slippe widgeten inn i arbeidsomr\u00e5det vil widget-<strong>innstillinger<\/strong> vises p\u00e5 h\u00f8yre side <em>(som markert i skjermbildet nedenfor).<\/em><\/p>\n<p>Bruk disse innstillingene for \u00e5 tilpasse fremdriftslinjen i henhold til dine krav. Heri:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>Bruk <strong>fremdriftslinjetekstfeltet for<\/strong> \u00e5 tilpasse teksten du vil vise sammen med fremdriftslinjen.<\/li>\n<li>Bruk <strong>knappene + og &#8211;&nbsp;<\/strong>under feltet <strong>Komplett linje<\/strong> for \u00e5 angi prosentandelen du vil skal vises som komplett. Merk at prosentandelen kun kan justeres i trinn\/reduksjoner p\u00e5 5 %.<\/li>\n<li>Veksle p\u00e5 <strong>Animate Bar-<\/strong>knappen for \u00e5 gj\u00f8re fremdriftslinjen animert\/statisk.<\/li>\n<li>Veksle p\u00e5 <strong>fremdriftslinjetekst-<\/strong> knappen for \u00e5 vise\/skjule fremdriftslinjeteksten.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1804\" title=\"Landing page progress bar settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingssidefremdriftslinje-instillinger.png\" alt=\"Landingsside fremdriftslinje. Innstillinger-fanen er uthevet\" width=\"640\" height=\"577\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Trinn 4<\/h3>\n<h3>Style fremdriftslinjen<\/h3>\n<p>Du kan redigere utseendet til fremdriftslinjen ved \u00e5 klikke p\u00e5 <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-1806\" title=\"Landing page progress bar style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingssidefremdriftslinje-stil.png\" alt=\"Landingsside fremdriftslinje. Stilfanen er uthevet\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Her er de forskjellige designalternativene som er tilgjengelige:<\/p>\n<h4>4.1 Font og fargeinnstillinger for fremdriftslinjene<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Helhetlig Bakgrunnsfarge <\/strong>&nbsp;for \u00e5 endre fargen p\u00e5 den fullf\u00f8rte delen av fremdriftslinjen.<\/li>\n<li><strong>Bar Bakgrunnsfarge for<\/strong> \u00e5 endre fargen p\u00e5 den fullf\u00f8rte delen av fremdriftslinjen.<\/li>\n<li><strong>Rounded Corners<\/strong> st\u00f8rrelseslinje for \u00e5 legge til avrundede hj\u00f8rner til fremdriftslinjen.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.2 Merk tekststil<\/strong><\/h4>\n<p>Bruk alternativene som er tilgjengelige under denne delen for \u00e5 redigere skriftstilen, fargen, skriftfamilien og skriftvekten til fremdriftslinjens tekst.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.3 Innstilling av fremdriftslinje &nbsp;<\/strong><\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Progress Bar<\/strong> H\u00f8ydest\u00f8rrelseslinje for \u00e5 justere h\u00f8yden p\u00e5 Progress Bar.<\/li>\n<li><strong>Widget Bredde<\/strong>&nbsp;for \u00e5 justere bredden p\u00e5 fremdrifts-widgeten.<\/li>\n<li><strong>Widget-posisjon for<\/strong> \u00e5 endre justeringen av fremdriftslinje-widgeten.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p>Klikk <strong>Lagre,<\/strong> og det er det!<\/p>\n<p>Du har lagt til en <strong>fremdriftslinje<\/strong> p\u00e5 <strong>landingssiden<\/strong> din!<\/p>\n<p>La oss fortsette og ta en titt p\u00e5 hvordan du legger til en innholdsseksjon p\u00e5 en landingsside ved \u00e5 bruke <a href=\"\/hc\/nb_NO\/landingsside\/lage\/seksjon\/\" target=\"_blank\" rel=\"noopener\">seksjonswidgeten<\/a> <span style=\"color: rgba(0, 0, 0, 0.8); font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; 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; display: inline !important; float: none;\">!<\/span><\/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>Fremdriftslinje-widgeten hjelper deg \u00e5 legge til en animert fremdriftslinje p\u00e5 landingssiden din.<\/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-3618","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\/3618","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=3618"}],"version-history":[{"count":8,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb\/3618\/revisions"}],"predecessor-version":[{"id":10710,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb\/3618\/revisions\/10710"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/media?parent=3618"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb-category?post=3618"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/nb_NO\/wp-json\/wp\/v2\/ht-kb-tag?post=3618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}