Ugrás a fő tartalomhoz

Design Direction

A Design Direction (Tervezési irány) lépés lehetővé teszi, hogy áttekintse, finomítsa és véglegesítse a témájának vizuális dizájnját, mielőtt a Theme Builder generálja a teljes témát.

Overview​

Az „Discovery Interview” elvégzése után a Theme Builder a design irányát desktop és mobil előnézetelési funkcióval mutatja be. Ez lehetővé teszi, hogy pontosan lássa, hogyan fog nézni a dizájn különböző eszközökön, mielőtt elköteleződik a témában.

Design Direction Components​

1. Color Palette (Színpaletta)​

A téma színkombinációja, beleértve:

  • Primary color (Elsődleges szín) — az alapvető márka színe, amelyet gombokhoz, linkekhez és kiemelt elemekhez használunk
  • Secondary color (Másodlagos szín) — kiegészítő szín a változatosság érdekében
  • Accent color (Kiemelő szín) — fontos elemek kiemelt színe
  • Neutral colors (Semleges színek) — háttérhez és szöveghez használt szürke és fehér árnyalatok
  • Text color (Szöveg színe) — az olvasatosság érdekében használt elsődleges szöveg színe

2. Typography (Tipográfia)​

A következő elemekre vonatkozó betűtípus kiválasztása:

  • Heading font (Címbetű betűtípus) — oldaltítekhez és szekció-fejléchez használatos
  • Body font (Testszöveg betűtípus) — bekezdésekhez és tartalomhoz használatos
  • Font sizes (Betűméretek) — választható méretek különböző képernyőméretekre
  • Line height (Sor 간 távolság) — a sorok közötti távolság az olvasatosság érdekében
  • Font weights (Betűsúlyok) — bold, regular és light változatok

3. Layout and Spacing (Elrendezés és Távolság)​

  • Container width (Tartalmi szélesség) — a tartalom maximális szélessége
  • Padding and margins (Betöltés és hézag) — az elemek körüli távolság
  • Grid system (Rácsrendszer) — a választható dizájnhoz szükséges oszlopos elrendezés
  • Component spacing (Komponens távolsága) — az UI elemek közötti távolság

4. Visual Elements (Vizsális elemek)​

  • Button styles (Gomb stílusok) — elsődleges, másodlagos és harmadlagos gomb dizájnjai
  • Card designs (Kártya dizájnok) — tartalomblokkok elrendezései
  • Icons (Ikonek) — ikon stílus és méretezés
  • Borders and shadows (Keretek és árnyékok) — finom vizuális mélység
  • Hover effects (Merőzés hatásai) — interaktív állapot stílusítása

Preview Rendering (Előnézetelési Funkció)​

Desktop Preview (Desktop előnézet)​

A desktop előnézet a teljes szélességben látható (általában 1200px vagy szélesebb):

  • Teljes navigációs menü
  • Komplett elrendezés az összes oszloppal
  • Nagyméretű tipográfia és távolság
  • Minden vizsális elem teljes méretben

Mobile Preview (Mobil előnézet)​

A mobil előnézet a mobil szélességben látható (általában 375px):

  • Választható navigáció (hamburger menü)
  • Egy oszlopszínű elrendezés
  • Ábsztalt tipográfia és távolság
  • Tippelhető gombméretek

Responsive Breakpoints (Választható pontok)​

A Theme Builder ezeken a pontokon keresztül generál előnézeteket:

DeviceWidthPreview
Mobile375pxPortrait phone
Tablet768pxLandscape tablet
Desktop1200pxFull-width desktop
Large Desktop1920pxUltra-wide display

Refining Your Design (Dizájn Finomítása)​

Making Adjustments (Beállítások)​

A design irányát a következőképpen finomíthatja:

  1. Adjusting colors (Színek beállítása) — módosíthat bármilyen színt a palettából
  2. Changing fonts (Betűtípusok megváltoztatása) — válasszon más betűtípusokat
  3. Modifying spacing (Távolság módosítása) — állítsa be a betöltést és az hézagot
  4. Updating layout (Elrendezés frissítése) — módosítsa a tartalmi szélességeket és a rácsoszlopokat
  5. Customizing elements (Elemek személyre szabása) — módosítsa a gombstílusokat, kártya dizájnokat stb.

Preview Updates (Előnézet frissítése)​

A változtatások valós időben láthatók:

  • A desktop előnézet azonnal frissül
  • A mobil előnézet azonnal frissül
  • Minden választható pont frissül
  • A különböző előnézetek között váltással ellenőrizheti a változásokat

Comparison View (Össравниási nézet)​

Összehasonlíthatja a design irányát a következőkkal:

  • Original design (Eredeti dizájn) — láthatja, mi változott
  • Competitor designs (Versenyző dizájnok) — összehasonlítás inspirációs oldalakhoz
  • Previous versions (Előző verziók) — visszatérhet korábbi design irányokhoz

Design Direction Approval (Design Irány Engedélyezése)​

Amikor elégedett a dizájnnal:

  1. Review both previews (Ellenőrizze az mindkét előnézetet) — győződjön meg róla, hogy a desktop és a mobil nézet jó
  2. Check all colors (Ellenőrizze az összes színt) — biztosítsa a kontrasztot és az elérhetőséget
  3. Test typography (Tesztelje a tipográfiát) — győződjön meg róla az olvasatosság minden méretben
  4. Confirm layout (Megerősítse az elrendezést) — ellenőrizze a távolságot és az igazítást
  5. Approve design (Engedélyezze a dizájn) — haladjon tovább a téma generálásához

Next Steps (Következő lépések)​

Az engedélyezés után:

  1. A Theme Builder generálja az Ön teljes témáját
  2. A téma települ az Ön WordPress oldalára
  3. Továbbra is személyre szabhatja a WordPress customizer segítségével
  4. Haladjon tovább a Hospitality Menus vagy más funkciókhoz

Best Practices (Jó gyakorlatok)​

  • Test on real devices (Teszteljen való eszközökön) — ha lehetséges, használjon való telefonokat és táblagépeket
  • Check readability (Ellenőrizze az olvasatosságot) — győződjön meg róla, hogy a szöveg olvasható minden méretben
  • Verify contrast (Ellenőrizze a kontrasztot) — használja a Validate Palette Contrast elérhetőség ellenőrzéséhez
  • Consider performance (Fontosak a teljesítmény) — optimalizálja az képeket és betűtípusokat a sebesség érdekében
  • Plan for content (Tervezze a tartalmat) — győződjön meg róla, hogy az elrendezés megfelel az Ön tényleges tartalmának

Troubleshooting (Hibaelhárítás)​

Preview Not Updating (Az előnézet nem frissül)​

  • Frissítse az oldalt
  • Törölje a böngésző gyorsítéktárolását (cache)
  • Próbáljon más böngészővel
  • Ellenőrizze az internet kapcsolatot

Colors Look Different (Más színeknek tűnik)​

  • Ellenőrizze a monitor színszabályait
  • Próbáljon más eszközökön
  • Ellenőrizze a színek kontrasztját az elérhetőségi eszközökkel
  • Fontosak a színszakmai szimulátorok

Typography Issues (Tipográfiai problémák)​

  • Ellenőrizze, hogy a betűtípusok betöltődtek-e
  • Ellenőrizze a betűméretet különböző választható pontokon
  • Teszteljen tényleges tartalommal
  • Fontosak a sor hossza az olvasatosság érdekében