A hosszú szöveges tartalmak átlátható rendezésére vagy épp almenüpontok kiiktatására praktikus lehet ha egy oldalon/bejegyzésen belül a tartalmunkat vízszintesen csoportosítva rendezzük el. Erre „füleket” (tabokat) tudunk használni, így ennek az oldalnak az alján látható/kipróbálható eredményt érhetjük el.
I. hozzuk létre az új oldalt!
vagy bejegyzést (vagy szerkesszük a meglévők közül valamelyiket).
II. A füleket rövid kódokkal tudjuk létrehozni
- Az alábbi szögletes zárójeles kódokat másoljuk ki és illesszük be az oldalunk HTML nézetébe (fül). Figyelem! az alábbi kódok és szövegek végén található [tabbyending] lezáró kódra egyszer van csak szükség, de ha azt nem másoljuk át a kódok végére (az utolsó fül tartalma után) akkor nem jelennek meg a fülek! (Az alábbi példa kódok eredménye lejjebb görgetve tekinthető meg.)
- Ezután már a grafikus módban dolgozhatunk tovább. Írjuk át a fülek címeit a megfelelőre (legyen rövid, 1-2 szavas) és a rövid kódok közé helyezzük el a megfelelő tartalmakat!
Példa rövidkódok és szövegek (a végén a lezáró kóddal):
[tabby title="Első fül"]
Első fül tartalma: címsorok, szövegek, felsorolások, képek, videó, táblázat, bármi…
(az alábbi példában a szöveg és a tantermes kép)
[tabby title="Második fül"]
Második fül tartalma
(a példában a szöveg felsorolással)
[tabby title="Harmadik fül"]
Harmadik fül tartalma
(a példában a szöveg és a táblázat)
[tabby title="Sortörés a címben"]
Negyedik fül tartalma
(a példában a sortöréses címről szóló szöveggel)
[tabbyending]
💡 A fülek elnevezése grafikus nézetben részlegesen formázható: a cím félkövérré alakítható, illetve a Shift+Enter egyidejű lenyomásával a cím az adott szó előtt állva két sorba törhető.
💡 Próbáljuk meg elérni, hogy ne legyen olyan sok fül, ami már több sorba kerül, mert bonyolítja a struktúrát és nem is szép (esetleg használhatjuk az „oldalsáv nélküli” oldalsablont, ha mégis szükséges). Ha túl sok fülre van szükség, akkor a tartalom átgondolása lehet szükséges (pl. almenüpontokká alakítás, vagy lenyíló felzáródó funkció használható).
💡 Ahogyan ezen az oldalon is látható, ami a rövid kódok előtt szerepel az oldalon, az bármely fülön állva látható lesz, és ugyanígy állandóan olvasható lesz, amit a tabbyending kód után teszünk.
Adott fülre linkelés:
Hasznos lehet még, egy oldal linkelése úgy, hogy az általunk megjeleníteni kívánt fül legyen kiválasztva a megnyitáskor.
Ehhez nem kell mást tennünk mint a link végére illeszteni egy kisebb szöveget ?target= majd a tabby rövidkódban „title”-ként megadott nevet kell ékezetek nélkül, kisbetűvel, a szóközöket megtartva beírni.
Tehát így néz ki például: https://honlapom.hu/oldal/?target=harmadik ful neve
III. A fenti kódok eredménye a következő lesz
Első fül
Címsor 1 fül (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla. Proin in arcu urna. Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi. Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.
Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.
Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.
Második fül
Címsor 2 fül (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla.
- Proin in arcu urna.
- Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi.
- Donec vestibulum ornare nibh quis interdum.
- Maecenas ultrices est magna, ut cursus ligula ultrices eget.
Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.
Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.
Harmadik fül
Címsor 3 fül (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla. Proin in arcu urna. Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi. Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.
oszlop cím 1 | oszlop cím 2 | oszlop cím 3 | oszlop cím 4 |
quisque et mi sed leo | 121324 | 45% | X |
fermentum magna rutrum | 233445 | 65% | Y |
rhoncus sem id, mattis quam | 5465464 | 10% | V |
nulla tortor, pretium tempor |
21546 |
59% | Z |
Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.
Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.
Sortörés
a címben
Címsor 4 fül (h1)
Ha hosszú a fül címe, lehetőségünk van a címet két sorba törni a Shift+Enter segítségével!
Címsor (h2)
Címsor (h3)
Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Ut euismod urna quis fringilla convallis.
- Curabitur venenatis volutpat odio a rutrum.
- Sed euismod dui pharetra, tempus mauris a, auctor nulla.
- Proin in arcu urna.
- Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi.
- Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.