Hvordan lage Responsive WordPress Websites (med temaer)

Ved å bruke en responsiv nettside design er ikke lenger et alternativ når du bygger nettsteder. I lekmannens termer gjør et responsivt nettsteddesign at nettstedet ditt ser bra ut, uansett hvilken enhet de besøkende bruker til å se og samhandle med innholdet.

Med tanke på at mer enn 80% av folk eier en smarttelefon, er det et must som sikrer at nettstedet ditt er responsivt. Ifølge mobilmarkedsstatistikk fra 2016 sier 57% av brukerne at de ikke vil anbefale en bedrift med et dårlig utviklet mobilnettsted, og 88% av forbrukerne som søker etter en type lokal virksomhet på en mobil enhet, snur seg eller ringer til det virksomhet innen 24 timer.

Når du tar hensyn til det ovenfor, er det lett å forstå hvorfor nettstedets innhold må være tilgjengelig over en rekke enheter. Heldigvis er det enkelt å gjøre WordPress-nettstedet ditt enkelt takket være en mengde responsive temaer.

I denne opplæringen viser vi deg hvordan du velger et responsivt WordPress-tema, hvordan du bruker et responsivt tema for nettstedet ditt, og gir deg ressurser for å lære mer om responsiv design og lage ditt eget responsive WordPress-tema.

Hvordan velge et Responsive WordPress Theme

Når du bestemmer deg for å finne et responsivt tema for nettstedet ditt, er det noen ting du må vurdere. Avhengig av din bransje er det viktig å velge et tema som ikke bare har et tiltalende design, men nødvendige funksjoner som hjelper dine besøkende til å lære mer om virksomheten din og gå fra prospekter til betalende kunder.

Her er noen viktige ting å se etter når du kjøper etter et responsivt WordPress-tema for nettstedet ditt.  

1. Vurder funksjonene

Når det gjelder funksjoner, vil du se etter et tema som har funksjoner som er i tråd med din bransje. For eksempel, hvis du er et kreativt byrå eller en designer, vil du ha et tema som har evnen til å vise frem din portefølje, så vel som testimonials fra tidligere klienter.

Hvis du selger produkter, ser du etter et tema som integreres godt med et e-handelsplugg eller lar deg vise prisbord. På samme måte, hvis du stoler på muligheten til å bestille klienter fra nettstedet ditt, ser du etter et tema som har en innebygd bestillingsskjema.

Heldigvis er det mange bransjespesifikke WordPress-temaer som har alle nødvendige funksjoner og er lydhør.

2. Sjekk etter Tilpasningsalternativer

Du vil se etter et tema som har fleksible tilpasningsalternativer. I de fleste tilfeller kommer temaet ditt med et temainnstillingspanel som lar deg tilpasse farger, fonter, laste opp logoen din og mye mer. Hvis du liker å eksperimentere med forskjellige oppsett, velger du et tema som integreres med en sidebygger eller har en alternativ måte å konfigurere forskjellige layouter for sidene dine på..

3. Se etter et Responsive WordPress-tema med et attraktivt design

Til slutt, se etter et tema som har et tiltalende design som ligner på hvordan du vil at nettstedet ditt skal se ut. Dette eliminerer tiden du trenger å bruke til å endre eller bygge ut sidene på sidene dine helt fra begynnelsen, og det vil være lettere for deg å tilpasse det.

Når du har funnet et responsivt WordPress-tema du liker, er alt du trenger å gjøre, å kjøpe det og laste ned den zippede filen til datamaskinen din. Oppdag responsive WordPress-temaer på ThemeForest eller Envato Elements: 

Hvordan komme i gang med ditt responsive nettsted

Nå som du har temaet ditt, er det på tide å komme i gang med å bygge din responsive nettside. Du må kjøpe et domenenavn og en hosting plan hvor du vil installere WordPress og ditt foretrukne tema.

Det er også en god ide å forberede innholdet som skal gå på nettstedet ditt, slik at du enkelt kan kopiere og lime inn innholdet når det er på tide å laste det opp, i stedet for å bruke tid på å søke etter det.

1. Et domenenavn

Det første trinnet er å kjøpe et domenenavn for nettstedet ditt. Det vil tillate besøkende og kunder å finne nettstedet ditt på nettet. Så det er viktig å velge et navn som representerer din bedrift eller merkevare. Når det er mulig, prøv å koble domenenavnet ditt med en .COM-utvidelse. Du kan velge å navngi nettstedet ditt samme som firmanavnet ditt eller du kan velge ditt eget navn hvis du bygger en personlig portefølje, blogg eller et CV-nettsted.

