Att få din hemsida igång behöver inte vara komplicerad. Faktum är att du kan skapa en enkel men ändå effektiv företagsplats med hjälp av en webbsidemall på en sida. Genom att använda en mall på en sida kan du ge din verksamhet en nödvändig online närvaro och presentera all information om de tjänster eller produkter du erbjuder.

En extra fördel är att personer som är intresserade av ditt företag direkt kan se alla detaljer som de behöver utan att behöva klicka igenom flera sidor. Och eftersom webbplatser på en sida ofta innehåller flera samtal till handling, har du en mycket större chans att konvertera besökare till potentiella köpare.

I den här handledningen går vi igenom stegen för att ställa in din webbplats med en HTML-mall för en sida. Vi täcker de verktyg du behöver, de tekniska detaljerna för att anpassa din mall och hur du laddar upp den till din server. Vi ger dig också några viktiga tips om hur du gör en sida till webbplatser som är effektiva. Låt oss börja!

Innan du börjar

Innan du skapar din webbsidans webbplats finns det några saker du behöver. Låt oss gå över dem nedan.

1. Domännamn

Det mest uppenbara valet är att använda ditt företagsnamn för din domän. Om namnet tas kan du försöka lägga till ord som företag, byrå eller studio och sedan köpa domännamnet.

Det rekommenderas också att använda en .com-tillägg eftersom den är en av de äldsta och mest trovärdiga tilläggen. Om du inte kan få ett lämpligt namn med .com-tillägget, är det dock värt att överväga att använda en .net-tillägg.

2. Hosting Company

Att hitta ett bra webbhotell kan tyckas vara en omöjlig uppgift först. I allmänhet vill du leta efter en värd som har bra recensioner på tredje parts webbplatser eftersom de är mer benägna att vara opartiska. Var uppmärksam på vad folk säger om deras upptid, kundsupport och användarvänlighet.

3. HTML-mall

Nästa steg är att hitta en mall för din webbplats. Ett bra ställe att starta din sökning är ThemeForest-marknaden. Du kan välja bland hundratals professionella ensidiga sidmallar som tillgodoser olika nischer, eller bläddra i vårt kurerade urval av några av de bästa: 

4. Kodredigerare och FTP-klient

Eftersom du behöver redigera mallen för att ersätta informationen med din egen, behöver du en kodredigerare. Den kommer att markera kodsyntaxen och göra det enklare att hitta de delar av koden som måste ändras.

För denna handledning använder jag Sublime Text som kan användas på Mac, Windows och Linux och levereras med en gratisversionsversion.

Du behöver också en FTP-klient som FileZilla för att ansluta till din server och ladda upp webbfilerna utan att behöva ladda upp dem en efter en. FileZilla är gratis och tillgängligt för alla operativsystem.

Låt oss nu titta på detaljerna om hur man gör en webbsida, börjar med att hämta och konfigurera din webbplatskabel.

Så här redigerar du webbplatsens mallens innehåll

När du har samlat alla filer och verktyg du behöver, är det dags att ändra HTML-mallen. För den här handledningen använder jag Wander-webbsidans mall. Börja med att hämta mallfilerna från sidan Downloads på ThemeForest. Extrahera innehållet i den zippade mappen och öppna mappen. Du kommer märka att den innehåller en dokumentationsmapp samt alla webbplatsens mallfiler.

Eftersom det här är en mångsidig mall, har den en hel del filer inuti. Din mall får bara komma med en enda HTML-fil och mappar som innehåller stylesheets, scriptfiler och bilder.

För att redigera mallen som du vill, måste du ändra den HTML-fil som vanligtvis kallas index.html. I fallet med Wander redigerar jag filen som heter hem-one-page.html, som vi gör en sida för en sida.

Arbeta med HTML

Om du aldrig har arbetat med en HTML-mall innan, kommer filen troligtvis att skrämmas om du försöker öppna den i Sublime Text eller någon annan redigerare. Medan en fullständig HTML-handledning ligger utanför ramen för den här artikeln, låt oss täcka grunderna för vad HTML är och hur det ser ut.

