Cum sa faci un design cu stil de site-ul cu template-uri WordPress

În ultimii ani, designul plat a devenit din ce în ce mai popular și continuă să domine lumea de web și designul grafic. 

Ce este designul plat? În esență, designul plat se concentrează asupra utilizabilității și a lipsei de umbre, înclinări, înclinări și alte elemente estetice care se concentrează pe ceea ce contează: conținutul dvs. Este, de obicei, caracterizată prin tipografie mare și îndrăzneață, icoane de linie și fundaluri de culoare solidă care utilizează culori strălucitoare.

Designul plat a fost făcut popular în primul rând de Microsoft, deoarece și-a reproiectat întreaga interfață cu utilizatorul în Windows 8. Acesta a fost adoptat rapid de Google și Apple și a devenit lent și este acum utilizat în numeroase șabloane de design web.

În acest tutorial, veți învăța cum să creați rapid un design simplu al site-ului dvs. utilizând o temă WordPress în stil plat. Dar, mai întâi, câteva exemple minunate de design al unui plan plat:

5 exemple minunate de modele de site-uri web

Înainte de a ne arunca mai adânc în acest tutorial, iată cinci exemple de site-uri cu profil plat care te inspiră pentru următorul proiect: 

1. Blocklevel

Blocklevel este o agenție de design digital din Olanda. Site-ul lor are un design site-ul plat, cu fundal întunecat și cu culori vii în întreaga pagină de pornire. Site-ul are, de asemenea, o mulțime de spațiu alb în jurul elementelor care dau întregului site un aspect curat. Din acest motiv, site-ul este ușor de navigat și vizitatorii sunt îndreptățiți instantaneu către diferite secțiuni de pe pagina de pornire.

2. Made By Fibb

Fabricat de Fibb

Fabricat de Fibb este un alt exemplu de agenție care folosește un design plat. Veți observa imediat culoarea galben strălucitoare, un meniu de navigare care a fost împins deoparte astfel încât să nu se aglomereze restul paginii și o tipografie îndrăzneață ușor de citit.

3. Playground Inc.

Playground Inc.

Playground Inc. a optat pentru un fundal roșu luminos, asociat cu tipografie albă în antetul lor, și un fundal alb cu un font negru și îndrăzneț. Site-ul folosește, de asemenea, designul de site-uri cu stil, cu icoane animate care sunt grabbers de atenție perfectă.

4. Geckoboard

Geckoboard

Specialitatea Geckoboard creează tablouri de bord personalizate, astfel încât proprietarii de afaceri și managerii de echipă pot urmări valori importante. Site-ul lor folosește un fundal gri închis, cu tipărite de tipografie verde și elegantă, într-un stil de design plat.

5. TriplAgent

TripIAgent

Agenția de călătorii de călătorie TriplAgent a optat pentru un design de stil plat cu culoarea purpurie și o fotografie superbă pentru a ilustra diversele ghiduri pe care le au pe site-ul lor. Meniul principal a fost împins în lateral, iar tipografia albă asociată cu butoanele fantomă face ca apelurile la acțiune să fie ușor de observat.

Cum se utilizează un design tematic WordPress plat pentru a crea site-ul dvs.

Dacă doriți să creați un site web modern pentru afacerea, portofoliul sau blogul dvs., alegerea unei teme plate este o alegere excelentă. În postul de astăzi, vă vom arăta cum să utilizați unul dintre șabloanele site-ului nostru WordPress pentru a crea un site minunat, care va atrage atenția vizitatorilor dvs.. 

Voi folosi tema Kirion, care este un șablon de site WordPress multifuncțional, cu un design plat și elegant. Datorită versatilității sale, aceasta poate fi utilizată atât pentru site-uri de afaceri, cât și pentru site-uri de portofoliu. Acesta oferă mai multe demonstrații pre-făcute, un constructor de pagini ușor de utilizat și o mulțime de opțiuni de personalizare pentru a deveni cu adevărat a ta.

Kirion plat WordPress șablon de design de site-ul web.

Pregătire: Înainte de a începe proiectarea site-ului dvs.

Înainte de a începe să vă construiți designul site-ului dvs. plat, este necesar să alegeți un nume de domeniu și să îl cumpărați, precum și să obțineți un plan de găzduire pro care să găzduiască toate fișierele site-ului dvs.. 

Este de asemenea o idee bună să alegeți o temă WordPress și să pregătiți textul și imaginile care vor apărea pe site-ul dvs. Web. Acest lucru va facilita pur și simplu copierea și lipirea conținutului dvs., mai degrabă decât să-l scrieți de la zero pe măsură ce vă construiți site-ul.

1. Achiziționați numele de domeniu

Alegerea numelui corect de domeniu nu este cu siguranță ușoară. Cu toate acestea, există câteva lucruri pe care trebuie să le țineți cont că vă vor ajuta să restrângeți alegerile. 

