Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här customize du en lösenordsskyddad page i WordPress

Lösenordsskydd hjälper till att hålla vissa sidor privata, och det är mycket enkelt att skapa en anpassad lösenordsskyddad sida på din WordPress-webbplats.

WordPress standardsida för lösenordsinmatning ser dock enkel och oattraktiv ut. Så du kanske vill ändra det med några enkla anpassningar.

Den här artikeln guidar dig genom steg-för-steg-processen för att anpassa en lösenordsskyddad sida i WordPress.

How to Customize password protected page in WordPress

Varför anpassa lösenordsskyddade sidor i WordPress?

Om du vill skapa ett inlägg eller en sida på din WordPress-blogg som bara ska vara synlig för utvalda kunder eller medlemmar kan du låsa den med hjälp av lösenordsskyddet.

På samma sätt kan du använda en lösenordsskyddad sida om du skapar en ny WordPress-webbplats och inte vill att alla ska kunna se den.

Standarddesignen för den password-skyddade page är dock mycket grundläggande och ej attraktiv. Här är en preview av hur det gillar att se ut:

A basic password protected page

Genom att anpassa den lösenordsskyddade sidan kan du ändra dess design och layout. Detta bidrar till att göra sidan mer engagerande och du kan matcha den med ditt varumärke för att få ett mer professionellt utseende och en bättre användarupplevelse.

I följande avsnitt visar vi dig hur du aktiverar lösenordsskydd i WordPress. Vi berättar också om olika sätt att anpassa en viss sida, hela webbplatsen och olika avsnitt.

Använd gärna snabblänkarna nedan för att hoppa vidare till det avsnitt du föredrar:

Är du redo att förnya din lösenordsskyddade siddesign? Låt oss komma igång!

Så här lösenordsskyddar du en sida i WordPress

Innan vi visar hur du anpassar en WordPress-sida bör du veta att WordPress har inbyggda inställningar för att lösenordsskydda dina sidor och inlägg.

Allt du behöver göra är att redigera en sida eller lägga till en ny. När du är i WordPress innehållsredigerare klickar du på alternativet ”Offentlig” under ”Status & synlighet” i inställningspanelen till höger.

Change visibility settings in content editor

Därefter kommer du att se olika alternativ för ”Post Visibility”.

Välj bara alternativet ”Lösenordsskyddad” och ange ett lösenord för din sida.

Select password protected option

Gå nu vidare och klicka på ”Uppdatera” eller ”Publicera”.

Du kan nu besöka din webbplats och se den lösenordsskyddade sidan i aktion.

Password protected page preview using content editor

Låt oss nu se hur du kan customize din standard password-skyddade page.

Metod 1: Anpassa standard lösenordsskyddad design med hjälp av CSS Hero

När du aktiverar password protection från din WordPress content editor, använder sidan din sites theme för styling.

För att customize sidan kan du helt enkelt använda ett verktyg som gillar CSS Hero. Det låter dig editera designen och layouten på din page utan att redigera kod.

Först måste du installera och aktivera CSS Hero plugin. För mer detaljer, vänligen se vår guide om hur man installerar ett plugin för WordPress.

Efter aktivering kommer alternativet CSS hero att läggas till i WordPress admin bar högst upp. Gå vidare och klicka på alternativet ”Customize with CSS Hero”.

Customize with CSS hero button

Detta kommer att starta CSS Hero visual builder, där du kan redigera och customize din page.

Börja med att clicka på valfritt element på page.

Click an element to start editing

Därefter kan du ändra bakgrundsfärgerna, lägga till en bakgrundsbild, använda ett annat teckensnitt, redigera avstånd och mycket mer från panelen till vänster.

Låt oss till exempel gå till fliken ”Bakgrund” och lägga till en lutande bakgrundsfärg. Vi ändrar också färgen på rutan där användarna måste skriva in lösenordet och färgen på ”Enter”-knappen .

