Share
När du är redo att starta en ny webbplats, en produkt eller en tjänst behöver du en dedikerad plats för att skicka potentiella kunder och kunder. Men din webbplats kanske inte är redo att välkomna nya besökare än. I sådana fall är en HTML5 målsida mall det perfekta valet.
En HTML5-mall är snabb och enkel att installera. Till skillnad från ett CMS som kan använda ett komplext programmeringsspråk är en HTML-mall lätt att redigera även för nybörjare.
I denna handledning förklarar jag fördelarna med att använda HTML-målsidor för mallar och visar hur du ställer in en. Oroa dig inte: det är snabbt och smärtfritt.
Som jag redan nämnde kan du installera och konfigurera målsidor ganska snabbt. Men det finns några andra fördelar med att använda en:
Nu när jag har täckt fördelarna med HTML-mallar, låt oss dyka in i handledningen.
I den här handledningen använder jag ren mall. Det är en ren och minimal mall som kan användas för en rad olika ändamål och levereras med ett kontaktformulär och MailChimp-registreringsformulär.
Förutom mallen finns det några andra verktyg du behöver så att du kan ändra mallen och få din webbplats att leva:
Innan du väljer en mall för din målsida måste du köpa ett domännamn och registrera dig för en värdplan. Idag kan du köpa ett värdpaket som börjar så lågt som $ 5 / månad och de flesta webbhotell kommer att ge dig gratis domännamn när du registrerar dig för sin plan. Vissa värdföretag erbjuder obegränsat utrymme och bandbredd, och vissa kommer att begränsa tillgängliga resurser.
Se till att du gör din forskning och läsa några oberoende recensioner om värdföretag som pique ditt intresse. Att se hur nöjda sina tidigare kunder är kan vara en bra indikator på de erbjudna tjänsterna och kvaliteten på kundsupport.
Nästa objekt på din lista ska vara en FTP-klient. Det låter dig ansluta till din värdserver och ladda upp mallfilerna.
Det finns gott om FTP-klienter som är tillgängliga för olika operativsystem. En populär FTP-plattform som kan användas på alla plattformar är FileZilla. Det är också gratis att ladda ner och använda.
Du behöver en kodredigerare för att ändra din mall. Att använda en kodredigerare gör det enklare för dig att hitta koden du behöver redigera eftersom de använder speciell syntaxmarkering. Du kan använda Notepad ++ om du är en Windows-användare eller TextWrangler om du är en Mac-användare. Ett annat alternativ är att använda Sublime Text 3 som kan användas på både Windows och Mac-datorer, såväl som Linux, och erbjuder en gratis testversion.
Slutligen måste du köpa och ladda ner en mall för målsida och förbereda innehållet som kommer att gå på din målsida. Du kan hitta många html-målsidor på målsidan på Envato Elements som utformades specifikt för målsidor. När du väl har hittat en mall, köper du den och laddar den ner till din dator. Var noga med att pakka ut mappen och spara den någonstans där du enkelt kan komma åt den.
Samla alla bilder och text som du vill lägga till på din målsida. Att hålla allt på ett ställe gör det enklare att lägga till det i mallen och överföra bilderna till servern.
Med allt på plats är det dags att anpassa mallen och lägga till din information till den. Låt oss börja med att bli bekant med mallens struktur.
Som tidigare nämnts använder jag ren HTML-målsidan.
Efter att ha tagit bort mappen kan du se att mallen för startstraps målsidan innehåller flera undermappar och ett antal HTML-filer. Så här ser strukturen ut:
Du märker också flera HTML-filer, som representerar olika demoversioner av HTML-målsidans mallar. Du kan högerklicka eller dubbelklicka på varje HTML-fil för att öppna dem i din föredragna webbläsare och se hur de ser ut. När du har hittat demoversionen som du vill, stäng ut alla andra flikar.
Jag jobbar med index-normal-scroll-countdown.html-mallen under resten av handledningen.
Nu när din valda HTML-målsida för mallar är öppen i din webbläsare är det dags att ersätta informationen med din egen. Det enklaste sättet att göra detta är att förstå vilken del av koden i mallen som behöver ändras. Låt oss börja med att högerklicka på första raden av text under räknaren och klicka på Inspect.
En ny panel visas längst ner i ditt webbläsarfönster. Du kommer märka att den visar HTML-koden som utgör vår mall på vänster sida samt CSS som ger stilar för mallen på höger sida..
Som du kan se från skärmdumpen ligger den valda satsen mellan Taggar som representerar stycken. De flesta taggar i HTML består av tagpar som har en öppning och en slutgiltig kod. Innehållet måste placeras mellan de här taggarna för att visas på en webbsida:
opacity-0 "> Innan lanseringen, njut av en Mycket begränsad möjlighet genom att prenumerera på vårt nyhetsbrev.
Klicka på nästa knapp för att få mer information om vårt projekt.
För att ersätta dummyinformationen i mallen behöver du bara veta vilka taggar som innehåller den information du vill redigera. Då kan du hitta dessa taggar i kodredigeraren och infoga din egen text.
Nu när du vet hur du hittar kod som behöver redigering, gå tillbaka till mallmappen, högerklicka på din valda HTML-fil och välj Öppna med,och välj kodredigeraren som du hämtade tidigare. Du borde se den fullständiga HTML-koden som utgör din mall.
Bläddra ner kodredigeraren tills du hittar samma kodlinje som vi markerade i webbläsaren. Det borde vara runt linje 75-76. Klicka sedan inuti
tagg, markera texten och ersätt den med din egen.
För att redigera resten av mallen kan du helt enkelt upprepa stegen ovan tills all information du vill ha är inkluderad.
Du kan även ta bort delar av mallen om du inte vill att dom ska visas. På samma sätt kan du också kopiera sektioner om du vill inkludera mer information. Välj helt enkelt den del av mallen som börjar med öppningstaggen och markera allt till och med stängningskoden för den delen och antingen radera eller kopiera och klistra in den här delen nedan.
När du är klar att ersätta innehållet är det dags att ersätta provbilden med din egen. För att göra processen lättare, ta en titt på bildnamnen i mallens img-mapp och namnge dina bilder med samma namn. Välj sedan alla platshållarbilder, radera dem och placera dina bilder i mappen img istället.
Nu är det dags att tweak utseendet på din mall och redigera stilar i CSS. Som standard kommer den rena mallen med olika stylesheets för den mörka och lätta versionen av mallen:
För att ta reda på vilket stilark du behöver redigera, kolla på din HTML-fil i kodredigeraren och leta efter linjen som liknar detta:
Gå till mappens mapp och öppna motsvarande stilark i kodredigeraren.
För att se vilken kod och stil du behöver redigera, kan du upprepa samma process som vi använde för att redigera HTML.
Högerklicka på ditt element i din webbläsare och välj Inspect. Titta till höger och du ser de stilar som används för den delen av mallen:
Som du kan se från skärmdumpen, Inspektör visar oss de stilar som används för stycktexten. Byt till kodredigeraren och stilarkfilen. Bläddra tills du hittar en kodlinje som börjar med p.
Här kan du ändra de teckensnitt som används, storleken på teckensnittet samt textens färg.
Om du vill ändra bakgrundsfärgen på mallen, leta efter koden av koden som säger att kroppen följs av lockiga hakparentes och ange sedan HEX-färgkoden efter
den del som läser bakgrundsfärg.
Glöm inte att spara alla ändringar du har gjort genom att klicka på Spara i din kodredigerare.
När du har ändrat mallen efter eget tycke måste du ladda upp den till din värdserver. Din värdleverantör kommer att maila dig med all information du behöver för att överföra filer med FTP.
Starta ditt FTP-program som FileZilla. Du märker toppraden där du kan ange servernamn, ditt användarnamn och lösenord. Använd informationen från din värd genom att ansluta till din server genom att klicka på Snabbanslutning.
På vänster sida av FileZillas fönster, leta reda på mappen med din mall på din dator och klicka på den för att expandera den. Välj alla filer och mappar och dra dem över till höger om skärmen i mappen public_html.
När alla filer har laddats upp öppnar du webbläsaren och anger ditt domännamn. Grattis, din webbplats är nu live!
En målsida kan göra underverk för ditt företag eller produkt när du går upp för lanseringen. Här är några tips som hjälper dig att få ut mesta möjliga av dina mallar för målsidor för HTML och hjälper dig att skapa hype:
Om du vill lära dig mer om HTML-målsidor för mallar eller startmallar för bootstrap, granska dessa handledning:
Med hjälp av en HTML-mall kan du snabbt och enkelt få startsidan till startlistan. Börja med att välja en av våra HTML-målsidor för målsidor från Envato Elements eller en av startsidans mallar från ThemeForest. Använd sedan vår handledning för att vägleda dig genom installationsprocessen.
Accentsconagua