Hvordan lage en flat-stil webside design med WordPress maler

I de senere årene har flatdesign blitt stadig mer populært og fortsetter å dominere verden av web og grafisk design. 

Hva er flat design? I utgangspunktet er flat design fokusert på brukervennlighet og mangel på skygger, fasetter, gradienter og andre estetiske elementer som fjerner fokuset fra det som virkelig betyr noe: innholdet ditt. Det er vanligvis preget av stor og fet skrift, linjepiktogrammer og fargebakgrunner med lyse farger.

Flat design ble gjort populært først av Microsoft da de redesignet hele brukergrensesnittet i Windows 8. Det ble raskt vedtatt av Google og Apple, og ble sakte alminnelig og brukes nå i mange webdesign maler.

I denne opplæringen lærer du hvordan du lager en flat webdesign av dine egne raskt ved hjelp av et stilig WordPress-tema. Men først, noen fantastiske eksempler på flat design:

5 gode eksempler på flate nettside design

Før vi dykker dypere i denne opplæringen, er det fem eksempler på flate nettsteder for å inspirere deg til ditt neste prosjekt: 

1. Blocklevel

Blocklevel er et digitalt designbyrå fra Nederland. Deres nettsted har et flatt nettsteddesign med en mørk bakgrunn og dukker opp med levende farger over hele hjemmesiden deres. Siden har også rikelig med hvit plass rundt elementene som gir hele stedet et rent utseende. På grunn av dette er nettstedet enkelt å navigere, og besøkende blir umiddelbart trukket til forskjellige seksjoner på hjemmesiden.

2. Laget av Fibb

Laget av Fibb

Laget av Fibb er et annet agentur eksempel som bruker flat design. Du vil øyeblikkelig legge merke til den lyse gule farge, en navigasjonsmeny som er blitt presset til side, slik at den ikke bråler opp resten av siden og fet skrift som er lett å lese.

3. Lekeplass Inc.

Lekeplass Inc.

Playground Inc. valgte en lys rød bakgrunn kombinert med hvit typografi i overskriften og en hvit bakgrunn med en svart og fet skrift. Nettstedet bruker også flat stil nettsteddesign med animerte ikoner som er perfekte oppmerksomhetsgrabbers.

4. Geckoboard

Geckoboard

Geckoboards spesialitet er å skape tilpassede instrumentpaneler, slik at bedriftseiere og lagledere kan spore viktige beregninger. Deres nettside bruker en mørkegrå bakgrunn med popper av levende grønn og elegant typografi i en flat designstil.

5. TriplAgent

TripIAgent

Reiseguide agent TriplAgent valgte en flat stil design med lilla farge og nydelig fotografering for å illustrere ulike guider de har på sin side. Hovedmenyen er blitt skjøvet til siden og den hvite typografien parret med spøkelsesknapper gjør det enkelt å legge merke til samtaler.

Slik bruker du en flat WordPress Theme Design for å lage ditt nettsted

Hvis du vil lage et moderne nettsted for din bedrift, portefølje eller blogg, er det et godt valg å velge et flatt tema. I dagens innlegg viser vi deg hvordan du bruker en av våre flate WordPress-nettsider til å skape et vakkert nettsted som sikkert vil tiltrekke seg de besøkende. 

Jeg skal bruke Kirion-temaet, som er en multifunksjons WordPress nettsidemal med en stilig flat design. Takket være allsidigheten, kan den brukes til forretningssteder og porteføljesider. Den tilbyr flere forhåndsdefinerte demoer, en brukervennlig sidebygger og mange tilpasningsalternativer for å gjøre det virkelig din.

Kirion flat WordPress nettside design mal.

Klargjøring: Før du kommer i gang på ditt nettsteddesign

Før du begynner å bygge din flate nettside design, er det nødvendig å velge et domenenavn og kjøpe det, samt få en pro hosting plan som vil huse alle dine nettsider. 

Det er også en god ide å velge et WordPress-tema og forberede teksten og bildene som vil gå på nettstedet ditt. Dette vil gjøre det enkelt å bare kopiere og lime inn innholdet ditt, i stedet for å skrive det fra bunnen av når du bygger nettstedet ditt.

1. Kjøp ditt domenenavn

Å velge riktig domenenavn er absolutt ikke lett. Det er imidlertid noen ting du bør huske på som vil hjelpe deg å begrense valgene dine. 

