Slik lager du en nettside raskt Fra en responsiv mal

Å få nettstedet ditt oppe, trenger ikke å være komplisert. Faktisk kan du opprette en enkel, men effektiv virksomhetsside ved hjelp av en nettside for en side. Ved å bruke en enkeltmaske kan du gi din bedrift en tiltrukket Internett-tilstedeværelse og presentere all informasjon om tjenestene eller produktene du tilbyr.

En ekstra fordel er at folk som er interessert i virksomheten din, umiddelbart kan se alle detaljene de trenger uten å måtte klikke gjennom flere sider. Og fordi nettsider med en side ofte har flere samtaler til handling, har du en mye høyere sjanse til å konvertere besøkende til potensielle kjøpere.

I denne veiledningen vil vi gå gjennom trinnene med å sette opp nettstedet ditt med en enkelt HTML-mal for en side. Vi dekker verktøyene du trenger, tekniske detaljer om å tilpasse malen din, og hvordan du laster den opp på serveren din. Vi gir deg også noen viktige tips om hvordan du lager en nettside som er effektiv. La oss begynne!

Før du kommer i gang

Før du oppretter en nettside, er det noen ting du trenger. La oss gå over dem nedenfor.

1. Domenenavn

Det mest åpenbare valget er å bruke bedriftsnavnet ditt for domenet ditt. I tilfelle navnet er tatt, kan du prøve å legge til ord som firma, byrå eller studio og deretter kjøpe domenenavnet.

Det anbefales også å bruke en .com-utvidelse, da den er en av de eldste og mest troverdige utvidelsene. Men hvis du ikke kan få et passende navn med .com-utvidelsen, kan du bruke en .net-utvidelse verdt å vurdere.

2. Hosting Company

Å finne et godt vertsfirma kan virke som en umulig oppgave i begynnelsen. Generelt vil du se etter en vert som har gode anmeldelser på tredjeparts nettsteder som de er mer sannsynlige å være objektive. Vær oppmerksom på hva folk sier om deres oppetider, kundesupport og brukervennlighet.

3. HTML-mal

Det neste trinnet er å finne en mal for nettstedet ditt. Et godt sted å starte søket ditt er ThemeForest markedsplass. Du kan velge mellom hundrevis av profesjonelle nettsider for en side som imøtekommer en rekke nisjer, eller bla gjennom vårt kuraterte utvalg av noen av de beste: 

4. Kodeditor og FTP-klient

Siden du må redigere malen for å erstatte informasjonen med din egen, trenger du en kodeditor. Det vil markere kodesyntaksen og gjøre det lettere å finne delene av koden som må endres.

For denne opplæringen bruker jeg Sublime Text som kan brukes på Mac, Windows og Linux, og leveres med en gratis prøveversjon.

Du vil også trenge en FTP-klient som FileZilla å koble til serveren din og laste opp nettsidene uten å måtte laste dem opp en etter en. FileZilla er gratis og tilgjengelig for alle operativsystemer.

La oss nå se nærmere på hvordan du lager en nettside, begynner med å laste ned og sette opp webområdet ditt.

Slik redigerer du nettstedets males innhold

Etter at du har samlet alle filene og verktøyene du trenger, er det på tide å endre HTML-malen. For denne opplæringen bruker jeg Wander-nettsiden. Begynn med å laste ned malfiler fra nedlastingssiden din på ThemeForest. Trekk ut innholdet i zip-mappen og åpne mappen. Du vil legge merke til at den inneholder en dokumentasjonsmappe, samt alle nettstedsmalfiler.

Hvordan lage en nettside med Wander HTML-malen.

Siden dette er en flerbruksmal, har den ganske mange filer inni. Malen din kan bare komme med en enkelt HTML-fil og mapper som inneholder stilark, skriptfiler og bilder.

Hvis du vil redigere malen til din smak, må du endre HTML-filen som vanligvis kalles index.html. Når det gjelder Wander, redigerer jeg filen som heter hjem-en-/side.html, som vi lager en nettside nettsted.

Arbeider med HTML

