Դիզայնի ուղղություն
Դիզայնի ուղղություն քայլը թույլ է տալիս վերանայել, ճշգրտել և վերջնականացնել ձեր theme-ի տեսողական դիզայնը՝ նախքան Theme Builder-ը կստեղծի ամբողջական theme-ը։
Ընդհանուր նկարագրություն
Discovery Interview-ն ավարտելուց հետո Theme Builder-ը ներկայացնում է ձեր դիզայնի ուղղությունը՝ desktop և mobile preview rendering-ով։ Սա թույլ է տալիս տեսնել, թե ձեր դիզայնը տարբեր սարքերում ինչպես կերևա՝ նախքան theme-ին վերջնական համաձայնություն տալը։
Դիզայնի ուղղության բաղադրիչներ
1. Գունապնակ
Ձեր theme-ի գունային սխեման, ներառյալ՝
- Հիմնական գույն — հիմնական բրենդային գույնը, որն օգտագործվում է կոճակների, հղումների և շեշտադրումների համար
- Երկրորդական գույն — լրացնող գույն՝ բազմազանության համար
- Շեշտադրման գույն — կարևոր տարրերի ընդգծման գույն
- Չեզոք գույներ — մոխրագույններ և սպիտակներ՝ ֆոնների և տեքստի համար
- Տեքստի գույն — հիմնական տեքստի գույն՝ ընթեռնելիության համար
2. Տառատեսակաբանություն
Տառատեսակների ընտրություն՝
- Վերնագրերի տառատեսակ — օգտագործվում է էջերի վերնագրերի և բաժինների վերնագրերի համար
- Հիմնական տեքստի տառատեսակ — օգտագործվում է պարբ երությունների տեքստի և բովանդակության համար
- Տառաչափեր — արձագանքող չափավորում տարբեր էկրանի չափերի համար
- Տողերի բարձրություն — տողերի միջև հեռավորություն՝ ընթեռնելիության համար
- Տառատեսակի հաստություններ — թավ, սովորական և բարակ տարբերակներ
3. Դասավորություն և հեռավորություններ
- Container-ի լայնություն — բովանդակության առավելագույն լայնություն
- Ներքին և արտաքին լուսանցքներ — տարրերի շուրջ հեռավորություններ
- Ցանցային համակարգ — սյունակային դասավորություն արձագանքող դիզայնի համար
- Բաղադրիչների միջև հեռավորություն — միջերեսի տարրերի միջև հեռավորություն
4. Տեսողական տարրեր
- Կոճակների ոճեր — հիմնական, երկրորդական և երրորդական կոճակների դիզայններ
- Քարտերի դիզայններ — բովանդակության բլոկների դասավորություններ
- Պատկերակներ — պատկերակների ոճ և չափավորում
- Եզրագծեր և ստվերներ — նուրբ տեսողական խորություն
- Hover էֆեկտներ — փոխազդեցության վիճակի ոճավորում
Preview Rendering
Desktop Preview
Desktop preview-ը ցույց է տալիս ձեր դիզայնը ամբողջ լայնությամբ (սովորաբար 1200px կամ ավելի լայն)՝
- Ամբողջական նավիգացիոն մենյու
- Ամբողջական դասավորություն՝ բոլոր սյունակներով
- Մեծ տառատեսակաբանություն և հեռավորություններ
- Բոլոր տեսողական տարրերը ամբողջական չափով
Mobile Preview
Mobile preview-ը ցույց է տալիս ձեր դիզայնը mobile լայնությամբ (սովորաբար 375px)՝
- Արձագանքող նավիգացիա (hamburger մենյու)
- Մեկ սյունակով դասավորություն
- Կարգավորված տառատեսակաբանություն և հեռավորություններ
- Հպման համար հարմար կոճակների չափեր
Արձագանքող բեկման կետեր
Theme Builder-ը preview-ները ցուցադրում է այս բեկման կետերում՝
| Սարք | Լայնություն | Preview |
|---|---|---|
| Mobile | 375px | Ուղղահայաց հեռախոս |
| Tablet | 768px | Հորիզոնական tablet |
| Desktop | 1200px | Ամբողջ լայնությամբ desktop |
| Large Desktop | 1920px | Գերլայն էկրան |
Ձեր դիզայնի ճշգրտում
Կարգավորումներ կատարելը
Դուք կարող եք ճշգրտել ձեր դիզայնի ուղղությունը՝
- Գույների կարգավորում — փոխեք գունապնակի ցանկացած գույն
- Տառատեսակների փոփոխություն — ընտրեք տարբեր տառատեսակներ
- Հեռավորությունների փոփոխում — կարգավորեք ներքին և արտաքին լուսանցքները
- Դասավորության թարմացում — փոխեք container-ների լայնությունները և ցանցի սյունակները
- Տարրերի անհատականացում — փոփոխեք կոճակների ոճերը, քարտերի դիզայնները և այլն
Preview-ի թարմացումներ
Փոփոխությունները արտացոլվում են իրական ժամանակում՝
- Desktop preview-ն անմիջապես թարմացվում է
- Mobile preview-ն անմիջապես թարմացվում է
- Բոլոր արձագանքող բեկման կետերը թարմացվում են
- Փոփոխությունները ստուգելու համար կարող եք անցնել preview-ների միջև
Համեմատության տեսք
Համեմատեք ձեր դիզայնի ուղղությունը՝
- Սկզբնական դիզայն — տեսեք, թե ինչ է փոխվել
- Մրցակիցների դիզայններ — համեմատեք ոգեշնչման կայքերի հետ
- Նախորդ տարբերակներ — վերադարձեք ավելի վաղ դիզայնի ուղղություններին
Դիզայնի ուղղության հաստատում
Երբ գոհ եք ձեր դիզայնից՝
- Վերանայեք երկու preview-ներն էլ — համոզվեք, որ desktop և mobile տեսքերը լավ են
- Ստուգեք բոլոր գույները — ապահովեք հակադրություն և մատչելիություն
- Փորձարկեք տառատեսակաբանությունը — ստուգեք ընթեռնելիությունը բոլոր չափերում
- Հաստատեք դասավորությունը — ստուգեք հեռավորություններն ու հավասարեցումը
- Հաստատեք դիզայնը — անցեք theme-ի ստեղծմանը
Հաջորդ քայլեր
Ձեր դիզայնի ուղղությունը հաստատելուց հետո՝
- Theme Builder-ը ստեղծում է ձեր ամբողջական theme-ը
- Theme-ը տեղադրվում է ձեր WordPress կայքում
- Դուք կարող եք հետագայում անհատականացնել՝ օգտագործելով WordPress customizer-ը
- Անցեք Հյուրընկալության մենյուներ-ին կամ այլ հնարավորությունների
Լավագույն փորձառություններ
- Փորձարկեք իրական սարքերում — հնարավորության դեպքում օգտագործեք իրական հեռախոսներ և tablet-ներ
- Ստուգեք ընթեռնելիությունը — համոզվեք, որ տեքստը ընթեռնելի է բոլոր չափերում
- Ստուգեք հակադրությունը — մատչելիության համար օգտագործեք Ստուգել գունապնակի հակադրությունը
- Հաշվի առեք արտադրողականությունը — օպտիմալացրեք պատկերներն ու տառատեսակները արագության համար
- Պլանավորեք բովանդակության համար — համոզվեք, որ դասավորությունը աշխատում է ձեր իրական բովանդակության հետ
Խնդիրների լուծում
Preview-ն չի թարմացվում
- Թարմացրեք էջը
- Մաքրեք դիտարկիչի cache-ը
- Փորձեք այլ դիտարկիչ
- Ստուգեք ինտերնետ կապը
Գույները տարբեր են երևում
- Ստուգեք մոնիտորի գունային կարգավորումները
- Փորձեք տարբեր սարքերում
- Ստուգեք գունային հակադրությունը մատչելիության գործիքներով
- Հաշվի առեք գունային կուրության սիմուլյատորները
Տառատեսակաբանության խնդիրներ
- Ստուգեք, որ տառատեսակների ֆայլերը բեռնվում են
- Ստուգեք տառաչափը տարբեր բեկման կետերում
- Փորձարկեք իրական բովանդակությամբ
- Ընթեռնելիության համար հաշվի առեք տողի երկարությունը
Առնչվող փաստաթղթեր
- Discovery Interview — հավաքեք դիզայնի տեղեկություններ
- Հյուրընկալության մենյուներ — ստեղծեք կառուցվածքային մենյուի էջեր
- Ստուգել գունապնակի հակադրությունը — ստուգեք գույների մատչելիությունը
- Ստեղծել Logo SVG — ստեղծեք անհատական լոգոներ