Change the background color

Dessutom kan du lägga till en ram runt huvudheadingen på page genom att gå till tabben Borders.

Välj bara kantbredd, färg, stil och andra ändringar som du gillar.

Edit the borders and save your changes

När du är klar med anpassningarna ska du komma ihåg att klicka på knappen ”Save & Publish” längst ned.

Du kan nu besöka din webbplats och se den anpassade lösenordsskyddade standardsidan.

Preview of customized password protected page with CSS hero

Nackdelen med att använda CSS Hero är att det inte erbjuder den flexibilitet och de avancerade anpassningsalternativ som en landningssidebyggare erbjuder.

Du kan till exempel inte lägga till element som kontaktformulär, knappar för sociala medier, opt-in-formulär, nedräkningstimer med mera med CSS Hero.

Med detta i åtanke ska vi nu se hur du kan använda en landningssidesbyggare för att anpassa specifika lösenordsskyddade sidor i WordPress.

Metod 2: Anpassa en specifik lösenordsskyddad sida med SeedProd

Att anpassa en specifik lösenordsskyddad sida är enklast med SeedProd , som är den bästa webbplats- och sidbyggaren för WordPress.

För denna handledning kommer vi att använda SeedProd Pro-versionen eftersom den innehåller premiummallar och fler anpassningsfunktioner. Men du kan börja med SeedProd Lite version och skapa en kommande-snart-sida gratis.

Låt oss först installera och aktivera SeedProd-pluginet. Om du behöver hjälp kan du läsa vår guide om hur du installerar ett WordPress-plugin.

Efter aktivering kommer du att se SeedProds välkomstskärm i din WordPress-instrumentpanel.

Härifrån måste du ange licensnyckeln och klicka på knappen ”Verifiera nyckel” för att aktivera SeedProd Pro. Din licensnyckel finns i ditt SeedProd-kontoområde.

Enter SeedProd license key

Efter det, låt oss gå över till SeedProd ” Landningssidor från din WordPress instrumentpanel och lägga till en ny anpassad lösenordsskyddad landningssida.

Senare i den här artikeln visar vi hur du väljer vilka pages som ska skyddas med password. You can password-protect entire your site or only specific pages.

I den här tutorialen skapar vi en Coming Soon page för en website som ska lanseras med password-skydd. Du kan dock enkelt customize din design om du bara använder den för att skydda specifika pages med password.

För att börja klickar du bara på knappen ”Skapa en Coming Soon-sida”.

Create a new coming soon page

På nästa skärm kommer SeedProd att visa dig olika sidmallar så att du snabbt kan anpassa dem.

Gå vidare och håll muspekaren över den mall du vill använda och klicka på den orangea bockknappen.

Choose a coming soon template in SeedProd

Efter att ha valt en template kommer SeedProd att öppna en popup med titeln ”Enter your new page details”.

Du behöver bara välja ett sidnamn och en URL-slug och sedan klicka på knappen ”Save and Start Editing the Page”.

Enter a page template name

Detta kommer att starta SeedProd dra-och-släpp-sidbyggaren.

Här kan du anpassa din lösenordsskyddade landningssida och lägga till olika element som text, bilder, knappar med mera.

SeedProd erbjuder också avancerade block som ett opt-in-formulär, kontaktformulär, nedräkningstimer, förloppsindikator, sociala delningsalternativ och mer.

Du lägger till ett element genom att dra ett block från menyn till vänster och släppa det på mallen till höger. Anpassa sedan elementet genom att klicka på det och justera de alternativ som visas.

Add blocks to your template

Det är också på detta sätt som SeedProd låter dig lägga till ett lösenordsformulär på framsidan av din sida för att skydda ditt innehåll.

Först kan du add to ett ”Custom HTML” block i SeedProd byggaren. Dra och släpp helt enkelt Custom HTML blocket på templaten.

Add custom HTML block

