MagyarmagyarForgó 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
Szekció neve “Alap beállítás: egy doboz”
A kép az előlapot mutatja a megadott címmel.
- Húzd a Forgó doboz widgetet az oldalra.
- 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.)
- A Tartalom szakaszban az Elrendezés kiválasztása mezőnél hagyd a Lista lehetőséget.
- Az Előlap szakaszban add meg a doboz címét, és válassz ikont.
- A Hátoldal szakaszban írd meg a Leírást, és ha kell, kapcsold be a gombot.
- Tedd közzé az oldalt.
A képen a Tartalom fül szakaszai láthatók: Elrendezés, Tartalom, Előlap és Hátoldal.
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 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
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “Függőleges átfordulás”A doboz alapból vízszintes tengely körül fordul át. Ha függőlegesen szeretnéd:
- Jelöld ki a Forgó doboz widgetet.
- A Tartalom szakaszban az Átfordítás típusa mezőnél válaszd a Függőleges lehetőséget.
- Töltsd ki az Előlapot és a Hátoldalt a szokásos módon.
- 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
Szekció neve “Körhinta: több forgó doboz csúszkában”Ha több dobozt szeretnél csúsztatható sorban:
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).
- Add hozzá a Forgó doboz widgetet.
- A Tartalom szakaszban az Elrendezés kiválasztása mezőnél válaszd a Körhinta lehetőséget.
- 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.
- A Stílus fülön a Carousel beállításai szakaszban állítsd be a csúsztatást.
- Tedd közzé az oldalt.
A Carousel beállításai szakasz
Szekció neve “A Carousel beállításai szakasz”
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
Szekció neve “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 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:
- 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.
- 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). - A Távoli carousel Egyedi kapcsolati ID mezőjébe írd be ugyanezt az azonosítót.
- A Távoli vezérlés típusa mezőt hagyd Körhinta értéken.
- 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.
Hátoldal beállításai a szerkesztőben
Szekció neve “Hátoldal beállításai a szerkesztőben”
A kép a Hátoldal szakaszt mutatja: a Leírás mező, alatta a Gomb és a bekapcsolt gomb beállításai.
Készült: