# Widgetek



# Hozzászólások

<div id="bkmrk-ez-a-le%C3%ADr%C3%A1s-seg%C3%ADt-%C3%96n"><section class="wpb-content-wrapper">Ez a leírás segít Önnek egy hozzászólás doboz hozzáadásáabn a bejegyzés/oldalhoz.

<p class="callout info">**Megjegyzés**: jelenleg a Disqus-t támogatja a Website Bulder. Hamarosan azonban további hozzászólás modul is elérhető lesz.  
**Megjegyzés**: Hozzáadhat Disqus hozzászólás modult a blog bejegyzéséhez, vagy az oldalához. Ehhez elegendő a hozzászólás dobozt az adott oldalra húznia ahol engedélyezni szeretné a hozzászólásokat</p>

#### HOZZÁSZÓLÁS DOBOZ ELHELYEZÉSE

A baloldalon található Widget Panel-ről húzza a hozzászólás dobozt az oldalára.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Comments_dragndrop.png)  
   
A **hozzászólás doboz** elhelyezést követően be kell állítania a **Disqus** felhasználói nevét pl.: **shortname.disqus.com** vagy csak a felhasználói nevet pl.:**short-name**. Abban az esetben ha még nincsen **Disqus** fiókja [itt készíthet egyet](https://disqus.com/admin/create/).

<div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1600261085824"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés**: A Disqus felületén be kell állítania a fiókot mielőtt a WebSite Builder felületén megadja felhasználói nevét.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Add_disqus.png)  
   
Miután megadta a Disqus felhasználói nevét a WebSite Builder felületén kattintson a **Frissítés** gombra a módosítások mentéséhez. #### KÖZZÉTÉTELT KÖVETŐ MEGTEKINTÉS

A közzétételt követően ellenőrizhető a hozzászólás doboz az oldalán.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Siteview-844x1024-1.png)

</section></div><div id="bkmrk-"></div>

# Visszaszámláló

<div id="bkmrk-ez-a-le%C3%ADr%C3%A1s-seg%C3%ADt-%C3%96n"><section class="wpb-content-wrapper">Ez a leírás segít Önnek egy **Visszaszámláló** dobozt léterhozni, és beállítani.

<p class="callout info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon módosítható.</span></p>

#### VISSZASZÁMLÁLÓ DOBOZ HOZZÁADÁSA

A bal oldalon található Widget panelről húzza a **Visszaszámláló** dobozt az oldalára.

![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-dragdrop.png)

### VISSZASZÁMLÁLÓ BEÁLLÍTÁSAI

1. Állítsa be a lejárati dátumot, ehhez kattintson az **Kalendárium ikonra** a **Expiration Date** sor végén. Valamint állítsa be a kezdési dátumot is, ehhez kattintson az **Kalendárium ikonra** a **Start Date** sor végén.
2. Válassza ki az **időzónát** a lehulló listából, ami lehet a helyi eszközön beállított idő, illetve a szerveren beállított idő is használható.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-timer.png)
3. A **Format** mezőben adja meg a Dátum formátumát, később ez alapján fog megjelenni a visszaszámláló.
4. Kétféle stílus közül választhat a viszzaszámláló megjelenítését tekintve, ezek az Alapértelmezett, illetve a Kör, ezek közül a **Kör** ami alapértelmezetten be van állítva
5. Beállítható a **visszaszámláló blokk** háttere is.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-formatstyle.png)
6. Következő lépésként adja meg a **színét** a szövegnek, a számlálónak, valamint a számláló háttérnek.
7. Adja meg a **számláló blokk** méretét.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-track-color.png)
8. Módosítsa igényei szerint a számláló méretét, a számjegyek számát, és méretét a csuszkák segítségével.
9. Beállítható a **blokkok** közötti **terület** nagysága is.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-track.png)
10. A visszaszámláló előtt/felett megjeleníthető bármilyen szöveg, ehhez a szöveget a **Text before Start Date** dobbozban lehet megadni.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-starttext.png)
11. Miután a visszaszámláló elérte a **nullát** szintén lehetőség van bármilyen szöveges tartalom megjelenítésére, ehhez a **Expiration Text** felirat alatti dobozban kell megadnia a szöveges tartalmat.
12. Miután a visszaszámláló elérte a **nullát** beállítható bármilyen hivatkozás is, ehhez a **Expiration URL** felirat alatti mezőben kell megadni az adott oldal címét.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-expiration.png)

</section></div><div id="bkmrk-"></div>

# Rács galéria

Ez a leírás segít Önnek egy **Rács képgaléria** dobozt léterhozni, és beállítani.

#### RÁCS KÉPGALÉRIA HOZZÁADÁSA

- A bal oldalon található Widget panelről húzza a **Rács képgaléria** dobozt az oldalára.

![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-drag.png)

#### KÉPEK KIVÁLASZTÁSA

- Válassza ki a képeket a **Media Library**-ből.
- Képfeltöltéshez kattintson az **Upload Files** gombra.

![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-image-select.png)

#### RÁCS KÉPGALÉRIA BEÁLLÍTÁSAI

- - Ha **módosítani, törölni, vagy hozzáadni** szeretne képeket akkor azt megteheti az **Organize Images** felületen keresztül.
    - A **Column count** résznél válassza ki, hogy a rácson belül hány kép jelenlen meg oszloponként.
    - Az **Image size** részen kiválaszthatja a képek méreteit, ha a **Custom** lehetőséget választja megadhat egyedi kép méretet is. ![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-settings1.png)

- - A **Link** résznél kiválasztható, hogy a képek milyen hivatkozásra mutassanak.
    - Ha azt szeretné, hogy a **Link** részen megadott képek **új oldalon** nyíljanak meg akkor jelölje be az **Open link in new window(tab)** lehetőséget.
    - A képekhez megjeleníthet feliratot is ehhez a **Show image caption** opciót jelölje be. ![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-settings2.png)

#### GALLÉRIA OPCIÓ A RÁCS KÉPGALÉRIÁN BELÜL