2. En Hosting Plan

Når du har avgjort på domenenavnet ditt, må du velge en hostingplan slik at folk kan få tilgang til nettstedet ditt. Det er mange alternativer når det gjelder hosting, fra billige, delte planer til dyrere, administrerte WordPress-hostingplaner.

Hvis du er usikker på hvor du skal begynne, vurder Envato Hosted. Envato Hosted tilbyr premium administrert WordPress-hosting, men den virkelige fordelen er at de kan installere og sette opp WordPress sammen med ditt valgte tema og ta vare på de tekniske detaljene for å sette opp nettstedet ditt.  

Envato Hosted-planen inneholder også:

  • Opptil 100 000 månedlige besøk av innkommende trafikk, 5 GB diskplass og 100 GB månedlig båndbredde.
  • Daglig sikkerhetskopiering, server sikkerhet og overvåking av nettstedet, samt løpende støtte fra vårt team av WordPress-eksperter.

3. Innhold og bilder

Til slutt, ta litt tid til å forberede alt innhold som vil gå på nettstedet ditt. Dette inkluderer vanligvis bilder, kopier som vil gå på de viktigste sidene dine, for eksempel Handle om, tjenester eller Jobb med oss sider. Hvis du har flere avdelinger, bør du vurdere å ta med bios og headshots av de som administrerer hver avdeling, slik at de besøkende vet hvem du skal kontakte.

Ved å forberede innholdet på forhånd kan du enkelt kopiere og lime det i stedet for demoinnhold som er tilgjengelig med de fleste moderne temaer.

Slik lager du nettstedet ditt

Nå som du har alt på plass, er det på tide å lage nettstedet ditt. Det første du må gjøre er å installere WordPress. Deretter kan du installere temaet, de nødvendige pluginene, og fortsette med temaoppsett og tilpasning.

I forbindelse med denne opplæringen bruker vi Oshine responsive WordPress-temaet. Oshine-temaet har en moderne og responsiv design og kan brukes til en rekke nisjer. Den inneholder mer enn 30 + demoer som kan importeres med ett enkelt klikk og brukes til å sette opp nettstedet ditt raskt.

Oshine Theme

1. Installer WordPress

Som nevnt tidligere er det første trinnet å installere WordPress. Ditt vertsfirma sender deg en velkommen e-post som inneholder koblingen til ditt dashboard eller kontrollpanel for din hostingkonto sammen med ditt brukernavn og passord. Klikk på linken og skriv inn den oppgitte informasjonen.

Når du er logget inn, vil du kunne søke etter en seksjon som er merket WordPress Installer, Ett klikk installatører, Softaculous Installers, eller noe lignende. Finn WordPress ikonet, klikk på det og følg instruksjonene.

I de fleste tilfeller vil du bli møtt med en skjerm som ber deg om å skrive inn nettstedets navn og beskrivelse, ønsket brukernavn og passord, samt e-postadressen din. Fyll ut feltene med informasjonen din og trykk deretter på Installere knapp.

Etter et par minutter vil WordPress bli installert, noe som betyr at du nå kan logge inn på ditt WordPress dashboard. Bare besøk www.yoursitename.com/wp-admin (erstatt yoursitename.com med ditt faktiske domenenavn) og skriv inn brukernavnet og passordet du opprettet under installasjonen.  

2. Installer et WordPress-tema

I ditt WordPress dashboard, gå til Utseende> Temaer> Legg til nytt. Deretter klikker du Last opp tema.

Installere Oshine-temaet.

Finn den nedlastede zip-mappen som inneholder temaets filer og last opp den. Når installasjonen er ferdig, klikker du Aktiver.

3. Installer nødvendige pluginprogrammer

Etter at du har aktivert temaet, vil du legge merke til et varsel i dashbordet med en melding om at enkelte plugins er nødvendige for at temaet skal ha all funksjonalitet. Klikk på Begynn å installere plugins lenke for å bli tatt direkte til installasjonsskjermen.

Installere de nødvendige pluginene.

Velg alle pluginene og klikk Installere. Etter det, gå til Plugins> Alle plugins> Inaktiv og velg alle inaktive plugins, velg deretter Aktiver alternativ fra rullegardinmenyen.

Slik tilpasser du nettstedet ditt

Den neste delen av å sette opp nettstedet ditt innebærer å importere demoinnhold, erstatte det med egne og endre temainnstillinger for å inkludere skrifter, farger, logo og mer.

1. Importer demoinnhold

