Találd meg a mintát
A bal oldali tartalomjegyzékből ugorj a kívánt színhez, szövegstílushoz vagy komponenshez.
Vizuális dokumentáció · Elementor útmutatóGramion Design System
Használd ezt az útmutatót, amikor a gramion.hu oldalait Elementorban építed vagy frissíted. Az itt bemutatott színek, tipográfia és komponensek segítenek, hogy gyorsabban dönts, és minden oldal egységes, hozzáférhető és a Gramionhoz illő maradjon.
A Gramion főoldalminta megnyitása01 · Indulás
Hogyan használd ezt az útmutatót?
Válaszd ki a megépítendő elemet, nézd meg a vizuális mintát, majd kövesd az „Így építsd meg Elementorban” receptet.
Nyisd meg Elementort
A WordPressben nyisd meg az oldalt az „Szerkesztés Elementorral” művelettel.
Kövesd a receptet
A receptek megmondják, melyik elemet válaszd, és mit állíts be a Tartalom, Stílus és Haladó füleken.
Ellenőrizd mindhárom nézetet
A monitor, tablet és telefon ikonokkal nézd át az asztali, táblagépes és mobil megjelenést.
02 · Elementor
Gyors kezdés Elementorban
Itt még nem kell értékeket megjegyezned vagy beállítanod. Először ismerd meg az alapokat, majd a kapcsolódó fejezetek alapján rögzítsd őket az Elementorban.
Webhelybeállítások megnyitása
Elementor szerkesztő→bal felső menü→Webhelybeállítások / Site Settings
Itt találod majd a globális színek, betűtípusok, elrendezés és töréspontok közös beállításait.
Elem beállítása
Tartalom / Content→Stílus / Style→Haladó / Advanced
A tartalmat az első, a megjelenést a második, a térközt és reszponzív részleteket a harmadik fülön állíthatod be.
- Készíts biztonsági másolatot vagy dolgozz vázlatoldalon.
Ne a nyilvános oldalon próbáld ki először az új rendszert. - Nyisd meg az Elementor Webhelybeállításait.
Ismerd meg a beállítások helyét, de még ne adj meg olyan értéket, amelyet az útmutató nem mutatott be. - Haladj végig a vizuális alapokon.
Először olvasd el a színek, a tipográfia, a térközök és az elrendezés fejezeteit. - Rögzítsd a dokumentált globális beállításokat.
Az egyes alapozó fejezetek megismerése után vidd át azok értékeit a Webhelybeállítások megfelelő részébe. - Készíts és ellenőrizz egy próbaszekciót.
A komponensfejezetek megismerése után építs egy egyszerű mintát, majd nézd át asztali, tablet- és mobilnézetben.
03 · Vizuális alapok
Színrendszer
Az 500-as árnyalat az alapszín. Az 50–200 halvány hátterekhez, a 600–900 erősebb felületekhez és jól olvasható szöveghez használható.
Mit jelent a skála?
Az 50 a legvilágosabb, a 900 a legsötétebb árnyalat. Nem erősséget, hanem világossági lépcsőt jelöl.
Mikor válassz világosabbat?
Halvány szekcióháttérhez, jelvényhez vagy finom állapotjelzéshez általában az 50–200 közötti érték jó.
Mikor válassz sötétebbet?
Szöveghez, sötét felülethez, rámutatási és aktív állapothoz általában a 600–900 közötti érték szükséges.
Mély Kék · Deep Blue
Gramion márkaszín · 500 az alapértelmezett
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Világoskék · Light Blue
Gramion kiemelő márkaszín · 500 az alapértelmezett
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
GreenSpire
Különálló márkaszín · nem sikerállapot · 500 az alapértelmezett
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Semleges · Neutral
Szöveghez, kerethez és visszafogott háttérhez · 500 az alapértelmezett
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Siker
Csak sikeres vagy pozitív állapot jelzésére · 500 az alapszín
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Figyelmeztetés
Figyelmet igénylő, de nem hibás állapothoz · 500 az alapszín
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Hiba
Hibás vagy veszélyes állapothoz · 500 az alapszín
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
A GreenSpire nem sikerjelzés.
A GreenSpire árnyalatait csak a GreenSpire programhoz kapcsolódó tartalmaknál használd. Sikeres művelethez mindig a külön Siker skálát válaszd. A Világoskék 500 háttéren sötét szöveget használj, ne fehéret.
Ajánlott globális színek
A 70 árnyalat helyett ezt a rövid, szerkesztőbarát listát vedd fel. Így könnyebb következetes maradni.
Gramion – ElsődlegesMély Kék 500 · #363C86
Gramion – Elsődleges sötétMély Kék 700 · #202450
Gramion – KiemelőVilágoskék 500 · #0093FE
Szöveg – ElsődlegesSemleges 900 · #14171C
Szöveg – MásodlagosSemleges 600 · #505D6F
Háttér – AlapFehér · #FFFFFF
Háttér – HalványSemleges 50 · #F0F1F3
Keret – AlapSemleges 200 · #C1C7D1
SikerSiker 500 · #16875D
FigyelmeztetésFigyelmeztetés 500 · #D97706
HibaHiba 500 · #D92D20
GreenSpireGreenSpire 500 · #00807F
Felvétel lépései
- Nyisd meg az Elementor szerkesztőt, majd a bal felső menüből válaszd a Webhelybeállítások / Site Settings pontot.
- Nyisd meg a Globális színek / Global Colors részt.
- A Szín hozzáadása / Add Color művelettel készíts új bejegyzést.
- Add meg a Színrendszerben felsorolt magyar nevet, majd másold be a hozzá tartozó hex értéket.
- Mentsd a módosításokat, és a továbbiakban az elemek színválasztójában a földgömb ikonról válaszd ezeket.
04 · Vizuális alapok
Tipográfia
A Source Serif 4 ad karaktert a nagy címsoroknak, a Source Sans 3 pedig jól olvashatóvá teszi a bekezdéseket és a kezelőfelületi szövegeket.
Két betűcsalád, világos szerepekkel
Címsorok: Source Serif 4, 600-as vastagság. Bekezdések, gombok, címkék: Source Sans 3, 400–700-as vastagság.
A Kiemelt óriást rövid főoldali nyitócímhez, a Kiemelt extra nagy stílust aloldali Hero-címhez használd, legfeljebb 2–3 sorban.
Tovább.
Jó irányban
Növekedés
Valódi érték
Emberi megoldások
Oldal főcíme
Fő szekció címe
Tartalmi alcím
Kártyacím
Kisebb csoportcím
Részlet címe
Nagy bevezető szöveg, amely kényelmesen vezeti be a következő tartalmi részt.
Normál bekezdés a legtöbb tájékoztató szöveghez.
Kis kiegészítő szöveg.
Űrlapmező címkéje
Képaláírás vagy rövid megjegyzés
Szervezetfejlesztés
Ajánlott globális betűstílusok
Fő címsorSource Serif 4 · 48 px méret · 56 px sormagasság · 600
Másodlagos címsorSource Serif 4 · 36 px méret · 44 px sormagasság · 600
Kisebb címsorSource Serif 4 · 30 px méret · 38 px sormagasság · 600
Normál szövegSource Sans 3 · 16 px méret · 24 px sormagasság · 400
Nagy bevezető szövegSource Sans 3 · 20 px méret · 30 px sormagasság · 400
Kis szövegSource Sans 3 · 14 px méret · 20 px sormagasság · 400
Kezelőfelületi feliratSource Sans 3 · 14 px méret · 20 px sormagasság · 600Használat: űrlapmezők és választómezők címkéi, valamint normál jelvények. A normál gombfelirat külön, 16 px-es komponensbeállítást használ.
- Nyisd meg a Webhelybeállítások / Site Settings → Globális betűtípusok / Global Fonts részt.
- Hozd létre a Tipográfiai skálában felsorolt hét magyar nevű stílust.
- A betűtípusnál keresd meg a Source Serif 4 vagy Source Sans 3 családot.
- Add meg a méretet, vastagságot és sormagasságot külön asztali és mobil nézetben, ahol a táblázat eltérést jelöl.
- Mentsd, majd a címsorok és szövegek Stílus / Style részében a földgömb ikonról válaszd ki a megfelelő stílust.
05 · Vizuális alapok
Térközök
Minden távolság 4 px-es lépésekből épül. Ez ad nyugodt, kiszámítható ritmust az oldalnak.
A skála áttekintése
A sávok az értékek egymáshoz viszonyított méretét mutatják. A gyakori térközök tényleges használatát az alattuk lévő példákon láthatod.
0 px
Nincs távolság.
4 px
Ikon és rövid címke között.
8 px
Címke és mező, ikon és szöveg között.
12 px
Szorosan összetartozó sorok között.
16 px
Összetartozó tartalmi blokkok között.
20 px
Kisebb komponens belső térköze.
24 px
Normál kártya belső térköze.
32 px
Tágas kártya vagy kisebb szekciócsoport.
40 px
Nagyobb tartalmi blokkok között.
48 px
Kisebb oldalszekció függőleges térköze.
64 px
Általános oldalszekciók között.
80 px
Tágas asztali szekció.
96 px
Kiemelt nagy szekció.
128 px
Ritka, nagyon tágas szekcióelválasztás.
Térközök valódi helyzetekben
A kék terület mindig a két elem közötti tényleges távolságot jelöli. Az itt látható példák a design system meglévő komponenseiből épülnek.
Ikon és felirat
8 px8 pxReszponzív
Itt használd: jelvényben, gombban vagy rövid ikonos címkében.
Egymáshoz tartozó gombok
12 px12 px
Itt használd: egy műveletcsoporton belüli elsődleges és másodlagos gombok között.
Jelvény és kártyacím
16 pxSzolgáltatás16 px
Vezetőfejlesztés
Itt használd: kártyán belül két összetartozó tartalmi elem között.
Kártya belső térköze
24 px24 px
Szervezeti diagnosztikaRövid kártyatartalom
Itt használd: normál kártya szélei és belső tartalma között.
Címblokk és művelet
32 pxKészen állsz a következő lépésre?
32 pxItt használd: rövid bevezető tartalom és a hozzá tartozó CTA között.
Nagyobb tartalmi blokkok
48 pxTartalmi blokk48 pxKapcsolódó blokk
Itt használd: egy szekción belüli, jól elkülönülő tartalmi csoportok között.
Mobilos szekcióritmus
64 pxSzekció vége64 pxKövetkező szekció
Itt használd: mobilnézetben önálló oldalszekciók függőleges elválasztására.
Kiemelt asztali szekció
96 pxHero lezárása96 pxKövetkező szekció
Itt használd: asztali nézetben a Hero és a következő önálló tartalmi szekció között.
Margó és belső margó beállítása
A legtöbb távolság a Haladó / Advanced → Margó / Margin vagy Belső margó / Padding mezőben állítható. Ha a felső, jobb, alsó és bal oldalon eltérő értéket szeretnél, kattints a mezők melletti lánc ikonra. Ezután mind a négy értéket külön adhatod meg.
06 · Vizuális alapok
Oldalszélesség és elrendezés
A tartalom legfeljebb 1280 px széles. A széleken mindig marad levegő, mobilon 16, tableten 32, asztali nézetben 48 px.
Mobil4 oszlop · 16 px szélső tér · 16 px oszlopköz
Tablet8 oszlop · 32 px szélső tér · 24 px oszlopköz
Asztali12 oszlop · 48 px szélső tér · 24 px oszlopköz
Maximum1280 px teljes oldalszélesség
Egyszerűen az oszlopokról
Az oszlopok láthatatlan vezetősávok. Segítenek, hogy a kártyák és szövegek egy vonalban induljanak. Mobilon általában egy, tableten kettő, asztali nézetben három vagy négy kártyát tegyél egymás mellé.
Beállítás Elementorban
A külső konténer Elrendezés / Layout részében állítsd a tartalom szélességét „Dobozolt / Boxed” értékre és a maximumot 1280 px-re. A belső térközt a Haladó fülön add meg nézetenként.
07 · Vizuális alapok
Sarkok, keretek és árnyékok
A visszafogott formák rendezett, professzionális felületet adnak. Az árnyék csak ott jelenjen meg, ahol valóban réteget vagy kiemelést jelez.
Sarokkerekítés
0 pxÉles geometria
2 pxApró részlet
4 pxKis elem
8 pxGomb és mező
12 pxKártya
16 pxNagyobb panel
24 pxRitka, nagy forma
Teljesen kerekJelvény és profilkép
Keretvastagság
1 pxAlap komponenskeret
2 pxKiemelt keret vagy elválasztó
4 pxOldalsó hangsúly, például kiemelt dobozon
Árnyékok
Három dokumentált árnyékszint használható. Mindegyik egyetlen, az Elementorban pontosan beállítható árnyékból áll.
- Vízszintes
- 0 px
- Függőleges
- 0 px
- Elmosás
- 0 px
- Terítés
- 0 px
- Szín
- 0%
Használat: alap kártya, gomb, mező és statikus felület.
- Vízszintes
- 0 px
- Függőleges
- 1 px
- Elmosás
- 2 px
- Terítés
- 0 px
- Szín
- Semleges 900 · 8%
Használat: sticky Header és nagyon finoman elemelkedő felület.
- Vízszintes
- 0 px
- Függőleges
- 4 px
- Elmosás
- 12 px
- Terítés
- −2 px
- Szín
- Semleges 900 · 10%
Használat: kizárólag dokumentált emelt kártyán vagy hasonló önálló komponensen.
- Vízszintes
- 0 px
- Függőleges
- 12 px
- Elmosás
- 24 px
- Terítés
- −4 px
- Szín
- Semleges 900 · 14%
Használat: nyitott mobilmenü és valóban más tartalom fölé kerülő felület.
Árnyék beállítása
Elem kijelölése→Stílus / Style→Keret / Border→Dobozárnyék / Box Shadow
- A Dobozárnyék sor melletti ceruza ikonnal nyisd meg a mezőket.
- Másold be a kiválasztott szint vízszintes, függőleges, elmosás és terítés értékét.
- Színként válaszd a Semleges 900 értéket, majd állítsd be a megadott átlátszóságot.
- A Pozíció / Position maradjon Körvonal / Outline; ne használd a Belső / Inset lehetőséget.
- Árnyék nélküli elemnél kapcsold ki vagy állítsd vissza a Dobozárnyék vezérlőt.
Ne a Szövegárnyék / Text Shadow beállítást használd. Rámutatáskor csak akkor változzon az árnyék, ha azt az adott komponens fejezete külön előírja.
Az árnyék nem dekoráció.
Ha egy keret elegendő az elem elkülönítéséhez, ne adj hozzá árnyékot. Ne használj színes, túl sötét vagy több irányba szóródó árnyékot.
08 · Vizuális alapok
Ikonrendszer
Egységes, könnyen szerkeszthető ikonhasználat a gramion.hu Elementor-oldalaihoz. A rendszer az Elementor beépített lehetőségeire támaszkodik, külön telepítés nélkül.
Ikonforrás és vizuális stílus
Egységes ikonforrás
Az Elementor Ikontár / Icon Library → Font Awesome Solid készletéből válassz. Így az ikonok vizuális súlya és rajzolata az egész oldalon következetes marad.
Saját SVG csak kivételesen
Először mindig az Elementor beépített ikontárában keress ikont. Saját SVG-fájlt csak akkor tölts fel, ha azt külön, ellenőrzött arculati fájlként kaptad meg.
Azonos vizuális súly
Az ikonok azonos családból, egységes méretben és színnel jelennek meg.
Eltérő súly és méret
Ne keverd a Solid, Regular, Brands és egyedi rajzolatokat tartalmi ikonokként.
Használható méretskála
Az ikonokhoz a következő hat méret közül válassz. A méret az ikon négyzetes befoglaló méretét jelenti.
16 pxApró vezérlő
20 pxKezelőfelület
24 pxTartalmi alap
32 pxSzolgáltatás
40 pxKiemelt blokk
48 pxDekoratív maximum
Tartalmi ikon: 24 pxKártyában, kapcsolati sorban és üzenetben ez legyen az alap.
Kezelőfelületi ikon: 20 pxHarmonikában, menüben és kisebb vezérlőben ez legyen az alap.
KomponensMéretHasználat
Jelvény
12–16 pxCsak rövid címke mellett.Gomb
16–20 pxA gomb magasságához és feliratához igazítva.Önálló CTA-link
16 pxÁltalában jobbra mutató nyíl.Harmonika nyíl
20 pxNyitáskor irányt vált.Üzenet / Alert
20–24 pxAz állapotot szöveg is megnevezi.Kapcsolati sor
20–24 pxTelefon, e-mail, hely vagy idő.Kártya
24 pxEgyszerű tartalmi jelölés.Szolgáltatás Icon Box
32 pxAlap szolgáltatáskártya.Kiemelt Icon Box
40 pxNagyobb szolgáltatási blokk.Dekoratív ikon
legfeljebb 48 pxRitkán, önálló vizuális hangsúlyként.Ikon és szöveg közötti térköz
Elérhető
Kompakt elemnél elég a legkisebb rés.
Hívj minket
A telefonikon 18 px-es méretben visszafogott marad, miközben ugyanahhoz a Solid ikonkészlethez tartozik.
Fontos információ
Az ikon elkülönül, de az üzenet része marad.
Pénzügyi audit
Nagy szolgáltatási blokkban 16 px, kisebben 12 px.
Írj nekünk
Az ikon egyértelműen a felirathoz tartozik.
Írj nekünk
A 32 px-es rés már két külön elem érzetét kelti.
Ikonszínek
AlapértelmezettSemleges 600 · #505D6F
Általános tartalmi és felületi ikon.
KiemeltMély Kék 500 · #363C86
Gramion márkához kapcsolódó hangsúly.
VisszafogottSemleges 400 · #8390A2
Másodlagos, nem interaktív információ.
InteraktívMély Kék 500 / 700 / 800
Alap: 500, rámutatás: 700, aktív vagy erős állapot: 800.
Állapotikonok
Három jól elkülönülő megjelenési minta
A · Egyszerű ikon
Önálló, háttér és keret nélküli ikon kártyában vagy rövid információs sorban.
- Ikon: 24 vagy 32 px
- Szín: Semleges 600 vagy Mély Kék 500
- Mobil: maradjon azonos méretű
Szerkeszthető
- Ikon jelentése
- Dokumentált méret
Rögzített
- Solid stílus
- Dokumentált szín
B · Halvány hátteres ikon
Szolgáltatási vagy tartalmi jelöléshez. A világoskék felület, a látható keret és a sötét ikon a szürke oldalszakaszon is egyértelműen elkülönül.
- Befoglaló: 48 × 48 px; ikon: 24 px
- Háttér: Világoskék 50; keret: Világoskék 600
- Ikon: Világoskék 800; sarok: 12 px
- Mobil: nem kell kisebbíteni
Szerkeszthető
- Ikon jelentése
Rögzített
- 48 / 24 px arány
- Kontrasztos színpár
C · Tömör, kör alakú ikon
Kiemelt irányjelző vagy ritka, önálló vizuális hangsúly. A telített háttér egyértelműen megkülönbözteti a halvány hátteres változattól.
- Befoglaló: 40 vagy 48 px
- Ikon: 20 vagy 24 px
- Csak egyértelmű, rövid helyzetben
- Mobil: legalább 40 px-es érintési felület
Szerkeszthető
- Dokumentált méret
- Ikon
Rögzített
- Körforma
- Kontrasztos színpár
Így építsd meg ElementorbanEgy közös beállítási folyamat minden ikonhoz
Válaszd ki a widgetet→Tartalom / Content→Ikon / Icon→Font Awesome Solid
- Válaszd ki a megfelelő widgetet: önálló ikonhoz Ikon, cím és leírás mellé Ikondoboz, felsoroláshoz Ikonlista, művelethez Gomb.
- Az ikontárban a Kezelőfelületi ikonreferencia angol keresőkifejezésével keress.
- A Stílus / Style fülön válaszd ki a komponenshez megadott méretet és globális színt.
- Az ikon és a mellette lévő szöveg között általában 8 px, Ikondoboznál 12–16 px térközt állíts be.
- Telefonhoz a
phoneSolid ikont használd 18 px-es méretben. Ugyanebben a készletben nincs külön vékony telefonváltozat, ezért a kisebb méret tartja visszafogottan. - Mobilon ne cseréld le az ikont és ne zsugorítsd 16 px alá; önálló vezérlőnél a teljes kattintható terület legalább 44 × 44 px legyen.
Szabadon módosítható: az ikon jelentése és a dokumentált méretváltozat. Maradjon egységes: az ikonkészlet, a színlogika és a térköz.
Kezelőfelületi ikonreferencia
Hozzáférhetőség vizuális példákkal
Az ikon csak megerősíti a jelentést. A művelet vagy állapot szöveg nélkül is legyen érthető.
Sikeres mentésA módosítások elkészültek.
- Az állapotot ikon, szín és szöveg együtt közli.
- A művelet látható felirata pontosan megnevezi, mi történik.
- Az önálló vezérlő teljes területe legalább 44 × 44 px.
- A felirat nélküli ikonokról nem derül ki biztosan, mit csinálnak.
- A három színes pont szöveg nélkül nem nevezi meg az állapotokat.
- Ne használd ugyanazt az ikont eltérő jelentésekre.
Reszponzív ikonhasználat
AsztaliA tartalmi ikon általában 24–40 px; a méret a komponens szerepét követi.
TabletAz ikonméret többnyire változatlan; a rács és az igazítás alkalmazkodik.
MobilNe zsugorítsd 16 px alá. Az önálló vezérlő érintési felülete legalább 44 × 44 px.
09 · Vizuális alapok
Kép- és médiahasználat
A képek ne pusztán díszítsenek: tegyék érzékelhetővé a rendszereket, az együttműködést és a valós szervezeti helyzeteket. Minden fájl legyen jogtisztán használható, helyben tárolt és reszponzívan méretezett.
Karakter
Valós, megfigyelő jellegű fotót válassz. Jó téma az emberi együttműködés, a térbeli rendszer, a természetes hálózat vagy a gondolkodási folyamat. Kerüld a beállított kézfogást, a túl mosolygós stockfotót és a közhelyes üzleti jelenetet.
Képkivágás
A fő vizuál és a széles tartalmi kép alaparánya 16:9 vagy 3:2. Portré helyzetben 4:5 használható. A fontos arc, tárgy vagy gesztus ne kerüljön a mobilos vágási zónába.
Technikai alap
Fotóhoz WebP vagy megfelelően tömörített JPEG, átlátszó jelhez SVG vagy PNG használható. A fájlnevek legyenek leírók, a képek szélessége igazodjon a tényleges megjelenéshez.
16:9
Széles történetkép
Hero utáni vagy teljes tartalomszélességű vizuál. A fókuszpont maradjon a középső kétharmadban.
3:2
Szerkesztőségi kép
Kép–szöveg párokhoz, esettanulmányhoz és módszertani szekcióhoz.
4:5
Portré vagy részlet
Személy, tárgy vagy részlet kiemelésére; ne legyen az egyetlen mobilos információhordozó.
Használd
- Helyben tárolt, kiválasztott és jogtisztán használható képfájlt
- Érdemi, magyar alt szöveget az információt hordozó képnél
- Üres alt szöveget a valóban dekoratív képnél
loading="lazy"értéket a hajtás alatti képeknél- Előre rögzített képarányt a betöltés közbeni ugrás ellen
Ne használd
- Külső képoldalról közvetlenül behivatkozott hotlinket
- Szöveget vagy fontos adatot a képbe égetve
- Ismeretlen licencű vagy mesterségesen „vállalati” stockfotót
- Indokolatlan kerekítést, erős árnyékot vagy színes fedőréteget
- Ugyanazt a képet több, eltérő jelentésű szekcióban
Kép beállítása
A Kép widgetben válaszd ki a helyi Médiatár-fájlt, add meg az alt szöveget a médiabeállításoknál, a képméretet pedig a tényleges megjelenéshez igazítsd. Háttérképet csak akkor használj, ha nem hordoz önálló információt és a szöveg kontrasztja minden kivágásban megfelelő.
10 · Tartalmi alapok
Egyszerű tartalmi elemek
Kilenc következetes építőelem a gramion.hu új oldalaihoz. Mindegyik natív Elementor-widgetből, kód és kézzel megadott CSS-osztály nélkül készíthető el.
Közös tipográfia
Normál tartalom: Source Sans 3, 16 px, 24 px sormagasság, 400, Semleges 800. Kiegészítő szöveg: 14 px, 20 px sormagasság, Semleges 600. Bevezető: asztali 20/30 px, mobil 18/28 px.
Közös térköz
Összetartozó elemek között 8–12 px; bekezdés és lista között 16–24 px; nagyobb blokkok között 32–48 px; oldalszekciók között 64–128 px. Ne használj 17, 22, 27 vagy 37 px-es véletlenszerű értékeket.
Hagyományos felsorolás
Egyenrangú, sorrendtől független információk rövid és áttekinthető felsorolása.
Egy témához tartozó, azonos fontosságú állításokhoz, amelyek nem alkotnak lépéssort.
Folyamathoz, rangsorhoz vagy egymásra épülő feladatokhoz; ezekhez számozott lista való.
Vizuális példaValódi HTML-lista, egyszerű és legfeljebb kétszintű változat
Jó: egyszerű felsorolás
- Pénzügyi működés feltérképezése
- Szervezeti problémák azonosítása
- Fejlesztési lehetőségek meghatározása
Jó: legfeljebb két szint
- Szervezeti diagnózis
- vezetői interjúk
- folyamatok áttekintése
- Fejlesztési javaslat
Kerüld: kézzel írt jelek
- – pénzügyi áttekintés
- ⭐ szervezeti diagnózis
- → fejlesztési terv
A kézzel begépelt jel nem valódi lista, ezért nehezebben kezelhető és kevésbé hozzáférhető.
Kerüld: túl mély beágyazás
Két szint után bontsd külön blokkra a tartalmat. Három vagy több behúzás mobilon nehezen olvasható.
Így készítsd el ElementorbanSzövegszerkesztő / Text Editor widget
Teljes recept
Melyik Elementor-elemből épül?
Szövegszerkesztő / Text Editor widgetből, annak beépített felsorolás funkciójával.
Így készítsd el Elementorban
- Húzd be a Szövegszerkesztő widgetet.
- A Tartalom / Content eszköztárán kapcsold be a felsorolást.
- Minden listaelemet külön sorba írj.
- Beágyazott pontnál használd egyszer a behúzás növelését.
- A Stílus / Style fülön válaszd a normál tartalmi tipográfiát.
- A Haladó / Advanced fülön állíts 16–24 px külső térközt.
- Ellenőrizd a telefon ikonnál is.
Pontos beállítások
- Source Sans 3; 16 px; 24 px sormagasság; 400
- Szöveg: Semleges 800; kör jelölő: Mély Kék 500
- Sorok között: 8 px; lista előtt és után: 16–24 px
- Második szint behúzása: 20–24 px; kisebb kör jelölő
Mobilbeállítások
A szöveg maradjon 16 px. A jelölő ne érjen a képernyő széléhez, a hosszú magyar sorok természetesen törjenek, és két szintnél ne legyen mélyebb a lista.
Szabadon módosítható
- Listaelemek szövege
- Elemek száma
- Elemek sorrendje
- Legfeljebb két szint
Ne módosítsd szabadon
- Betűtípus és méret
- Jelölő típusa és színe
- Nem dokumentált behúzás
- Emoji vagy dekoratív karakter
Gyakori hibák
Kézzel begépelt kötőjel, háromnál több szint, eltérő szín minden pontnál vagy teljes bekezdések listaelemként.
Számozott lista
Lépések, folyamatok és egymásra épülő feladatok világos sorrendben.
Ha a sorrend fontos: rövid folyamat, útmutató, rangsor vagy egymásra épülő teendők.
Egyenrangú témalistához vagy nagy, vizuálisan hangsúlyos folyamathoz. Az utóbbi külön folyamatlépés-szekciót igényel.
Vizuális példaRövid diagnosztikai folyamat valódi számozott listával
- A jelenlegi helyzet feltérképezése
- A legfontosabb problémák azonosítása
- Fejlesztési irányok meghatározása
Hol a határ?
Három–öt rövid lépéshez elég a számozott lista. Ha minden lépéshez külön ikon, hosszú leírás vagy vizuális kapcsolat tartozik, később külön folyamatkomponenst használj.
Így készítsd el ElementorbanSzövegszerkesztő / Text Editor widget
Teljes recept
Melyik Elementor-elemből épül?
A Szövegszerkesztő widget beépített számozott lista funkciójából. Ne építs minden számot külön szöveg- vagy címsorwidgetből.
Így készítsd el Elementorban
- Húzd be a Szövegszerkesztő widgetet.
- A Tartalom / Content eszköztárán válaszd a számozott listát.
- Írd a lépéseket külön sorokba, helyes sorrendben.
- A Stílus / Style fülön válaszd a normál tartalmi tipográfiát.
- A Haladó / Advanced fülön adj 16–24 px külső térközt.
- Ellenőrizd, hogy mobilon a szám és a szöveg nem csúszik szét.
Pontos beállítások
- Source Sans 3; 16 px; 24 px sormagasság; Semleges 800
- Szám: Mély Kék 500; 600-as vastagság
- Lépések között: 12 px
Mobilbeállítások
A betűméret maradjon 16 px. Hosszú lépések törhetnek több sorba, de a következő szám új sorban induljon.
Szabadon módosítható
- Lépések szövege
- Lépések száma
- Logikus sorrend
Ne módosítsd szabadon
- Kézzel írt számok
- Egyedi számdobozok
- Véletlenszerű színek
- Nagy folyamat helyettesítése
Gyakori hibák
Kézzel gépelt számozás, külön widget minden lépéshez, túl hosszú bekezdések vagy sorrendtől független tartalom számozása.
Pipás előnylista
Biztos előnyök, tartalmi elemek vagy valóban teljesült pontok egyértelmű jelölése.
Szolgáltatás előnyeihez, csomag biztos tartalmához, elérhető eredményekhez és ellenőrzött pontokhoz.
Semleges témákhoz, problémákhoz, kérdésekhez vagy hosszú bekezdésekhez. Ezeket ne állítsd be teljesült előnyként.
Vizuális példaÁltalános, valódi siker- és GreenSpire-változat
Általános előnylista
- Személyre szabott helyzetelemzés
- Gyakorlati fejlesztési javaslatok
- Vezetői utánkövetés
Szín jelentéssel
- A jelentkezés sikeresen beérkezett
- GreenSpire fenntarthatósági program
Siker-zöld csak valódi teljesüléshez; GreenSpire csak márkatartalomhoz.
Így készítsd el ElementorbanIkonlista / Icon List widget
Teljes recept
Melyik Elementor-elemből épül?
Ikonlista / Icon List widgetből. Az ikon kiválasztási alapelveit az Ikonrendszer tartalmazza; itt csak a tartalmi használat szerepel, így a szabály nem duplikálódik.
Így készítsd el Elementorban
- Húzd be az Ikonlista widgetet.
- A Tartalom / Content fülön add hozzá az előnyöket.
- Válaszd a Font Awesome Solid
checkikont. - A Stílus / Style fülön állítsd be az ikon és a szöveg méretét.
- Általános előnynél válaszd a Mély Kék 500 színt.
- A Haladó / Advanced fülön állítsd be a blokk körüli térközt.
- Ellenőrizd mobilon a hosszú sorok törését.
Pontos beállítások
- Ikon: 16–20 px; Font Awesome Solid; szín alapból Mély Kék 500
- Szöveg: Source Sans 3; 16 px; 24 px sormagasság
- Ikon és szöveg között: 8 px; sorok között: 8–12 px
Mobilbeállítások
A szöveg maradjon 16 px. Az ikon ne zsugorodjon, a hosszú sor a szövegoszlopon belül törjön.
Szabadon módosítható
- Előnyök szövege
- Elemek száma
- Dokumentált márkaváltozat
Ne módosítsd szabadon
- Nem dokumentált ikon
- Zöld pipa minden listához
- Eltérő szín soronként
- Emoji használata
Gyakori hibák
Semleges témalista pipákkal, Success és GreenSpire összekeverése, túl hosszú listaelemek vagy látható szöveg nélküli ikonok.
Ikonos lista
Különböző típusú, de egy blokkba tartozó információk felismerhető ikonokkal.
Kapcsolati adatokhoz, nyitvatartáshoz vagy eltérő szolgáltatási tulajdonságokhoz, amikor minden sornak saját jelentése van.
Azonos típusú egyszerű felsoroláshoz, teljesült előnyökhöz vagy olyan szöveghez, amelyet az ikon nélkül nem lehet megérteni.
Vizuális példaKapcsolati és szolgáltatási lista
Kapcsolat
- +36 XX XXX XXXX
- gramion@gramion.hu
- A tényleges iroda- vagy konzultációs helyszín
- A megadott elérhetőségi idő
Szolgáltatási információk
- Vezetői és munkatársi interjúk
- Adatalapú helyzetértékelés
- Írásos fejlesztési javaslat
Ugyanaz a jelentés az egész oldalon ugyanazt az ikont kapja.
Így készítsd el ElementorbanIkonlista / Icon List widget
Teljes recept
Melyik Elementor-elemből épül?
Ikonlista widgetből. A telefonhoz, e-mailhez, helyszínhez és időhöz használható keresőkifejezéseket az Ikonrendszer Kezelőfelületi ikonreferenciája tartalmazza.
Így készítsd el Elementorban
- Húzd be az Ikonlista widgetet.
- A Tartalom / Content fülön add hozzá a sorokat.
- Minden sorhoz válassz a jelentéséhez illő Solid ikont.
- Szükség esetén adj linket a telefonszámhoz vagy e-mailhez.
- A Stílus / Style fülön állíts egységes méretet és színt.
- A Haladó / Advanced fülön add meg a blokk térközét.
- Ellenőrizd mobilon a hosszú címeket és adatokat.
Pontos beállítások
- Ikon: 20 px; Mély Kék 500 vagy Semleges 600
- Szöveg: Source Sans 3; 16 px; 24 px sormagasság
- Ikon és szöveg között: 8 px; sorok között: 8–12 px
Mobilbeállítások
A lista teljes szélességet használhat. Az ikon maradjon 20 px, a hosszú szöveg törjön, és ne keletkezzen vízszintes görgetés.
Szabadon módosítható
- Szöveg és link
- Sorok száma
- Jelentéshez illő dokumentált ikon
Ne módosítsd szabadon
- Ikonméret és térköz
- Eltérő szín minden sorhoz
- Emoji
- Szöveg elrejtése
Gyakori hibák
Az ikon nem illik a jelentéshez, ugyanaz a jelentés többféle ikont kap, a sorok eltérő színűek vagy az ikon helyettesíti a látható szöveget.
Bevezető vagy kiemelt bekezdés
Egy oldal vagy szekció legfontosabb gondolatának rövid, szemantikailag helyes összefoglalása.
A cím után egy rövid, tájékozódást segítő összefoglalóhoz, amely bevezeti a következő tartalmat.
Minden bekezdés kiemelésére, címsor helyett vagy hosszú, több gondolatot tartalmazó szöveghez.
Vizuális példaKiemelt bevezető és normál folytatás
A Gramion abban segít, hogy a vállalkozás ne csak növekedjen, hanem átláthatóbban, tudatosabban és fenntarthatóbban működjön.
A közös munka során feltérképezzük a jelenlegi helyzetet, azonosítjuk a fejlesztési pontokat, majd a szervezethez illeszkedő, gyakorlatban is végrehajtható lépéseket határozunk meg.
Egy rövid bekezdés, amely után normál méretű szöveg következik.
Ne legyen minden bekezdés nagy, félkövér vagy indokolatlanul H2/H3 címsor.
Így készítsd el ElementorbanSzövegszerkesztő / Text Editor widget
Teljes recept
Melyik Elementor-elemből épül?
Elsődlegesen Szövegszerkesztő widgetből. Ha Címsor / Heading widgetet használsz a méret miatt, a HTML-címke akkor is maradjon p, ne váljon indokolatlan H2 vagy H3 címsorrá.
Így készítsd el Elementorban
- Húzd be a Szövegszerkesztő widgetet a címsor alá.
- Írj egyetlen rövid, összefoglaló bekezdést.
- A Stílus / Style fülön add meg az asztali tipográfiát.
- A reszponzív telefon ikonnál állítsd be a mobilméretet.
- A Haladó / Advanced fülön korlátozd a szélességet és add meg a következő blokk térközét.
- Ellenőrizd, hogy a HTML-címke bekezdés maradt.
Pontos beállítások
- Source Sans 3; asztali 20 px / 30 px; mobil 18 px / 28 px
- Vastagság: 400; szín: Semleges 700 vagy 800
- Maximum szélesség: 640–768 px
Mobilbeállítások
A betűméret 18 px, a sormagasság 28 px. A blokk teljes szélességet használhat, de az oldalsó 16 px belső tér maradjon meg.
Szabadon módosítható
- Rövid bevezető szöveg
- 640–768 px közötti szélesség
- Semleges 700 vagy 800
Ne módosítsd szabadon
- Betűcsalád és méretskála
- Teljes félkövér bekezdés
- Címsorszint
- Túl hosszú szöveg
Gyakori hibák
Címsor helyettesítése, minden bekezdés nagyítása, több bekezdés összevonása vagy Heading tag használata pusztán a méret miatt.
Kiemelt tartalmi doboz
Fontos szakmai gondolat, definíció vagy rövid tanulság elkülönítése rendszerállapot jelentése nélkül.
Megjegyzendő szakmai összefoglalóhoz, definícióhoz vagy olyan információhoz, amelyre az olvasónak érdemes külön figyelnie.
Hibához, figyelmeztetéshez, sikerhez, űrlap-visszajelzéshez vagy rendszerállapothoz. Ezekhez a már meglévő Üzenet / Alert komponens való.
Vizuális példaMély Kék, semleges és GreenSpire-változat
Fontos szakmai szempont
A szervezetfejlesztés akkor eredményes, ha a javaslatok a napi működésben is végrehajthatók.
Rövid definíció
A diagnózis nem minősítés, hanem közös kiindulópont a fejlesztési döntésekhez.
GreenSpire-megközelítés
A fenntarthatósági célok a vállalati működésbe épülnek, nem különálló kampányként jelennek meg.
Ez már Alert
A rendszerállapotot vagy azonnali teendőt jelző üzenet nem kiemelt tartalmi doboz.
Így készítsd el ElementorbanKonténer + opcionális Címsor + Szövegszerkesztő
Teljes recept
Melyik Elementor-elemből épül?
Egy Konténer / Container elemből, benne opcionális Címsor és egy Szövegszerkesztő widget. Nem Alert, nem kártya és nem kattintható alapértelmezésként.
Így készítsd el Elementorban
- Hozz létre egy függőleges Konténert.
- Tegyél bele opcionális rövid címet és egy bekezdést.
- A Stílus / Style fülön állítsd be a dokumentált hátteret és bal keretet.
- A Haladó / Advanced fülön adj 24 px belső térközt.
- Állíts 8 px sarokkerekítést, árnyék nélkül.
- Mobilnézetben csökkentsd a belső térközt 16 px-re.
Pontos beállítások
- Alap: Mély Kék 50 háttér; 4 px Mély Kék 500 bal keret
- Semleges: Semleges 50 háttér; Semleges 300 vagy Mély Kék 300 keret
- GreenSpire: GreenSpire 50 háttér; 4 px GreenSpire 500 keret; GreenSpire 800 cím
- Belső tér: asztali 24 px, mobil 16 px; sarok: 8 px; árnyék: nincs
- Cím: Source Sans 3, 18/24 px, 600; szöveg: 16/24 px, Semleges 800
Mobilbeállítások
A padding 16 px. A doboz ne érjen a képernyő széléhez, a bal keret maradjon látható, és a szöveg természetesen törjön.
Szabadon módosítható
- Cím és rövid szöveg
- Dokumentált változat
- GreenSpire csak márkatartalomhoz
Ne módosítsd szabadon
- Padding és sarok
- Erős árnyék
- Státuszszín dekorációként
- Gombkártyává alakítás
Gyakori hibák
Alertként használt szakmai kiemelés, több doboz közvetlenül egymás alatt, teljes oldalnyi kiemelés, túl nagy ikon vagy erős árnyék.
Idézet
Rövid, önálló gondolat vagy külső forrásból származó kijelentés visszafogott kiemelése.
Rövid, forrással rendelkező idézethez vagy egy szakmai gondolat pontos kiemeléséhez.
Ügyfélvélemény-kártya, több bekezdéses esettanulmány vagy pusztán nagyított marketingmondat helyett. A testimonial külön, későbbi komponens.
Vizuális példaForrással ellátott rövid idézet
„A jó szervezeti döntés nemcsak gyors választ ad, hanem hosszú távon is működőképes irányt teremt.”
Gramion szakmai alapelv
Rövid idézet, látható forrás, visszafogott bal keret és jól olvasható Serif tipográfia.
Nagy dekoratív idézőjel, névtelen forrás, animáció vagy több bekezdésnyi idézett szöveg.
Így készítsd el ElementorbanKonténer + két Szövegszerkesztő widget
Teljes recept
Melyik Elementor-elemből épül?
Egy Konténerből, benne egy Szövegszerkesztő az idézethez és egy második a szerzőhöz vagy forráshoz.
Így készítsd el Elementorban
- Hozz létre egy függőleges Konténert.
- Add hozzá az idézet szövegét.
- Alatta külön widgetben tüntesd fel a szerzőt vagy forrást.
- A Stílus / Style fülön állítsd be a két tipográfiát.
- A Konténer bal oldalán adj 2 px-es keretet.
- A Haladó / Advanced fülön adj 24 px bal belső és 32–48 px külső térközt.
- Mobilon csökkentsd a bal belső teret 16 px-re.
Pontos beállítások
- Idézet: Source Serif 4; asztali 24/32 px; mobil 20/28 px; 500 vagy 600; Mély Kék 700
- Keret: 2 px Mély Kék 300; bal padding: asztali 24 px, mobil 16 px
- Forrás: Source Sans 3; 14/20 px; Semleges 600; felső tér: 12 px
- Függőleges külső térköz: 32–48 px
Mobilbeállítások
Az idézet 20 px, sormagassága 28 px. A bal keret és a 16 px-es belső tér maradjon látható, a hosszú sorok természetesen törjenek.
Szabadon módosítható
- Rövid idézet
- Szerző vagy forrás
- 500 vagy 600 vastagság
Ne módosítsd szabadon
- Forrás elhagyása
- Nagy idézőjel-ikon
- Animáció
- Testimonialként használat
Gyakori hibák
Hiányzó forrás, teljes bekezdéssorozat idézetként, marketingcím idézetnek álcázva vagy túl erős dekoráció.
Elválasztó
Két önálló tartalmi blokk finom vizuális elkülönítése, csak amikor a térköz önmagában nem elég.
Hosszabb oldalon két külön témablokk határának jelzésére vagy ritka, rövid címsori kiemelővonalként.
Minden bekezdés között, megfelelő térköz helyett vagy dekoratív mintaként.
Vizuális példaAlap elválasztó és rövid kiemelővonal
Az elsődleges tagolási eszköz a 32–48 px-es térköz.
Az 1 px-es Semleges 200 vonal csak valóban különálló blokkhatárt erősít meg.
A rövid, 56 px-es Mély Kék vonal ritka bevezetőelem.
Kerüld a színátmenetet, pontozást, cikcakkot és középre tett ikont.
Így készítsd el ElementorbanElválasztó / Divider widget
Teljes recept
Melyik Elementor-elemből épül?
Az Elementor natív Elválasztó / Divider widgetjéből. Ne készíts külön konténerből vagy karakterekből vonalat.
Így készítsd el Elementorban
- Először próbáld meg megfelelő térközzel tagolni a blokkokat.
- Ha a határ még nem egyértelmű, húzd be az Elválasztó widgetet.
- A Stílus / Style fülön válassz folytonos vonalat.
- Állítsd be a vastagságot, színt és szélességet.
- A Haladó / Advanced fülön adj 32–48 px felső és alsó térközt.
- Ellenőrizd mobilon, hogy a vonal nem lóg ki.
Pontos beállítások
- Alap: 1 px, Semleges 200, 100% szélesség
- Rövid kiemelővonal: 48–64 px, 2 px, Mély Kék 500 vagy Világoskék 500
- Felső és alsó térköz: 32–48 px
Mobilbeállítások
A vonal maradjon a tartalmi konténeren belül. A 32 px-es térköz általában elegendő, és ne okozzon vízszintes túlcsordulást.
Szabadon módosítható
- Alap vagy rövid változat
- 32–48 px külső tér
- Dokumentált szín
Ne módosítsd szabadon
- Gradient vagy cikcakk
- Pontozott vonal
- Középső ikon
- Spacing helyettesítése
Gyakori hibák
Túl sok vonal, dekoratív stílus, több elválasztó egymás után vagy a blokk térközének elhagyása.
Statisztikai elem
Egy fontos, ellenőrzött szám vagy adat tömör, vizuálisan hangsúlyos bemutatása.
Tapasztalat, projektmennyiség, ügyfélszám vagy más valós, értelmezhető és szükség esetén frissíthető adat kiemelésére.
Pontatlan marketingállításhoz, kattintható kártyaként vagy olyan számhoz, amely magyarázat nélkül félreérthető.
Vizuális példaNégy statikus adat reszponzív rácsban
Azonnal olvasható, nem vonja el a figyelmet, és animáció nélkül is közli a lényeget.
Csak akkor használd, ha a visszafogott animáció valóban segíti a megértést. Ne fusson folyamatosan és ne legyen túl gyors.
Így készítsd el ElementorbanKonténer + Címsor + szöveg; opcionálisan Counter
Teljes recept
Melyik Elementor-elemből épül?
Elsődlegesen Konténerből, benne Címsor widget a számhoz, majd Címsor vagy Szövegszerkesztő a címkéhez és opcionális kiegészítő szöveg. A Counter widget használható, de nem szükséges.
Így készítsd el Elementorban
- Hozz létre egy külső rács- vagy sorirányú Konténert.
- Minden statisztikához készíts egy belső függőleges Konténert.
- Add hozzá a statikus számot Címsor widgetben.
- Alá írd a címkét, majd opcionálisan a magyarázatot.
- A Stílus / Style fülön állítsd be a három tipográfiát.
- A Haladó / Advanced fülön adj 24–32 px térközt az elemek között.
- Tablet nézetben válts két oszlopra, mobilon egy vagy két oszlopra.
- Countert csak indokolt, egyszeri és visszafogott animációhoz válassz.
Pontos beállítások
- Szám: Source Serif 4; asztali 48/56 px; mobil 36/44 px; 600; Mély Kék 500
- Címke: Source Sans 3; 16/24 px; 600; Semleges 800
- Magyarázat: Source Sans 3; 14/20 px; Semleges 600
- Rács: asztali 3–4 oszlop; tablet 2; mobil 1–2; rés 24–32 px
Mobilbeállítások
A szám 36 px, sormagassága 44 px. Két oszlop csak rövid címkéknél maradjon; hosszabb magyar szövegnél válts egy oszlopra.
Szabadon módosítható
- Ellenőrzött érték
- Címke és magyarázat
- 1 vagy 2 mobiloszlop
- Indokolt Counter
Ne módosítsd szabadon
- Tipográfiai skála
- Kattintható alapállapot
- Folyamatos animáció
- Nem igazolható adat
Gyakori hibák
Counter minden számhoz, túl gyors animáció, magyarázat nélküli adat, eltérő méret egy rácson belül vagy mobilon túl szűk négyoszlopos elrendezés.
Mobil- és hozzáférhetőségi összefoglaló
AsztaliBevezető 20 px, kiemelt doboz 24 px padding, idézet 24 px, statisztikai szám 48 px.
TabletA statisztikák két oszlopra váltanak; minden más elem megtartja természetes szélességét.
Mobil · kb. 767 px-igBevezető 18 px, doboz 16 px padding, idézet 20 px, statisztikai szám 36 px; rács egy vagy két oszlop.
A tényleges töréspontokat ellenőrizd.
Az Elementor telefon és tablet ikonjánál nézd át az értékeket. A pontos mobil- és tablethatár a Webhelybeállítások / Site Settings → Elrendezés / Layout → Töréspontok / Breakpoints részben eltérhet.
- Használj valódi lista funkciót.
Ne gépelj kézzel kötőjelet vagy számot lista helyett. - A szöveg ikon nélkül is legyen érthető.
Az ikon erősíti, nem helyettesíti a jelentést. - Ne használj emojit listajelölőként.
Maradj a dokumentált körnél vagy Solid ikonnál. - A státuszszín valódi jelentést kapjon.
A Siker, Figyelmeztetés és Hiba nem dekoráció. - Az idézet forrása legyen látható.
Ne hagyd el a szerzőt vagy szakmai forrást. - Ne halványítsd túl a szöveget.
Tartalomhoz Semleges 800, kiegészítéshez Semleges 600 való. - A Counter ne legyen zavaró.
Az alap statikus; az animáció lassú, egyszeri és indokolt legyen. - A kiemelt doboznak legyen formája is.
A bal keret miatt nem csak a szín különíti el. - Ne bontsd meg a címsorrendet.
A nagyított bevezető továbbra is bekezdés. - Mobilon ne legyen túlcsordulás.
A hosszú magyar szöveg törjön természetesen.
Használd / Ne használd
Használd
- Valódi felsorolást és számozott listát
- Mély Kék pipát általános előnyhöz
- Következetes 4 px-es térközrendszert
- Rövid kiemelt dobozt
- Feltüntetett idézetforrást
- Statikus számot alapértelmezésként
- Egyértelmű, dokumentált ikonokat
- Source Sans 3 tartalmi szöveget
- Source Serif 4 idézetet és nagy számot
Ne használd
- Kézzel begépelt kötőjelet vagy számot
- Emojit listajelölőként
- Zöld pipát minden felsoroláshoz
- Alertet szakmai kiemeléshez
- Több kiemelődobozt egymás alatt
- Nagy dekoratív idézőjelet
- Erős árnyékot
- Animált Countert minden számhoz
- Elválasztót térköz helyett
- Véletlenszerű színeket és méreteket
- Két szintnél mélyebb beágyazott listát
Gyors segítség
Gyors tartalmi receptek
A részletes szabály az Egyszerű tartalmi elemek kilenc alfejezeténél szerepel; ezek a rövid receptek arra mutatják meg, milyen sorrendben állítsd össze őket Elementorban.
1. Hagyományos felsorolás
- Húzz be Szövegszerkesztő widgetet.
- Kapcsold be a valódi felsorolást.
- Írd külön sorba az egyenrangú pontokat.
- Válaszd a 16/24 px-es normál szöveget.
- Állíts 8 px sortávolságot és 16–24 px külső teret.
- Mobilon ellenőrizd a behúzást.
2. Számozott lista
- Húzz be Szövegszerkesztő widgetet.
- Kapcsold be a számozott listát.
- Rendezd logikus sorrendbe a lépéseket.
- A szám legyen Mély Kék 500 és 600-as vastagságú.
- A lépések között legyen 12 px.
- Ne építs külön widgetet minden számhoz.
3. Pipás előnylista
- Húzd be az Ikonlista widgetet.
- Add hozzá a valódi előnyöket.
- Válaszd a Solid
checkikont. - Általános előnynél használj Mély Kék 500 színt.
- Állíts 8 px ikon–szöveg rést.
- Mobilon ellenőrizd a sortörést.
4. Kapcsolati ikonos lista
- Húzd be az Ikonlista widgetet.
- Adj külön sort a telefonnak, e-mailnek és helyszínnek.
- Válassz jelentéshez illő Solid ikont az Ikonrendszerből.
- Az ikon 20 px, a rés 8 px legyen.
- Adj működő telefon- és e-mail-linket.
- Ellenőrizd mobilon a hosszú adatokat.
5. Bevezető bekezdés
- Tegyél Szövegszerkesztőt a címsor alá.
- Írj egy rövid összefoglaló bekezdést.
- Állíts asztali 20/30 px tipográfiát.
- Mobilon válts 18/28 px-re.
- Korlátozd 640–768 px szélességre.
- A HTML-elem maradjon bekezdés.
6. Mély Kék kiemelt doboz
- Hozz létre függőleges Konténert.
- Adj hozzá rövid címet és bekezdést.
- Válassz Mély Kék 50 hátteret.
- Adj 4 px Mély Kék 500 bal keretet.
- Állíts 24 px, mobilon 16 px paddinget.
- Használj 8 px sarkot, árnyék nélkül.
7. GreenSpire kiemelt doboz
- Csak GreenSpire-tartalomhoz használd.
- Válassz GreenSpire 50 hátteret.
- Adj 4 px GreenSpire 500 bal keretet.
- A cím legyen GreenSpire 800.
- A szöveg maradjon Semleges 800.
- Ne használd sikerállapotként.
8. Forrással ellátott idézet
- Hozz létre függőleges Konténert.
- Add hozzá az idézetet és külön a forrást.
- Az idézet legyen Source Serif 4, 24/32 px.
- Adj 2 px Mély Kék 300 bal keretet.
- A forrás legyen 14/20 px Semleges 600.
- Mobilon válts 20/28 px idézetre.
9. Alap elválasztó
- Először állíts megfelelő térközt.
- Ha szükséges, húzd be az Elválasztó widgetet.
- Válassz 1 px folytonos vonalat.
- A szín legyen Semleges 200.
- Adj 32–48 px felső és alsó teret.
- Mobilon ellenőrizd, hogy nem lóg ki.
10. Háromelemű statisztikai blokk
- Hozz létre háromoszlopos külső Konténert.
- Minden adat kapjon saját belső Konténert.
- Add hozzá a statikus számot, címkét és opcionális magyarázatot.
- A szám legyen Source Serif 4, 48/56 px, Mély Kék 500.
- Az elemek között legyen 24–32 px.
- Tableten válts két, mobilon egy oszlopra.
- Countert csak indokolt, visszafogott animációhoz használj.
11 · Komponens
Gombok
A gomb műveletet indít: elküld, ment, megnyit egy folyamatot. Egy kis tartalmi blokkban általában csak egy elsődleges gomb legyen.
Vizuális példaVáltozatok, méretek és állapotok
Változatok
Méretek
Állapotok
Ikon és teljes szélesség
AsztaliA gomb a szöveghez igazodik.
TabletMaradhat szövegméretű.
MobilHosszú feliratnál teljes szélesség.
Így építsd meg ElementorbanElsődleges gomb receptje
Beállítások megnyitása
Mire használd?
Az oldal vagy szekció legfontosabb műveletéhez, például kapcsolatfelvételhez.
Melyik Elementor-elemből épül?
Gomb / Button widget.
Milyen belső elemekből áll?
Felirat, opcionális ikon és hivatkozás. Ne építsd külön konténerekből.
Lépések az Elementorban
- Húzd be a Gomb widgetet.
- A Tartalom / Content fülön add meg a feliratot és a linket.
- A Stílus / Style fülön válaszd a globális színeket és tipográfiát.
- Állítsd be a normál és rámutatási színeket.
Pontos beállítások
- Betű: Source Sans 3, 16 px, 600, 20 px sormagasság
- Legkisebb magasság: 44 px
- Vízszintes belső térköz: 16 px
- Sarokkerekítés: 8 px
- Háttér: Mély Kék 500; rámutatás: Mély Kék 600; aktív: Mély Kék 700
- Szöveg: fehér; ikon és szöveg között: 8 px
Mobilbeállítások
A szöveg maradjon legalább 16 px. Hosszú magyar feliratnál állítsd a szélességet 100%-ra, hogy ne lógjon le.
Gyakori hibák
Túl sok elsődleges gomb, 44 px-nél kisebb magasság, önkényes szín vagy erős árnyék.
Szabadon módosítható
- Szöveg
- Link
- Ikon
- Dokumentált méret
Ne módosítsd szabadon
- Színek
- Sarokkerekítés
- Betűtípus
- Árnyék
12 · Komponens
Linkek
A link másik oldalra vagy tartalomrészhez visz. A gomb ezzel szemben műveletet indít. A bekezdésen belüli link mindig aláhúzott.
Vizuális példaNégy javasolt linktípus
Így építsd meg ElementorbanHivatkozás receptje
Beállítások megnyitása
Mire használd?
Oldalra, dokumentumra, telefonszámra, e-mailre vagy az oldalon belüli szakaszra mutató navigációhoz.
Melyik Elementor-elemből épül?
Szövegszerkesztő / Text Editor, Címsor / Heading vagy Ikonlista / Icon List widget.
Milyen belső elemekből áll?
Érthető linkszöveg és célcím. Önálló műveleti linkhez opcionális nyíl ikon.
Lépések az Elementorban
- Jelöld ki a szöveget.
- Kattints a láncszem ikonra, majd add meg a célcímet.
- A Stílus / Style fülön válaszd a megfelelő globális színt.
- Bekezdésen belül hagyd meg az aláhúzást.
Pontos beállítások
- Szövegközi link: Világoskék 700, aláhúzott
- Önálló CTA: Mély Kék 500, 600-as vastagság
- Navigáció: Semleges 800
- Sötét háttér: fehér
Mobilbeállítások
A hosszú link törhet több sorba; ne középre, hanem balra igazítsd. A link körül maradjon kényelmes kattintható terület.
Gyakori hibák
„Kattints ide” szöveg, aláhúzás eltávolítása a bekezdésből, link használata űrlap beküldésére.
Szabadon módosítható
- Érthető szöveg
- Célcím
- Dokumentált ikon
Ne módosítsd szabadon
- Aláhúzás
- Önkényes szín
- Olvashatatlan rövidítés
13 · Komponens
Űrlapmezők
Minden mezőnek legyen látható címkéje. A segítő és hibaüzenet mondja el szövegesen is, mit várunk vagy mi történt.
Vizuális példaNormál, hosszú, hiba-, letiltott és csak olvasható állapot
A kapcsolattartáshoz használt nevet add meg.
Kérjük, adj meg érvényes e-mail-címet, például nev@ceg.hu.
Így építsd meg ElementorbanKapcsolati mező receptje
Beállítások megnyitása
Mire használd?
Kapcsolati, ajánlatkérő vagy feliratkozó űrlapban rövid és hosszabb adatok bekérésére.
Melyik Elementor-elemből épül?
Űrlap / Form widget mezői.
Milyen belső elemekből áll?
Látható címke, beviteli mező, opcionális segítő szöveg és hibaüzenet.
Lépések az Elementorban
- Húzd be az Űrlap widgetet.
- A Tartalom fülön add hozzá a szükséges mezőtípust.
- Adj rövid, egyértelmű címkét és szükség esetén helykitöltő példát.
- Jelöld kötelezőnek csak a valóban szükséges mezőket.
Pontos beállítások
- Betű: Source Sans 3, 16 px mobilon is
- Magasság: 44 px; szövegdoboz legalább 108 px
- Belső térköz: 8 px függőlegesen, 16 px vízszintesen
- Keret: 1 px Semleges 200 minden normál állapotban
- Fókusz: 2 px Világoskék 500 jelölés; sarok: 8 px
- Hiba: Hiba 500 keret és szöveges magyarázat
Mobilbeállítások
A beviteli szöveg legalább 16 px legyen. A mezők egy oszlopban, teljes szélességgel jelenjenek meg.
Gyakori hibák
Címke helyett csak helykitöltő szöveg, eltérő mezőmagasság, állapotváltás rámutatáskor vagy csak piros színnel jelzett hiba.
Szabadon módosítható
- Címke
- Segítő szöveg
- Mezőtípus
- Kötelezőség
Ne módosítsd szabadon
- Magasság
- Belső térköz
- Normál keretszín
- Betűméret mobilon
14 · Komponens
Legördülő mező
Előre megadott lehetőségek közül enged egyet választani. Használd az Elementor natív mezőjét, hogy mobilon is kényelmes maradjon.
Vizuális példaHelykitöltő, kiválasztott, letiltott és hibás állapot
A továbblépéshez válassz egy témakört.
Így építsd meg ElementorbanNatív legördülő mező receptje
Beállítások megnyitása
Mire használd?
Háromnál több, rövid és egymást kizáró lehetőség közül egy kiválasztására.
Melyik Elementor-elemből épül?
Űrlap / Form widget Legördülő lista / Select mezője.
Milyen belső elemekből áll?
Címke, nyitó választási lehetőség, opciók és opcionális hibaüzenet.
Lépések az Elementorban
- Adj új mezőt az Űrlap widgethez.
- Típusnak válaszd a legördülő listát.
- Írd be az opciókat rövid, egyértelmű sorokként.
- Kapcsold be a kötelezőséget, ha szükséges.
Pontos beállítások
- Magasság: 44 px
- Szöveg: 16 px Source Sans 3
- Keret: 1 px Semleges 200
- Sarok: 8 px
- Vízszintes belső tér: 16 px
Mobilbeállítások
Maradjon natív mező és teljes szélességű. Ne helyettesítsd saját lenyíló animációval.
Gyakori hibák
Túl hosszú opciók, üres címke, első opciónak valódi választás használata semleges „Válassz…” helyett.
Szabadon módosítható
- Címke
- Opciók
- Kötelezőség
Ne módosítsd szabadon
- Nyíl működése
- Mezőmagasság
- Önkényes szín
15 · Komponens
Jelölőnégyzet és választógomb
A jelölőnégyzet több lehetőséget enged, a választógomb egy csoportból pontosan egyet. A teljes címke legyen kattintható.
Vizuális példaAlap, kiválasztott, letiltott és hibás csoport
Válassz legalább egy lehetőséget.
A hibát szöveg is jelzi, nem csak a keret vagy a szín.
Így építsd meg ElementorbanVálasztócsoport receptje
Beállítások megnyitása
Mire használd?
Jelölőnégyzet: több választáshoz vagy hozzájáruláshoz. Választógomb: egyetlen lehetőséghez egy csoportból.
Melyik Elementor-elemből épül?
Űrlap / Form widget Jelölőnégyzet / Checkbox vagy Választógomb / Radio mezője.
Milyen belső elemekből áll?
Csoportcím, natív vezérlő, kattintható címke és opcionális leírás.
Lépések az Elementorban
- Adj megfelelő típusú mezőt az űrlaphoz.
- Adj egyértelmű csoportcímet.
- Írd fel az opciókat rövid sorokban.
- Szükség esetén jelöld kötelezőnek a csoportot.
Pontos beállítások
- Vezérlő mérete: 20 × 20 px
- Jelölőnégyzet sarka: 4 px; választógomb: kör
- Vezérlő és címke között: 8 px
- Kijelölt háttér: Mély Kék 500
Mobilbeállítások
Az opciók egymás alatt jelenjenek meg. Ne zsúfold őket több oszlopba.
Gyakori hibák
Nem kattintható címke, túl kicsi vezérlő, választógomb használata több válaszhoz.
Szabadon módosítható
- Csoportcím
- Opciók
- Leírás
Ne módosítsd szabadon
- Vezérlő mérete
- Kijelölt szín
- Címke kattinthatósága
16 · Komponens
Információs és státuszüzenetek
Az üzenet címének és leírásának önmagában is érthetőnek kell lennie. A szín és az ikon csak megerősíti a jelentést.
Vizuális példaInformáció, siker, figyelmeztetés és hiba
Hasznos információ
A konzultáció előtt küldünk egy rövid előkészítő kérdéssort. További részletek
Sikeres jelentkezés
Megkaptuk az adatokat, hamarosan visszajelzünk.
Ellenőrzés szükséges
A beküldés előtt nézd át a kapcsolattartási adatokat.
Nem sikerült elküldeni
Ellenőrizd a kötelező mezőket, majd próbáld újra.
Így építsd meg ElementorbanKonténeralapú üzenet receptje
Beállítások megnyitása
Mire használd?
Fontos tájékoztatás, siker, figyelmeztetés vagy hiba rövid, jól látható közlésére.
Melyik Elementor-elemből épül?
Konténer / Container benne Ikon / Icon és egy belső Konténer, benne Címsor és Szövegszerkesztő.
Milyen belső elemekből áll?
Opcionális ikon, szerkeszthető cím, leírás, opcionális link vagy gomb.
Lépések az Elementorban
- Hozz létre vízszintes konténert.
- Tegyél bele ikont és egy függőleges belső konténert.
- A belső konténerbe kerüljön a cím és leírás.
- Szükség esetén adj hozzá linket, majd mentsd sablonként.
Pontos beállítások
- Belső térköz: 18 px; elemek között: 14 px
- Sarok: 12 px; keret: 1 px
- Információ: Világoskék 50 háttér, 200 keret
- Siker/Figyelmeztetés/Hiba: azonos nevű 50 háttér és 300 keret
Mobilbeállítások
A konténer maradhat vízszintes, de az ikon ne zsugorodjon. Hosszú műveleti link esetén a link kerüljön külön sorba.
Gyakori hibák
Csak színnel jelzett állapot, túl hosszú cím, GreenSpire használata siker helyett.
Szabadon módosítható
- Cím
- Leírás
- Ikon
- Link vagy gomb
Ne módosítsd szabadon
- Állapotszín jelentése
- Belső térköz
- GreenSpire mint siker
17 · Komponens
Jelvények (Badge-ek)
Rövid, nem interaktív jelölések kategóriához vagy állapothoz. Ne tűnjenek gombnak, és ne legyen hozzájuk kattintási művelet.
Vizuális példaHét változat, két méret
SemlegesGramionKiemeltSikeresEllenőrzendőSikertelenGreenSpire
Kis méret
MódszertanElérhetőÖkológiai program
Így építsd meg ElementorbanKonténer + szöveg receptje
Beállítások megnyitása
Mire használd?
Rövid kategória, állapot vagy márkakapcsolat jelölésére.
Melyik Elementor-elemből épül?
Kis Konténer / Container benne Szövegszerkesztő / Text Editor widget.
Milyen belső elemekből áll?
Egy rövid szöveg és opcionális kis ikon vagy pont.
Lépések az Elementorban
- Hozz létre a tartalom szélességéhez igazodó konténert.
- Tegyél bele rövid szöveget.
- Állítsd be a változat színeit, keretét és kerekítését.
- Mentsd sablonként a gyakran használt változatokat.
Pontos beállítások
- Kicsi: 24 px magas, 12 px betű, 8 px vízszintes tér
- Normál: 28 px magas, 14 px betű, 10 px vízszintes tér
- Betűvastagság: 600; sarok: teljesen kerek
- Háttér: az adott skála 50-es, szöveg: 800-as, keret: 200-as árnyalata
Mobilbeállítások
Hosszú címke helyett rövidítsd a szöveget. A jelvény ne töltse ki automatikusan a teljes sort.
Gyakori hibák
Kattintható jelvény, túl hosszú mondat, státuszszín és márkaszín felcserélése.
Szabadon módosítható
- Rövid szöveg
- Dokumentált változat
- Kis ikon
Ne módosítsd szabadon
- Kattinthatóság
- Tetszőleges szín
- Kapszulaforma
18 · Komponens
Kártyák
Összetartozó képet, címet, leírást és műveletet fog össze. Egy rácsban azonos kártyatípust és belső térközt használj.
Vizuális példaAlap, emelt, Gramion, GreenSpire és képes kártya
Szervezeti diagnosztika
Átlátható képet adunk a működés erősségeiről és fejlesztési pontjairól.
Vezetőfejlesztés
Gyakorlati támogatás egyéni és szervezeti célokhoz.
Komplex fejlesztési program
Egységes szemlélet a pénzügyi, emberi és működési kérdésekhez.
Fenntartható vállalati működés
A GreenSpire program saját márkakörnyezetben jelenik meg.
Képes kártya
A kép 16:9 arányú, tartalmilag kapcsolódó és megfelelő alternatív szöveget kap.
Hosszabb magyar címmel is kiegyensúlyozott szolgáltatáskártya
A kártya a tartalomhoz igazodik, a rács pedig azonos magasságot tart.
Így építsd meg ElementorbanKonténerstruktúra receptje
Beállítások megnyitása
Mire használd?
Szolgáltatás, szakértő, program vagy kapcsolódó tartalom összefoglalására.
Melyik Elementor-elemből épül?
Külső Konténer, benne opcionális Kép, jelvénykonténer, Címsor, Szövegszerkesztő és műveleti link vagy Gomb.
Milyen belső elemekből áll?
Kép, jelvény, cím, leírás és egyetlen jól azonosítható művelet.
Lépések az Elementorban
- Hozz létre függőleges külső konténert.
- Adj hozzá képet vagy jelvényt, majd címet és szöveget.
- Végül adj hozzá műveleti linket vagy gombot.
- Másold a kész kártyát, majd csak a tartalmat cseréld.
Pontos beállítások
- Sarok: 12 px; keret: 1 px Semleges 100
- Kompakt belső tér: 16 px; normál: 24 px; tágas: 32 px
- Tartalmi elemek között: 16 px; lábléc előtt: 24 px
- Emelt változat: csak nagyon enyhe árnyék
- Kép: 16:9 vagy 4:3, kitöltés / cover
Mobilbeállítások
A kártyák egy oszlopba kerüljenek. A gomb felirata ne lógjon le; szükség esetén legyen teljes szélességű.
Gyakori hibák
Eltérő belső térköz egy rácsban, középre igazított hosszú CTA, túl erős árnyék. Az egész kártya csak akkor legyen kattintható, ha nincs benne külön link vagy gomb; laikus szerkesztésnél biztonságosabb a külön műveleti link.
Szabadon módosítható
- Szöveg
- Kép és alternatív szöveg
- Jelvény
- Műveleti link célja
Ne módosítsd szabadon
- Kártyánként eltérő térköz
- Erős árnyék
- Egész kártya + belső gomb
19 · Komponens
Harmonika (Accordion)
Hosszabb, egymással rokon tartalmakat tesz áttekinthetővé. A működést az Elementor natív Accordion vagy Nested Accordion widgetje biztosítja.
Vizuális példaElválasztóvonalas és keretbe foglalt változat
Elválasztóvonalas
Milyen szervezeteknek segít a Gramion?
Kezdő, működő, válságban lévő vagy egyedi kihívással szembenéző vállalkozásoknak és szervezeteknek.
Hogyan indul egy szervezetfejlesztési együttműködés?
Az első beszélgetésen közösen tisztázzuk a helyzetet és a célt. Ezután a Gramion javaslatot készít a megfelelő diagnosztikai vagy fejlesztési folyamatra.
Keretbe foglalt
Hosszabb kérdés mobilnézetben: hogyan választjuk ki a megfelelő módszert az egyedi szervezeti helyzethez?
A cím több sorba törhet, de az ikon mellett elegendő hely marad. A válaszban bekezdés, lista és egyszerű link is elhelyezhető.
Mit tartalmazhat a lenyitott rész?
Rövidebb vagy hosszabb magyarázatot, felsorolást és hivatkozást.
- Egyértelmű tartalmi sorrendet
- Olvasható bekezdéseket
- Legfeljebb egy fő műveletet
Így építsd meg ElementorbanNatív harmonika receptje
Beállítások megnyitása
Mire használd?
Gyakori kérdésekhez, szolgáltatásrészletekhez és hosszabb kiegészítő magyarázatokhoz.
Melyik Elementor-elemből épül?
Accordion vagy Nested Accordion widget. Ha mindkettő elérhető, összetettebb tartalomhoz válaszd a beágyazott változatot.
Milyen belső elemekből áll?
Kattintható címsor, nyitást jelző ikon és lenyíló tartalmi panel.
Lépések az Elementorban
- Húzd be az Accordion widgetet.
- Adj hozzá annyi elemet, amennyire szükség van.
- Írd át a címeket és a tartalmakat.
- A Stílus fülön állítsd be az elválasztóvonalas vagy keretezett megjelenést.
Pontos beállítások
- Címsor legalább 56 px magas
- Belső tér: mobil 16 px, asztali 24 px vízszintesen
- Ikon: 20 px; ikon és cím között: 16 px
- Keret: Semleges 200; kártyasarok: 12 px
- Nyitott háttér: Semleges 50
Mobilbeállítások
A hosszú cím több sorba törhet. Az ikon maradjon jobb oldalon, a cím kattintható területe legalább 56 px magas.
Gyakori hibák
Egyedi JavaScript hozzáadása, túl sok nyitott elem, információt nem hordozó rövid címek.
Szabadon módosítható
- Cím
- Tartalom
- Elemek száma
- Dokumentált változat
Ne módosítsd szabadon
- Natív működés
- Fókuszjelzés
- Ikon helye
- Egyedi kód
20 · Összetett komponens
Header és főmenü
A gramion.hu új Header-rendszere gyorsan orientál, szakmai hitelességet közvetít, és egyetlen visszafogott kapcsolatfelvételi pontot kínál. A navigáció minden képernyőméreten egyszintű marad.
A Header feladata
- Gyors tájékozódás hét világos belépési ponttal.
- Prémium, modern és emberközeli üzleti benyomás.
- A szakmai tartalom előtérben tartása.
- Visszafogott kapcsolatfelvétel egyetlen CTA-val.
Alapkarakter
- Fehér háttér és finom alsó keret.
- Egy sor desktopon, egyszerű lenyíló lista kisebb nézetben.
- Nincs kampánysáv, social sor, áttetszőség vagy látványos animáció.
- A Header és a Hero két különálló szekció.
Rögzített rendszerdöntés
Végleges, egyszintű menü
A logó is a főoldalra vezet, de a Főoldal menüpont ettől függetlenül megmarad. Nincs almenü, mega menü, lenyitójel vagy második navigációs szint.
Vizuális példák
Desktop Header
Source Sans 3, 16 px, 24 px sormagasság és 600-as vastagság. A menüpontok között 20–24 px, a Kapcsolat előtt 24–32 px tér marad.
1. Normál állapotFehér háttér · egy sor · egyetlen CTA
2. Aktív „Miben segítünk” oldalA jelzővonal miatt nem csak szín jelöli az aktív oldalt
3. Aktív GREENSpire oldalGreenSpire 700 szöveg · GreenSpire 500 jelzővonal
A Header háttere ezen az oldalon is fehér, és továbbra is a Gramion logó az elsődleges márkajelzés.
4. Rámutatási állapot150 ms ease · nincs elmozdulás
5. Billentyűzetes fókusz2 px Világoskék 500 · 2 px offset
Egyetlen Header CTA
Kapcsolat menüpont
A Kapcsolat a főmenü hetedik eleme és egyetlen gombszerű CTA-ja. Nem kerül mellé „Beszéljünk róla”, ajánlatkérés vagy időpontfoglalás.
Alap · Mély Kék 500Rámutatás · Mély Kék 600Aktív · Mély Kék 700Fókusz · Világoskék 500
- 44 px magasság
- 16–20 px vízszintes tér
- 8 px sarok
- 16 px / 600
- Fehér felirat
Opcionális működés
Sticky Header
Desktopon és tableten ajánlott, mobilon alapértelmezetten nem szükséges. A normál Header sticky funkció nélkül is teljes értékű.
Görgetés közben a nézet tetején marad
Fehér háttér, változatlan logó- és Header-méret, 1 px alsó keret, erős árnyék és belépő animáció nélkül.
Körülbelül 1024 px alatt
Tablet Header
Az elsődleges változat logóból és menügombból áll.
6. Zárt állapotmin. 72 px · 32 px oldalt
7. Nyitott állapotTeljes szélességű, egyszintű lista
Mobilnézet
Mobil Header
A menü közvetlenül a Header alatt, teljes szélességben nyílik le.
8. Zárt állapotmin. 64 px · 16 px oldalt
9. Nyitott állapotAzonos hét elem, azonos sorrend
gramionEgy sor desktopon; összecsukás tableten.
A töréspont előtt a teljes navigáció egy sorban marad.
gramionFőoldal · Miben segítünk · Hogyan dolgozunk · Eredmények · GREENSpire · Rólunk · Kapcsolat
Ne hagyd a desktop menüt két sorba törni; válts korábban összecsukott nézetre.
gramion
Desktop 152–160 px, tablet 144–152 px, mobil 128–144 px.
gramion
A túl nagy logó elveszi a helyet a navigációtól és túlzott márkahangsúlyt ad.
gramion
Legalább 80 px magas, kiegyensúlyozott függőleges térrel.
gramion
A szűk magasság és a túl sűrű elemek rontják az olvashatóságot.
Kód nélkül
Elementor-struktúra és receptek
A widget neve verziótól függően WordPress Menu, Nav Menu vagy Menu lehet. Stabil, WordPressben kezelt menüt válassz; ne építs kísérleti funkcióra.
Elsődleges struktúra
Header Template
└── Külső Container · HTML tag: header
└── Belső Container · maximum 1280 px
├── Site Logo vagy Image widget
└── WordPress Menu / Nav Menu / Menu widgetKód nélküli alternatíva, ha a hetedik menüpont nem formázható gombszerűre
Belső Container ├── Site Logo vagy Image widget ├── Navigációs Menu widget · az első hat menüpont └── Button widget · Kapcsolat
A Kapcsolat vizuálisan és sorrendben továbbra is a főmenü hetedik eleme.
Desktop Header elkészítése
- Nyisd meg az Elementor Sablonok / Theme Builder területét, és készíts új Header sablont.
- Adj hozzá egy teljes szélességű külső Konténert.
- A Konténer HTML-tagjának válaszd a header értéket.
- Tegyél bele egy legfeljebb 1280 px széles belső Konténert.
- Állíts legalább 80 px magasságot és 48 px oldalsó belső teret.
- Helyezd el a Site Logo vagy Image widgetet; az alt szöveg legyen „Gramion”.
- A WordPress menüben hozd létre a hét dokumentált menüpontot a megadott sorrendben.
- Helyezd el a stabil WordPress Menu, Nav Menu vagy Menu widgetet.
- Állíts Source Sans 3, 16 px, 24 px, 600-as tipográfiát és 20–24 px közöket.
- Formázd gombszerűre a Kapcsolat elemet; ha ez nem lehetséges, használd külön Button widgetként a menü után.
- Állítsd be a hover, aktív és fókuszállapotokat; a GREENSpire külön aktív színét csak akkor, ha ezt a widget kód nélkül támogatja.
- Ellenőrizd, hogy a navigáció egy sorban marad, majd rendeld a sablont a teljes webhelyhez.
Tablet és mobil Header elkészítése
- Ellenőrizd a Webhelybeállításokban a tablet és mobil töréspontokat.
- Körülbelül 1024 px alatt állítsd a menüt összecsukott állapotra.
- Zárt ikonként válaszd a bars, nyitott ikonként az xmark ikont.
- A menügomb kattintható területe legyen legalább 44 × 44 px.
- A lenyíló menü legyen teljes szélességű, fehér hátterű és közvetlenül a Header alatt.
- A menüpontok legyenek legalább 48 px magasak, 18 px-es, 600-as szöveggel.
- A Kapcsolat elem legyen a lista végén teljes szélességű gomb.
- Igény esetén a gomb alá helyezd a telefont és az e-mailt Ikonlista widgettel.
- Ellenőrizd külön a nyitott és zárt állapotot.
- Ellenőrizd a hosszú magyar menüpontok törését és a vízszintes kilógást.
- Billentyűzettel járd végig a logót, a menügombot, a linkeket és a Kapcsolat gombot.
Desktop
80 px minimum, 48 px oldalt, teljes egysoros menü. Ha nem fér el, előbb 15 px-re csökkenthető a menüszöveg; 15 px alá ne menj.
Tablet
72 px minimum, 32 px oldalt. Az ajánlott elsődleges változat logó + menügomb; a pontos töréspontot a tényleges oldalon ellenőrizd.
Mobil
64 px minimum, 16 px oldalt. Teljes szélességű lenyíló lista, legalább 48 px magas menüpontok és teljes szélességű Kapcsolat gomb.
Hozzáférhetőség
A navigáció mindenki számára működjön
A menü nem függhet egérhasználattól vagy pusztán színtől.
- Szemantikus szerkezet
A külső elemheader, a menü navigáció; a logó a főoldalra vezet. - Érthető logó
Képes logónál az alternatív szöveg „Gramion”. - Billentyűzetes elérés
Minden link és menügomb Tab billentyűvel elérhető. - Látható fókusz
2 px Világoskék 500 körvonal, 2 px eltartással és 8 px sarokkal. - Nem csak szín
Az aktív oldalt 2 px-es alsó jelzővonal is mutatja. - Érthető menügomb
Az elnevezés jelezze: „Főmenü megnyitása” vagy „Főmenü bezárása”. - Megfelelő érintési cél
A menügomb legalább 44 × 44 px, a mobil menüpont legalább 48 px magas. - Szabad sortörés
A hosszú magyar felirat ne vágódjon le és ne okozzon vízszintes görgetést. - Szöveges navigáció
A fő menüpontokat ne helyettesítsd csak ikonokkal. - Hover nélkül is működik
Minden oldal közvetlen link; nincs hoverre épülő almenü.
Használd
- Egyszintű, pontosan hét elemes navigáció
- Fehér háttér és Gramion logó
- Source Sans 3 tipográfia
- Egyetlen Kapcsolat CTA
- Jelzővonallal megerősített aktív állapot
- Külön GREENSpire aktív szín
- Egyszerű, teljes szélességű mobilmenü
- 44 × 44 px-es menügomb és visszafogott hover
Ne használd
- Almenü, mega menü vagy lenyitójel
- Külön „Beszéljünk róla” vagy ajánlatkérő gomb
- Telefon, e-mail és CTA együtt desktopon
- Social ikonok vagy kampánysáv
- Áttetsző, blurös vagy erősen árnyékos Header
- Zsugorodó sticky Header
- Menüpontokhoz rendelt ikonok vagy eltérő színek
- Két teljes méretű logó vagy túl sok animáció
Szabadon módosítható
- A menüpontok és a Kapcsolat oldal célhivatkozása
- A telefonszám és az e-mail-cím
- A pontos tablet töréspont a dokumentált tartományban
- A sticky funkció be- vagy kikapcsolása
- A mobil közvetlen elérhetőségek megjelenítése
- A logófájl azonos hivatalos változatra frissítve
Ne módosítsd szabadon
- Az egyszintű felépítés, a hét név és a sorrend
- A betűtípus, a logó képaránya és a fehér háttér
- A Kapcsolat CTA alapstílusa és az aktív jelzés
- A GREENSpire és Gramion kapcsolata
- A mobilmenü alapstruktúrája és érintési méretei
- A spacing, radius és árnyékhasználat
- Új almenü design-felülvizsgálat nélkül
Gyakori Header-hibák
- Megváltozik a sorrend
A hét elem minden nézetben ugyanabban a sorrendben maradjon. - Eltűnik a Főoldal
A logó főoldallinkje nem helyettesíti a Főoldal menüpontot. - Második CTA kerül mellé
A Kapcsolat az egyetlen Header CTA. - Véletlen almenü készül
Minden menüpont közvetlenül oldalra vagy szakaszra vezet. - Túl kicsi a szöveg
Desktopon legalább 15 px, mobilon legalább 16 px. - Túl szoros a menü
Desktopon legalább 20 px legyen a menüpontok között. - Túl nagy a logó
Tartsd meg a dokumentált szélességeket és képarányt. - Kicsi a hamburgergomb
Az ikon lehet 24 px, a teljes célterület legalább 44 × 44 px. - Lebegő, keskeny mobilmenü
A panel közvetlenül a Header alatt, teljes szélességben nyíljon le. - Külön GreenSpire Header
A GREENSpire ugyanabban a Gramion Headerben marad. - Összemosódik a Heróval
A Header alapból fehér és nem áttetsző. - Erős árnyék jelenik meg
Alapból nincs árnyék; nyitott mobilpanelen csak Shadow md. - Csak szín jelzi az aktív oldalt
Használj alsó jelzővonalat is. - Eltűnik a fókusz
A fókuszjelzést soha ne kapcsold ki. - Levágott mobilfelirat
Engedélyezd a természetes sortörést. - Két soros desktop menü
Válts korábban összecsukott Headerre.
Gyors segítség
Gyors Header-receptek
Mindegyik recept natív Elementor-beállításokkal követhető, egyedi CSS vagy bővítmény nélkül.
1. Desktop Header
- Készíts Header sablont.
- Adj hozzá
headertagű külső Konténert. - Tegyél bele max. 1280 px-es belső Konténert.
- Helyezd el a Gramion logót és a Menu widgetet.
- Állíts min. 80 px magasságot és 48 px oldalsó teret.
- Használd a hét végleges menüpontot.
- Állíts 16 px / 600 tipográfiát és 20–24 px közöket.
- Ellenőrizd, hogy egy sorban marad.
2. Aktív menüpont
- Nyisd meg a Menu widget aktív állapotát.
- Válaszd a Mély Kék 700 szöveget.
- Tartsd meg a 600-as vastagságot.
- Adj 2 px Világoskék 500 alsó jelzővonalat.
- A vonal 6–8 px-re legyen a szövegtől.
- Ellenőrizd az aktuális oldalon.
3. GREENSpire aktív menüpont
- Csak a GREENSpire oldal aktív állapotát módosítsd.
- A szöveg legyen GreenSpire 700.
- A jelzővonal legyen 2 px GreenSpire 500.
- A normál GREENSpire elem maradjon Semleges 700.
- A Header maradjon fehér.
- Ha a widget ezt kód nélkül nem tudja, tartsd meg az általános aktív stílust.
4. Kapcsolat CTA
- A Kapcsolat maradjon a hetedik elem.
- Állíts legalább 44 px magasságot.
- Adj 16–20 px vízszintes belső teret.
- Háttér: Mély Kék 500; szöveg: fehér.
- Állíts 8 px sarkot és 16 px / 600 tipográfiát.
- Hover: 600; aktív: 700.
- Fókusz: 2 px Világoskék 500, 2 px eltartással.
5. Sticky Header
- Nyisd meg a Header Haladó / Motion Effects beállítását.
- Ha elérhető, válaszd a felső sticky működést desktopra és tabletre.
- Mobilon kapcsold ki alapértelmezetten.
- Tartsd meg a fehér hátteret és 1 px alsó keretet.
- Ne zsugorítsd a logót vagy a Headert.
- Ne adj belépő animációt vagy erős árnyékot.
6. Tablet Header
- Ellenőrizd a tablet töréspontot.
- Körülbelül 1024 px alatt csukd össze a menüt.
- Maradjon balra a logó, jobbra a menügomb.
- Állíts min. 72 px magasságot és 32 px oldalsó teret.
- A menügomb legyen legalább 44 × 44 px.
- Ellenőrizd a zárt és nyitott állapotot.
7. Mobil Header zárt állapot
- Állíts min. 64 px magasságot.
- Adj 16 px oldalsó belső teret.
- A logó legyen 128–144 px széles.
- Válaszd a bars ikont 24 px méretben.
- A teljes gomb legyen legalább 44 × 44 px.
- Az elnevezése legyen „Főmenü megnyitása”.
8. Mobil Header nyitott állapot
- A panel közvetlenül a Header alatt nyíljon le.
- Állíts teljes szélességet és fehér hátteret.
- Adj 16 px oldalsó és 16–24 px függőleges teret.
- Használd ugyanazt a hét elemet, ugyanabban a sorrendben.
- A linkek legyenek legalább 48 px magasak.
- Válaszd az xmark bezáróikont.
- Adj 1 px alsó keretet és legfeljebb Shadow md árnyékot.
9. Mobil Kapcsolat gomb
- Hagyd a menülista legvégén.
- Állíts 100% szélességet és legalább 48 px magasságot.
- Adj 16–24 px felső térközt.
- Háttér: Mély Kék 500; szöveg: fehér.
- Állíts 8 px sarkot.
- Érintési aktív állapot: Mély Kék 600–700.
10. Mobil telefon és e-mail
- A Kapcsolat gomb alá adj Ikonlista widgetet.
- Válaszd a phone és envelope Solid ikonokat.
- Az ikon legyen 20 px, a szöveg 16 px.
- Szín: Mély Kék 600.
- Ikon és szöveg között 8 px legyen.
- A sorok között maradjon 8–12 px.
- A telefonszám és e-mail legyen kattintható.
21 · Összetett komponens
Footer
A gramion.hu háromrészes oldalvégi rendszere előbb kapcsolatfelvételre hív, majd külön fehér sávban megmutatja a GREEN BRANDS minősítést, végül a sötét globális Footerrel lezárja az oldalt.
Hivatalos minősítés
GREEN BRANDS minősítési sáv
A külön fehér sáv biztosítja, hogy a hivatalos logó fehér háttere, azonosítója és 2025–2026-os évszáma változtatás nélkül, teljes egészében látható maradjon.
Teljes oldalvégi rendszerZáró CTA → minősítési sáv → sötét globális Footer
Van egy szervezeti helyzet, amit már túl régóta kerülgettek?
Nézzünk rá együtt, mi történik valójában.
Miért külön világos sáv?
A 300 × 300 px-es hivatalos JPG saját fehér háttérrel rendelkezik. Fehér sávban ez természetesen összeolvad a környezetével; Mély Kék 900 felületen külön fehér négyzetként jelenne meg.
Hol helyezkedik el?
A kapcsolatfelvételi zárószekció után, közvetlenül a sötét globális Footer fölött. Technikailag ugyanazon footer elemen belül lehet a sötét Footerrel.
GREENSpire és GREEN BRANDS
A világos sáv a minősítést igazolja. A sötét Footer GREENSpire-blokkja továbbra is a program és a Gramion kapcsolatát mutatja be; a hivatalos logó ott nem ismétlődik meg.
Hivatalos logó szabálya
A fájl nem vágható, színezhető, invertálható, retusálható vagy rajzolható újra. A logó és az ID egyetlen, módosítatlan képként marad.
Desktop GREEN BRANDS sáv200 px logó · 48 px oldalsó tér · vízszintes elrendezés
GREEN BRANDS Hungary minősítés
Saját fejlesztésű, nemzetközi GREEN BRANDS minősítéssel rendelkező program, amely a fenntarthatósági törekvések emberi és attitűdszintű oldalával dolgozik.
Tablet sáv768 px viewport · 180 px logó
GREEN BRANDS Hungary minősítés
Saját fejlesztésű, nemzetközi GREEN BRANDS minősítéssel rendelkező program, amely a fenntarthatósági törekvések emberi és attitűdszintű oldalával dolgozik.
Mobil sáv390 px viewport · 170 px logó
GREEN BRANDS Hungary minősítés
Saját fejlesztésű, nemzetközi GREEN BRANDS minősítéssel rendelkező program, amely a fenntarthatósági törekvések emberi és attitűdszintű oldalával dolgozik.
Az ID olvashatóságát valódi készüléken is ellenőrizni kell.
A 300 × 300 px-es forrás legfeljebb 200 px szélességben jelenhet meg. A végleges weboldalon desktop- és mobilkészüléken is ellenőrizd, hogy az azonosító és az évszám megfelelően olvasható-e.
200 px széles, teljes és módosítatlan logó fehér háttéren.
Az ID és az évszám ilyen méretben már nem olvasható megbízhatóan.
A kép fehér háttere idegen négyzetként jelenik meg a Footerben.
A plusz kártya, keret és belső tér nem része a dokumentált használatnak.
Nem készítünk ilyen változatot
A dokumentáció sem vágja vagy szerkeszti át a hivatalos fájlt.
Helyes alt szöveg
GREEN BRANDS Hungary 2025–2026 minősítés, azonosítóvalA környező cím és leírás szövegesen is megnevezi a minősítést.
Információs link állapota
A végleges GREEN BRANDS információs URL még nincs megadva, ezért a sávban nem jelenik meg link vagy kattinthatónak tűnő helykitöltő.
A tényleges URL birtokában önálló „A minősítés részletei” link adható hozzá.
Használd
- Teljes, módosítatlan hivatalos logó
- A logón szereplő ID és évszám
- Fehér hátterű külön minősítési sáv
- Rövid, egyeztetett magyarázat
- Desktopon legfeljebb 200 px-es logó
- Mobilon is látható, 160–180 px-es logó
- Értelmes alt szöveg
- Csak tényleges információs link
- Egyetlen szemantikus Footer-struktúra
Ne használd
- Sötét hátteret közvetlenül a logó mögött
- Fehér kártyát a sötét Footerben
- Levágott vagy külön begépelt ID-t
- Eltávolított fehér hátteret
- Átszínezést, invertálást vagy CSS-filtert
- 200 px-nél nagyobb megjelenítést
- Mobilon elrejtett logót
- Kitalált minősítési állítást
- Nem működő helykitöltő linket
Gyakori GREEN BRANDS-hibák
- Levágott ID
A teljes képfájl minden részlete maradjon látható. - Túl nagy kép
A 300 × 300 px-es forrás maximum 200 px széles. - Túl kicsi mobil logó
Ne zsugorítsd az ID-t olvashatatlan méretre. - Sötét háttér
A saját fehér háttér miatt külön világos sáv szükséges. - Dupla fehér kártya
A logó nem kap plusz keretet, árnyékot vagy paddinget. - Megismételt logó
A sötét GREENSpire-blokkban ne jelenjen meg újra. - Ál-link
Végleges URL nélkül ne legyen kattintható elem. - Csak képben közölt információ
A minősítés neve szövegesen is szerepeljen.
Fehér cím és Semleges 100–200 szöveg Mély Kék 900 háttéren.
A túl halvány szöveg sötét háttéren nehezen olvasható.
160–176 pxAz elsődleges márkajelzés jól látható, de nem uralja a Footert.
Túlméretezett logóA nagy logó felborítja a négy blokk közötti hierarchiát.
Négy elkülönülő blokk, 32–48 px közökkel és rövid tartalommal.
Túl sok link, logó és egyenrangú elem zsúfolttá teszi a lezárást.
22 · Használati segítség
Reszponzív használat
Az Elementor tetején található monitor, tablet és telefon ikonokkal külön beállíthatod az értékeket az egyes képernyőméretekhez.
Asztali nézet
1025 px-től · 12 oszlop, legfeljebb 1280 px széles tartalom, 48 px oldalsó belső tér. Itt látható egymás mellett a legtöbb kártya.
Tablet nézet
Körülbelül 768–1024 px · 8 oszlop, 32 px oldalsó belső tér. A háromoszlopos rács gyakran két oszlopra vált.
Mobilnézet
Körülbelül 767 px-ig · 4 oszlop, 16 px oldalsó belső tér. A legtöbb tartalom és kártya egy oszlopba kerül.
Mit állíts nézetenként?
Betűméretet, belső és külső térközt, oszlopszámot, igazítást, sorrendet és szükség esetén a gomb szélességét.
A töréspontok ideiglenes célértékek.
A tényleges értékeket mindig ellenőrizd a Webhelybeállítások / Site Settings → Elrendezés / Layout → Töréspontok / Breakpoints részben. Elementor-verziótól és webhelybeállítástól függően eltérhetnek.
Gyors mobil-ellenőrzés
- Nincs vízszintes kilógás vagy oldalirányú görgetés.
- A gombfeliratok nem lógnak le, hosszú címek szépen törnek.
- Az űrlapmezők szövege legalább 16 px.
- A kártyák egy oszlopban, egységes térközzel jelennek meg.
- A linkek balra igazítva, több sorban is olvashatók.
- Minden fontos művelet könnyen megérinthető.
23 · Használati segítség
Hozzáférhetőségi alapelvek
Néhány egyszerű szabály sokkal több ember számára teszi használhatóvá az oldalt. Ezeket tartalomszerkesztés közben is tartsd meg.
- Minden tartalmi kép kapjon értelmes alternatív szöveget.
A dekoratív kép alternatív szövege maradhat üres. - Ne csak szín jelezzen állapotot.
A hiba és siker kapjon címet, leírást vagy ikont is. - A bekezdésen belüli link maradjon aláhúzott.
Így színlátási eltérés esetén is felismerhető. - Ne használj túl kicsi szöveget.
Mobil űrlapmezőben legalább 16 px legyen. - A gomb és a link nem ugyanaz.
A gomb műveletet indít, a link másik helyre visz. - Ne tegyél gombot kattintható kártyába.
Vagy az egész kártya, vagy a külön műveleti link legyen kattintható. - A címsorok kövessék a H1–H6 sorrendet.
Ne a vizuális méret alapján ugorj szinteket. - Ne használj túl halvány szöveget.
Hosszabb szöveghez Semleges 900 vagy 600 javasolt. - A fókuszjelzést ne távolítsd el.
Ez mutatja a billentyűzettel navigáló felhasználónak, hol jár. - A teljes választócímke legyen kattintható.
Ne csak a kis jelölőnégyzet vagy kör reagáljon.
24 · Használati segítség
Gyakori hibák
Ha az oldal „majdnem jó”, általában néhány következetlenség okozza. Ezeket ellenőrizd először.
- Tetszőleges új szín
Mindig a globális listából válassz, ne kézzel keress hasonló árnyalatot. - Véletlenszerű térköz
A 4 px-es skála értékeit használd, különösen 8, 16, 24, 32 és 64 px-t. - Eltérő mezőmagasság
A beviteli és legördülő mező alapmagassága egységesen 44 px. - Rámutatáskor ugró keret
A normál és rámutatási keret legyen azonos; a fókuszt külön körvonal jelezze. - Túl sok elsődleges gomb
Egy kisebb szekcióban csak a legfontosabb művelet legyen elsődleges. - Középre igazított hosszú műveleti link
Hosszabb, törő linket balra igazíts a kártya alján. - Erős, színes árnyék
Válassz finom semleges árnyékot, vagy hagyd el teljesen. - Címke nélküli mező
A helykitöltő szöveg nem helyettesíti a látható címkét. - Elfelejtett mobilnézet
Minden szerkesztés után ellenőrizd a tablet és telefon ikon alatt is.
25 · Használati segítség
Gyors ellenőrzőlista
Oldal vagy sablon átadása előtt haladj végig ezen a listán.
Átadás előtti ellenőrzés
- A színek a dokumentált globális színekből származnak.
- A címsorok Source Serif 4, a többi szöveg Source Sans 3.
- Csak dokumentált térközök és sarokkerekítések szerepelnek.
- Az oldalon egy logikus H1 van, a többi címsor sorrendben követi.
- Minden képnek megfelelő alternatív szövege van.
- A linkek és gombok szerepe egyértelmű.
- Az űrlapmezők címkéi láthatók, a hibák szövegesek.
- A GreenSpire szín csak GreenSpire-tartalomhoz kapcsolódik.
- Asztali, tablet és mobil nézetet is ellenőriztél.
- Mobilon nincs kilógás, a szöveg és a gombfelirat olvasható.
- A fókuszjelzés és a natív harmonika működés megmaradt.
- A teljes oldal böngészőből PDF-be mentve is áttekinthető.
Gyors segítség
Gyors receptek
Rövid, követhető lépések a leggyakoribb elemekhez. A részletes magyarázatokat a megfelelő komponensfejezetben találod.
Elsődleges gomb
- Húzz be egy Gomb / Button widgetet.
- Add meg a rövid feliratot és a linket.
- Válaszd a Source Sans 3 betűt, 16 px, 600.
- Állíts legalább 44 px magasságot.
- Adj 16 px vízszintes belső térközt.
- Állíts 8 px sarokkerekítést.
- Háttér: Mély Kék 500; rámutatás: Mély Kék 600.
- Szöveg: fehér; végül ellenőrizd mobilon.
Másodlagos gomb
- Másold le az elsődleges gombot.
- Háttérnek válassz fehéret vagy átlátszót.
- Adj 1 px Mély Kék 500 keretet.
- A szöveg legyen Mély Kék 500.
- Rámutatáskor a háttér legyen Mély Kék 50.
- Tartsd meg a 44 px magasságot és 8 px sarkot.
Sikerjelvény
- Hozz létre tartalomhoz igazodó kis konténert.
- Tegyél bele rövid szöveget.
- Háttér: Siker 50.
- Szöveg: Siker 800.
- Keret: 1 px Siker 200.
- Sarok: teljesen kerek.
- Normál méret: 28 px magas, 14 px szöveg, 10 px oldalsó tér.
GreenSpire-jelvény
- Másold le a sikerjelvény szerkezetét.
- Írj rövid GreenSpire-kapcsolatú címkét.
- Háttér: GreenSpire 50.
- Szöveg: GreenSpire 800.
- Keret: 1 px GreenSpire 200.
- Ne használd általános sikerjelzésként.
Alap kártya
- Hozz létre függőleges Konténert.
- Adj 24 px belső térközt.
- Állíts 12 px sarokkerekítést.
- Adj 1 px Semleges 100 keretet.
- Tegyél bele Címsort és Szövegszerkesztőt.
- Az elemek között legyen 16 px.
- Adj külön műveleti linket a kártya aljára.
- Mobilon legyen egyoszlopos.
Gramion kártya
- Másold le az Alap kártyát.
- Háttér: Mély Kék 50.
- Keret: Mély Kék 200.
- Cím: Mély Kék 800.
- Törzsszöveg: Semleges 800.
- Adj Gramion-jelvényt, ha segíti az értelmezést.
- Tartsd meg a 24 px belső térközt.
GreenSpire kártya
- Másold le az Alap kártyát.
- Háttér: GreenSpire 50.
- Keret: GreenSpire 200.
- Cím: GreenSpire 800.
- Törzsszöveg: Semleges 800.
- Csak GreenSpire-tartalomhoz használd.
- Tartsd meg a 12 px sarkot és 24 px belső teret.
Információs üzenet
- Hozz létre vízszintes Konténert.
- Tegyél bele információs ikont és belső Konténert.
- A belső Konténerbe kerüljön cím és leírás.
- Háttér: Világoskék 50.
- Keret: 1 px Világoskék 200.
- Adj 18 px belső teret és 12 px sarkot.
- Szükség esetén tegyél a leírás végére linket.
Hibaüzenet
- Másold le az Információs üzenetet.
- Válassz hibaikont.
- Adj konkrét, megoldást segítő címet és leírást.
- Háttér: Hiba 50.
- Keret: 1 px Hiba 300.
- Szöveg: Hiba 800.
- Ne csak a piros szín jelezze a hibát.
GYIK harmonika
- Húzd be a natív Accordion vagy Nested Accordion widgetet.
- Adj hozzá egy elemet kérdésenként.
- A kérdés legyen rövid és érthető.
- Állíts legalább 56 px magas címsort.
- Adj 16 px mobil és 24 px asztali oldalsó teret.
- Használj Semleges 200 elválasztót.
- Nyitott állapotban válassz Semleges 50 hátteret.
- Ne adj hozzá egyedi JavaScriptet.
Kapcsolati űrlapmező
- Adj új mezőt az Űrlap / Form widgethez.
- Adj látható, rövid címkét.
- Állíts 44 px magasságot.
- Betű: Source Sans 3, 16 px.
- Belső tér: 8 px függőlegesen, 16 px vízszintesen.
- Keret: 1 px Semleges 200; sarok: 8 px.
- Adj segítő szöveget, ha a várt adat nem egyértelmű.
- Ellenőrizd, hogy rámutatáskor nem változik a keret.
Háromoszlopos szolgáltatáskártya-rács
- Hozz létre egy külső Konténert.
- Állíts asztali nézetben háromoszlopos rácsot vagy három belső Konténert.
- Az oszlopok között legyen 24 px.
- Építs meg egy Alap kártyát.
- Másold le kétszer, majd cseréld a tartalmakat.
- Állíts azonos magasságot és a műveleti linket a kártyák aljára.
- Tableten válts két oszlopra.
- Mobilon válts egy oszlopra, 16 px közökkel.
Tipp: a teljes útmutatót a böngésző Nyomtatás funkciójával PDF-be mentheted. Nyomtatáskor minden recept automatikusan láthatóvá válik.