ez a beállítás a **link to** szekció alatt érhető el. Válassza ki azon képeket amelyeknél a rákattintást követően szeretne felugró ablakot. A kiválasztást követően további beállításokat adhat meg a képgalériához.

- - Hozzáadhat a miniatűrökhöz **keret méretet** és **kere színt** is. ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail.png)

- - Lehetősége van a **képek közötti távolságot** is beállítani, beállíthatja a felugró galéria képét a **keret méretét és a színét**. ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail1.png)

- - Megadhatja a **maximális magasságot** és a **maximális szélességet** a felugró alblak esetén
    - Ha szerente akkor lapozót is megjeleníthet ehhez jelölje be a **Show Pagination** lehetőséget
    - Beállíthatja a kép címének **láthatóságát** is. ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail2.png)

- - A weboldalán amikor a galéria képre kattint meg fog jelenni a felugró ablak. ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail3.png)

# Kép

Ez a leírás segít Önnek **Kép** hozzáadásban.

#### KÉP ELHELYEZÉSE

- A bal oldalon található Widget panel-ról húzza a kép dobozt az oldalára.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-drag.png)

#### MÉDIA BESZÚRÁSA

- Amikor egy képet húz az oldalára akkor meg fog jelenni az **Insert Media** ablak.
- Itt lehetősége van kiválasztani a további képet a **Media Library**-ból vagy fel is tölthet egy vagy több képet, ha az **Upload Files** hivatkozásra kattint.
- Mindezek mellett lehetősége van **URL cím** megadásával hivatkozni egy vagy több képre, ehhez használja az **Insert From URL** hivatkozást.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-insert-media.png)

#### KÉP MÉRETE

- A kép kiválasztását követően meg fog jelenni egy **Párbeszéd ablak**
- Itt lehetősége van a kép beállításainak módosítására, valamint **le is cserélheti** a képet.
- A kiválasztott képnél több opcióból választhat, többek között módosítható a kép **méret**e, de beállítható **egyedi méret** is, ehhez válassz a **Custom** opciót, majd adja meg a kép méretét a **Width** és a **Height** mezőkben (pl. 100×100).

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings1.png)

#### KÉP HIVATKOZÁSA

- Lehetősége van a képhez hivatkozást beállítani, ami lehet **egyedi URL**, vagy **média fájl**, illetve **Lightbox**.
- A **hivatkozás** beállításához válassza a **Custom URL** lehetőséget, média fájl esetén a **Media File** opciót. Ha nem szeretne hivatkozást beállítani akkor hagyja üresen a **Link to** mezőt.
- Lehetőség van arra is, hogy a hivatkozás új lapon nyíljon meg, ehhez jelölje be a **New Tab** opciót.
- Képaláírás beállításához jelölje be a **Show Image Caption** jelölő négyzetet.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings2.png)

#### KÉP IGAZÍTÁSA

- Az **Alignment** részen ki tudja választani a kép igazítását.
- Ha szeretne átmenetet beállítani akkor jelölje be az **Overlay Hover Effect** lehetőséget. Ez az effekt akkor fog működésbe lépni amikor az egeret a kép fölé viszik.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings3.png)

#### KÉP ÁTMENET

- Ha szeretne **átmenetet** a képhez beállítani akkor jelölje be az **Overlay Hover Effect** jelölő négyzetet.
- Ezt követően válassza ki az **Ikont**
- Válassza ki az ikon **színét** és a **méretét**.
- Végül válassza ki a **háttérszínt**.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-overlay.png)

#### EGYEDI STÍLUS

- A **stílus** fülön lehetősége van egyedi stílus megadására is.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Image-custom-style.png)

# Cselekvési gomb

Ez a leírás segít Önnek egy Call to Action doboz hozzáadásában.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper"><div class="ricsi info alert alert-info">  
</div></div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1600254121991"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>#### CALL TO ACTION WIDGET ELHELYEZÉSE

A baloldalon található Widget Panel-ről húzza a Call to Action Widget az oldalára.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-dragdrop.png)

#### CALL TO ACTION SZÖVEG

- Módosíthatja a **címet, alcímet, és szöveget**.
- A szöveg igazítását az **igazítás** résznél állíthatja be.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-customtext.png)

#### CALL TO ACTION HÁTTÉR

- Módosíthatja az **alakját**, a háttér előre meghatározott **stílusát** vagy beállíthat egyedi stílust is.
- Módosíthatja a **teljes szélességét** a háttérnek.
- Módosíthatja továbbá a **gomb pozíciót** a háttér alakját és a **szövegét** a gombnak.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-background.png)

#### CALL TO ACTION GOMB

- Módosítható a **gomb hivatkozása**, valamint megadhatja hogy a hivatkozás új ablakban nyíljon meg, ehhez **jelölje be** a jelölő négyzetet.
- A gomb alakját is **kiválaszthatja** valamint a gomb **előre definiált** színe is megadható a lehulló listából.
- A gomb méretét az **előre meghatározott** gombméretek közül lehet kiválasztani.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-button.png)

#### CALL TO ACTION GOMB IKON

- Módosíthatja a gomb ikonját az ikon lista alapján.
- A gombhoz tartozó ikon igazítását is be lehet állítani ami lehet bal, vagy jobbra zárt.
- A gomb **animációját** a lehulló listából választhatja ki.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-btnIcon.png)

#### CALL TO ACTION IKON

- Módosítható az ikon **pozíciója** a lehulló lista alapján.
- Az **Ikon** módosítható a lehulló lista alapján.
- Változtatható az **előre beállított** ikon szín, de **egyedi** szín is megadható, ehhez válassza az egyedi színt, majd adja meg a kívánt színt.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/CTA-Icon.png)

- Az ikon mérete lehet **előre meghatározott**, vagy **egyedi** méretű.
- Ha szeretné akkor beállíthat **fél ikont** is szegéllyel, ehhez jelölje be a a jelölő négyzetet.
- Az ikon animációja lehetőséget ad az ikon oldal betöltődés során megjelenő **animációs stílusának** módosítására.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/CTA-Icon-custom.png)