Därefter kan du klicka på blocket ’Anpassad HTML’.

Härifrån kommer du att vilja ange kortkoden [seed_bypass_form] i fältet ”Anpassad kod”.

Enter shortcode in SeedProd

Glöm inte att klicka på knappen ”Spara” när du är klar. Och så var det klart!

Nu integrerar SeedProd också med olika e-postmarknadsföringstjänster. Du kan lägga till ett kontaktformulär på din landningssida och ansluta ett e-postmarknadsföringsverktyg för att bygga din e-postlista och hålla kontakten med användarna.

Gå bara till fliken ”Connect” i landningssidebyggaren och välj din e-postmarknadsföringstjänst.

Connect email marketing service

Inställning av lösenordsskydd för specifika pages i SeedProd

Efter att ha skapat en anpassad kommande snart-sida som använder kortkoden [seed_bypass_form] är nästa steg att ställa in lösenordsskydd på specifika sidor med SeedProd.

För att börja kan du gå till fliken ”Sidinställningar” i SeedProd-byggaren och klicka på inställningarna för ”Åtkomstkontroll”.

Därefter anger du bara ett lösenord i fältet ”Bypass URL” som andra kan använda för att komma åt ditt begränsade innehåll.

Access control settings in SeedProd

Observera att den text du skriver i fältet ”Bypass URL” kommer att fungera som lösenord och även som en länk som kunder och teammedlemmar kan använda för att kringgå lösenordsskyddet och komma åt sidan.

SeedProd låter dig utesluta specifika webbadresser från dina webbplatser, till exempel admin, inloggning, instrumentpanel och konto. Detta säkerställer att webbplatsägare inte blir utestängda från sina webbplatser.

Nu måste du välja vilka URL:er som ska skyddas med password.

Bläddra bara ner till avsnittet ”Inkludera/exkludera webbadresser” under inställningarna för ”Åtkomstkontroll”. Därefter väljer du alternativet ”Inkludera webbadresser” och anger sedan de specifika sidor du vill begränsa.

Include pages to password protect

När du är klar klickar du bara på knappen ”Save” högst upp.

Därefter kan du gå till inställningarna ”Allmänt” under fliken ”Sidinställningar” och ändra sidans status från ”Utkast” till ”Publicera”.

Publishing your landing page in SeedProd

Efter det kan du stänga landningssidesbyggaren och gå till SeedProd ” Landningssidor från din WordPress adminpanel.

Härifrån klickar vi på vippan under ”Coming Soon Mode” för att aktivera din anpassade lösenordsskyddade sida.

Activating coming soon page in SeedProd

Det är allt!

Du har nu skapat en egen lösenordsskyddad landningssida som bara visas på specifika sidor i WordPress.

Besök bara dessa pages på your website för att se den customize-skydda password-sidan i action.

Custom password protected page preview

Bonus tips: Fler användningsfall för anpassade lösenordsskyddade sidor

Vill du utforska fler sätt att använda lösenordsskydd på din WordPress-webbplats? Här är 2 tips för att höja nivån på din webbplats lösenordsskyddade sida.

Tips 1: Skapa en anpassad lösenordsskyddad sida för hela webbplatsen

Med SeedProd kan du också visa din password-skyddade sida på varje page på din website. På så sätt måste användarna enter ett password för att få tillgång till något av ditt content.

Först kan du gå till SeedProd ” Landningssidor från din WordPress instrumentpanel. Klicka sedan på knappen ”Redigera sida” i panelen ”Coming Soon Mode”.

Edit coming soon page in SeedProd

Därefter vill du gå över till fliken ”Sidinställningar” högst upp och gå till inställningarna för ”Åtkomstkontroll”.

Därefter kan du bläddra ner till avsnittet ”Inkludera/exkludera webbadresser” och välja alternativet ”Visa på hela webbplatsen”.

Show on entire website option in SeedProd