Hvis du aldri har jobbet med en HTML-mal før, vil filen trolig skremme seg hvis du prøver å åpne den i Sublime Text eller en annen redigeringsprogram. Selv om en fullstendig HTML-opplæring ikke er omfattet av denne artikkelen, la oss dekke grunnleggende om hva HTML er, og hvordan det ser ut.

HTML er et oppslagsspråk som består av tagger som

,

,

  • , og andre. Merkene kommer i par, hver av dem har en åpning og en lukking. De hjelper nettleseren å forstå hvordan det skal vise hva som er mellom disse kodene.

    Et avsnitt i et HTML-dokument vil se slik ut:

    Dette er mitt avsnitt.

    . En overskrift vil være omgitt av en h tag med et nummer fra 1-6 som betyr overskriftsnivå 1 gjennom overskriftsnivå 6.  

    Når du redigerer en HTML-mal, trenger du ikke å redigere noen av kodene, bare teksten i mellom dem. Men hvis du ønsker å kopiere en del av koden eller for å slette den, må du velge hele delen fra åpningskoden til sluttkoden, og deretter kopiere den eller slette den.

    Den enkleste måten å redigere malen på er å åpne den i en nettleser og deretter kontrollere koden. Dobbeltklikk først HTML-filen for å åpne den i standard nettleseren din. Rett utenfor flaggermuset ser du at du må redigere teksten i overskriftsdelen. Høyreklikk på setningen som leser Vi lager merker skinne og velg Undersøke.

    Inspisere HTML i en nettleser.

    Et panel vil dukke opp nederst som vil vise deg HTML-koden til vår mal. Linjen som har valgt setning vil være på venstre side av inspeksjonspanelet. Du ser at setningen er pakket inn i en

    tag med klassen av stor mt20.

    Åpne nå malen i kodeditoren ved å høyreklikke på malnavnet og velg Åpne med Sublime Text. Finn samme linje med kode som du så i inspeksjonspanelet, velg teksten mellom kodene og erstatt den med firmaets tagline.

    Redigerer HTML-kode.

    For å redigere avsnittet rett under overskriften du nettopp har erstattet, gå tilbake til nettleseren din, høyreklikk på avsnittet og velg Inspiser. Denne gangen er setningen pakket inn i mellom

    tagger med klassen av hvit. Gå tilbake til kodeditoren din, finn den tilsvarende koden, klikk mellom kodene og legg til informasjonen.

    Fortsett med disse trinnene til du har erstattet alt demoinnholdet med ditt eget. Slett uønskede seksjoner ved å velge alt fra åpningen til sluttkoden til en bestemt kodeseksjon.

    På samme måte, hvis du vil duplisere en del av malen, finn koden som inneholder den delen og velg alt inkludert åpnings- og lukkekoder, og kopier og lim inn det der du vil at innholdet skal vises.

    I skjermbildet under, jeg ønsket å legge til en annen testamente, så jeg valgte koden for den tredje testimonialen og kopierte den umiddelbart under.

    Legg merke til at i de fleste tilfeller vil deler av koden bli pakket inn i

    koder før du går inn i en hvilken som helst overskrift og avsnittetiketter. Hvis du vil duplisere eller slette den delen, må du velge
    merker også; ellers vil innholdet ditt ikke vises riktig.

    Når du er ferdig med å redigere innholdet, må du erstatte bildene. Den mest hensiktsmessige måten å bytte ut på, er å legge merke til bildene i mappemappen og deretter navnene dine på samme måte. Når bildene dine er riktig oppkalt, kopier dem til bildemappen.

    Slik styler du en nettside for en side

    Det er enda en ting igjen å gjøre før du laster opp filene til serveren din, og det er styling malen for å matche din eksisterende merkevare. Stilene er plassert i CSS-mappen. I tilfelle av Wander er det flere stilark sammen med mappen som heter Farger.

    For å begynne å redigere CSS-filen, kan du følge de samme trinnene som vi brukte til å redigere HTML-filen. For å finne ut hvordan et bestemt element er stylet, høyreklikk på det i nettleseren din og klikk Undersøke. Denne gangen, se til høyre side, og du vil legge merke til den tilsvarende stilen for det elementet. Det samme panelet vil også ha navnet på stilfilen du må redigere sammen med linjen der den aktuelle koden er plassert.

    Inspisere CSS i en nettleser. 

    Åpne filen i kodeditoren din. I dette tilfellet er det theme.css. Siden jeg vil redigere bakgrunnsfargen til den andre delen som har alle funksjonene, må jeg finne linje 5378 i tema.css-filen. La oss endre det til svart:

    Raskt juster bakgrunnsfargen i CSS. Hvis du vil justere fargen raskt, trenger du bare å erstatte stilarket i hodet til HTML-filen med navnet på den foretrukne CSS-filen din.

    Se etter linjen med kode som sier:


    Endre navnet til green.css vil endre fargene på knapper, lenker og ikoner:

    Endre CSS-filknappens farger.

    For å endre skrifttyper, kontroller du hvilken som helst tekst og se på høyre side av inspeksjonspanelet. Du får se navnet på skrifttypen teksten bruker, i tillegg til linjen med kode hvor du kan endre den til en skrifttype du foretrekker.  

    Finne CSS-koden for skrifter.

    Slik laster du opp webområdet til serveren

    Nå som du har endret og utformet nettsiden til din side, kan du laste den opp til din hosting server. Verten din vil gi deg brukernavnet og passordet som trengs for å bruke FTP-tilkoblingen.

    For å starte opplastingsprosessen, åpne FileZilla og skriv inn servernavnet, brukernavnet og passordet i topplinjen, og klikk deretter på Quickconnect.

    Finn mappen med malen på datamaskinen din på venstre side av skjermen, og klikk på den for å utvide den. I nedre venstre side velger du alle filene og mappene og drar dem over til høyre side av skjermen i rotmappen til webserveren din i public_html mappe.

    Overføring av nettsiden til en side via FTP.

    5 viktige tips for bedre nettsider

    Nå som nettstedet ditt er live, er det noen få viktige tips å huske på.

    1. Hold din melding vellykket

    I motsetning til et tradisjonelt nettsted, har en enkeltmaske begrenset plass tilgjengelig, så det betyr mindre plass for å få meldingen på tvers. Derfor er det avgjørende å eliminere alt sjargong og unødvendige detaljer, og bare etterlate den mest relevante informasjonen. Forklar tydelig hva du har å tilby, og fordelene du har med produktet eller tjenesten.

    2. Bruk sterke anrop til handling

    På grunn av det begrensede rommet må samtalen til handling være sterk og overbevisende. Du må også inkludere det flere ganger for maksimal effekt. Som standard kommer de fleste nettsidemaler på en side allerede med flere seksjoner som inneholder en oppfordring til handling, så få mest mulig ut av dem. Direkte besøkende til en seksjon som har prisplaner eller et kontaktskjema hvor de kan komme i kontakt med deg.

    3. Hold navigasjonen tilgjengelig og enkel

    Angi navigasjonen din for å hoppe til forskjellige deler av nettstedet ditt. Du vil være ett skritt foran spillet hvis du velger en mal som allerede har en klebrig navigasjon som forblir på plass når en besøkende ruller ned. Inkluder kun koblingene til nettstedsseksjonene dine og unngå å plassere noen eksterne lenker som det vil kaste bort alle som besøker siden din.

    4. Bruk visualer

    Bruk av bilder eller video vil hjelpe deg med å fortelle historien din og dele mer om hva du har å tilby uten å ta for mye plass. I tilfelle av en side nettsteder, er visuals din beste venn.

    5. Opprettholder hierarkiet

    Plasser den viktigste informasjonen øverst på nettstedet ditt, og deretter sakte veiledet brukeren nedover siden til mer spesifikk informasjon som støtter kjernemelding. Dette vil hjelpe deg med å opprettholde hierarkiet og presentere informasjonen på en logisk måte.

    Kom i gang med ditt eget nettsted

    Hvis du har fulgt denne opplæringen, har du nå kunnskapen om å raskt opprette en nettside med en responsiv mal. Start reisen din med riktig nettsidemal og referer til denne veiledningen for å hjelpe deg med å sette opp det raskt.