#### CSELEKVÉSI STÍLUS

két cselekvési stílus közül választhat **1)** elem stílus szerkesztése valamint **2)** előre meghatározott stílus

- Az **elem stílus szerkesztése** lehetőséget biztosít egyedi stílusok beállítására, így lehetősége van többek között egyedi háttér színt, szöveg színt, margint, keret stílust beállítani.
- Alapértelmezésben itt nem választhat előre definiált stílusok közül, azonban használhat **saját class**-okat amelynek segítségével egyedi stílust állíthat be.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-style.png)

# Szolgáltatás doboz

Ez a leírás segít Önnek egy szolgáltatás doboz hozzáadásában**.**

#### SZOLGÁLTATÁS DOBOZ ELHELYEZÉSE

- A bal oldalon található **Widget panel**-ról húzza a **Szolgáltatás dobozt** az oldalára.
- Így megjelenik egy **párbeszédpanel**, ahol személyre szabhatja a **Szolgáltatás dobozt**.
- A képen látható módon válassza ki az Önnek megfelelő **Tartalom stílust.**

   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-drag.png)

#### SZOLGÁLTATÁS DOBOZ MÉDIA TÍPUSA

- Válassza ki a **Média Típust** , amit szeretne megjeleníteni a Szolgáltatás dobozban. Mi most a **Betűtípus Ikon**-t választottuk.
- Ha kiválasztottuk a **Betűtípus Ikon**-t legörgetve megadhatunk további beállításokat is az **Ikonnak**, mint ahogy a lenti képen is látható. Ugyan így szükséges beállítani a **Ikon képet** és a **Széles képet**.
- A beállításokban további tulajdonságokat is személyre szabhat, pl.: **Szín, Méret**.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings1.png)  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings2.png)

#### SZOLGÁLTATÁS DOBOZ TARTALMA

- Írja be a Szolgáltatás doboz **Címét** és adja meg a **Cím Stílusát** a képen látható módon.
- A Szolgáltatás doboz szövegét a **Tartalom** dobozban adhatja meg.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings3.png)

### GOMB

- Pipálja be a **Gomb megjelenítést.**
- A következő lépésben megadhatja a gombon megjelenítendő szöveget és egy **Gomb linket**, ha más oldalra szeretne irányítani a **gombra kattintással**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings4.png)

- A képen látható módon válasszon egy **Gomb Színt** az előre definiált színekből, vagy az **Egyéni** lehetőségere kattintva.
- Az **Igazítás** lehetőséggel beállíthatja a **gomb** pozícióját.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings5.png)

#### ELŐRE ELKÉSZÍTETT STÍLUS

- Az **Edit Element Style**-ra kattintva mentheti el az **Előre elkészített stílusok** közé.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-styles.png)

# Modal

Ez a leírás segítséget ad a **Modal**widget beállításaiban, és a stílusok módosításában.

#### MODAL WIDGET ELHELYEZÉSE

- A baloldalon található Widget Panel-ről **húzza** a Modal-t az oldalára.
- A megjelenő **párbeszéd ablakban** lehetősége van a Modal elemeinek beállítására, és módosítására.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-drag.png)

#### MODAL MÓDOSÍTÁSA

- Beállíthat **Egyedi stílust** ehhez válassza a **Custom** lehetőséget a **Style** részen.
- Ha kiválasztotta a **Custom** lehetőséget akkor módosíthatja a **Háttérszínt** és a **Doboz színét**.
- Adja meg a **Gomb szövegét** ahhoz, hogy megjelenjen a **Modal gomb**.
- Ha szeretné akkor be lehet állítani a **Gomb** esetén a **teljes szélességet** ehhez jelölje be a **Stretch** opciót.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Modal-settings1.png)

- Válassza ki a Modal Gomb **Pozicióját**. Itt 3 lehetőségből választhat: **bal, közép, és jobb**.
- Válassza ki a Modal Gomb **Ikonját,** ha nem szeretne ikont beállítani, akkor hagyja üresen.
- Ha kiválasztott **Ikont** akkor be kell állítania annak **Pozicióját**. Alapértelmezésben az ikon **balra zárt** azonban ezt módosítani lehet **jobbra zártra**.
- Válassza ki az **animáció** típusát a modal képernyő **végére**, temészetesen beállítható az **elrejtés is.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Modal-settings2.png)**

#### EGYEDI STÍLUSOK

- Választhat **előredefiniált stílusok** közül, ehhez kattintson a **előredefiniált stílusok** lehetőségre.
- Lehetősége van egyedi stílusok beállítására is, ehhez válassz az Elem stílus szerkesztése lehetőséget.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-styles.png)

#### MODEL KÉPERNYŐKÉP

- Amikor **rákattint** a Modal gombra meg fog jelenni a beállított Modal.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-view.png)

# Beágyazás

Ez a leírás segítséget ad a Beágyazási widget beállításaiban, és a stílusok módosításában.

<p class="callout info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></p>

#### BEÁGYAZÁSI WIDGET ELHELYEZÉSE

A baloldalon található Widget Panel-ről húzza a Beágyazási widgetet az oldalára.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Embed-dragdrop.png)

#### BEÁGYAZÁS BEÁLLÍTÁSAI

1. **Gépelje be, vagy illessze be a** HTML kódot a szövegdobozba, ahol lehetőségevan a stílust is megadni
2. Jelölje be a jelölőnégyzetet, ha teljes szélességét és magasságát szeretné elérni az oldal jelenlegi div-nél.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Embed-settings.png)

#### BEÁGYAZÁSI STÍLUSOK

1. Az**Edit Element style** lehetőséget ad arra, hogy egyedi háttér, és szöveg színt, valamint margint, keret-rádiuszt, stb. állítson be.
2. Itt **nincs** lehetőség előredefiniált stílusok használatára.
3. Azonban egyedi **class**-okat létre tud hozni.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Embed-style.png)