Den raskeste måten å konfigurere nettstedet ditt er å installere demoinnholdet. Dette gjør at temaet ser ut som den valgte demoen din, med alle sidene opprettet og satt opp, så alt du trenger å gjøre er å erstatte innholdet.

For å begynne, gå til Oshine responsive WordPress tema og navigere til Importere fane. Velg den foretrukne demoversjonen og velg hvilket innhold du vil installere. I vårt tilfelle har jeg valgt alt innholdet og klikket på Installere knapp. Vent til prosessen er ferdig, og nettstedet ditt vil være klar for tilpasning. Se det over for å sikre at importprosessen ble vellykket.

Importerer demoinnhold i Oshine.

La oss fortsette med å erstatte demoinnholdet. I ditt WordPress dashboard, gå til sider og klikk på Redigere knappen på siden du vil jobbe med. I dette eksemplet redigerer vi hjemmesiden.

Det Oshine-responsive WordPress-temaet bruker Tatsu-sidenbyggeren til å lage oppsettet for alle sidene på nettstedet ditt, noe som gjør det veldig enkelt å redigere dem. Bare klikk på Rediger Med Tatsu knappen, og du vil kunne endre oppsettet, legge til flere moduler og mer.

Tatsu Editor

Hvis du vil redigere elementer på siden din, klikker du bare på den delen av siden du vil redigere, skriver inn din egen tekst og justerer innstillingene etter eget ønske. Du kan også legge til flere elementer som tekstbokser, knapper, ikoner, videoer, bilder og mer.

Legge til moduler til det responsive WordPress-temaet.

2. Tilpass visuell utseende

Når du er ferdig erstatter innholdet med ditt eget, er det på tide å utforme det visuelle utseendet til nettstedet ditt. Gå til Oshine-alternativer å begynne å tilpasse nettstedet ditt. Du vil legge merke til at det er mange alternativer her.

Du kan laste opp din egen logo og bakgrunnsbilde, tilpasse skriftene som brukes på nettstedet ditt, kontrollere mobile stiler, angi informasjonen som vises i bunnteksten og overskriften og mer. Du kan også tilpasse standardinnstillingene for globale stiler, sette inn kontaktinformasjonen din, samt spore skript som Google Analytics-kode og optimalisere nettstedets ytelse ved å minimere stilark og skript.

Hvordan lage et responsivt nettsted tema og hvorfor å gjøre det

Å bruke et premade WordPress-tema er en fin måte å spare tid på og sikre at nettstedet ditt er responsivt. Du kan imidlertid ta nettstedet ditt til neste nivå ved å bygge ditt eget responsive WordPress-tema fra bunnen av.

Selv om dette kan virke skremmende, gir det deg den ultimate kontrollen over nettstedets design og funksjoner. Hvis du er nysgjerrig på hvordan du lager ditt eget responsive tema eller ønsker å lære mer om responsiv webdesign, er det noen få veiledninger for å hjelpe deg med å komme i gang.

1. Responsive Web Design for nybegynnere

Dette kurset går deg gjennom det grunnleggende av responsiv design, forklarer den mobile første tilnærmingen og forskjellige layouter som brukes i responsivt webdesign, samt takler mer avanserte emner som for eksempel at bildene dine er responsive og bruker medieforespørsler for å kontrollere utformingen av din nettside for en rekke enheter.

2. Bygg et mobilt første Responsive WordPress Theme

Denne trinnvise opplæringen går deg gjennom prosessen med å bruke et startpakketema og gjøre det til en lydhør, og holder den mobile tilnærmingen til tanke. Du lærer hvordan du legger til stiler for mobile enheter og overgang til styling temaet ditt for stasjonære enheter.

3. Syv plugins for å hjelpe dine mobile brukere

I dette innlegget finner du syv nyttige WordPress-plugins som optimaliserer nettstedet ditt for mobile enheter; fra å sørge for at bildene og widgetene dine reagerer på dekning av plugins som er spesifikke for at nettstedet ditt ser bra ut på mobile enheter, selv om temaet ditt ikke er lydhørt.

Kom i gang med ditt responsive nettsted

Å skape et responsivt nettsted kan virke skremmende, men lydhørige WordPress-temaer gjør denne oppgaven mye enklere, selv for komplette nybegynnere. Bruk vår veiledning over som referansepunkt og undersøk ekstra ressurser om responsivt webdesign. Og hvis du trenger et responsivt WordPress-tema, sjekk ut vår samling av høyverdige, responsive WordPress-temaer for enhver bransje.

SaveSave