# Oxygen Builder: első lépések és Tutor LMS oldalak

> Az Oxygen Builder integráció követelményei, a Tutor LMS fül az Oxygen vizuális szerkesztőjében, a sablonok és elemek áttekintése, a Szövegmező beállításai, valamint a regisztrációs oldalak és az irányítópult szerkesztése.

Az Oxygen Builder integrációval a Tutor LMS oldalait (kurzus, lecke, kvíz, feladat, archívum, regisztráció, irányítópult) az Oxygen vizuális szerkesztőjében alakíthatod. Az Oxygen átveszi a téma szerepét, ezért a LMS-oldalhoz nincs szükség másik témára.

## Követelmények

Három bővítménynek kell telepítve és aktívnak lennie:

1. Tutor LMS (ingyenes vagy Pro)
2. Oxygen Builder
3. Az Oxygen Builder integrációs bővítmény (**Oxygen Tutor LMS**)

Mind a háromra szükség van, különben az integráció nem működik.

## Első lépések

1. Menj az **Oxygen → Templates** oldalra.
2. Hozz létre sablont a kívánt oldaltípushoz. Kurzusoldalhoz a **Single** fülön válaszd a „Course” (kurzus) típust.
3. Nyisd meg a sablont az Oxygen vizuális szerkesztőjében, és alakítsd.

Az integráció bekapcsolása után a szerkesztőben új **Tutor LMS** fül jelenik meg, benne a tanulási oldalak elkészítéséhez szükséges elemekkel.

## Két mód a kurzusoldalhoz

- **Teljes sablon hozzáadása:** a sablon a kurzusoldal összes elemét tartalmazza, és mindegyiket külön szerkesztheted, így az egész oldal betűtípusait és megjelenését kézben tartod.
- **Saját elrendezés az egyedi kurzuselemekkel:** a fül elemeiből te állítod össze az oldalt.

Elérhető teljes sablonok:

- kurzusoldal (Single Course),
- lecke (Single Lesson),
- kvíz (Single Quiz),
- feladat (Single Assignment).

Ezek leírása az [Oxygen: kurzus-, lecke-, kvíz- és feladatsablonok](https://hub.hellowp.io/hu/plugins/tutor-pro/integraciok-oxygen-sablonok/) fejezetben van.

Egyedi elemek a kurzusoldalhoz: Title, Rating, Author, Social Share, Categories, Course Description, Course Content, Curriculum, Benefits, Requirements, Target Audience, Material, Thumbnail, Enrollment Box, Instructors, Reviews, Archive Course List, Courses List. Beállításaik az [Oxygen: egyedi kurzuselemek és archívumok](https://hub.hellowp.io/hu/plugins/tutor-pro/integraciok-oxygen-elemek/) fejezetben vannak.

A regisztrációs és az irányítópult-oldalhoz a **Tutor LMS Pages** elemei szolgálnak: Student Registration, Instructor Registration, Dashboard.

## Szövegmező (Text Field)

Az Oxygen szerkesztőjének leggyakoribb beállítófüle. A többi fejezet csak úgy hivatkozik rá, hogy „az Oxygen szövegmező-szerkesztőjével” állítható egy szöveg betűs megjelenése. A mezői:

| Beállítás | Mit csinál |
|---|---|
| **Font Family** | A betűtípus a legördülő listából. |
| **Font Size** | A szöveg mérete. |
| **Color** | A szöveg színe. |
| **Font Weight** | A betű vastagsága. |
| **Line Height** | A sormagasság. |
| **Letter Spacing** | A betűk közti távolság. |
| **Text Decoration** | Nincs, aláhúzott, felülhúzott vagy áthúzott szöveg. |
| **Font Style** | Normál vagy dőlt. |
| **Text Transformation** | Csupa nagybetű, csupa kisbetű vagy automatikus nagybetűs kezdés egy kattintással. |

## Tutor LMS oldalak

A Tutor LMS három előre elkészített oldalát az Oxygenben a **Tutor LMS Pages** elemei alakítják.

### Student Registration

A tanulói regisztrációs űrlap megjelenése:

| Rész | Mit állíthatsz |
|---|---|
| **Label** | Az egyes mezők fölötti címke betűmérete, vastagsága, stílusa és színe. |
| **Input Typography** | A beviteli mezőkben megjelenő szöveg mérete, vastagsága, stílusa és színe. |
| **Input Field** | A mező szegélyének színe és vastagsága, a háttérszín és a mező magassága. |

### Instructor Registration

Az oktatói regisztrációs űrlapnál ugyanezek a részek vannak: **Label** (a címkék betűs megjelenése), **Input Typography** (a mezők szövege) és **Input Field** (háttérszín, szegélyszín, szegélyvastagság).

### Dashboard

Az irányítópult-oldal részei:

| Rész | Mit állíthatsz |
|---|---|
| **Header** | A fejléc háttérszíne és belső margója. |
| **Image** | A fejlécképe szélessége és magassága; az infókártya/ikon magassága, szélessége és háttérszíne. |
| **Display Name** | Az oktató megjelenített nevének betűmérete, vastagsága, stílusa, színe és igazítása. |
| **Rating Stars** | Az oktató értékelőcsillagainak mérete, a kitöltött és az üres csillag színe. |
| **Rating Average** | Az átlagértékelés szövegének betűs megjelenése (méret, vastagság, stílus, szín, igazítás). |
| **Rating Count** | Az értékelések számának betűs megjelenése (méret, vastagság, stílus, szín, igazítás). |
| **Header Button** | A fejléc gombjának belső margója, háttér- és szövegszíne (alap és egér fölött), betűs megjelenése, szegélye, árnyéka, külön az egér fölé vitt állapotra is. |
| **Menu** | A menüelemek megjelenése, lásd lent. |
| **Title** | Az irányítópult címének betűs megjelenése. |
| **Links** és **Links Hover** | Az irányítópult hivatkozásainak betűs megjelenése, külön egér fölött is. |
| **Info Card** | Az információs kártyák ikonja, értéke, címkéje és háttérszíne, az ikon mérete, színe és igazítása, valamint a külső és belső margó. |

A **Menu** részei:

- **Item:** az elemek ikonjának színe és mérete, a szöveg színe, mérete és betűtípusa, valamint a háttérszín.
- **Item Hover:** ugyanezek egér fölött.
- **Item Active:** ugyanezek az aktív elemre, vagyis a „Dashboard” feliratú fülre.
- **Spacing:** a menüelemek külső és belső margója, oldalanként külön.