Hur man kodar en webbplats från Scratch (nybörjarhandbok)

hur man kodar en wordpress-webbplats


Vill du koda en webbplats från grunden? För det kanske du känner dig skrämd av tanken på att behärska tråkiga kodningsspråk för att designa en webbplats som fungerar så bra som den ser ut.

Lyckligtvis erbjuder WordPress mycket flexibilitet för alla som vill bygga en webbplats som ser bra ut, har kraftfulla funktioner och inte kräver komplex kodningskunskap.

Så om du vill koda en webbplats från grunden men inte är en master i kodningen är det här inlägget åt dig. För efter att du har läst denna handledning vet du hur du designar en webbplats som en proffs på mindre än en dag.

Och inte bara kommer den här guiden att lära dig det enklaste sättet att designa en webbplats, utan den sparar också timmar med tid, energi och huvudvärk.

Men om du fortfarande är osäker på om det är bättre att koda en webbplats från grunden eller bygga en med WordPress, här är några punkter som hjälper dig att fatta ditt beslut.

Ska du verkligen koda en webbplats?

Att koda en fullständig webbplats kan vara en svår uppgift för nybörjare. Här är några problem som nya kodare möter när de försöker skapa en webbplats:

  • Att lära sig nya språk är tidskrävande: Det finns flera programmeringsspråk som du kan behöva lära dig att bygga din webbplats. HTML och CSS är två grunder som du absolut inte kan ignorera. Och om du vill ha avancerade alternativ kan du lägga till fler språk i din lista, som jQuery, JavaScript och PHP. Det betyder att du måste behärska flera språk för att få fram din slutprodukt. Om du inte har mycket kodningskunskap under ditt bälte kan din webbplats ta månader att bygga snarare än dagar.
  • Att hitta rätt resurser är knepigt: Det som är mer utmanande är att internet är laddat med information. Detta ökar chansen att du blir mer förvirrad när du försöker lära dig nya kodningsspråk. Detta leder till att några nya kodare registrerar sig på guidade kurser, vilket kan vara dyrt.
  • Det är omöjligt att planera för oväntade problem: Även om du övervinner alla dessa utmaningar och äntligen skapar en vacker webbplats kan fler utmaningar dyka upp med tiden. Om du till exempel vill lägga till en sidofält till din webbplats eller ändra din webbplats bakgrund för vissa sidor kan du sluta slösa dagar med din tid på att lära dig lösningen.

Med så många hinder att övervinna kan du bara välja om du vill koda en webbplats från grunden eller inte. Om du gillar många webbplatsbyggare kan du överväga andra alternativ.

Vad är ett enkelt alternativ?

Det bästa svaret är att koda en webbplats med en WordPress-webbplatsbyggare.

Vad är en webbplatsbyggare?

I WordPress är en webbplatsbyggare en visuell redigerare som låter dig skapa en webbplats med dess dra och släpp-gränssnitt. Så till skillnad från ren kodning har du alla element läggs till i den visuella byggaren. Sedan drar du bara de element du vill använda för att skapa din webbplats. Det bästa är att du har en förhandsvisning av din design i realtid medan du arbetar med den.

WordPress har flera fantastiska alternativ för dig att välja en bra webbplatsbyggare. Här är några bra sidbyggare som du kan kolla in. För denna tutorial kommer vi dock att använda Beaver Builder och Constant Contact’s Website Builder för att skapa din webbplats.

Låt oss börja med Beaver Builder.

Metod 1: Kodning av en webbplats med WordPress + Beaver Builder

bäver-builder-skräddarsy-wordpress

Steg 1. Installera och aktivera Beaver Builder

Om du vill koda en webbplats med Beaver Builder måste du först installera WordPress. Sedan installerar och aktiverar du Beaver Builder-plugin från din WordPress-instrumentbräda. När detta är gjort kan du börja använda den för att designa din webbplats.

Så här fungerar det:

Gå tillbaka till Sidor »Lägg till nytt i din WordPress-instrumentpanel. Nu ser du att Gutenberg-redaktören ger dig möjligheten att starta plugin-programmet Beaver Builder.

Beaver Builder

Klicka på Lansera Builder Beaver.

Detta lanserar Beaver Builder visuella redaktör där du kan arbeta med din design. Till höger ser du alternativen för att lägga till rader, moduler och mallar. Den har också en flik som heter sparade där du kan se alla dina tidigare sparade mallar.

Beaver Builder, hur man kodar en webbplats

Steg 2: Välja en mall för din webbplats

Nästa steg är att skapa en mall för din design. Du kan välja en mall genom att klicka på mallar till höger.