Gândiți-vă la scopul site-ului dvs. Este un site de afaceri pentru o companie deja înființată? Creezi un portofoliu personal? Poate doriți să începeți propriul dvs. blog? 

Pentru site-urile de afaceri, este o idee bună să vă lipiți de numele companiei dvs., în timp ce proprietarii de portofolii personale pot merge, de obicei, cu propriul nume. Dacă sunteți un blogger, luați în considerare subiectele din blogul dvs. și alegeți un nume care are legătură cu ceea ce veți scrie. Acest lucru va face cititorilor mai ușor să știe ce se pot aștepta în ceea ce privește conținutul.

Ori de câte ori este posibil, încercați să mergeți cu o extensie .COM și amintiți-vă să păstrați numele ușor de pronunțat și ușor de pronunțat.

2. Obțineți un plan de găzduire a unui site profesional

Veți avea nevoie să alegeți o companie de găzduire, astfel încât să puteți instala WordPress pe serverul lor și să faceți site-ul dvs. la dispoziția vizitatorilor. Există o mulțime de companii de găzduire acolo și WordPress chiar are recomandări pentru gazdele de renume. 

3. Luați o temă Premium WordPress

Următorul pas este să alegeți și să achiziționați o temă pentru site-ul dvs. Așa cum am menționat mai devreme, există o mulțime de teme WordPress plate și cea mai bună parte în alegerea unei teme WP premium este sprijinul garantat al autorului. Puteți, de asemenea, să fiți sigur că tema va fi actualizată în mod regulat, astfel încât să nu fiți blocați de un design motivat al site-ului web.

4. Pregătiți-vă conținutul și elemente de design

Ultimul pas de pregătire este să scrieți conținutul și să adunați toate imaginile și materialele vizuale, cum ar fi logo-ul dvs., faviconul, imaginile sau modelele de fundal și să le aveți ușor accesibile undeva.

Cum de a crea site-ul dvs. plat cu WordPress

Acum, că aveți numele de domeniu, un plan de găzduire, o temă pro și tot conținutul dvs. gata, este timpul să începeți să faceți design-ul site-ului dvs. Va trebui să instalați WordPress, tema, pluginurile necesare, configurați paginile și personalizați site-ul. Sa incepem!

1. Instalați WordPress

Când achiziționați planurile de găzduire, furnizorul de gazduire vă va trimite un e-mail de bun venit care conține informațiile despre contul dvs. Veți avea nevoie de numele de utilizator și de parola pe care vi le-ați furnizat, astfel încât să vă puteți conecta la tabloul de bord al contului dvs. După ce v-ați conectat, parcurgeți secțiunea Website sau Scripts și căutați WordPress. Selectați-l și apoi urmați pașii pentru a instala WordPress pe site-ul dvs..

În cele mai multe cazuri, va trebui să introduceți titlul și descrierea site-ului dvs., să vă setați numele de utilizator și parola dorite, precum și să completați adresa dvs. de e-mail. După ce ați completat toate informațiile, faceți clic pe Instalare buton.

Procesul de instalare durează de obicei câteva minute. După aceasta, veți vedea un mesaj care a fost instalat de WordPress. Pentru a vă conecta la tabloul de bord, accesați www.yoursitename.com/wp-admin și introduceți numele de utilizator și parola pe care le-ați creat în timpul instalării.  

2. Încărcați tema WordPress

Acum că v-ați conectat la tabloul de bord, trebuie să instalați tema WordPress plat pe care ați achiziționat-o. Mergi la Aspect> Teme> Adăugați noi. Apoi apasa Incarca Tema.

După aceea, găsiți dosarul cu fermoar care conține fișierele temei WP și încărcați-l. După ce ați terminat instalarea, faceți clic pe Activati.

Dacă utilizați tema Kirion ca în acest tutorial, va trebui să instalați tema părinte, LayersWP, care poate fi descărcată gratuit și nu trebuie să o activați. Încărcați pur și simplu LayersWP, încărcați apoi tema Kirion WordPress și activați-o.

3. Instalați pluginurile WordPress necesare

Următorul pas este să instalați toate pluginurile necesare. Veți observa o notificare din tabloul de bord care vă va indica care sunt pluginurile, împreună cu o legătură care vă duce direct la ecranul de instalare.

Instalarea pluginurilor WordPress necesare.

Selectați toate pluginurile și alegeți Instalare din meniul derulant. Când pluginurile au fost instalate, mergeți la Plugin-uri> Toate pluginurile și selectați Plug-uri inactive atunci alege Activati din meniul derulant.

Cum de a personaliza noul dvs. site plat

Acum, când tema WordPress și pluginurile au fost instalate și activate, puteți începe să configurați paginile site-ului dvs. și să personalizați culori, fonturi și multe altele. În majoritatea cazurilor, cel mai bun mod de a accelera timpul de configurare a temei și de a facilita editarea conținutului este de a importa conținutul demo.

