Share
Når du er klar til å starte et nytt nettsted, et produkt eller en tjeneste, trenger du et dedikert sted for å sende potensielle kunder og kunder. Men nettstedet ditt er kanskje ikke klar til å ønske nye besøkende velkommen ennå. I disse tilfellene er en HTML5 destinasjonsside mal det perfekte valget.
En HTML5-mal er rask og enkel å installere. I motsetning til et CMS som kan bruke et komplekst programmeringsspråk, er en HTML-mal enkel å redigere selv for nybegynnere.
I denne veiledningen vil jeg forklare fordelene ved å bruke HTML-landingssidenmaler og vise deg hvordan du setter opp en. Ikke bekymre deg: det er raskt og smertefritt.
Som jeg allerede nevnte, kan du installere og sette opp destinasjonssider ganske raskt. Men det er noen andre fordeler ved å bruke en:
Nå som jeg har dekket fordelene med HTML-maler, la oss dykke inn i opplæringen.
I forbindelse med denne opplæringen bruker jeg den rene malen. Det er en ren og minimal mal som kan brukes til en rekke formål og leveres med et kontaktskjema for kontakt og MailChimp-registreringsskjema.
I tillegg til malen er det noen andre verktøy du trenger, slik at du kan endre malen og få nettstedet ditt til å leve:
Før du velger en mal for destinasjonssiden din, må du kjøpe et domenenavn og registrere deg for en hostingplan. I dag kan du kjøpe en hostingpakke som starter så lavt som $ 5 / måned, og de fleste hostingfirmaer vil gi deg domenenavnet gratis når du registrerer deg for deres plan. Noen hosting-selskaper vil tilby ubegrenset plass og båndbredde, og noen vil begrense tilgjengelige ressurser.
Sørg for å gjøre din forskning og lese noen uavhengige vurderinger om hosting selskaper som pique din interesse. Å se hvor fornøyd deres tidligere kunder er, kan være en god indikator for tjenestene som tilbys og kvaliteten på kundesupport.
Det neste elementet på listen din skal være en FTP-klient. Det vil tillate deg å koble til din hosting server og laste opp malfiler.
Det er mange FTP-klienter som er tilgjengelige for forskjellige operativsystemer. En populær FTP-plattform som kan brukes på alle plattformer er FileZilla. Det er også gratis å laste ned og bruke.
Du trenger en kodeditor for å endre malen. Ved hjelp av en kodeditor vil det være enklere for deg å finne koden du må redigere siden de bruker spesiell syntaksutheving. Du kan bruke Notepad ++ hvis du er en Windows-bruker eller TextWrangler hvis du er en Mac-bruker. Et annet alternativ er å bruke Sublime Text 3 som kan brukes på både Windows og Mac-maskiner, samt Linux, og tilbyr en gratis prøveversjon.
Til slutt må du kjøpe og laste ned en målsidemal og forberede innholdet som skal gå på destinasjonssiden din. Du finner mange HTML-landingssider på Envato Elements som ble designet spesielt for destinasjonssider. Når du har funnet en mal du liker, kjøp den og last den ned til datamaskinen din. Pass på å pakke ut mappen og lagre den et sted der du lett kan få tilgang til den.
Samle alle bildene og teksten du vil legge til i destinasjonssiden din. Å holde alt på ett sted vil gjøre det enklere å legge det til malen, samt overføre bildene til serveren din.
Med alt på plass, er det på tide å tilpasse malen og legge til informasjonen din. La oss begynne med å bli kjent med malens struktur.
Som nevnt tidligere, bruker jeg HTML-målsiden til målsiden for landingssiden.
Etter at du har pakket inn mappen, kan du se at oppstartsskriftsmalen inneholder flere undermapper og en rekke HTML-filer. Slik ser strukturen ut:
Du vil også legge merke til flere HTML-filer, som representerer forskjellige demo-versjoner av HTML-landingssiden. Du kan høyreklikke eller dobbeltklikke på hver av HTML-filene for å åpne dem i din foretrukne nettleser og se hvordan de ser ut. Når du har funnet demoversjonen du liker, lukker du ut alle andre faner.
Jeg skal jobbe med indeks-normal-scroll-countdown.html-malen gjennom resten av opplæringen.
Nå som den valgte HTML-målsiden din er åpen i nettleseren din, er det på tide å erstatte informasjonen med din egen. Den enkleste måten å gjøre dette på er å forstå hvilken del av koden i malen må endres. La oss starte med å høyreklikke på første linje med tekst under disken og klikke på Inspiser.
Et nytt panel vil dukke opp nederst i nettleservinduet. Du vil legge merke til at den viser HTML-koden som utgjør vår mal på venstre side, samt CSS som gir stiler for malen på høyre side.
Som du ser fra skjermbildet, er den valgte setningen mellom koder som representerer avsnitt. De fleste tagger i HTML består av tagpar som har en åpning og en lukkerkode. Innholdet må plasseres mellom disse kodene for å vises på en nettside:
opacity-0 "> Før lanseringen, nyt en Veldig begrenset mulighet ved å abonnere på vårt nyhetsbrev.
Klikk på neste knapp for å få mer informasjon om prosjektet vårt.
For å erstatte dummyinformasjonen i malen, trenger du bare å vite hvilke tagger som inneholder informasjonen du vil redigere. Deretter kan du finne disse kodene i kodeditoren og sette inn din egen tekst.
Nå som du vet hvordan du finner kode som trenger redigering, gå tilbake til malmappen, høyreklikk på den valgte HTML-filen og velg Åpne med,og velg kodeditoren du lastet ned tidligere. Du bør se den komplette HTML-koden som utgjør malen din.
Rull ned kodeditoren til du finner den samme koden vi markerte i nettleseren. Det skal være rundt linje 75-76. Deretter klikker du inni
tag, marker teksten og erstatt den med din egen.
For å redigere resten av malen, kan du bare gjenta trinnene ovenfor til all nødvendig informasjon er inkludert.
Du kan også slette deler av malen hvis du ikke vil at de skal vises. På samme måte kan du også kopiere seksjoner hvis du vil inkludere mer informasjon. Velg bare delen av malen som starter med åpningstaggen og markere alt til og med lukkekoden for den delen, og slett eller kopier og lim inn den delen nedenfor.
Når du er ferdig med å erstatte innholdet, er det på tide å erstatte prøvebildene med ditt eget. For å gjøre denne prosessen enklere, ta en titt på bildene i mappens img-mappe, og navn deretter bildene dine med de samme navnene. Deretter velger du alle plassholderbilder, sletter dem og legger bildene dine i img-mappen i stedet.
Nå er det på tide å finjustere utseendet til malen din og redigere stilene i CSS. Den rene malen leveres som standard med forskjellige stilark for den mørke og lyse versjonen av malen:
For å finne ut hvilken stilark du må redigere, se på HTML-filen din i kodeditoren og søk etter linjen som ligner på dette:
Gå til mappens mappe og åpne det tilsvarende stilarket i kodeditoren.
For å se hvilken linje av kode og stil du må redigere, kan du gjenta den samme prosessen vi brukte til å redigere HTML-en.
Høyreklikk på hvilket element du vil style i nettleseren, og velg Inspiser. Se til høyre, og du vil se stilene som brukes for den delen av malen:
Som du ser fra skjermbildet, er det Inspektør viser oss stilene som brukes til avsnittet tekst. Bytt til kodeditoren og stilarkfilen. Rull ned til du finner en linje med kode som begynner med s.
Her kan du endre skrifttyper som brukes, størrelsen på skrifttypen, samt fargen på teksten.
Hvis du vil endre bakgrunnsfargen på malen, ser du etter linjen med kode som sier kroppen etterfulgt av krøllete parenteser, og skriv deretter inn HEX-fargekoden etter
delen som leser bakgrunnsfargen.
Ikke glem å lagre alle endringene du har gjort ved å klikke på Lagre i kodeditoren din.
Etter at du har endret malen til din smak, må du laste den opp til din hosting server. Din leverandør vil sende deg en e-post med all den informasjonen du trenger for å overføre filer med FTP.
Start ditt FTP-program som FileZilla. Du vil legge merke til topplinjen hvor du kan skrive inn servernavnet, brukernavnet ditt og passordet. Bruk informasjonen fra verten din til å koble til serveren din ved å klikke på Quickconnect.
På venstre side av FileZillas vindu finner du mappen med malen på datamaskinen din og klikker på den for å utvide den. Velg alle filene og mappene og dra dem over til høyre side av skjermen i mappen public_html.
Når alle filene er lastet opp, åpner du nettleseren din og skriver inn domenenavnet ditt. Gratulerer, nettstedet ditt er nå live!
En destinasjonsside kan gjøre underverker for din bedrift eller produkt når du klarer deg for lanseringen. Her er noen tips som vil hjelpe deg med å få mest mulig ut av HTML-landingssiden din, og hjelpe deg med å lage hype:
Hvis du vil lære enda mer om HTML-målsidemaler eller oppstartsskranker, må du vurdere disse opplæringsprogrammene:
Ved hjelp av en HTML-mal kan du få startsiden for oppstartsstedet raskt oppe. Begynn med å velge en av våre HTML-maler for landingssiden fra Envato Elements eller en av oppstartsmalene fra ThemeForest. Deretter bruker du veiledningen vår til å veilede deg gjennom installasjonsprosessen.
Accentsconagua