beaver builder mallar, hur man kodar en webbplats

Här ser du olika förbyggda mallar som visas. Du har också ett tomt mallalternativ som du kan använda för att skapa ett mer anpassat utseende.

Builder Beaver erbjuder också separata alternativ för sina målsidor. Genom att välja en av dessa förbyggda mallar kan du komma igång direkt. Det tar bara några justeringar att anpassa olika element som texten, logotypen, taglinjen och så vidare.

Steg 3: Lägga till rader och moduler till din layout

Detta steg är viktigt om du vill bygga din design från början. Du kan också lägga till rader och kolumner i en förbyggd mall också.

För att lägga till rader i din design, välj bara rader och välj antalet rader du vill lägga till. Dra nu dina rader och släpp dem till vänster. Du kan klicka på var och en av dessa flikar för att anpassa deras utseende.

Beaver Builder Layout rader

Med hjälp av dessa anpassningsalternativ kan du enkelt flytta dina kolumner, duplicera dem, justera radbredden eller arbeta på varje kolumn individuellt. Om du vill redigera dina kolumner klickar du på kolumnen där du vill göra ändringarna. Klicka sedan på Redigera kolumn för att komma igång. Nu ser du Kolumninställningar alternativ.

Kolumninställningar bäverbyggare

Här kan du lägga till text, länkar, bakgrundsfärger, lägga till gränser, animering och många andra element i dina kolumner. Nu när raderna läggs till är det dags att lägga till dina moduler.

Att lägga till moduler är lika enkelt som att lägga till dina rader. Gå bara till moduler fliken, dra modulen du vill ha från höger och släpp den till vänster.

lägga till moduler till bäverbyggaren

Du kan också anpassa var och en av dessa moduler. Om du till exempel vill arbeta med din rubrik, behöver du bara klicka på din rubrikmodul. Du kommer att se en popup visas på din skärm med 3 olika flikar.

  1. Allmän
  2. Stil
  3. Avancerad

I Allmän fliken kan du redigera din text, lägga till en rubriktagg, lägga till länkar, lägga till en “nofollow” -tagg eller låta dina länkar öppna i ett nytt fönster om du vill.

Anpassa din rubrik

De Stil fliken låter dig arbeta med färg, typsnitt, stil & avstånd, och mer.

Beaver Builder anpassning

Slutligen finns det Avancerad flik. Under den här fliken kan du lägga till avstånd, anpassa synlighet, lägga till animationer, infoga HTML-element och exportera eller importera din layout också.

Beaver builder stilalternativ

Glöm inte att klicka på Spara om du inte vill tappa dina inställningar.

Du kan upprepa processen med alla moduler som lagts till på din webbplats så att du kan anpassa alla aspekter på din webbplats. Du kan också lägga till sidofält, prissättningstabeller och andra element på din sida med Beaver Builder.

Sedan är allt som återstår att publicera din webbplats.

Steg 4: Publicera din webbplats

När allt har lagts till och anpassats ordentligt är det dags för dig att göra det Publicera din sida. För det ser du Publicera -knappen längst upp till höger på skärmen.

publicera beaver builder layout

Och det är allt! Du har nu byggt en anpassad webbplats med Beaver Builder som inte krävde dyra kodningskurser eller långa sömnlösa nätter som siktades genom kodforum.

Vi har granskat grunderna i vad du kan göra med Beaver Builder, men du kanske är intresserad av att dyka djupare. Om så är fallet, hittar du den här artikeln användbar för att skapa en anpassad layout med Beaver Builder.

Nu när vi har täckt vår första metod, låt oss kolla in en annan WordPress-webbplatsbyggare som du kan använda: Constant Contact website builder.

Metod 2: Kodning av en webbplats med konstant kontaktbyggare

Nästa metod är att koda din webbplats med Constant Kontakts webbplatsbyggare.

Constant Contact är en tjänsteleverantör för e-postmarknadsföring som effektiviserar dina e-postmarknadsföringsstrategier.

Men det erbjuder också en webbplatsbyggare som låter dig skapa professionella webbplatser för ditt företag utan att använda en enda kodrad. Låt oss kolla hur du använder den här byggaren för att skapa din webbplats.

För att påbörja processen, gå till den officiella webbplatsen för konstantkontakt för webbplatsbyggare och klicka på Skapa din gratis webbplats på din skärm.

Konstant kontaktwebbplatsbyggare

Nu kommer du på en ny skärm där du blir ombedd att tilldela din webbplats till en kategori.

Konstant kontaktbyggare