Dacă doriți să utilizați conținutul demo, atunci va trebui să mergeți la tabloul de bord și să găsiți submeniul numit Instrumente> Import. Acolo, găsiți WordPress Importer, instalați-l, apoi faceți clic pe Fugiți importatorul. De obicei, dosarul temei va avea un subfolder numit Demo Import sau Datele de probă. Utilizați fișierele XML într-unul din acele directoare pentru a importa toate postările, paginile, layout-urile și imaginile.

Configurarea paginilor web cu tema Kirion

Alternativ, dacă utilizați tema Kirion, mergeți la Straturi> Adăugați o nouă pagină. După cum puteți vedea din ecranul de mai jos, Kirion include mai multe șabloane de pagini pe care le puteți utiliza pentru a vă construi site-ul web. Am ales Kirion Home Layout One pentru pagina de pornire.

Introduceți numele paginii și apoi faceți clic pe accesați Particularizarer. Pagina dvs. va fi creată instantaneu și veți fi redirecționat către Customizer ecran.

Când se încarcă Customizer, puteți vedea toate opțiunile disponibile. Puteți modifica aspectul făcând clic pe Editați aspectul opțiune. Editorul este destul de simplu și ușor de utilizat. Tot ce trebuie să faceți este să selectați elementul dorit și să înlocuiți conținutul cu propriul dvs. De asemenea, puteți să modificați fundalul, să încărcați propriile imagini recomandate, să înlocuiți imaginile cursorului și multe altele.

Modificarea aspectului.

Pentru a crea și a edita pagini suplimentare, accesați Straturi> Adăugați o nouă pagină și alegeți aspectul cu care doriți să lucrați.

Adăugarea de noi pagini de site web în Kirion.

Editarea Aspectului vizual și a meniurilor

Dacă doriți să editați stilurile, selectați Setările site-ului. Aici puteți edita culori, fonturi, încărcați propriul logo și multe altele.

Personalizarea culorilor pe site-ul dvs. plat.

În cele din urmă, va trebui să creați un meniu pentru site-ul dvs. În Customizer, Click pe Meniuri> Meniul principal. Mai întâi, alegeți o locație pentru meniu. am ales antet meniul. Apoi faceți clic pe Adăugați elemente. Adăugați toate paginile pe care le-ați creat și apoi salvați meniul.

5 tutoriale și cursuri pentru a vă ajuta să design master plan

Dacă doriți să aflați mai multe despre designul plat și să aplicați principiile sale site-ului dvs., am adunat câteva cursuri și cursuri pentru a vă ajuta să începeți:

1. 10 sfaturi de top pentru crearea graficii de design plate

Acest tutorial oferă cele mai bune sfaturi despre crearea de grafică care să funcționeze bine cu orice tip de site plat. Veți învăța un pic despre istoria designului plat, precum și despre cum să creați icoane simple, dar impecabile, cum să folosiți culori și multe altele.

2. Design Master Flat - Curs Envato Tuts + 

Acest curs este un excursie în profunzime a esteticului plat și cum să-l realizați în propriile desene. Veți învăța cum să configurați fișierul Photoshop, să creați un aspect pentru un site plat și să proiectați toate elementele care vor fi utilizate, cum ar fi pictograme, formulare, meniuri și multe altele.

3. Cum să proiectați icoane plate în designer de afinitate

Dacă vă place să lucrați cu Affinity Designer, vă place acest curs. Veți învăța totul despre procesul de creare a icoanelor vectoriale plate; sfaturi utile și trucuri pentru a lucra cu forme geometrice de bază, pentru a le modifica și pentru a folosi diferite operații pentru a combina formele. Cursul se referă și la modul de aliniere și aranjare a obiectelor și a funcțiilor principale ale programului.

4. Proiectare și dezvoltare UI plan

Încercați acest curs dacă intenționați să creați elemente de design UI. Cursul se referă la crearea de meniuri, butoane, file, playere video, elemente de selectare a datei și alte elemente ale interfeței utilizator folosind stilul de design plat.

5. Planul de design Icon - cursul Envato Tuts +

Acest curs acoperă atât Adobe Photoshop, cât și Adobe Illustrator, două programe puternice considerate standarde industriale atunci când vine vorba de design. În curs, veți învăța cum să creați planuri de iconițe plate, cum să le exportați și cum să generați bani din eforturile dvs. creative.

Începeți să faceți site-ul dvs. plat de azi

Crearea unui site plat nu a fost niciodată mai ușoară grație WordPress și a unor teme frumoase, premium și de înaltă calitate. Începeți să lucrați astăzi pe site-ul dvs. plat prin navigarea în colecția noastră de teme WordPress plate.