Tenk på formålet med nettstedet ditt. Er det et forretningsside for et allerede etablert selskap? Skaper du en personlig portefølje? Kanskje du vil starte din egen blogg? 

For virksomhetsområder er det en god ide å holde fast med firmanavnet ditt, mens personlige porteføljeeiere vanligvis kan gå med eget navn. Hvis du er en blogger, vurder temaene til bloggen din og velg et navn som er relatert til hva du skal skrive om. Dette vil gjøre det enkelt for leserne å vite hva de kan forvente når det gjelder innhold.

Når det er mulig, prøv å gå med en .COM-utvidelse og husk å holde navnet enkelt å stave og enkelt å uttale.

2. Få en Professional Website Hosting Plan

Du må velge et vertskap, slik at du kan installere WordPress på serveren og gjøre nettstedet ditt tilgjengelig for besøkende. Det er mange hosting selskaper der ute, og WordPress har til og med anbefalinger for anerkjente verter. 

3. Ta en Premium WordPress Theme

Det neste trinnet er å velge og kjøpe et tema for nettstedet ditt. Som nevnt tidligere er det nok av flate WordPress-temaer, og det beste ved å velge et premium WP-tema er garantert støtte fra forfatteren. Du kan også være sikker på at temaet vil bli oppdatert med jevne mellomrom, slik at du ikke vil bli sittende fast med en utdatert nettside tema design.

4. Forbered innholdet og designelementene

Det siste forberedelsestrinnet er å skrive ut innholdet og samle alle bildene og visuelle eiendeler som din logo, favicon, noen bakgrunnsbilder eller mønstre og få dem et sted som er lett tilgjengelig.

Slik lager du ditt flate nettsted med WordPress

Nå som du har ditt domenenavn, en hostingplan, et pro-tema og alt innholdet ditt, er det på tide å komme i gang med å lage webdesign. Du må installere WordPress, temaet, nødvendige plugins, konfigurere sidene dine og tilpasse nettstedet ditt. La oss begynne!

1. Installer WordPress

Når du kjøper dine hosting planer, vil vertsleverandøren sende deg en velkommen e-post som inneholder informasjonen om kontoen din. Du trenger brukernavnet og passordet de ga deg med, slik at du kan logge deg på kontoer dashbordet. Når du er logget på, blar du til nettstedet Nettsted eller Skript og ser etter WordPress. Velg den og følg trinnene for å installere WordPress på nettstedet ditt.

I de fleste tilfeller må du skrive inn nettstedets tittel og beskrivelse, angi ønsket brukernavn og passord, samt fylle ut e-postadressen din. Etter at du har fylt ut all informasjon, klikker du på Installere knapp.

Installasjonsprosessen tar vanligvis et par minutter. Etter det ser du en melding som WordPress er installert. For å logge på dashbordet ditt, gå til www.yoursitename.com/wp-admin og skriv inn brukernavnet og passordet du opprettet under installasjonen.  

2. Last opp ditt WordPress-tema

Nå som du har logget på dashbordet ditt, må du installere det flate WordPress-temaet du kjøpte. Gå til Utseende> Temaer> Legg til nytt. Deretter klikker du Last opp tema.

Deretter finner du den zippede mappen som inneholder WP-temaets filer og laster opp den. Når installasjonen er ferdig, klikker du Aktiver.

Hvis du bruker Kirion-temaet som i denne opplæringen, må du installere overordnet, LayersWP som kan lastes ned gratis, og du trenger ikke å aktivere det. Bare legg opp LayersWP, og last deretter opp Kirion WordPress-temaet, og aktiver det.

3. Installer de nødvendige WordPress-pluginene

Ditt neste skritt er å installere eventuelle nødvendige plugins. Du vil legge merke til et varsel i dashbordet ditt og fortelle hvilke plugins som kreves, sammen med en kobling som tar deg direkte til installasjonsskjermen.

Installere de nødvendige pluginene for WordPress.

Velg alle pluginene og velg Installere fra rullegardinmenyen. Når pluginene er installert, går du til Plugins> Alle plugins og velg Inaktive plugins velg deretter Aktiver fra rullegardinmenyen.

Slik tilpasser du ditt nye, flate nettsted

Nå som WordPress tema design og pluginene er installert og aktivert, kan du begynne å sette opp nettsider og tilpasse farger, skrifter og mer. I de fleste tilfeller er den beste måten å øke tempoet på oppsettet ditt og gjøre det enkelt å redigere innholdet, å importere demoinnholdet.