När du har gjort det kommer du att vara på byggaren där du kan börja skapa din webbplats. Till vänster ser du ett fält för att lägga till webbplatsens namn. Till höger ser du den verkliga bilden av hur din webbplats kommer att se ut.

Konstant kontaktwebbplatsbyggare

Om du bläddrar nedåt får du en global vy över webbplatsen. Du kan lägga till webbplatsens namn och klicka på Fortsätta knappen under den. Då är det dags för en av de viktigaste aspekterna av din webbplatsdesign: att välja en bakgrundsbild.

Constant Contact visar några alternativ med bilder du kan använda gratis baserat på kategorin på din webbplats. Om du inte vill använda ett lagerfoto kan du använda Ladda upp för att lägga till en egen bild.

Konstant kontaktbakgrundsbild

När du väljer din bakgrundsbild klickar du på Fortsätta för att gå till nästa steg där du kan ladda upp din logotyp.

Klicka på det tomma området där du ser alternativet att Klicka för att ladda upp din bild och ladda upp din logotyp från skrivbordet.

Konstant kontakt byggmästare logotyp

Slå sedan på Fortsätta för att gå till nästa steg. Nu får du välja din webbplats färgschema. Du har flera alternativ, alla börjar med två teman: Ljus och mörk. Du kan välja vad du tror bäst för din webbplats och varumärke.

Konstant kontaktfärger

Återigen, slå på Fortsätta för att gå till nästa steg. Därefter kan du välja din navigationsstil och typsnitt. När de har valts kan du uppdatera dina kontaktuppgifter i nästa steg.

Kontaktuppgifter, ständig kontaktdemo

Klicka nu på Avsluta knappen under den. Du ser en översikt över din startsida, galleri och andra sidor för att bekräfta att du är nöjd med det övergripande utseendet. Om allt ser bra ut kan du gå vidare och slå på Publicera -knappen längst upp till höger på skärmen.

Förhandsvisning av konstant kontaktplats

Och det är allt. Allt som återstår är att bekanta dig med inställningarna för Constant Contact-webbplatsbyggaren.

Konstant kontaktwebbplatsinställningar

Om du behöver göra några ändringar på din webbplats har du många enkla alternativ för att göra det. Med hjälp av flikarna högst upp i redigeraren för webbplatsbyggare kan du ändra ditt tema eller arbeta med andra inställningar också.

Förhandsvisning av konstant kontaktplats

Om du till exempel klickar på inställningar ikon ser du olika alternativ för att förbättra olika aspekter av din webbplats prestanda

Konstant kontaktinställningar

Med dessa inställningsalternativ kan du ändra namn och domän, logotyp, favicon och till och med arbeta på webbplatsens SEO. Du kan också uppdatera dina kontaktuppgifter under Mitt företag till vänster.

Om du vill lägga till dina sociala länkar, klicka på Sociala konton flik.

Konstant kontakt social

På så sätt kan du bädda in dina länkar på sociala mediekonton som ska visas på sidens sidfot. Du kan också spåra webbplatsens prestanda under spårning & Analytics flik. Allt du behöver göra är att lägga till ditt Google Analytics spårnings-ID.

Här är en bra artikel om du inte har konfigurerat ditt Google Analytics-konto än.

Slutligen, under Rättslig kan du lägga till dina villkor och tjänster. Du kan också lägga till anpassad HTML med HTML-injektion fliken, men detta är mindre viktigt för skapare av nybörjare.

Och där har du det! Nu ser du hur lätt det är att skapa en anpassad webbplats med en webbplatsbyggare. Det bästa är att det inte handlar om att skriva eller lära sig någon kod.

Med hjälp av en webbplatsbyggare kan du få samma resultat i en bråkdel av tiden.

Inte övertygad av Beaver Builder eller Constant Kontakts webbplatsbyggare? Oroa dig inte. Vi har fler förslag på webbplatsbyggare för dig som kan förenkla processen att designa din webbplats.

Men om du fortfarande bestämde dig för att koda din webbplats från början men inte vet hur du kommer igång har vi också lösningen för det. Prova Codecademy. Det är den bästa startplatsen för alla som har tid och vill lära sig kodning med en guidad steg-för-steg-kurs.

När du är klar med att lära dig att koda och du är redo att bygga din första webbplats måste du välja ett domännamn och välja ett bra webbhotell där du kan vara värd för din webbplats.

Tack för att du läste och vi hoppas att du gillade den här artikeln. Om du gjorde det, varför inte dela det med en vän?

Och har du några coola förslag för att arbeta med webbplatsbyggare?

Låt oss veta i kommentarerna nedan. Vi älskar att höra från våra engagerade läsare!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map