|
|
|
|
|
Fogalmad sincs, hogy a honlapodon mekkora méretekben jelennek meg a képek?
|
|
A következő útmutató elsősorban DIVI sablon használóknak készült,
|
|
de más Word Press sablonokhoz is nagyszerűen alkalmazható.
|
|
|
Lássuk tehát a DIVI sorozat folytatását!
|
|
Jöjjenek a 3. hét tippjei!
|
|
|
|
|
|
|
142. Képátméretezés - DIVI sablon 15.
Slider és Post Slider Kiemelt kép
|
|
A vetítés háttérképek méretezéséről már beszéltem a korábbi bejegyzésekben.
|
Most a diák és a bejegyzésben használt kiemelt képek méreteiről lesz szó, amelyek a háttér előtt jelennek meg.
|
|
A diaképek csak akkor jelennek meg, ha a vetítés ⅔ , ¾ vagy 1 oszlop szélességet foglal el.
|
Fontos, hogy a dia képmérete legalább ilyen széles legyen, hogy optimálisan jelenjen meg a különböző méretű kijelzőkön.
|
- 1 oszlop: 450
- ¾ oszlop: 330
- ⅔ oszlop: 320
|
|
|
Megjegyzés: a 768px-nél kisebb böngésző szélessége elrejti a képet, és csak a bejegyzés kivonatát jeleníti meg.
|
|
|
|
|
|
143. Képátméretezés - DIVI sablon 16.
|
Képek megjelenítése Lightbox-ban
|
|
|
|
Képgalériáknál használjuk a lightbox-ot. Ez azt jelenti, hogy a fotókra rá lehet kattintani, és külön ablakban megnézhetjük a feltöltött képet.
|
|
A képgalériáknál két szélsőségbe eshetünk:
|
|
1. Eredeti hatalmas méretű fotókat töltünk fel, amelyek piszkosul lelassítják az oldalt.
|
2. Túloptimalizáljuk a képméretet, és nagyon kicsi pixelszélességet adunk meg.
|
Ha a képeket szeretnénk kattinthatóvá tenni, akkor érdemes nagyobb képméretet használni, hogy akár teljes képernyőméretben gyönyörködhessen a fotóinkban a honlapra látogató.
|
|
|
Általában 1500 x 844 méretezés jól működik nagy kijelzőn is, ha teljes képernyő szélességben akarjuk bemutatni a fotóinkat.
|
|
|
|
|
|
|
|
144. Képméretezés DIVI sablon 17.
Blog modul kiemelt képek - teljes szélességű elrendezéssel
|
|
|
|
Képszélesség: egyenlő az oszlop szélességének méretével
|
|
|
A blogmodul használata során a megjelenítendő képek hozzáadása nem túl bonyolult.
|
|
A kiemelt képeknek olyan szélesnek kell lenniük, mint az oszlop, amelybe beillesztjük.
|
Oldalsávos elrendezésnél például, egy kétharmados oszlopban legalább 700px szélességű képet kell használni, mivel ez a Divi kétharmados oszlopának szélessége.
|
|
|
|
Ne felejtsük el, hogy a kiemelt képet eredetileg a blogbejegyzésben kell beállítani.
|
|
Nézzük meg, hogy a bejegyzésünk vajon kétharmados oszlopot használ vagy sem. Ha nem, akkor a lenti méretek az irányadók.
|
- 1 oszlop: 1080
- ¾ oszlop: 795
- ⅔ oszlop: 700
- ½ oszlop: 510
- ⅓ oszlop: 320
- ¼ oszlop: 225
|
|
|
|
145. Képátméretezés - DIVI sablon 18.
Blog modul - kiemelt képek rácselrendezéssel (grid)
|
|
Szélesség: egyenlő az egyoszlopos oszlop szélességével (alapértelmezett 795px)
|
A teljes szélességű blogelrendezéséhez hasonlóan a kiemelt kép méretét itt is magánál a blogbejegyzésnél kell beállítani.
|
|
|
|
Ami nagyszerű a rácselrendezésben, hogy a Divi a médiagalériába feltöltött képek kisebb változatát használja automatikusan (400px szélességgel).
|
|
|
Emiatt nem kell aggódnunk, hogy túl nagy lesz a képünk a rácsszerkezetben való megjelenítéshez.
|
|
|
|
|
146. Képátméretezés - DIVI sablon 19.
Blurb (fülszöveg) modul képméretek
|
|
Maximális szélesség: 550px
|
|
A fülszöveg modulban elhelyezett kép méretezése is az oszlopszélességet követi, kivéve az 1 oszlopos elrendezést.
|
Ilyenkor a normál 1080px képszélesség helyett 550px-t adjunk meg!
|
- 1 oszlop: 550px
- ½ oszlop: 510px
- ⅓ oszlop: 320px
- ¼ oszlop: 225p
|
|
|
|
147. Képátméretezés - DIVI sablon 20.
Személy modul (Person Module) képméretek
|
|
A bemutatkozó résznél érdemes használni a saját portrénkat.
|
- 3: 4 - 600 x 800 (portrékhoz ajánlott)
- 16: 9 - 600 x 338
- 4: 3 - 600 x 400
Egy 1 oszlopos elrendezésnél a kép a tartalom bal oldalán jelenik meg, 320px-es méretben.
|
|
|
|
Ha a képernyő mérete kisebb, mint 767px, a kép a tartalomterület szélességét 600px szélességgel veszi át.
|
|
|
|
|
148. Képátméretezés - DIVI sablon 21.
Shop (áruház) modul termékképek méretei
|
|
Ajánlott szélesség: 330px
|
|
Ajánlott oszlopszám: 3 vagy több
|
Íme a termékképek szélessége különböző elrendezésekben:
|
- 6 oszlop: 150px
- 5 oszlop: 183px
- 4 oszlop: 240px
- 3 oszlop: 332px
- 2 oszlop: 520px
- 1 oszlop: 1080px
|
A Divi egy kisebb változatot hoz létre a termékképéből (max. 400px), mivel a Shop Module valóban úgy lett megépítve, hogy a termékeket ⅓ oszlopon vagy kisebben jelenítse meg.
|
|
Ez azt jelenti, hogy a 2 oszlopos vagy 1 oszlop elrendezés esetén a termékkép minősége nem igazán jón.
|
|
Továbbá, ha rákattintunk az áruházban egy termékre, akkor a termékoldal 300px méretű képét jelenít meg.
|
|
Ezért ajánlott a 3 oszlopos elrendezés, illetve legalább 330 képpontos termékfotó legyen feltöltve.
|
|
|
|
|
|
|
SEO ÁRAK
|
|
|
|
|
|
70 SEO tipp - ajándék eBook
|
Köszönöm, hogy feliratkoztál!
|
|
|
|
|
|
|
|
|
|
|
|
info@antikaotika-design.hu +36-30-630-3607 Ingyenes SEO felmérés! Ne hagyd ki ezt a lehetőséget! Töltsd ki a lenti űrlapot, és én átnézem a weboldaladat, hogy mennyire felel meg a legújabb keresőoptimalizálási feltételeknek. A rövid elemzést elküldöm e-mailben. Kövess a közösségi média oldalain! FacebookTwitterGoogle+PinterestLinkedIntumblrInstagramskypeYoutubeSEO szakember, keresőoptimalizálás szakértő, web-designer Saját honlapok: Antikaotika, Antikaotika-design, Antikaotika-SEO, Retro-Vintage
|
|
|
|
|
|
|
|
|
|
|