HTML är ett märkningsspråk som består av taggar som

,

,

, och andra. Taggarna kommer i par, var och en har en öppning och en stängning. De hjälper webbläsaren att förstå hur det ska visa vad som finns mellan dessa taggar.

En punkt i ett HTML-dokument kommer att se ut så här:

Detta är min paragraf.

. En rubrik kommer att vara omgiven av en h tagg tillsammans med ett nummer från 1-6 vilket betyder huvudnivå 1 genom rubriknivå 6.  

När du redigerar en HTML-mall behöver du inte redigera någon av taggarna, bara texten mellan dem. Om du vill kopiera en del av koden eller ta bort den måste du dock välja hela delen från öppningsetiketten till stängningskoden och sedan kopiera den eller radera den.

Det enklaste sättet att redigera din mall är att öppna den i en webbläsare och sedan inspektera koden. Dubbelklicka först på HTML-filen för att öppna den i standardwebbläsaren. Strax utanför fladdermusen ser du att du behöver redigera texten i rubrikavsnittet. Högerklicka på meningen som läser Vi gör Märken Shine och välj Inspektera.

Inspektera HTML i en webbläsare.

En panel kommer att dyka upp längst ner som visar HTML-koden i vår mall. Linjen som har den valda meningen kommer att finnas på vänster sida av inspektionspanelen. Du ser att meningen är inbäddad i en

tagg med klassen av stor mt20.

Öppna nu mallen i kodredigeraren genom att högerklicka på mallnamnet och välj Öppna med Sublim Text. Hitta samma kodkod som du såg på inspektionspanelen, välj texten mellan taggarna och ersätt den med din företagsnamn.

Redigering av HTML-kod.

För att redigera stycket direkt under rubriken du just ersatte, gå tillbaka till din webbläsare, högerklicka på stycket och välj Inspektera. Den här gången är meningen insvept mellan

taggar med klassen av vit. Gå tillbaka till kodredigeraren, hitta motsvarande kodkod, klicka på taggarna och lägg till din information.

Fortsätt med dessa steg tills du har ersatt all demoinnehåll med din egen. Ta bort oönskade sektioner genom att välja allt från öppningen till stängningskoden för en viss kodavdelning.

På samma sätt, om du vill kopiera en del av mallen, hitta koden som innehåller den delen och välj allt inklusive öppnings- och stängningstaggarna och kopiera och klistra in det där du vill att innehållet ska visas.

I skärmbilden nedan vill jag lägga till en annan recension, så jag valde koden för den tredje testimonialen och kopierade den direkt nedan.

Observera att i de flesta fall kommer delar av koden att vara inslagna i

taggar innan du går in i någon rubrik och punktkoder. Om du vill duplicera eller ta bort det avsnittet måste du välja

taggar också; Annars visas inte ditt innehåll korrekt.

När du är redo att redigera innehållet måste du ersätta bilderna. Det bästa sättet att byta ut dem är att notera bildnamnen i din mallmapp och namnge dina bilder på samma sätt. När dina bilder är korrekt namngivna, kopiera dem till bildmappen.

Hur man utformar din webbsidans mall för en sida

Det finns ännu en sak kvar att göra innan du laddar upp filerna till din server, och det är styling mallen som matchar ditt befintliga varumärke. Stilarna finns i CSS-mappen. När det gäller Wander finns det flera stylesheets tillsammans med den namngivna mappen Färger.

För att börja redigera CSS-filen kan du följa samma steg som vi använde för att redigera HTML-filen. För att ta reda på hur ett visst element är utformat högerklickar du på det i webbläsaren och klickar på Inspektera. Den här gången, se till höger, och du kommer att märka motsvarande stil för det elementet. Samma panel kommer också att ha namnet på stilfilen som du behöver redigera tillsammans med linjen där den här koden finns.

