Flytande innehåll som fastnar på skärmen när användarna scrollar fångar deras uppmärksamhet. Det är därför det tenderar att ha en högre klickfrekvens.
En widget med flytande sidofält kan visa användbar information, t.ex. navigeringsmenyer, reklambanners eller uppmaningar till åtgärder. På så sätt kommer webbplatsens användare aldrig att förlora det innehåll ur sikte som är viktigast för att uppnå dina mål.
I den här artikeln kommer vi att visa dig hur du enkelt skapar en sticky flytande sidebar widget i WordPress.
Varför skapa en sticky flytande sidebar widget?
En sticky flytande sidebar widget stannar kvar på användarens vy när de rullar. Detta ger besökarna mer tid att notice the content och engagera sig i det.
Du kan använda sticky content för att bygga en email list, främja produkter, dela populära inlägg, visa senaste Tweets eller Instagram inlägg, och mycket mer.
Till exempel kan du göra ditt signup form för nyhetsbrev till en sticky sidebar widget så att besökarna har mer tid att registrera sig.
Många ägare av online stores använder också sticky sidebar widgets för att främja sina mest populära produkter eller specialerbjudanden.
Med detta sagt, låt oss titta på hur du kan skapa en sticky flytande sidebar på din WordPress website.
Lägga till en sticky flytande widget i WordPress
Du kan enkelt skapa flytande widgetar som sticky medan du rullar med hjälp av Fixed Widget and Sticky Elements för WordPress. Detta plugin allow you att klistra en widget på plats så att den stannar på skärmen medan användaren rullar upp och ner på sidan.
Först måste du installera och aktivera tillägget Fixed Widget. Om du behöver hjälp kan du läsa vår handledning om hur du installerar ett WordPress-plugin.
Disclaimer: Tänk på att pluginet inte har uppdaterats under det senaste året. Vi har dock testat det med den senaste versionen av WordPress, och det verkar fungera bra. För mer information, se vår nybörjarguide om att använda föråldrade plugins.
Vid aktivering finns det några enkla inställningar som du kanske vill konfigurera genom att gå till Appearance ” Fixed Widget.
Sticky widgets i sidofältet är ett bra sätt att marknadsföra webbplatsens viktigaste sidor, visa de senaste kommentarerna och mycket mer. Sticky widgets kan dock bli frustrerande på mobila enheter eftersom de vanligtvis tar upp mycket utrymme på skärmen.
Så du kanske vill inaktivera klibbiga widgetar för mobila besökare genom att skriva in några värden i ”Minsta skärmbredd” och ”Minsta skärmhöjd”.
Du kanske vill prova några olika Settings för att se vad som fungerar bäst för din website. För mer information, vänligen se vår guide om hur du kan viewa mobilversionen av WordPress webbplatser från skrivbordet.
Som standard finns det inget avstånd mellan de sticky widgetarna och högst upp och längst ner på vyn. Om du vill add to lite padding skriver du bara in de värden du vill använda i fälten ”Margin Top” och ”Margin Bottom”.
När du är nöjd med hur pluginet är konfigurerat klickar du på knappen ”Save Changes” för att store dina inställningar.
Efter det är det dags att skapa din första sticky widget genom att gå till Appearance ” Widgets i din WordPress admin area.
Du kan sedan clicka på knappen ”+” och add to det block som du vill göra sticky.
I den här guiden visar vi de senaste inläggen i WordPress med hjälp av blocket Latest Posts, men stegen kommer att vara liknande oavsett vilket block du använder.
Detaljerade instruktioner finns vänligen i vår guide om hur du lägger till och använder widgetar i WordPress.
När du har lagt till blocket klickar du för att selecta det.
Du kan nu gå vidare och kontrollera boxen ”Fixed widget”.
Beroende på vilket widget du använder kan du hitta boxen ”Fixed widget” i panelen till höger istället.
I så fall är det bara att gå till tabben ”Settings” i panelen och clicka på ”Fix widgetar”.
När du är nöjd med hur widgeten är konfigurerad, glöm inte att klicka på ”Update” för att göra den live. Om du nu besöker din WordPress site kommer du att se den sticky flytande widgeten i action.
Bonus: Skapa en sticky flytande footer-bar i WordPress
Förutom en flytande sidebar kan du också lägga till en sticky flytande footer bar på din WordPress blogg.
Det här fältet kommer att vara synligt även när användarna scrollar upp eller ner på din sida och kan hjälpa till att marknadsföra rabatterbjudanden eller sociala medier.
Du kan enkelt skapa en sticky flytande flytande footer bar med OptinMonster. Det är det bästa verktyget för leadgenerering på marknaden som levereras med färdiga templates och en drag-and-drop-byggare.
När pluginet har aktiverats besöker du helt enkelt OptinMonster ” Templates page från WordPress dashboard och väljer ”Floating Bar” som kampanjtyp.
Därefter klickar du på knappen ”Use Template” under en template som du själv väljer.
Detta öppnar OptinMonsters byggare där du kan customize den flytande footerfältet enligt vad du gillar. Här kan du dra olika element från den vänstra panelen till bar preview till höger.
Du kan också ställa in displayregler, integrera med en tjänst för e-postmarknadsföring och lägga till nedräkningstimer i fältet.
När du är klar byter du helt enkelt till tabben ”Publicera” högst upp och gör din flytande footer bar live.
Nu kan du besöka din WordPress site för att view ändringarna i action.
För mer information, vänligen se vår tutorial om hur du skapar en sticky flytande footer bar i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en sticky flytande sidofältswidget på din WordPress-webbplats. Du kan också kolla in vår guide om hur du lägger till anpassade stilar till WordPress-widgetar eller se våra expertval för de mest användbara WordPress-widgetarna för din webbplats.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
I’ve been looking for this feature for a while. I have a blog that often has long articles with guides. As a result, the content in the sidebar is always only at the top, and users have it empty as they scroll down the screen. This guide solved my problem perfectly by moving the last widget down. I placed important links to the newsletter and the website’s Patreon, and thanks to this guide, my website users always have them in sight. Great and yet absolutely simple.
A Owadud Bhuiyan
Can I use it for sharing Social Media links?
I am not much familiar with the Siderbar widget.
WPBeginner Support
If you wanted to you certainly could
Administratör
Ahmed Omar
A fantastic guide on crafting a sticky floating sidebar widget in WordPress
Your detailed instructions and step by step make it easy and accessible.
Thanks for this tip
my site sidebar is now captivating visitors at every scrol
WPBeginner Support
Glad our guide was helpful
Administratör
Dileepa K
Good one. Thanks you.
WPBeginner Support
You’re welcome
Administratör
Akhtar
I’m learning very much from WPBeginner. Thanks for the great content.
WPBeginner Support
You’re welcome, glad you found our content helpful
Administratör
Dapo Momodu
Perfect plugin and works like charm
WPBeginner Support
Glad you liked our recommendation
Administratör
Minosh
Work fine! Thanks!
WPBeginner Support
Glad it helped
Administratör
Giorgi
It used to work for me. Now it does not work for my website.
simon james
great vid thanks for sharing
Markus Martin
How about the whole sidebar?
Steven Denger
Well after working for hours last night and hours today I came across this plugin thinking that I have finally got the answer to sticky sidebar widgets. But no – when I installed the plugin it did absoutely nothing! I have the latest version of WP and a good working template that has no other problems working with all the other plugins so I have no idea why this will not work.
Does anybody know how to get this plugin to work. I have just about given up on having fixed widgets. I have not won any lotteries lately to afford a developer to do it for me.
Aarohi
Nice tutorial. Thanks!
Shane
ALL YOU GUYS DO IS USE PLUGINS FOR EVERY SOLUTION YOU PROPOSE! Please Change the titles of posts like this to: ”How to Add a Sticky Floating Sidebar Widget in WordPress with Plugins”, as you are not actually ”creating” anything. you’re just using a service someone else built.
WPBeginner Support
Our users are mostly beginners with little to no coding skills at all. Using a plugin is the safest way for them to add functionality in WordPress. From time to time we do publish articles with plugins as well as manual methods to achieve some functionality. But if we feel that manual method is too complicated for our target audience, then we show the plugin method alone. You may also want to take a look at our guide on how many plugins should you install on your WordPress site.
Administratör
Camilo Buitrago
I don’t care if they use plugins for achieving the promised result.
What I don’t like is finding that the plugins are outdated or the creator stopped updating it.
So, what I would say is: please update your content and offer new options, or put a note explaining that it is an old plugin and may not work.
Ron Robbins
I think I smell a troll….if you don’t like their content, their are literally thousands of other sites around the web to do your ”research”.
jay Boro
It stucks the smooth scrolling of the website.. So I would say – it’s a NO use plugin. You can feel the difference when once you uninstall them
Raj
Yeah because people who ”create” do it without using anything else, just out of thin air! Everyone else deserves no respect.
Trish Sweeney
Fantastically helpful – as always, tutorials extremely clear and easy to follow and incredibly useful. Very many thanks.
Aziz
Thanks for articled and the Good guides as usual , just wonderting if there is any alternatives as this plugin was not updated 2 years now and causinfg some conflict
Michael Nielsen
Same problem here. It would be great with an update to this article. I am looking around for a similar plugin but there are only a few other options and the alternatives only focus fixed sidebars and not widgets.
I really enjoyed the Q2W3 fixed widget but unfortunately it is no longer maintained.
Lyubo
Hey guys,
I also need this plug-in for one of my blogs, but I can’t get it to work with the Genesis theme. I just updated to the latest version that they released a couple of days ago. So I did play with the settings of the plug-in, changed the margins to different values, marked and unmarked the 4 tick-offs but it won’t work. Yes I did tick-off ”fix” widget on the particular widget I want to stick. What happens is at the very bottom of my page it says:
jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { ”sidebar” : ”sidebar-alt”, ”margin_top” : 110, ”margin_bottom” : 120, ”screen_max_width” : 0, ”width_inherit” : true, ”widgets” : [’execphp-4’] }; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 940); });
Any help would be of great help – you can email me if you want me to show you my blog, as I don’t want to paste it here so it looks as if I am looking for a backlink
Thanks in advance for any advice you might share
Dan
Does anyone know any alternatives to this plugin? It causes all kinds of issues with the Divi and Extra themes by Elegant Themes. Bugs were reported to the dev months ago but they seem to have gone un-fixed. Time to find an alternative… suggestions?
Frank Biganski
Conflicted with the Total WordPress theme when using the built-in sticky header in Total. When Fixed Widget was active on a page, it caused the sticky header NOT to work so my header scrolled off the page. I reported the bug to author.
Sam
Is it compatible with Thesis ?
Cesar
thank you bro, the plugin works like charm, this article really helpful
Anders
Awesome! works like a charm. Thanks for sharing.
Michael
Can you make it scroll then at the bottom have it become part of the footer? For example on this page. When you get down to the widget section have it stop and be at the top of the widgets?
Similar to how this site did there quote section. When you get to the bottom it becomes part of the footer.
Florian
Hey there,
Unfortunately I can not get it to work.
How do I do exactly what you did on your page?
So I would like to have a banner on the bottom end of the Page with a Text in it.
Also I would like it not to show up on the phone. What is the pixel-number for that?
Thank you!
Chrissy
Thank you so much for the tutorial. I had been seeing this around the web and wondered how to accomplish the same effect. The margin bottom option worked GREAT because it was also getting into the footer! You guys are awesome!
Umer Iftikhar
I was in search of this Thanks wpbeginner for your help. But I have one confusion. Let’s say I want to fix the top widget. But when I did it and scrolled down, it just hided the other one which was not in the position as I wanted. Can you help me for this? Like let’s suppose when I completely scroll down the page, after all widgets, then it should start being fixed. Is that possible?
Thanks.
Nathan
Great, thanks. I just got my Wordpress site off their domain and on to my own – so now I can even use all these great plugins. I’ll surely try this out sooner or later.
Joel
I need this to work with css and shortcodes. Planning on making a version to support this?
orangorangan
the plugin works only for text widget, not on my custom widgets, any idea why? thanks
jen
I tried to combine this with the ad inserter plug in and it did not work. It does not allow for the option to make ad widget sticky. Any suggestions on a fix or work around?
Nazir Hack
Thanx Bro
Michal Chovanak
This is a realy great post, thanks
Drosanski
For me not working -.- ;(
Mohsin Ali
Hi, thanks … this plugin is working.
Robert
Hi, love the plugin, but it breaks my slideshows in my woothemes. They won’t load anymore. Is there a solution for this maybe?
WPBeginner Support
This could be a bug, you can report it at the plugin’s support forum
Administratör
Usama Siddiqui
I have tried this plugin on my website. But its not working
is there any alternative to this plugin?
Prashant Ghai
Thanks for sharing the info. about this plugin. Really made it a smooth sailing on my blog.
Raja
Worked like a charm.
Grant
Hi I have had this plugin for a while and it works great but whenever there is a page that is shorter than my sidebar, when you try to scroll down the sticky widget which I have gets all fidgety and doesn’t let you scroll down to the bottom. Does anyone know how to fix this?
Editorial Staff
Do you have an example of that page? Can you send us an email about it Grant, so we can take a look.
Administratör
Ayush Agrawal
Is it OK to make Adsense ads sticky? I mean if I place Adsense ad code in a widget and make it sticky will it violate the TOS?
Editorial Staff
No that is not allowed by Adsense. The wording is tricky. They will allow it if the sidebar remains static and the content is the one that is scrolling. So if you have two scroll bars like The Next Web design has, then you can do it.
Administratör
Daniel Lemes
Hi, could you could point out where, in terms of AdSense is explicitly stated that this is illegal? I haven’t found a word about it. 9gag and many others still using this kind of floating block.
WPBeginner Support
Like we said earlier the wording is tricky, and in some situations you may be able to pull it off. But for smaller publishers it is always better to be safe than sorry.
Pundie
I don’t understand, you said: ”They will allow it if the sidebar remains static and the content is the one that is scrolling”
Isn’t that exactly what we are trying to do here? Display AdSense in a static sidebar widget, and have our page content scrolling. Therefore you just clarified this IS allowed.
The whole double-sidebar thing you mentioned is just weird, and terrible web design.
Rednasil
Does anybody know how to get this working for the genesis framework??
I’ve been trying with no luck.
Rednasil
Nevermind, the last update fixed the issue
Howard Lee Harkness
I tried this plugin on my MailChimp widget, and it doesn’t appear to do anything. It also automatically unchecks itself whenever I close the setup page.
Ayush Agrawal
Did you press the save button ?
Grant Kessler
Everything works beautifully until the footer of the page comes! How can I get it to stop being a fixed object when it hits the footer? There is always this terrible, sloppy, and messy, overlapping. Thank you for your time!
Editorial Staff
In the plugin settings, you can add margin bottom. Just put the footer’s height there, and it should be fine.
Administratör
Ra-Dzik
Nice tutorial. Thanks!
Mukesh Mali
I am already implemented in my site and using it for improving the subscribers to my channel.
Darnell Jackson
YO
Thanks for sharing this man I’ve been looking for an easy way to implement this effect.
I’ll have to test it right away if it works it’s going live on my blog this week thanks bro.