# Árlista táblázat

Az első **téma** kiválasztásakor automatikusan megadja az **árlista táblázat** előre meghatározott stílusát, de ha a **Testreszabás menüpontot** kívánja követni, kövesse ezt az útmutatót.

1. Az **árlista táblázatot** a bal oldali widget részből tudja elhelyezni az oldalán. Ez a művelet az **árlista táblázat** párbeszédpaneljét fogja megjeleníteni.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-01.png)

2.Válassza ki a színeit az **árlista táblázat**-nak, valamint a sorok és az animációs effekteket.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-02.png)  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-03.png)

3.A **Beállítások** részen több lehetősége van az **árlista táblázat** testreszabására ezen felül soronként módosíthatóak a szövegek is.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-04.png)  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-05.png)

4.A **stílusok** részen további egyedi stílust állíthat be.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-06.png)

# Fülek

Az első **téma** kiválasztásakor automatikusan megadja a **Fülek** előredefiniált definiált stílusát, de ha szeretné **testre szabni a Füleket**, akkor követheti ezt az útmutatót.

1.A baloldalon található Widget Panel-ről húzza a Füleket az oldalára. Az áthúzást követően meg fog jelenni egy **párbeszéd ablak** ahol testre lehet szabni a füleket.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-01.png)

2.A **Beállítások** részen hozzáadhat új **Fület**, valamint szöveget.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-02.png)

3.A **Beállítások** részen lehetősége van **ikon kiválasztására** és azt az ön igényeinek megfelelően **módosítani**.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-03.png)

4.A **stílus** részen megadhat **Egyedi stílust** de használhatja az **Előredefiniált stílusokat** is.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-04.png)

# Accordion

Ez a leírás segítséget ad a Accordion widget beállításaiban, és a stílusok módosításában.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1600168303514"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>#### ACCORDION WIDGET ELHELYEZÉSE

A baloldalon található Widget Panel-ről húzza a Accordion-t az oldalára.

1. Kattintson az **Add new Accordion** elem gombra ahhoz, hogy új Accordion elemet adhasson hozzá.
2. Ha szeretné **eltávolítani az Accordion elemet** kattintson a **törlés ikonra** az Accordion elem részen.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-dragdrop.png)

#### ACCORDION ELEM BEÁLLÍTÁSAI

1. A **szekció cím** részen adhatja meg az Accordion elem címét.
2. A **szekció tartalom** részen állíthatja be az adott elem tartalmát.
3. Vagy kattinthat az **Open in SitePad Editor** gombra is ahhoz, hogy a tartalmat beillessze.
4. Jelölje be az **Active** jelölőnégyzetet, az adott elem alapértelmezetté tételéhez. <div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** Csak egy elem lehet aktív.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-itemsettings.png)</span></div>

#### ACCORDION STÍLUSOK

Két stílus közül választhat: **1)** Elem szerkesztés, és a stílus megadása és a **2)** Előre definiált stílus

1. Az **Elem szerkesztés, és a stílus megadása** lehetőségnél lehetősége van egyedi stílus létrehozására is, ahol beállítható többek között a háttér szín, szöveg szín, padding, keret-rádiusza, stb.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-style.png)

1. **Előre definiált** stílusok **class**-okat adnak az Accordion-hoz mint például **Sötét és világos**.
2. Mindezek mellett lehetősége van **egyedi class**-ok létrehozására is.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-prestyle.png)

# Splash képernyő

Ez a leírás segítséget ad a **Splash képernyő** widget beállításaiban, és a stílusok módosításában.

#### SPLASH KÉPERNYŐ WIDGET ELHELYEZÉSE

- A baloldalon található **Widget Panel**-ről húzza a **Splash képernyő**-et az oldalára.
- Amikor a weboldal elérte ezt a részt, akkor a **Splash képernyő** meg fog jelenni.
- Itt az oldal elejére **húztuk**, így **megjelenik**, amikor az oldalat a böngészőben behívjuk.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-drag.png)

#### TARTALOM SZERKESZTÉSE

- Amikor a **Splash képernyő**-t elhelyezi a weboldalán akkor, automatikusan megnyitásra kerül egy **párbeszédpanel**.
- A párbeszédablakban most szerkesztheti a **Splash képernyő** tartalmát, haogyan az az alábbi képen látható.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-content.png)

#### KÉSLETETÉSI IDŐ ÉS MEGJELENÉS

- A késleltetési idő segítségével késleltetheti a **Splash képernyő** megjelenését.
- Válassza ki, ha a Képernyõ opciókból szeretné megjeleníteni a **Splash képernyő**-t.
- A **Splash képernyő** stílusának kiválasztása. Ha egyedi stílust szeretne megadni, válassza az **Custom** lehetőséget.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-settings1.png)

#### STÍLUSOK ÉS ANIMÁCIÓ

- A **egyéni stílust** a **Custom** gombra kattintva adhatja meg.
- Van egy másik módja annak, hogy az **egyéni stílusokat** a későbbi lépésekben adjuk meg.
- Válassza ki az **Animáció** típusát, amikor az oldal meghatározott részére ér a Splash képernyő. Ugyanígy kell megadni a Splash képernyő **elrejtését** is.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-settings2.png)

#### EGYEDI STÍLUSOK

- Ez a második módja annak, hogy egyéni stílust adjon a Splash képernyőnek.
- Egyszerű stílusok hozzáadásához kattintson az Elemstílus szerkesztése gombra.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-styles.png)

#### SPLASH KÉPERNYŐ MEGTEKINTÉSE

- A Splash képernyő hasonlóan fog megjelenni a weboldalán, mint az az alábbi képen látható.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-view.png)

# Letöltés gomb

Ez a leírás segítséget ad a Letöltés gomb widget beállításaiban, és a stílusok módosításában.

#### LETÖLTÉS GOMB WIDGET ELHELYEZÉSE