När du har gjort ändringarna, gå vidare och klicka på knappen ”Spara” längst upp. SeedProd kommer då att visa den anpassade lösenordsskyddade sidan på hela din webbplats.

Tips 2: Skapa egna lösenordsskyddade sektioner i WordPress

Du kan också lösenordsskydda olika webbplatsavsnitt i WordPress från olika användargrupper. Detta är användbart om du driver en medlemswebbplats och vill kontrollera åtkomsten till ditt innehåll, dina plugins, appar och andra nedladdningsbara filer.

Det bästa sättet att begränsa olika delar av din webbplats är att använda MemberPress.

Det är det bästa medlemskapspluginet för WordPress som låter dig skapa flera medlemsnivåer för att lösenordsskydda ditt innehåll.

Du kan använda MemberPress för att ställa in olika regler så att användarna bara får tillgång till innehåll baserat på deras medlemsnivå. Mer information finns i vår guide om hur du skapar en medlemssajt på WordPress.

För att börja måste du först add to medlemskap till din website. Gå bara till MemberPress ” Medlem skap från din WordPress dashboard och klicka på knappen ”Add New”.

Add new membership plan in MemberPress

Därefter kan du ange ett namn för din medlemsnivå, lägga till en beskrivning och ange ett pris.

Du kan också ändra faktureringstypen från engångsfakturering till återkommande fakturering samt redigera medlemskapet så att det blir livstids eller upphör efter en viss tidsperiod.

Add a membership level in MemberPress

Glöm inte att klicka på knappen ”Publicera” när du är klar.

Därefter kan du gå till MemberPress ” Regler från din WordPress-panel och klicka på knappen Lägg till ny”.

Add new membership rule in MemberPress

Härifrån kan du klicka på rullgardinsmenyn under alternativet ”Skyddat innehåll”.

MemberPress erbjuder många alternativ för att skydda ditt innehåll, oavsett om det är en enda sida eller alla dina WordPress-sidor. I den här handledningen kommer vi att lösenordsskydda en enda sida.

Så låt oss välja alternativet ”En enda sida” från rullgardinsmenyn och ange titeln på sidan.

Set up rules for password protection in MemberPress

Därefter måste du ställa in åtkomstvillkoren och konfigurera vem som kan viewa den begränsade page. Med MemberPress kan du skydda content baserat på medlemsnivå, WordPress användarens roll, capability och enskilda medlemmar.

Låt oss ställa in ”Medlemskap” till ”Premium” från rullgardinsmenyerna för denna handledning. På så sätt kommer endast premiummedlemmar att kunna komma åt sidan. Du kan lägga till fler villkor och tillåta mer än 1 medlemsnivå att visa sidan.

När du är klar, glöm inte att klicka på knappen ”Spara regel”.

Du kan sedan besöka din webbplats för att se den lösenordsskyddade sidan i aktion. Medlemmarna måste nu logga in på sina konton för att se innehållet på sidan.

View membership password protected page

Vill du göra mer?

Du kan skapa lösenord för dina videor eller erbjuda gruppmedlemskap för företagsteam. Dessutom kan du skapa ett lösenord för att ge prenumeranter tillgång till ett betalt nyhetsbrev och mycket mer.

Vi har också en guide till hur du skyddar dina formulär med password i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du anpassar en lösenordsskyddad sida i WordPress. Du kanske också vill se vår guide om hur du skyddar innehåll i WordPress eller våra expertval av de bästa plugin-programmen för innehållsskydd i WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

2 kommentarerLämna ett svar

  1. Maurice

    Hi,
    When I follow the instructions for a password protected page… and logout.
    Then open in an other browser the url-link to that page, I do fill in the password but then also pops up an Admin login? So I can not share these pages…
    How can that be?
    Thank you.

    • WPBeginner Support

      We would recommend checking that your site is not in coming soon or a membership site that would require a user to view the content as that is the most common reason for that issue.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.