Egy weboldal elkészítésének alapja egy intenzív történet, képekből és fotókból.

A képek fontos szerepet játszanak a weboldal grafikai felépítésében, hozzájárulva a felhasználó böngészési élményéhez.

Ezért több, eltérő funkciójú képkomponens áll rendelkezésedre, minden igényedhez:

- Egyetlen kép;
- Galéria;
- Karusszel;
- Diavetítés;

    Képes diavetítés
    Képes vitrin
    Szöveges slider
    Hover-kép
- Vitrin;
- Szöveges Slider;
- Hover-kép.

Kép hozzáadása 

A szerkesztőn keresztül képeket adhatsz hozzá a weboldaladhoz.

1. Kattints bal oldalt az Elemek sávra;
2. Kattints a Média 
3. Kattints a Kép 
4. Húzd a komponenst a munkaterületre

Könnyen hozzáadhatod vagy módosíthatod a képedet.

1. Kattints a képre 
2. Kattints a Kép szerkesztése
3. Kattints a Kép keresése gombra, ha hozzá szeretnéd adni vagy le szeretnéd cserélni a képedet. Három lehetőséged van:

- Feltölthetsz egy saját képet közvetlenül a PC-dről
- Feltölthetsz egy képet a Pixabay-ről. Írj be egy kulcsszót a keresősávba, és válaszd ki a neked tetsző képet
- Feltölthetsz egy képet a Facebook-fiókodból

Jó tudni: Ha a billentyűzet Shift gombját nyomva tartod a kép átméretezése közben, a rendszer megtartja a kép arányait, így nem vágódik le véletlenül.

Megj.: A képek alt-taggel történő optimalizálásához a Webhelykezelés->Webhely indexelése menüpontra kell menni. Az Alt Tag nagyon hasznos eszköz a weboldalad képeinek optimalizálásához, mert leírja a képet és azt a funkciót, amelyet a kép az oldalon betölt. A Google nagy jelentőséget tulajdonít az Alt Tagnak, mert információkat nyer ki a képről és az oldal többi tartalmáról.
Alt Tag hozzárendeléséhez a Webhely indexelése panelen minden oldalon megtalálod a Képek optimalizálása részt. Itt add meg a kulcsszót az adott kép mezőjében, majd kattints a Mentés gombra. Ne feledd, a weboldalad minden nyelvéhez külön Alt Tag-et is megadhatsz.

Link hozzáadása

1. Kattints a Kép komponensre
2. Kattints a Kép szerkesztése
3. Kattints a lánc ikonra
4. Négy kapcsolattípust adhatsz hozzá:

- A képet összekapcsolhatod a webhelyed egy meglévő oldalával
- A képet összekapcsolhatod egy külső linkkel
- A képet összekapcsolhatod ugyanazon az oldalon lévő egyik komponenssel
- A képet összekapcsolhatod egy pop up-pal 

 
Ha úgy döntesz, hogy a képet ugyanazon az oldalon lévő komponenshez kapcsolod, a listából ki kell választanod azt a komponenst, amelyet a linked horgonyaként használsz. Javaslom, hogy használd a Rétegek funkciót hogy azonnal megtaláld a megfelelő komponenst.

Parallax

Itt aktiválhatod a Parallax opciót, amely javítja a vizuális érzékelést, és a kép görgetése közben bizonyos mélységélességet ad.

1. Kattints a Kép komponensre
2. Kattints a fogaskerék ikonra
3. Kattints a Parallax
4. Pipáld be az Aktiválás

Egér ráhúzásakor megjelenő effektek

Kiválaszthatsz egy effektet, amely a képekre az egér ráhúzásakor alkalmazódik.

1. Kattints a Kép komponensre
2. Kattints a fogaskerék ikonra
3. Kattints az Egér ráhúzásakor effekt
4. Válaszd ki az egér ráhúzásakor effektet

Overlay

Az Overlay funkcióval felülrétegezett színt adhatsz hozzá, vagy színátmenetet alkalmazhatsz.

1. Kattints a Kép komponensre
2. Kattints a fogaskerék ikonra
3. Kattints az Overlay

Keretek

Hozzáadhatsz egy keretet a képhez a felkínáltak közül választva, és tetszés szerint módosíthatod a színét.

1. Kattints a Kép komponensre
2. Kattints a fogaskerék ikonra
3. Kattints a Keretek

Árnyék

Árnyékot is beállíthatsz, kiválasztva az árnyék színét és elhelyezését.

1. Kattints a Kép komponensre
2. Kattints a fogaskerék ikonra
3. Kattints az Árnyék
 

Jó tudni: ha a képet teljes képernyőn szeretnéd megjeleníteni, jobb egérgombbal kattintva, majd a Méretek menüpontra állva megtalálod a 100% szélesség funkciót, amely lehetővé teszi, hogy a fotó teljes képernyőn jelenjen meg. A módosított méret csak a szélesség lesz, nem a magasság, ezért a kép nagyon nagy képernyőkön vágottnak tűnhet.