A baloldalon található **Widget Panel**-ről húzza a **Letöltés gomb widget**-et az oldalára.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599738074822"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>![](https://dotroll.com/wp-content/uploads/2020/08/Download-dragdrop.png)

#### LETÖLTÉS GOMB BEÁLLÍTÁSAI

1. **Média Fájl** Ha szeretne feltölthet olyan fájlokat amelyek később **letölthetőek** akkor kattintson a három vízszintes pontra, majd töltse fel a fájlt, ezt követően automatikusan meg fog jelenni a letöltés gomb.
2. Ha szeretné akkor el is **távolíthatja** vagy **módosíthatja** az ikon betűtípusát, ehhez kattintson az Ikon Listára, majd válassza az Ikon from lehetőséget.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Download-uploadmedia.png)

1. Az ikon poziciónálásánál be lehet állítani azt, hogy az ikon jobb vagy bal oldalra legyen igazítva.
2. Ha azt szeretné, hogy a gomb **teljes szélességű stílusban** jelenlen meg akkor, jelölje be a **Stretch** jelölőnégyzetet, és az **Alignment** beállításaival módosíatsa a gombot.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-settings.png)

#### LETÖLTÉS GOMB STÍLUSA

A stílusok két lehetőséget biztosítanak: **1)** Elemstílus szerkesztése és **2)** Előredefiniált stílus

1. **Elemstílus szerkesztése** Lehetőséget biztosít egyedi stílusok beállítására mint például a háttér és szövegszín, távolság, szegély, stb.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-style.png)

1. **Előredefiniált stílus** lehetőséget biztosít **class**-ok használatára, ahol több előre definiált gomb közül választhat.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbtn-predefined-style.png)Ez a leírás segítséget ad a Letöltés gomb widget beállításaiban, és a stílusok módosításában.
    
    #### LETÖLTÉS GOMB WIDGET ELHELYEZÉSE
    
    A baloldalon található **Widget Panel**-ről húzza a **Letöltés gomb widget**-et az oldalára.
    
    <div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
    </div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599738074822"><div class="vc_message_box-icon">  
    </div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>![](https://dotroll.com/wp-content/uploads/2020/08/Download-dragdrop.png)
    
    #### LETÖLTÉS GOMB BEÁLLÍTÁSAI
    
    
    1. **Média Fájl** Ha szeretne feltölthet olyan fájlokat amelyek később **letölthetőek** akkor kattintson a három vízszintes pontra, majd töltse fel a fájlt, ezt követően automatikusan meg fog jelenni a letöltés gomb.
    2. Ha szeretné akkor el is **távolíthatja** vagy **módosíthatja** az ikon betűtípusát, ehhez kattintson az Ikon Listára, majd válassza az Ikon from lehetőséget.  
           
        ![](https://dotroll.com/wp-content/uploads/2020/08/Download-uploadmedia.png)
    
    
    1. Az ikon poziciónálásánál be lehet állítani azt, hogy az ikon jobb vagy bal oldalra legyen igazítva.
    2. Ha azt szeretné, hogy a gomb **teljes szélességű stílusban** jelenlen meg akkor, jelölje be a **Stretch** jelölőnégyzetet, és az **Alignment** beállításaival módosíatsa a gombot.  
           
        ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-settings.png)
    
    #### LETÖLTÉS GOMB STÍLUSA
    
    A stílusok két lehetőséget biztosítanak: **1)** Elemstílus szerkesztése és **2)** Előredefiniált stílus
    
    
    1. **Elemstílus szerkesztése** Lehetőséget biztosít egyedi stílusok beállítására mint például a háttér és szövegszín, távolság, szegély, stb.  
           
        ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-style.png)
    
    
    1. **Előredefiniált stílus** lehetőséget biztosít **class**-ok használatára, ahol több előre definiált gomb közül választhat.  
           
        ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbtn-predefined-style.png)

# Helykitöltő

Ez a leírás segítséget ad a **Helykitöltő widget** hozzáadásához.

#### HELYKITÖLTŐ WIDGET ELHELYEZÉSE

- A baloldalon található **Widget Panel**-ről húzza a **Helykitöltő widget**-et az oldalára.
- A megjelenő **Dialógus dobozban** választhat **Előredefiniált stílusok** és **egyedi stílusok** között, utóbbihoz válassza az **Edit Element Style** lehetőséget.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Space-drag.png)

#### ELŐREDEFINIÁLT STÍLUSOK

- Hozzáadhat **Szegélyt** a helykitöltő köré a képen jelenleg a **Vastag** lett kiválasztva.
- Módosíthatja a szegély stílusát, itt több lehetőség közül választhat.
- Módosíthatja a méretet, ehhez a **Height** és a **Width** jelölőket használja. A módosításhoz húzza a helykitöltő jelölőit a kívánt méretre.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Space-predefined-styles.png)

# Video Lightbox

Ez a leírás segítséget ad a **Video Lightbox** hozzáadásához.

#### YOUTUBE FORRÁSBÓL

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-a-baloldalon-tal%C3%A1lha"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- A baloldalon található **Widget Panel**-ről húzza a **Video Lightbox** az oldalára.
- A megjelenő **Video Lightbox** dialógus ablakban válassza a **Youtube** lehetőséget forrásként.
- Ezt követően adja meg a **Youtube Video URL** címét.
- Ha szeretne akkor beállíthat **Cover Image**-t is.

</div></div></div></div></div></div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-drag.png)

#### VIMEO FORRÁSBÓL

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-v%C3%A1lassza-a%C2%A0vimeo%C2%A0leh"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- Válassza a **Vimeo** lehetőséget forrásként.
- Ezt követően adja meg a **Vimeo Video URL** címét.
- Ha szeretne akkor beállíthat **Cover Image**-t is.

</div></div></div></div></div></div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-vimeo.png)

#### HTML5 FORRÁSBÓL

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-v%C3%A1lassza-a%C2%A0html5%C2%A0leh"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- Válassza a **HTML5** lehetőséget forrásként.
- A videó fájl feltöltését követően kattintson a három vízszintes pontra, majd adja meg a videó fájl elérési útját.

