Letar du efter ett sätt att skapa anpassade layouter i WordPress utan att dyka ner i kod? Vi förstår. De flesta guider där ute känns antingen som att läsa en roman eller antar att du är en kodningsexpert.
Vi har märkt att vissa erfarna WordPress-användare undviker sidbyggare som Beaver Builder, oroliga för att de kommer att skapa klumpiga designer eller sakta ner sina webbplatser.
Men här är vad vi har lärt oss av att hjälpa tusentals nybörjare: rätt sidbyggare kan dramatiskt förenkla webbplatsbyggande samtidigt som den levererar professionella resultat.
I den här steg-för-steg-guiden visar vi hur du skapar anpassade WordPress-layouter med Beaver Builder. Oavsett om du börjar från noll eller använder färdiga mallar, kommer du att lära dig hur du bygger exakt det du vill ha, utan att behöva koda.
Varför använda Beaver Builder för att skapa anpassade WordPress-layouter 👀
Många premium WordPress-teman kommer med färdiga sidlayouter för olika sektioner på en webbplats. Ibland kanske dock en inbyggd layout inte passar dina behov.
Du kan skapa anpassade sidmallar i WordPress genom att skapa ett barn-tema och sedan lägga till dina egna sidmallar. Men du behöver lite kunskap om PHP, HTML och CSS för att det ska fungera.
Det är här verktyg som Beaver Builder kommer in. Det är ett dra-och-släpp sidbyggarplugin för WordPress. Det hjälper dig att skapa dina egna anpassade sidlayouter utan att skriva någon kod.
Beaver Builder är mycket lätt att använda och nybörjarvänligt. Samtidigt är det laddat med otroliga funktioner för att skapa professionellt utseende sidor.
Den fungerar med alla WordPress-teman och har massor av moduler som du bara kan dra och släppa till din sida. Du kan skapa vilken typ av layout du vill och ställa in den precis som du föreställde dig.
I den här Beaver Builder-handledningen visar vi hur du använder Beaver Builder för att skapa anpassade sidlayouter i WordPress. Du kan använda snabblänkarna nedan för att navigera genom den här artikeln:
- Steg 1: Konfigurera Beaver Builder-pluginet
- Steg 2: Skapa din första anpassade sidlayout med Beaver Builder
- How to Manage Page Layout Templates in Beaver Builder
Steg 1: Konfigurera Beaver Builder-pluginet
Först måste du köpa pluginet Beaver Builder. Det är ett betalplugin, med priser från $99 för obegränsade webbplatser.
Därefter måste du installera och aktivera Beaver Builder-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan Inställningar » Beaver Builder för att ange din licensnyckel.
Efter att ha angett din licensnyckel är du nu redo att skapa vackra sidlayouter.
Steg 2: Skapa din första anpassade sidlayout med Beaver Builder
Skapa först en ny sida i WordPress genom att besöka Sidor » Lägg till ny sida.
Innan vi öppnar Beaver Builder, ge din nya sida en titel och spara den som ett utkast.
Enligt vår erfarenhet skulle sidbyggaren inte öppnas om vi inte gör detta först.
När du har gjort det, klicka på knappen 'Starta Beaver Builder' för att komma igång.
Detta öppnar startsidan av din sida i Beaver Builder-gränssnittet.
Om detta är första gången du använder Beaver Builder, kommer du att se en välkomstpopup som erbjuder dig en guidad tur.
Därefter behöver du klicka på '+'-knappen i toppmenyn. Den här knappen kommer att förvandlas till en 'x'-ikon. Byt sedan till fliken 'Mallar'.
Beaver Builder levereras med några professionellt designade mallar för att du ska komma igång direkt.
Oroa dig inte; du kan anpassa mallen så mycket du vill. Det är bara ett snabbt sätt att komma igång med en layout.
När du väljer en layout kommer Beaver Builder att ladda den i förhandsgranskningsfönstret. För muspekaren över ett objekt, så kommer Beaver Builder att markera det.
Du kan helt enkelt klicka på skiftnyckelikonen på valfritt markerat objekt för att redigera det.
Beaver Builder visar ett popup-fönster med olika inställningar som du kan redigera.
Du kan ändra teckensnittet, färg, bakgrund, teckensnitt, marginal, utfyllnad, och mer.
Beaver Builder-layouterna baseras på rader. Du kan dra och släppa för att ordna om rader. Du kan också ta bort eller lägga till en ny rad.
Klicka bara på samma '+'-knapp som tidigare och navigera till avsnittet 'Rader'. Härifrån kan du välja bland alla rader och kolumner som presenteras för dig.
Beaver Builder kommer att lägga till raden i förhandsgranskningen på din webbplats.
Du kan lägga till element i din rad med hjälp av de grundläggande eller avancerade modulerna och widgets. Dessa moduler låter dig lägga till de vanligaste elementen som knappar, rubriker, text, bilder, bildspel, ljud, video, etc.
Klicka helt enkelt på ‘+’-knappen och navigera till avsnittet ‘Moduler’. Dra sedan ett element till raden du just lade till.
Klicka på ett WordPress-designelemnt för att redigera dess egenskaper.
Du kan också spara en rad eller en modul för att återanvända senare på andra sidor. Klicka på knappen ‘Spara som’ när du redigerar en rad eller modul.
Klicka på knappen 'Klar' i det övre högra hörnet när du är klar med att redigera din sida.
Beaver Builder kommer att visa en serie knappar för att publicera eller spara din sida som ett utkast.
Du kan också återanvända en hel sidlayout för andra sidor på din WordPress-webbplats. Öppna helt enkelt sidan med Page Builder och klicka sedan på pilknappen nedåt för att komma åt ‘Verktyg’ i den övre listen.
Beaver Builder kommer att visa dig en popup. Du kan spara sidan som en mall eller snabbt skapa en duplicerad sida med samma layout.
Hur man hanterar sidlayouter i Beaver Builder
Du kan se alla mallar du har skapat under Beaver Builder » Mallar. Här kan du hantera, förhandsgranska och redigera dina befintliga mallar.
En stor fördel med Beaver Builders mallar är att de är anpassade inläggstyper. Detta innebär att du enkelt kan exportera dina Beaver Builder-mallar med hjälp av WordPress inbyggda exportfunktion.
Besök sidan Verktyg » Exportera och välj Mallar. Klicka på knappen 'Ladda ner exportfil', så skickar WordPress dig en XML-fil att ladda ner.
Logga nu in på WordPress-webbplatsen där du vill importera mallarna. Besök sidan Inställningar » Import och klicka på WordPress.
Du kommer att bli ombedd att ladda ner och installera WordPress-importörpluginet. Därefter kan du helt enkelt ladda upp din mallens XML-fil och importera den.
Alternativ: Använd SeedProd för att skapa ett anpassat tema
Även om Beaver Builder är bra, kanske det inte passar alla perfekt. Det är okej! Det finns andra utmärkta alternativ där ute, som SeedProd.
SeedProd är en annan användarvänlig sidbyggare som vi ofta rekommenderar. Den är inte bara till för att skapa landningssidor. Du kan till och med använda den för att skapa hela WordPress-teman. Vi har använt den flitigt i många projekt, inklusive att bygga landningssidor för OptinMonster.
Det som gör SeedProd utmärkande är dess omfattande anpassningsmöjligheter. Dessa låter dig enkelt lägga till coola funktioner på dina sidor, som roterande vittnesmål, iögonfallande animationer, professionella prislistor, funktionsrutor och mer.
Dessutom har SeedProd AI-verktyg som snabbt kan generera text och bilder av god kvalitet för din webbplats. Detta kan vara en riktig tidsbesparare när du bygger dina sidor.
Intresserad av att lära dig mer? Kolla in dessa recensioner för att se hur SeedProd jämförs med andra populära sidbyggare:
- Elementor vs Divi vs SeedProd (jämfört) – Vilken är bäst?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Vi hoppas att den här artikeln hjälpte dig att skapa anpassade sidlayouter i WordPress med Beaver Builder. Du kanske också vill se vår guide om hur man skapar en mobilvänlig WordPress-webbplats och våra experttips om de bästa WordPress-temabyggarna.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
corey
det här hjälper mig mycket.
jag använder astra och beaver. har behövt uppgradera till growth plan snart
är fortfarande över mitt huvud till skillnad från Guttenberg
WPBeginner Support
Kul att höra att vår guide var till hjälp!
Admin
Rodney Harrier
Jag började använda Elementor för att bygga en blogg. Om jag byter till Beaver Builder, förlorar jag det jag har gjort?
WPBeginner Support
Om du byter plugin skulle du förlora anpassningarna från ditt första plugin.
Admin
Pius Anthony
Bästa Sir,
Gott nytt år, jag har tittat på din wpbeginner-video, den är verkligen inspirerande. Jag tror att jag inom sex månader kommer att undervisa andra människor.
Hälsningar
Pius Anthony
WPBeginner Support
Glad our guides can help you start helping other people too
Admin
Krayl
När du använder Beaver Builder, använder du den bara på ett barn-tema? Om inte, hur står den sig mot tema-uppdateringar?
Tack team WPbeginner!
Lisa Theriault
Jag behöver verkligen lite hjälp. Det här ska vara enkelt men när jag klickar på en modul eller en rad händer ingenting. Jag försökte dra och släppa, spara, etc. Nada. Jag säkerställde att inställningarna var korrekta och att pluginet var aktivt. Beaver Builder visas på sidan för redigering men jag är uppenbarligen en idiot. Blir frustrerad, men jag är säker på att det bara är något dumt. Kan någon erbjuda förslag? Jag följde nybörjarguide och den är verkligen enkel. När jag försöker göra det i Live-läge... ingenting. Snälla hjälp. Tack på förhand.
WPBeginner Support
Hej Lisa,
Prova att redigera en ny sida. Om det inte fungerar, prova att byta till ett standard WordPress-tema som twenty seventeen och försök sedan redigera med Beaver Builder. Om det fungerar, har ditt tema troligen kompatibilitetsproblem med sidbyggaren.
Admin
David Sharp
Jag har samma problem som Lisa. Jag använde Beaver Builder för ett par år sedan för att skapa en landningssida, och det fungerade mycket bra. Faktum är att jag fortfarande använder samma landningssida utan några problem. Men idag försökte jag skapa en ny landningssida med Beaver Builder, men den här gången fungerade Beaver Builder inte.
Här är vad som hände: Jag skapade en ny sida. Jag klickade på Beaver Builder-fliken. Men istället för att se en knapp som sa "Starta Beaver Builder", hamnade jag på en skärm som sa "Släpp en radlayout eller modul för att komma igång". Tyvärr lyckades Beaver Builder inte producera en Beaver Builder-verktygsfält eller några andra verktyg (som moduler eller rader) att bygga sidan med.
Här är vad jag försökte göra för att lösa problemet, utan framgång:
1. Jag inaktiverade mina andra plugins.
2. Jag bytte till Twenty Sixteen-temat.
3. Jag såg till att jag använder den senaste versionen av allt (Wordpress, Beaver Builder, etc.)
4. Jag märkte att om jag skrev något på sidan och sedan klickade på Beaver Builder-fliken, skulle verktyg visas. Men när jag klickade på dem fick jag bara en snurrande cirkel.
5. Jag försökte använda Beaver Builder på min webbplats som är online, och även på min lokala testplats, men Beaver Builder fungerade inte på någon av platserna.
6. Jag försökte använda en annan webbläsare (Safari istället för min vanliga Chrome) utan framgång.
Någon idé om vad som kan vara fel och hur jag kan fixa det?
Tack!
WPBeginner Support
Hej David,
Du kan kontakta Beaver Builders support, de kan hjälpa dig.
Krayl
Samma sak hände mig Lisa. Jag tror att det är mitt tema som inte fungerar bra med BB. Jag letar efter att byta tema för att få full kompatibilitet.
Yeremi Akpan
Jag hade liknande problem när jag använde Chrome, men de löstes när jag bytte till Microsoft Edge.
Jesse
Jag är så tacksam för alla wpbeginner 'how-to'-artiklar. De är tydliga och direkta, och de gör mitt liv så mycket enklare. Eftersom jag kunde följa spåret från e-handel via Beaver Builder är jag nu i en position att skaffa OptInMonster. Tack Syed & team.
Gabrielle
Hej, matar BB ut [kortkoder] eller HTML-innehåll när du växlar tillbaka till den vanliga redigeraren?
Jag undrar om detta fungerar bra när du bygger produktsidor för woocommerce.
Dr. Peter H. Markesteyn
Skulle jag behöva skapa ett barn-tema (20-17) för att bevara alla ändringar jag skulle göra med BeaverBuilder när det finns en uppdatering?
Anthony
Även om detta plugin är bra, undrade jag om du lär ut hur man anpassar dem själv? Jag vill bygga min portfölj och att veta hur man gör det själv skulle vara fantastiskt!
Ian Gordon
Med Beaver Builder-pluginet kan jag ta ett befintligt tema och skapa en helt ny Header och Footer utan att redigera några av de befintliga mallfilerna? Min
Sam
Hur bra fungerar Beaver Builder med andra plugins?
WPBeginner Support
Det fungerar bra med de flesta plugins. Det kan finnas några problem med ett slumpmässigt, mindre vanligt plugin, men de löser snabbt sådana problem.
Admin
Rk bhardwaj
Detta är ett fantastiskt plugin för att få vilken blogg som helst att se snygg ut
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
JAG ÄLSKAR Beaver Builder. Jag har använt det för närmare ett dussin webbplatser sedan jag bytte tillbaka i höstas. Jag håller faktiskt på att konvertera några av mina kunder från VC till BB. Det är grymt!
Shaiful
Hej där,
Undrar bara, kan det stödja kortkoder med villkorligt sammanhang? Som till exempel:
[if user_loggedin]
hej användare.
(visa inloggad användarinnehåll byggt med beaver builder)
[else]
hej gäst.
(visa offentligt innehåll byggt med beaver builder)
[/if]
WPBeginner Support
Ja, det stöder shortcodes. Klistra in dem i vilket fält som helst där du kan infoga text så kommer de att renderas automatiskt. När du placerar shortcodes på sidan är det bäst att använda HTML-modulen jämfört med Textredigeringsmodulen. Den senare tenderar att lägga till ytterligare p-taggar som ibland bryter layouten.
Admin