Hvis du vil bruke demoinnholdet, må du gå til dashbordet og finne undermenyen som heter Verktøy> Importer. Der finner du WordPress Importer, installer det, og klikk deretter Kjør importør. Vanligvis vil temamappen din ha en undermappe som heter Demo Import eller Eksempeldata. Bruk XML-filene i en av disse mappene for å importere alle innlegg, sider, layouter og bilder.

Sette opp nettsider med Kirion-temaet

Alternativt, hvis du bruker Kirion-temaet, går du til Lag> Legg til ny side. Som du kan se fra skjermbildet nedenfor, inneholder Kirion flere sidemaler som du kan bruke til å bygge ditt nettsted. Jeg valgte Kirion Home Layout One for hjemmesiden.

Skriv inn sidens navn og klikk deretter fortsett til Tilpassr. Siden din blir umiddelbart opprettet, og du blir omdirigert til Customizer skjerm.

Når tilpasseren laster, kan du se alle tilgjengelige alternativer. Du kan redigere oppsettet ved å klikke på Rediger oppsett alternativ. Redaktøren er ganske enkel og enkel å bruke. Alt du trenger å gjøre er å velge ønsket element og erstatte innholdet med ditt eget. Du kan også redigere bakgrunnen, laste opp dine egne kjente bilder, erstatte skyvebilder, og mye mer.

Redigerer layout.

Hvis du vil opprette og redigere flere sider, går du til Lag> Legg til ny side og velg oppsettet du vil jobbe med.

Legge til nye nettsider i Kirion.

Redigerer visuell utseende og menyer

Hvis du vil redigere stilene, velger du Nettstedinnstillinger. Her kan du redigere farger, skrifter, laste opp din egen logo og mer.

Tilpasse fargene i ditt flate nettsted.

Til slutt må du opprette en meny for nettstedet ditt. I Customizer, klikk på Menyer> Hovedmeny. Velg først et sted for menyen. Jeg har valgt Overskrift Meny. Deretter klikker du på Legg til elementer. Legg til alle sidene du har opprettet, og lagre deretter menyen.

5 opplæring og kurs for å hjelpe deg med å planlegge flat design

Hvis du vil lære mer om flat design og bruke prinsippene sine til nettstedet ditt, har vi samlet noen opplæringsprogrammer og kurs for å hjelpe deg med å komme i gang:

1. 10 topp tips om å lage flatdesign grafikk

Denne opplæringen inneholder de beste tipsene om å lage grafikk som vil fungere godt med en hvilken som helst flat type nettside. Du lærer litt om flat designhistorie, samt hvordan du lager enkle, men effektive ikoner, hvordan du bruker farger og mer.

2. Master Flat Design - Envato Tuts + Course 

Dette kurset er en grundig gjennomgang av den flate estetiske, og hvordan du oppnår det i dine egne motiver. Du lærer hvordan du konfigurerer Photoshop-filen, lager en oppsett for et flatt nettsted og utformer alle elementene som skal brukes, for eksempel ikoner, skjemaer, menyer og mer.

3. Hvordan lage flate ikoner i Affinity Designer

Hvis du liker å jobbe med Affinity Designer, vil du elske dette kurset. Du vil lære alt om prosessen med å lage flate vektorikoner; nyttige tips og triks for å jobbe med grunnleggende geometriske former, endre dem og bruke ulike operasjoner for å kombinere figurene. Kurset dekker også hvordan du justerer og ordner objektene og hovedfunksjonene til programmet.

4. Flat UI Design og utvikling

Prøv dette kurset hvis du planlegger å lage UI-designelementer. Kurset dekker hvordan man lager menyer, knapper, faner, videospillere, datovalgere og andre brukergrensesnittelementer ved hjelp av flat design stil.

5. Flat Icon Design - Envato Tuts + Course

Dette kurset dekker både Adobe Photoshop og Adobe Illustrator, to kraftige programmer vurderte bransjestandarden når det gjelder design. I løpet av kurset lærer du hvordan du lager flate ikondesigner, hvordan du eksporterer dem og hvordan du kan tjene penger på din kreative innsats.

Kom i gang, gjør ditt flate nettsted i dag

Å lage et flatt nettsted har aldri vært enklere takket være WordPress og flotte, premium, høykvalitets flate temaer. Begynn å jobbe på ditt flate nettsted i dag ved å bla gjennom vår samling av flate WordPress-temaer.