</div></div></div></div></div></div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-html5.png)

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A-a%C2%A0html5-"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599653358143"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés**: A **HTML5 forrás** esetén ha szeretne beállíthat **Cover image**-t, azonban ezt Önnek kell feltöltenie a beállítás előtt.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-html5-cover.png)

# Google Térkép

Ez a leírás segítséget ad a **Google Térkép Widget** Beállításában és stílusának módosításában.

#### GOOGLE TÉRKÉP WIDGET LÉTREHOZÁSA

**Drag and Drop** módszerrel adhat az oldalához hozzá Google Térkép Widgetet.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599650507901"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-dragdrop.png)

#### SZERVEZETI ADATOK

1. Amikor az **Új jelölő hozzáadása**-ra kattint, akkor lehetősége van módosítani a **Szervezeti adatokat** mint például a Szervezet név, cím, és egyéb információk.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-details.png)

1. Hozzáadhat például **Hivatkozás szöveget**-et a szervezeti adatokhoz, az egyéb információkhoz, ami egy **Link** fog megjeleníteni. Ha szeretné módosítani az **Ikon**-t válassza az **Ikon típust**-t, alapértelmezésben a **Alapértelmezett** kerül beállításra a widget létrehozása során.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-link-text.png)

1. Alapértelmezésben a **Alapértelmezett** kerül beállításra a widget létrehozása során, Ha például **Kép**-et szeretne beállítani az **Ikon** helyett jelölőként, akkor válassza a **kép** lehetőséget. Mindezek mellett módosíthatja a **Ikon típust**, az **Ikon**-t, az **Ikon szín**-t és a **betű méretet**, valamint az **Ikon méretet**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-font-type.png)

1. Jelölje be a **Driving Direction Text and Link** felirat előtti **jelölő négyzetet** térképen az útvonal tervezés megjelenjen. Ha bejelöli a **Zoom** opciót, akkor lehetőség lesz a **zoom-in** és a **zoom-out** funkciók használatára a térképen. Bejelölheti az **Embed Code** opciót is a Google Térkép beágyazásához.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-zoom.png)

#### GOOGLE TÉRKÉP BEÁGYAZÁSA

Abban az esetben ha bejelölte a **Google Embed code** opciót akkor a **Google Térkép**-et beágyazhatja egy **Iframe Kód** segítségével, ehhez a kapott kódot illessze be az Embed code mezőbe.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Embed-googlemap.png)

#### TÖBB HELYSZÍN

Kattintson az **Add new Marker** gombra ahhoz, hogy új helyszínt adhasson hozzá a térképhez. A **Scroll Zooming** opció bejelölésével közelíthető távolítható lesz a térkép.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-marker.png)

#### TÉRKÉP TÍPUSA ÉS A TÉRKÉP STÍLUSA

Választhat az előredefiniált **térkép típusok** közül a lehulló listából, valamint kiválasztható az előredefiniált **Térkép stílus** is.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-type.png)

#### TÉRKÉP EGYEDI STÍLUSOK

1. Válassza a **Custom** lehetőséget a Térkép stílusok közül ahhoz, hogy egyedi stílust állíthasson be. Kattintson a **Snazzy Maps** gombra a Google Térkép **egyedi stílusának** megadásához.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-custom-style.png)

1. Illessze be az **egyedi kódot** a Custom Style szövegmezőbe.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-code.png)

#### HELYSZÍN LISTA

Jelölje be a **Location List** **jelölő négyzetet** a helyszín lista megjelenítéséhez. A listaoszlopok száma **oszlopszámot** ad a kiválasztott listában a helylisták megjelenítéséhez. A lista **maximális szélessége** megadja a Helyi lista megjelenítéséhez szükséges teljes szélességet.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-location-list.png)

# Közösségi gombok

Ez a leírás segítséget ad a **Közösségi gombok** beállításához, és szerkesztéséhez.

1. **Drag and Drop** módszer segítségével adhat **Közösségi gombokat** az oldalához, vagy a baloldali widget panelról. A **Settings** részlegen a **Social Buttons** dialógus dobozban adja meg az **URL-t** a megjeleníteni kívánt közösségi gombnak, vagy el is távolíthatja ha az **URL** mezőt üresen hagyja.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-drag.png)

1. Ha eltávolítja például a **Twitter URL-t** akkor az el fogja távolítani a **Közösségi gombot** is a **Twitter**-hez.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-remove.png)

1. Kattintson a **Style** a stílusok hozzáadásához a **Közösségi gombokhoz**. Kattintson az **Elemstílus szerkesztése** gombra az **Egyéni stílus** hozzáadásához, és kattintson az **Előre definiált stílusok** elemre az előre meghatározott stílusok hozzáadásához. <div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** Kérjük ne módosítsa a **Háttérszínt** a **Közösségi ikonoknál** az **előre definiált** stílusokról.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-style.png)  
       
    </span></div>
2. Most az alábbi képen látható, hogy a **Size Large** és a **Style is Circular**, így a **Közösségi gombok** stílusa **megváltozott**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-predefined-styles.png)

# Kapcsolat űrlap

Ez a leírás segítséget ad a **Kapcsolat űrlap módosításához**.

1.A **Drag and Drop** módszerrel létrehozhat Kapcsolat űrlapot, vagy a már meglévőt szerkesztheti a a baloldali widget panel segítségével, ehhez kattintson a **Dialógus dobozra**. A dialógus dobozban kattintson az **Új mező hozzáadása** lehetőségre ahhoz, hogy új mezőt tudjon hozzáadni a formhoz. Adja meg a gomb nevét, majd jelölje be a **reCAPTCHA használata** lehetőséget, ha szeretné használni. Ha nem tudja hogyan kell beállítani a **reCAPTCHA-t** akkor az alábbi cikket: [reCAPTCHA beállítása a kapcsolat űrlaphoz](https://dotroll.com/hu/tudasbazis/recaptcha-hozzaadas/)

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag.png)

