{"id":368879,"date":"2023-01-31T13:30:00","date_gmt":"2023-01-31T10:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368879"},"modified":"2023-01-31T13:30:05","modified_gmt":"2023-01-31T10:30:05","slug":"hur-man-staller-in-en-wordpress-meddelandefalt","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-staller-in-en-wordpress-meddelandefalt\/","title":{"rendered":"Hur man st\u00e4ller in en WordPress-meddelandef\u00e4lt"},"content":{"rendered":"\n

Det finns m\u00e5nga olika typer av budskap du kanske vill f\u00f6rmedla p\u00e5 din webbplats. Var och en av dem kr\u00e4ver en l\u00e4mplig kanal. Stora popup-l\u00e5dor, reklambanners och liknande \u00e4r v\u00e4ldigt bekv\u00e4ma men kan ibland verka f\u00f6r p\u00e5tr\u00e4ngande. Dessutom f\u00e5r webbplatsbes\u00f6kare l\u00e4tt nog av dem, vilket kan leda till h\u00f6ga avvisningsfrekvenser. Om du funderar p\u00e5 ett snyggt, diskret men \u00e4nd\u00e5 effektivt s\u00e4tt att f\u00e5nga dina bes\u00f6kares uppm\u00e4rksamhet och f\u00e5 fram ett meddelande<\/strong>, kan en WordPress-meddelandef\u00e4lt vara precis vad du letar efter.<\/p>\n

Meddelandef\u00e4lt \u2013 vad anv\u00e4nds det till<\/h2>\n

Meddelandef\u00e4ltet kan anv\u00e4ndas f\u00f6r en m\u00e4ngd olika \u00e4ndam\u00e5l. Det kan s\u00e4kert hj\u00e4lpa dig att driva mer trafik till dedikerade sidor<\/strong>. Du kan anv\u00e4nda den f\u00f6r att ut\u00f6ka din e-postlista genom att erbjuda en prenumeration p\u00e5 nyhetsbrev eller dela information \u00f6ver hela webbplatsen<\/strong>.<\/p>\n

Det kan vara mycket f\u00f6rdelaktigt om du till exempel har ett eCommerce WP-tema<\/a>. Du kan visa fraktinformation<\/strong> d\u00e4r eftersom detta \u00e4r den typ av information som alla dina webbplatsbes\u00f6kare verkligen vill veta. Du kommer ocks\u00e5 att tycka att det \u00e4r v\u00e4ldigt bekv\u00e4mt att marknadsf\u00f6ra en rea eller en ny produkt ocks\u00e5<\/strong>. Att visa en kampanjkod<\/strong> i en meddelandef\u00e4lt \u00e4r ocks\u00e5 en bra id\u00e9.<\/p>\n

\"Hur<\/a><\/p>\n

Dessutom kan du anv\u00e4nda den f\u00f6r att dela din kontaktinformation<\/strong>. P\u00e5 s\u00e5 s\u00e4tt f\u00f6rb\u00e4ttrar du kommunikationen med webbplatsbes\u00f6karna eftersom de inte beh\u00f6ver \u00f6ppna en annan sida bara f\u00f6r att hitta den. Och om du l\u00e4gger till sociala ikoner i f\u00e4ltet<\/strong> \u00e4r det ett bepr\u00f6vat recept f\u00f6r att ut\u00f6ka dina sociala n\u00e4tverksanslutningar.<\/p>\n

\"Hur<\/a><\/p>\n

Alla typer av webbplatser kan dra nytta av en v\u00e4ldesignad meddelandef\u00e4lt. T\u00e4nk bara p\u00e5 m\u00f6jligheterna. Du kan anv\u00e4nda den som en CTA-banner f\u00f6r att bjuda in webbplatsbes\u00f6kare att prenumerera, registrera sig, klicka f\u00f6r att ladda ner visst material, g\u00f6ra en specialbest\u00e4llning<\/strong> och liknande.<\/p>\n

\"Hur<\/a><\/p>\n

Nu, om ditt WP-tema inte redan har ett meddelandef\u00e4lt kan du enkelt st\u00e4lla in ett med ett av WordPress-meddelandef\u00e4ltets plugins.<\/p>\n

St\u00e4ll in ett meddelandef\u00e4lt med WPFront Notification Bar Plugin<\/h2>\n

\"Hur<\/a><\/p>\n

WPFront<\/a> \u00e4r ett p\u00e5litligt och praktiskt plugin f\u00f6r meddelandef\u00e4lt. Det \u00e4r mycket popul\u00e4rt bland WordPress-anv\u00e4ndare tack vare dess enkelhet och effektivitet. Det \u00e4r ganska l\u00e4tt att installera och erbjuder precis r\u00e4tt m\u00e4ngd anpassningsalternativ<\/strong>. Eftersom den \u00e4r v\u00e4ldigt l\u00e4tt kan du vara s\u00e4ker p\u00e5 att den inte kommer att sakta ner din webbplats eller p\u00e5verka dess prestanda p\u00e5 n\u00e5got negativt s\u00e4tt. Nu kommer vi att visa dig hur du st\u00e4ller in det med bara n\u00e5gra f\u00e5 steg<\/strong> och skapar precis den perfekta meddelandef\u00e4ltet f\u00f6r din webbplats.<\/p>\n

STEG 1: Aktivera WPFront Notification Bar Plugin<\/h3>\n

N\u00e4r du har installerat plugin-programmet klickar du p\u00e5 Inst\u00e4llningar och sedan p\u00e5 meddelandef\u00e4ltet i rullgardinsmenyn.<\/p>\n

\"Hur<\/a><\/p>\n

Om du klickar p\u00e5 den \u00f6ppnas alla tillg\u00e4ngliga inst\u00e4llningar f\u00f6r meddelandef\u00e4ltet. Det f\u00f6rsta du ska g\u00f6ra \u00e4r, logiskt, att markera rutan som s\u00e4ger Aktiverad.<\/p>\n

\"Hur<\/a><\/p>\n

N\u00e4r du har aktiverat meddelandef\u00e4ltet h\u00e4r kommer det att synas p\u00e5 alla sidor och du kan forts\u00e4tta att anpassa det<\/strong>. Alla anpassningsalternativ visas p\u00e5 den h\u00e4r sidan.<\/p>\n

Du kommer att m\u00e4rka att meddelandef\u00e4ltet dyker upp som en f\u00f6rhandsvisning i backend p\u00e5 inst\u00e4llningssidan f\u00f6r meddelandef\u00e4ltet<\/strong>, vilket \u00e4r v\u00e4ldigt bekv\u00e4mt eftersom du inte beh\u00f6ver g\u00e5 fram och tillbaka f\u00f6r att kontrollera hur det ser ut p\u00e5 livesidan. Du kan se dina anpassningar live och n\u00e4r du \u00e4r n\u00f6jd med det du ser klickar du p\u00e5 Spara.<\/p>\n

STEG 2: St\u00e4lla in positionen f\u00f6r meddelandef\u00e4ltet<\/h3>\n

\"Hur<\/a><\/p>\n

Detta plugin l\u00e5ter dig v\u00e4lja den plats d\u00e4r du vill visa ditt meddelandef\u00e4lt<\/strong> \u2013 det kan vara h\u00f6gst upp eller l\u00e4ngst ned p\u00e5 sidan<\/strong>. Om du v\u00e4ljer topppositionen kan du ocks\u00e5 best\u00e4mma hur n\u00e4ra den \u00f6vre sk\u00e4rmkanten du vill att stapeln ska visas<\/strong> genom att anv\u00e4nda alternativet Positionsf\u00f6rskjutning. Detta \u00e4r dock inte m\u00f6jligt f\u00f6r bottenpositionen.<\/p>\n

N\u00e4r det g\u00e4ller barbeteende kan du v\u00e4lja mellan Fixed at Position<\/strong> och Display on Scroll<\/strong>. Om du v\u00e4ljer det f\u00f6rsta alternativet kommer f\u00e4ltet inte att p\u00e5verkas av sidrullningen, den f\u00f6rblir i samma position hela tiden<\/strong>. Om du v\u00e4ljer det andra alternativet kommer f\u00e4ltet att dyka upp n\u00e4r du rullar p\u00e5 sidan<\/strong>. Den kommer inte att synas omedelbart, och under Scroll Offset<\/strong> kan du v\u00e4lja efter hur m\u00e5nga pixlar du vill att den ska visas<\/strong>. F\u00f6r att alternativet Visa vid rullning ska fungera m\u00e5ste du f\u00f6rst avmarkera Fixed at Position<\/strong>! <\/p>\n

STEG 3: Anpassa meddelandef\u00e4ltet<\/h3>\n

\"Hur<\/a><\/p>\n

Du kan g\u00f6ra din meddelandef\u00e4lt statisk eller animerad<\/strong>. Du v\u00e4ljer detta genom att st\u00e4lla in Animationens varaktighet<\/strong>. Om du st\u00e4ller in den p\u00e5 0 kommer animeringen att st\u00e4ngas av och stapeln blir statisk<\/strong>. F\u00f6r att animera stapeln anger du hur l\u00e5ng tid animeringen ska ta<\/strong>. Till exempel, om du st\u00e4ller in den p\u00e5 3 sekunder, kommer stapeln att visas gradvis under de 3 sekunderna. Animationen \u00e4r ett trevligt s\u00e4tt att framh\u00e4va stapeln d\u00e5 den f\u00e5r den att dyka upp gradvis och p\u00e5 s\u00e5 s\u00e4tt drar uppm\u00e4rksamheten till den.<\/p>\n

Om du inte vill att aviseringsf\u00e4ltet ska visas direkt efter att sidan har laddats finns alternativet Visa efter .<\/strong> Det l\u00e5ter dig st\u00e4lla in hur l\u00e5ng tid efter att sidan har laddats du vill att f\u00e4ltet ska dyka upp<\/strong>.<\/p>\n

Med alternativet Autost\u00e4ng efter<\/strong> kan du f\u00e5 f\u00e4ltet att f\u00f6rsvinna efter en viss tid. Om stapeln \u00e4r animerad st\u00e4ngs den p\u00e5 samma s\u00e4tt som den \u00f6ppnades \u2013 gradvis.<\/p>\n

N\u00e4r det kommer till alternativen du kan visa i navigeringsf\u00e4ltet, har du knappen Visa<\/strong> st\u00e4ngning som g\u00f6r att bes\u00f6karen kan st\u00e4nga baren<\/strong> och knappen Visa \u00e5ter\u00f6ppna<\/strong> som ger bes\u00f6karen chansen att \u00f6ppna baren igen om det beh\u00f6vs<\/strong>. Om det h\u00e4r alternativet \u00e4r inaktiverat kommer f\u00e4ltet inte att dyka upp f\u00f6rr\u00e4n sidan har laddats om eller inte alls om alternativet H\u00e5ll st\u00e4ngt<\/strong> \u00e4r aktiverat. Alternativet H\u00e5ll st\u00e4ngt f\u00f6r<\/strong> l\u00e5ter dig st\u00e4lla in tiden efter vilken stapeln ska visas igen.<\/p>\n

F\u00f6r att definiera textinneh\u00e5llet i f\u00e4ltet<\/strong> anv\u00e4nder du f\u00e4ltet Meddelandetext<\/strong> d\u00e4r du anger texten som du vill ska visas i f\u00e4ltet. Dessutom kan du stila den med HTML. Du beh\u00f6ver inte ens vara s\u00e4rskilt skicklig p\u00e5 HTML.<\/p>\n

Om du till exempel vill \u00e4ndra teckensnittsstorleken s\u00e5 justerar du den genom att ange \u00f6nskad storlek i meddelandetextf\u00e4ltet<\/strong>. Du kommer att l\u00e4gga till denna text i f\u00e4ltet:<\/p>\n

<span style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>.<\/code><\/pre>\n
och det enda du b\u00f6r \u00e4ndra h\u00e4r \u00e4r siffran<\/strong>, som representerar teckenstorleken.<\/p>\n
\"Hur<\/a><\/p>\n
Om du nu vill att en knapp ska visas bredvid texten i f\u00e4ltet<\/strong>, markera alternativet Display Button<\/strong>. Skriv sedan in den text du vill ska visas i f\u00e4ltet Knapptext<\/strong>. N\u00e4r det g\u00e4ller knappens funktioner kan du v\u00e4lja mellan f\u00f6ljande alternativ:<\/strong><\/p>\n
\"Hur<\/a><\/p>\n
Om du vill att f\u00e4ltet ska sluta dyka upp efter att bes\u00f6karen har klickat p\u00e5 det<\/strong> kan du enkelt st\u00e4lla in detta genom att markera alternativet St\u00e4ng f\u00e4lt vid knappklick<\/strong>. Detta \u00e4r s\u00e4rskilt vettigt om meddelandet \u00e4r en CTA-knapp. Till exempel, n\u00e4r bes\u00f6karen klickar p\u00e5 knappen Prenumerera p\u00e5 v\u00e5rt nyhetsbrev i meddelandef\u00e4ltet, omdirigeras han till sidan med detaljer om prenumerationen, och meddelandef\u00e4ltet visas inte l\u00e4ngre eftersom syftet \u00e4r uppn\u00e5tt.<\/p>\n
Om du inte vill att navigeringsf\u00e4ltet ska vara synligt f\u00f6r alla hela tiden kan du anv\u00e4nda ett av de m\u00e5nga filtreringsalternativen<\/strong>. Du kan st\u00e4lla in hur l\u00e4nge du vill att stapeln ska visas genom att st\u00e4lla in datumen i f\u00e4lten Startdatum och tid<\/strong> och Slutdatum och tid<\/strong>. Du kan ocks\u00e5 v\u00e4lja p\u00e5 vilka sidor du vill att stapeln ska visas<\/strong> genom att markera n\u00e5gra av alternativen i inst\u00e4llningen Visa p\u00e5 sidor .<\/strong><\/p>\n
\"Hur<\/a><\/p>\n
N\u00e4r det kommer till vem som kan se navigeringsf\u00e4ltet kan du bara g\u00f6ra det synligt f\u00f6r vissa anv\u00e4ndare genom att helt enkelt markera rutorna i f\u00e4ltet Visa f\u00f6r anv\u00e4ndarroller<\/strong>.<\/p>\n
\"Hur<\/a><\/p>\n
Design och f\u00e4rger<\/h4>\n
Insticksprogrammet erbjuder n\u00e5gra coola funktioner f\u00f6r att styla utseendet p\u00e5 baren ocks\u00e5. Du kan justera stapelh\u00f6jden<\/strong> \u2013 genom att st\u00e4lla in antalet pixlar. Eftersom denna bar ska vara tilltalande men inte stor<\/strong>, var noga med att inte \u00f6verdriva det. En annan intressant funktion \u00e4r att du kan l\u00e4gga till en skugga i f\u00e4ltet<\/strong> genom att markera alternativet Visa skugga .<\/strong><\/p>\n
Det \u00e4r intressant att du inte beh\u00f6ver g\u00f6ra stapeln enf\u00e4rgad \u2013 du har m\u00f6jlighet att st\u00e4lla in tv\u00e5 f\u00e4rger och skapa \u00f6vertoningar<\/strong>. Dessutom kan du st\u00e4lla in textf\u00e4rg och f\u00e4rger f\u00f6r alla knappar ocks\u00e5.<\/strong><\/p>\n
\"Hur<\/a><\/p>\n
WPFront Notification Bar-plugin l\u00e5ter dig ocks\u00e5 skriva ytterligare CSS f\u00f6r att justera stilen ytterligare<\/strong>.<\/p>\n
L\u00e5t oss nu n\u00e4mna ett par CSS-anpassningar som anv\u00e4nds ganska ofta, till exempel \u00e4ndring av teckenstorlek. Det som kan f\u00f6rbrylla dig med det \u00e4r att n\u00e4r du \u00e4ndrar teckenstorleken p\u00e5 meddelandetexten kan den falla ur linje med knappen bredvid. Detta kan enkelt fixas. N\u00e4r du \u00e4ndrar teckenstorleken rekommenderas det att definiera klassen f\u00f6r elementet som vi kommer att tilldela vissa v\u00e4rden<\/strong> :<\/p>\n
<span class=\"text-bar\" style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/code><\/pre>\n
I v\u00e5rt exempel \u00e4r klassen en textrad, du kan g\u00f6ra samma sak f\u00f6r n\u00e5gon annan klass.<\/p>\n
Vi kommer att beskriva det s\u00e5 h\u00e4r i CSS:<\/p>\n
.text-bar {margin-bottom: 0px;}<\/code><\/pre>\n
P\u00e5 s\u00e5 s\u00e4tt kommer vi att anpassa texten och knappen<\/strong>. Naturligtvis kan du beh\u00f6va anv\u00e4nda ett annat v\u00e4rde. Det \u00e4r b\u00e4st att inspektera det \u00f6nskade elementet<\/a> f\u00f6r att ta reda p\u00e5 v\u00e4rdet du beh\u00f6ver. Du kan tilldela vilken annan egenskap som helst till klassen beroende p\u00e5 vad du vill \u00e4ndra.<\/p>\n
En annan intressant funktion \u00e4r att du ocks\u00e5 kan justera skuggan, som som standard \u00e4r ganska m\u00f6rk. Du kan till exempel justera den s\u00e5 h\u00e4r och g\u00f6ra den l\u00e4ttare:<\/p>\n
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}<\/code><\/pre>\n
Och gl\u00f6m inte \u2013 du m\u00e5ste klicka p\u00e5 Spara efter varje \u00e4ndring du g\u00f6r f\u00f6r att de verkligen ska tr\u00e4da i kraft!<\/p>\n
Sammanfattningsvis<\/h2>\n
N\u00e4r den anv\u00e4nds p\u00e5 r\u00e4tt s\u00e4tt kan navigeringsf\u00e4ltet ge dig m\u00e5nga f\u00f6rdelar. Testa den g\u00e4rna f\u00f6r olika \u00e4ndam\u00e5l. Vi listade bara n\u00e5gra av id\u00e9erna f\u00f6r att inspirera dig, men vi \u00e4r s\u00e4kra p\u00e5 att du kan komma p\u00e5 m\u00e5nga andra sk\u00e4l att anv\u00e4nda det. Style den, anpassa den och dela din upplevelse med oss!<\/p>\n
Inspelningsk\u00e4lla:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Uppt\u00e4ck vad som \u00e4r ett WordPress-meddelandef\u00e4lt och l\u00e4r dig hur du st\u00e4ller in det snabbt och enkelt.<\/p>\n","protected":false},"author":1,"featured_media":363820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[574],"tags":[850],"class_list":["post-368879","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grunderna-i-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/368879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=368879"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/368879\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/363820"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=368879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=368879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=368879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}