# Forgó doboz (Flip Box) widget: egyszerű, függőleges és körhinta

> A Forgó doboz widget előlapja és hátoldala, az átfordítás iránya, a körhinta mód és a Távoli carousel összekötése.

A **Forgó doboz** (angolul Flip Box) widget kétoldalú doboz. Az előlapon általában egy cím és egy ikon látszik, a hátoldalon a leírás és egy gomb, amely akkor tűnik elő, amikor a látogató a dobozra mutat. A widget az ingyenes bővítményben is megvan.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Flip Box** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a **Forgó doboz** nevet keresd.

## Alap beállítás: egy doboz

![A Forgó doboz előlapja](./kepek/dobozok-gombok-1-flipbox-elol.webp)

*A Forgó doboz előlapja* (https://minta-bolt.hu/tp-flipbox/)

A kép az előlapot mutatja a megadott címmel.

1. Húzd a **Forgó doboz** widgetet az oldalra.
2. Az **Elrendezés** szakasz **Típus** mezőjében hagyd az **Alap** értéket. (A **Haladó** típus előlap- és hátoldal-sablonokat használ: a **Normál** és az **Ismétlő** szakasz állítja.)
3. A **Tartalom** szakaszban az **Elrendezés kiválasztása** mezőnél hagyd a **Lista** lehetőséget.
4. Az **Előlap** szakaszban add meg a doboz címét, és válassz ikont.
5. A **Hátoldal** szakaszban írd meg a **Leírást**, és ha kell, kapcsold be a gombot.
6. Tedd közzé az oldalt.

![A Forgó doboz widget panelje](./kepek/dobozok-gombok-1-flipbox-panel.webp)

*A Forgó doboz widget panelje* (https://minta-bolt.hu/wp-admin/post.php?post=80&action=elementor)

A képen a **Tartalom** fül szakaszai láthatók: **Elrendezés**, **Tartalom**, **Előlap** és **Hátoldal**.

![A Forgó doboz hátoldala rámutatáskor](./kepek/dobozok-gombok-1-flipbox-hatul.webp)

*A Forgó doboz hátoldala rámutatáskor* (https://minta-bolt.hu/tp-flipbox/)

A kép ugyanazt a dobozt mutatja egérrel ráállva: a hátoldalon a leírás és a **Bővebben** gomb látszik.

![A Forgó doboz Tartalom szakasza](./kepek/dobozok-gombok-1-flipbox-panel-tartalom.webp)

*A Forgó doboz Tartalom szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=82&action=elementor)

A képen az **Elrendezés kiválasztása** (itt a **Körhinta** van kijelölve), az **Átfordítás típusa**, a **Doboz magassága** és az **Ikon kiválasztása** mező látszik.

### A Tartalom szakasz beállításai

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Elrendezés kiválasztása** | **Lista**: egyetlen forgó doboz. **Körhinta**: több doboz csúszkában. | Lista |
| **Átfordítás típusa** | A doboz átfordulásának iránya: vízszintes vagy függőleges tengely körül. | Vízszintes |
| **Doboz magassága** | A doboz magassága pixelben; eszközönként állítható. | 300 |
| **Ikon kiválasztása** | Mi látszik az előlapon a cím mellett: **Nincs**, **Ikon**, **Kép** vagy **Svg**. | nincs |
| **Gomb** | A hátoldali gomb megjelenítése (**Megjelenítés** / **Elrejtés**). | Elrejtés |
| **Gomb stílusa** | A hátoldali gomb három stílusa: **Stílus 1**, **Stílus 2**, **Stílus 3**. | Stílus 1 |

### Az Előlap szakasz

| Beállítás | Mit csinál |
| --- | --- |
| **A flipbox címe** | Az előlap címe. |
| **Ikon kiválasztása** | **Nincs**, **Ikon**, **Kép** vagy **Svg**. |
| **Ikonbetűkészlet** | **Font Awesome**, **Font Awesome 5** vagy **Icons Mind**, majd az **Ikonkönyvtár** mezőben az ikon. |
| **Kép használata ikonként** | Egyedi kép az ikon helyett. |
| **SVG-kiválasztási opció**, **SVG-ikon kiválasztása**, **SVG maximális szélessége** | SVG-ikon feltöltése vagy beépített SVG-ikon választása. |

### A Hátoldal szakasz

| Beállítás | Mit csinál |
| --- | --- |
| **Leírás** | A hátoldal szövege szerkesztővel. |
| **Gomb** | A gomb megjelenítése. Bekapcsolva a gomb alatti mezők is megjelennek: **Gomb típusa** (**Alap** vagy **Globális**), **Gomb stílusa**, **Szöveg** (alapérték: **Bővebben**), **Gomb hivatkozása**, valamint az ikon beállításai (**Ikonbetűkészlet**, **Ikon pozíciója**, **Ikon térköze**). |

## Függőleges átfordulás

A doboz alapból vízszintes tengely körül fordul át. Ha függőlegesen szeretnéd:

1. Jelöld ki a **Forgó doboz** widgetet.
2. A **Tartalom** szakaszban az **Átfordítás típusa** mezőnél válaszd a **Függőleges** lehetőséget.
3. Töltsd ki az **Előlapot** és a **Hátoldalt** a szokásos módon.
4. Tedd közzé az oldalt, és próbáld ki rámutatással, hogy a doboz a kívánt irányba fordul-e.

## Körhinta: több forgó doboz csúszkában

Ha több dobozt szeretnél csúsztatható sorban:

![A Forgó doboz körhinta módban](./kepek/dobozok-gombok-1-flipbox-karusszel.webp)

*A Forgó doboz körhinta módban* (https://minta-bolt.hu/tp-flipbox-karusszel/)

A kép három doboz címét mutatja egy sorban, alattuk a Távoli carousel **Előző** és **Következő** gombjaival (lásd lentebb).

1. Add hozzá a **Forgó doboz** widgetet.
2. A **Tartalom** szakaszban az **Elrendezés kiválasztása** mezőnél válaszd a **Körhinta** lehetőséget.
3. A **Carousel flipbox** listában adj hozzá egy elemet minden dobozhoz (**Elem hozzáadása**). Az egyes elemekben megadhatod a címet, az ikont, a leírást és a gombot.
4. A **Stílus** fülön a **Carousel beállításai** szakaszban állítsd be a csúsztatást.
5. Tedd közzé az oldalt.

### A Carousel beállításai szakasz

![A Forgó doboz Carousel beállításai szakasza](./kepek/dobozok-gombok-1-flipbox-panel-karusszel-opc.webp)

*A Forgó doboz Carousel beállításai szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=82&action=elementor)

A szakasz a **Stílus** fülön van, és csak körhinta módban használható. Főbb beállításai:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Egyedi carousel-ID** | Egyedi azonosító, amellyel a Távoli carousel widget összekapcsolható a körhintával. Üresen is hagyhatod. | üres |
| **Diavetítés módja** | A csúsztatás iránya (például vízszintes). | Vízszintes |
| **Dia iránya** | A csúsztatás iránya: balról jobbra vagy jobbról balra. | Balról jobbra |
| **Dia sebessége** | A csúsztatás sebessége ezredmásodpercben. | 1500 |
| **Asztali oszlopok** | Egyszerre látható dobozok száma asztali gépen. | 4 oszlop |
| **Következő/előző** | Hány dobozt lépjen a körhinta egy léptetésnél. | Egy oszlop |
| **Dia paddingje** | A dobozok körüli belső térköz. | 15 |
| **Húzható** | A dobozok egérrel vagy ujjal húzhatók. | Megjelenítés (be) |
| **Végtelen mód** | A körhinta a végén újra az elejére fordul. | be |
| **Szüneteltetés rámutatáskor** | Rámutatáskor megáll az automatikus léptetés. | ki |
| **Adaptív magasság** | A körhinta a látható dobozhoz igazítja a magasságát. | ki |
| **Animáció típusa** | Az átmenet jellege. | Szünettel |
| **Automatikus lejátszás** és **Automatikus lejátszás sebessége** | Magától lépteti a dobozokat; a sebesség ezredmásodpercben. | be, 3000 |
| **Pontok megjelenítése** és **Nyilak megjelenítése** | Lapozópontok és nyilak, saját stílus- és színbeállításokkal. | pontok be |
| **Középre igazítási mód** | A középső doboz kiemelhető (méretezés, átlátszatlanság). | ki |
| **Oszlopok táblagépen**, **Mobil oszlopok** | Táblagépen és mobilon más oszlopszám. | nincs megadva |

## Forgó doboz összekötése a Távoli carouselrel

A **Távoli carousel** (angolul Carousel Remote) egy külön widget: **Következő** és **Előző** gombokat, valamint lapozópontokat ad, amelyeket bárhová tehetsz az oldalon, és amelyek a körhintát vezérlik.

![A Távoli carousel widget panelje](./kepek/dobozok-gombok-1-remote-panel.webp)

*A Távoli carousel widget panelje* (https://minta-bolt.hu/wp-admin/post.php?post=82&action=elementor)

A képen a **Távoli carousel** **Tartalom** szakasza látszik: az **Egyedi kapcsolati ID** és a **Távoli vezérlés típusa** (**Körhinta**, **Kapcsoló** vagy **Vízszintes görgetés**).

Az összekötés lépései:

1. Tedd a **Távoli carousel** widgetet ugyanarra az oldalra, ahol a körhintaként beállított **Forgó doboz** van. A widgetnek be kell lennie kapcsolva a **The Plus Addons → Widgets** oldalon.
2. A **Forgó doboz** **Stílus** fülén, a **Carousel beállításai** szakaszban add meg az **Egyedi carousel-ID** mezőt (például `dobozok`).
3. A **Távoli carousel** **Egyedi kapcsolati ID** mezőjébe írd be ugyanezt az azonosítót.
4. A **Távoli vezérlés típusa** mezőt hagyd **Körhinta** értéken.
5. Tedd közzé az oldalt, és próbáld ki, hogy a gombok léptetik-e a dobozokat.

Fontos tudnivalók:

- A két widgetnek ugyanazon az oldalon kell lennie, és az azonosítónak pontosan egyeznie kell.
- A szerkesztőben nem látszik, hogy a kapcsolat él-e; ezt a közzétett oldalon ellenőrizd.
- A **Távoli carousel** a **Kapcsoló** widgettel is összeköthető, lásd a [Kapcsoló widget fejezetét](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-kapcsolo/).

## Hátoldal beállításai a szerkesztőben

![A Forgó doboz Hátoldal szakasza](./kepek/dobozok-gombok-1-flipbox-panel-hatul.webp)

*A Forgó doboz Hátoldal szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=80&action=elementor)

A kép a **Hátoldal** szakaszt mutatja: a **Leírás** mező, alatta a **Gomb** és a bekapcsolt gomb beállításai.