2.Most válassza ki az **Egyeztetés** a kapcsolatfelvételi űrlaphoz követelményeit. **Űrlapazonosító** és **űrlap neve** ez a mező az **E-mail sablonban** használható.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag2.png)

3.Új mezők hozzáadásához kattintson az **Új mező hozzáadása** gombra. Az újonnan hozzáadott mező testreszabásához kattintson az adott mezőre az alábbi képen látható módon.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-add-field.png)

4.Most írja be a **Címkét** a beviteli mezőbe, és válassza ki a mező típusát. Különböző beviteli típusokkal rendelkezünk, mint például a **Szöveg** ami nevekhez vagy vezetéknevekhez használható, **E-mail** az e-mail címekhez, a **Textarea** pedig az üzenetekhez stb.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field.png)

5.A fájlfeltöltés kapcsolattartó űrlapon való hozzáadásához válassza a **File** lehetőséget a legördülő listából.

![](https://dotroll.com/wp-content/uploads/2020/08/Input-type-file.png)

6.Jelölje be a **Use Label as Placeholder** mezőt a címke elhelyezéséhez. Ha bármelyik mezőt **kötelező mezőként** kívánja használni, akkor jelölje be a **Required** mezőt. Adja meg a **CSS class**-t és az **ID**-t, ha szüksége van rá.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field2.png)

7.Hozzáadhat több beviteli mezőt a **Kapcsolat űrlaphoz**.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-multiple-fields.png)

8.Beállíthat **Választ** is ha szeretne.

![](https://dotroll.com/wp-content/uploads/2020/08/Reply_to.png)

9.Ezen felületen lehetősége van **Egyedi stílust** beállítani a **Kapcsolat űrlaphoz**.

![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-styling.png)

<div id="bkmrk--9"></div><div id="bkmrk--10"></div>

# Diagram

Ez a leírás segítséget ad a **Diagram Widget** beállításához, és szerkesztéséhez.

#### DIAGRAM WIDGET MOZGATÁSA

**Drag and Drop** módszer segítségével adhat Diagram Widgetet az oldalához.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599642997320"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett Stílussal** jön létre amelyet a beállított sablon ad, azonban ez szabadon **módosítható**.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-dragdrop.png)

#### DIAGRAM CÍM, ÉS TÍPUS

Beállítható a **Diagram címe** és kiválasztható a **Diagram típusa**. Többfajta előredefiniált diagram típusból választhat mint például oszlop diagram, vízszintes oszlop diagram, terület diagram, előzmény, vonal diagram, stb. Alapértelmezésben az **oszlop diagram** kerül beállításra amikor a widgetet beállítja.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-type.png)

#### DIAGRAM SZÍN

Lehetősége van a **diagram színének** módosítására, valamint a **háttérszínt** is módosíthatja ha bejelöli a **remove** opciót a diagramnál.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-color.png)

#### DIAGRAM ADATOK

Adja meg a diagram adatait a **Data Textarea** mezőben, oszlopos adatok esetén vesszővel válassza el az egyes értékeket.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-data.png)

# Lista

<div id="bkmrk-ez-a-le%C3%ADr%C3%A1s-seg%C3%ADts%C3%A9g"><section class="wpb-content-wrapper">Ez a leírás segítséget ad a **Lista Widget** szerkesztésében, beállításaiban, és a stílusokban.

#### LISTA WIDGET MOZGATÁSA

A **Fogd meg és dobd** segítségével lista widgetet adhat az oldalához.

<div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599641340216"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett stílus** beállításokkal jön létre a sablon alapján, azonban ez **módosítható** amennyiben szeretné.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-list.png)  
#### ELŐRE DEFINIÁLT LISTA STÍLUS

Amikor megnyitja a dialógus ablakot akkor lehetősége van a **Lista sítlus** módosítására az Ön igényei szerint. Többféle lista sítlusból választhat mint például az ikon, kőr, telt kör, pikk, Armenian, Georgian, Nincs, stb.

Ha szeretné akkor módosíthatja a szöveg színt, ehhez jelölje be a **szöveg szín** lehetőséget, és végezze el a módosítást.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Predefined-list.png)

#### IKON STÍLUS

Ha változtatni szerene az ikonokon a **Lista stílusnál** akkor lehetősége van rá, ehhez válassza ki az adott **Ikont** elemet a listából. Mindezek mellett lehetősége van **módosítani**az ikon szöveg színét, ehhez jelölje be a az **Ikon szín** jelölő négyzetet, majd végezze el a szükséges módosításokat.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/List-icon-setting.png)

<div id="bkmrk-ez-a-le%C3%ADr%C3%A1s-seg%C3%ADts%C3%A9g-1"><section class="wpb-content-wrapper">Ez a leírás segítséget ad a **Lista Widget** szerkesztésében, beállításaiban, és a stílusokban.

#### LISTA WIDGET MOZGATÁSA

A **Fogd meg és dobd** segítségével lista widgetet adhat az oldalához.

<div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599641340216"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett stílus** beállításokkal jön létre a sablon alapján, azonban ez **módosítható** amennyiben szeretné.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-list.png)  
#### ELŐRE DEFINIÁLT LISTA STÍLUS

Amikor megnyitja a dialógus ablakot akkor lehetősége van a **Lista sítlus** módosítására az Ön igényei szerint. Többféle lista sítlusból választhat mint például az ikon, kőr, telt kör, pikk, Armenian, Georgian, Nincs, stb.

Ha szeretné akkor módosíthatja a szöveg színt, ehhez jelölje be a **szöveg szín** lehetőséget, és végezze el a módosítást.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Predefined-list.png)

#### IKON STÍLUS

Ha változtatni szerene az ikonokon a **Lista stílusnál** akkor lehetősége van rá, ehhez válassza ki az adott **Ikont** elemet a listából. Mindezek mellett lehetősége van **módosítani**az ikon szöveg színét, ehhez jelölje be a az **Ikon szín** jelölő négyzetet, majd végezze el a szükséges módosításokat.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/List-icon-setting.png)