Inspektera CSS i en webbläsare. 

Öppna filen i kodredigeraren. I det här fallet är det theme.css. Eftersom jag vill redigera bakgrundsfärgen på den andra sektionen som har alla funktioner, måste jag hitta rad 5378 i teman.css-filen. Låt oss ändra det till svart:

Snabbjustera bakgrundsfärgen i CSS. Om du snabbt vill justera färgen behöver du bara byta stilarket i HTML-filens huvud med namnet på din föredragna CSS-fil.

Leta efter koden som säger:

Byter namn till green.css kommer att ändra färgerna på knappar, länkar och ikoner:

Ändra CSS-filknappens färger.

För att ändra teckensnitt, inspektera någon text och titta på den högra delen av inspektionspanelen. Du får se namnet på det teckensnitt som texten använder, samt kodlinjen där du kan ändra den till ett teckensnitt som du föredrar.  

Att lokalisera CSS-koden för teckensnitt.

Så här laddar du upp din webbplatsmall till servern

Nu när du har modifierat och stylat din webbsidemall för en sida kan du ladda upp den till din värdserver. Din värd kommer att förse dig med användarnamnet och lösenordet som behövs för att använda FTP-anslutningen.

För att starta uppladdningsprocessen, öppna FileZilla och ange servernamnet, användarnamnet och lösenordet i den övre fältet, och klicka sedan på Snabbanslutning.

Leta reda på mappen med din mall på din dator på vänstra sidan av skärmen och klicka på den för att expandera den. I nedre vänstra sidan väljer du alla filer och mappar och drar dem över till höger om skärmen i rotmappen på din värdserver som finns i public_html mapp.

Överföring av webbsidan för en sida via FTP.

5 Viktiga tips för bättre webbsidor för en sida

Nu när din webbplats är live, här är några viktiga tips att tänka på.

1. Håll ditt meddelande framgångsrikt

Till skillnad från en traditionell webbplats har en sidmall begränsat utrymme tillgängligt, så det betyder mindre utrymme för att få ditt meddelande över. Därför är det viktigt att eliminera allt jargong och onödiga detaljer och lämnar bara den mest relevanta informationen. Förklara tydligt vad du har att erbjuda och fördelarna med din produkt eller tjänst.

2. Använd starka samtal till handling

Med tanke på det begränsade utrymmet måste din uppmaning till handling vara stark och övertygande. Du måste också inkludera det flera gånger för maximal effekt. Som standard kommer de flesta webbsidor på en sida redan med flera sektioner som innehåller ett samtal till handling, så att du får ut det mesta av dem. Direkt besökare till en sektion som har prisplaner eller kontaktformulär där de kan komma i kontakt med dig.

3. Håll navigering tillgänglig och enkel

Ange din navigering för att hoppa till olika delar av din webbplats. Du kommer vara ett steg före spelet om du väljer en mall som redan har en klibbig navigering som stannar på plats när en besökare rullar ner. Inkludera endast länkarna till din webbplats sektioner och undvika att placera några externa länkar som det kommer att kasta bort någon som besöker din sida.

4. Använd visuals

Med hjälp av bilder eller video kan du berätta för din historia och dela mer om vad du har att erbjuda utan att ta upp för mycket utrymme. När det gäller en sida webbplatser är visuella din bästa vän.

5. Underhålla hierarkin

Placera viktigaste informationen högst upp på din webbplats och sedan sakta vägleda användaren nedåt på sidan till mer specifik information som stöder ditt kärnmeddelande. Detta hjälper dig att behålla hierarkin och presentera informationen på ett logiskt sätt.

Kom igång med din egen webbsida

Om du har följt den här handledningen har du nu kunskap om att snabbt skapa en webbsidans webbplats med en responsiv mall. Starta din resa med rätt webbsidans mall och hänvisa till den här handledningen för att hjälpa dig att ställa upp det snabbt.

Företag