</section></div><div id="bkmrk-"></div></section></div><div id="bkmrk--1"></div>

# Elsődleges menü

Amikor az elsődleges **Sablon** kiválasztásra kerül akkor automatikusan létrejön az előre meghatározott stílus alapján a **Menü**, de ha szeretné akkor lehetőség van a **Menü személyre szabására** ebben segít ez a leírás.

1.Fogja és vigye az **Elsődleges menü**-t a baloldali oldalsávban található widget részlegről, vagy válassza az **Elsődleges menü részleget** a **Fejléc** oldalon ha az megjelenik. Ez a művelet egy előugró ablakot fog megjeleníteni a **Elsődleges menü**-höz.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-drag.png)

2.A **Beállítások** részén a **Dialógus doboz**nál több lehetősége is van a menü **egyediesítésre** mint például a szövegek színe, háttérszín, szöveg méret, stb. Állítsa be a kívánt paramétereket.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style1.png)

3.Az utolsó elem segítségével módosítható az **Almenü elemek** stílusa, ha szüksége van rá akkor jelölje be.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style2.png)

4.Válassza ki a színt, háttérszínt, szöveg méretet az **Almenüpontok**hoz.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style3.png)  
   
A képen beállított almenü stílus a következőképp fog megjelenni.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-demo1.png)

5.Ha szeretne egyedi stílust beállítani az **Aktív oldal menü elemhez** akkor jelölje be az **Aktív oldal effekt** jelölő négyzetet, majd állítsa be a színt, háttérszínt.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style4.png)  
   
A képen a beállított Aktív oldal menü elem stílusa látható.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-demo2.png)

6.Ha szeretne egyedi stílust hozzáadni a **lenyitható gombhoz** akkor jelölje be a **Reszponzív Menü stílust** jelölő négyzetet, majd állítsa be a színt, háttérszínt.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style5.png)

7.Ezen felül lehetősége van egyedi betűtípust, menü magasságot, színt és háttérszínt beállítani.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style6.png)

8.Módosítható az **aktív menü elem** színe, háttérszíne, valamint a hover szín is.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style7.png)

<div id="bkmrk-"></div><div id="bkmrk--1"></div>

# Audió

Ez a leírás segítséget ad az Audió widget beállításaiban és a stílusok módosításához.

#### AUDIÓ HASZNÁLATA URL-KÉNT

- Húzza az **Audió** elemet a baloldali **Widget Panel**-ről, és engedje el ott ahol használni szeretné.
- A megjelenő dialógus ablakban az **Audió**-nál válassza az **Audio file URL** lehetőséget ahhoz, hogy URL-t adhasson meg az audió fájlnak.
- Miután megadta az **Audio URL** mezőben az Audio file URL szekcióban az meg fog jelenni.
- Jelölje be az Automatikus lejátszási lehetőséget, ha szeretné, hogy az audió automatikusan elinduljon az oldal betöltődést követően.
- Jelölje be a Repeat lehetőséget, ha azt szeretné, hogy az audi fájl folyamatosan kerüljön lejátszásra.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Audio-using-url.png)

#### AUDIÓ HASZNÁLATA MÉDIA ELEMKÉNT

- Húzza az **Audió** elemet a baloldali **Widget Panel**-ről, és engedje el ott ahol használni szeretné.
- A megjelenő dialógus ablakban az **Audió**-nál válassza a **Media Library** lehetőséget a feltöltéshez.
- Ezt követően kattintson a három pontra a feltöltéshez.
- Jelölje be az Automatikus lejátszási lehetőséget, ha szeretné, hogy az audió automatikusan elinduljon az oldal betöltődést követően.
- Jelölje be a Repeat lehetőséget, ha azt szeretné, hogy az audi fájl folyamatosan kerüljön lejátszásra.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Audio-using-media.png)

# Ikon

Ez a leírás segítséget ad az **Ikon Widget** szerkesztésében, beállításában.

#### IKON WIDGET MOZGATÁSA

Amikor egy Ikon widgetet **mozgat** az oldalán akkor egy menü fog megjelenni.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-megjegyz%C3%A9s%3A%C2%A0a-widget"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">  
</div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1599478640990"><div class="vc_message_box-icon">  
</div><div class="ricsi exclamation alert-info"><span class=".">**Megjegyzés:** A widget az **Alapértelmezett stílussal** fog betöltődni, ami az adott témához kapcsolódik, ezt természetesen bármikor módosítható.</span></div></div></div></div></div></div>  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-icon.png)

#### IKON WIDGET BEÁLLÍTÁSAI

A dialógus ablak megnyílását követően lehetősége van az **Ikon** módosítására a lita alapján, valamint az **Ikon színe** is kiválasztható.

Az Ikon méretei eltérőek azonban **előre meghatározottak** minden ikon esetén, a **lehulló listából** kiválasztható az ikon mérete, de választhat **egyedi méretet** is, ehhez válassza az **egyedi** lehetőséget a lehulló listából.

Az **ikon igazítással** lehetősége van az ikont az oldalon belül poziciónálni.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-settings.png)

#### HÁTTÉR STÍLUS SZERKESZTÉSE

Szerkesztheti az ikon **háttér alakját** mint például kör, négyzet, lekerekített, szerkezeti kör, szerkezeti négyzet, szerkezetileg lekerekített, és nincs.

Az ikon háttér méret segítségvel **teret** adhat az **Ikon** köré, és a háttérszín segítségével módosíthatja az ikon háttérszínét.

A megjelenési **Effekt** segítségével animálhatja az ikon megjelenését, ilyen lehet a fentről lefelé, lentről felfelé, balról jobbra, jobbról balra, vagy nincs.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-background.png)

#### EGYEDI IKON HIVATKOZÁS

Az egyedi hivatkozás segítségével **hivatkozást** tud beállítani az ikonhoz.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-link.png)