Dodajanje in urejanje slik

Gradnik Besedilo in slika (Text & Image) v urejevalniku SiteKreator omogoča vizualno obogatitev besedilnih vsebin z nalaganjem, oblikovanjem ter prilagajanjem slik. Slike naredijo vsebino privlačnejšo, hkrati pa s pravilno optimizacijo izboljšajo SEO-zmogljivost spletnega mesta.

1. Načini dodajanja slik

Za vnos novo sliko najprej odprite gradnik Besedilo in slika (Text & Image) ter s klikom izberite mesto, kamor želite vstaviti sliko. V orodni vrstici kliknite ikono Vstavi sliko (Insert Image).

Sliko lahko naložite na tri načine:

1. Nalaganje s računalnika (Upload Image / Drag & Drop): Kliknite na območje za dodajanje slik ter izberite datoteko s svojega računalnika ali pa sliko enostavno povlecite in spustite (drag & drop) iz lokalne mape neposredno v nastavitveno ploščo.

2. Dodajanje prek URL-naslova (Add from URL): V spustnem meniju ob možnosti Naloži sliko (Upload Image) izberite Dodaj iz URL-ja (Add from URL). Vnesite ali prilepite neposredno povezavo do slike, shranjene na zunanjem strežniku, ter kliknite Dodaj sliko (Add Image).

3. Knjižnica slik (Image Library): Preklopite na zavihek Knjižnica slik (Image Library) in izberite primerno sliko iz obsežne zbirke profesionalnih brezplačnih slik (stock images).

Opozorilo za imena datotek: Slike, ki v svojem imenu vsebujejo posebne znake, kot sta # ali ?, je mogoče uspešno naložiti le z uporabo možnosti povleci in spusti (drag & drop) ali prek URL-naslova (Add from URL).

2. Prilagajanje dimenzij in optimizacija slik

Ko je slika dodana v gradnik, se samodejno prilagodi privzeti velikosti. Za spreminjanje dimenzij kliknite na sliko, nakar se na desni strani odpre nastavitvena plošča.

Prednastavljene in prilagojene dimenzije

Izbirate lahko med 4 prednastavljenimi velikostmi (Majhna (Small), Srednja (Medium), Velika (Large) in Dejanska (Actual)) ali pa določite poljubno dimenzijo po meri (Custom size):

• Ohranjanje razmerja: Ob ročnem spreminjanju širine in višine vedno kliknite ikono ključavnice (Constrain Proportions). To zagotovi, da se višina samodejno prilagodi širini ter prepreči popačenje slike.

• Ponastavitev dimenzij: Za povratek na prvotno velikost datoteke kliknite povezavo Ponastavi (Reset).

• Zasloni visoke ločljivosti: Sistem ohranja izvirno datoteko v ozadju, zato se vse prilagojene slike na zaslonih visoke ločljivosti (npr. Retina) prikažejo z visoko stopnjo podrobnosti.

Opozorilo glede hitrosti nalaganja: Spreminjanje dimenzij znotraj urejevalnika deluje kot vizualno skaliranje v brskalniku, medtem ko datoteka v ozadju ohrani svojo izvirno velikost. Za zagotavljanje visoke hitrosti nalaganja spletnega mesta in optimalno uporabniško izkušnjo večje slikovne datoteke pred nalaganjem ustrezno stisnite in dimenzionirajte v zunanjem programu za urejanje slik.

3. Zunanja in neposredna obdelava slike (Crop & Zoom)

Urejevalnik SiteKreator omogoča napredno urejanje ter prilagajanje izreza neposredno znotraj vmesnika:

• Zunanji urejevalnik (Edit): S klikom na gumb Uredi (Edit) se slika odpre v zunanjem orodju za obdelavo slik, ki omogoča obrezovanje (crop), zrcaljenje (flip), vrtenje (rotate), spreminjanje dimenzij (resize) in dodajanje barvnih filtrov.

• Zamenjava slike (Change): S klikom na gumb Spremeni (Change) lahko obstoječo sliko v trenutku zamenjate z drugo datoteko, ne da bi pri tem izgubili preostale nastavitve.

• Obrezovanje in približevanje (Crop & Zoom znotraj vmesnika): Če je omogočena možnost Napredne možnosti (Advanced Options) in je izvirna slika večja od prikazane dimenzije, se ob kliku na sliko prikaže drsnik za približevanje (zoom). S premikanjem drsnika in vlečenjem slike lahko izberete točen izrez, ki bo prikazan na spletni strani.

   

4. Poravnava besedila in obnavljanje (Alignment & Text Flow)

V nastavitveni plošči lahko določite poravnavo slike ter način, kako se besedilo ovija okoli nje:

1. Brez oblivanja (No wrapping): Slika stoji samostojno v svoji vrstici; besedilo se nahaja nad ali pod njo.

2. Levo oblivno (Left wrap): Slika je poravnana na levo stran, besedilo pa se ovija ob njeni desni strani.

3. Desno oblivno (Right wrap): Slika je poravnana na desno stran, besedilo pa se ovija ob njeni levi strani.

    

5. Napredne možnosti oblikovanja in učinki

S preklopom stikala Napredne možnosti (Advanced Options) odklenete dodatne parametre za vizualno prilagoditev:

Opis ob preletu z miško (Mouse-over Caption / Rollover)

V polje Opis ob preletu z miško (Mouse-over caption) vnesite kratek opis vsebine slike. Besedilo se prikaže, ko obiskovalec z miško zapelje čez sliko. Vnos opisa je ključen za optimizacijo za iskalnike (SEO) in izboljšanje dostopnosti spletnega mesta.

Zamik okoli slike (Padding / Spacing)

Z nastavitvijo zamika v pikah (px) določite razmik med robom slike in okolico (zgoraj, spodaj, levo in desno). To preprečuje, da bi se besedilo dotikalo robov slike.

Rob slike (Border)

V razdelku Rob slike (Image Border) nastavite debelino roba v pikah ter s klikom na barvno paleto izberite želeni odtenek ali rob povsem odstranite.

Slikovni učinki (Image Effects)

Na sliko lahko uporabite posebne učinke, kot sta Instant Photo ali Reflex:

Opozorilo: Uporabljeni vizualni učinki v urejevalnem načinu niso neposredno vidni. Za pregled dejanskega videza zaprite urejevalni način ali odprite predogled spletnega mesta.

6. Interaktivne slike ob preletu z miško (Mouse-over Image)

Možnost Slika ob preletu z miško (Mouse-over Image) doda spletnemu mestu interaktivnost in obiskovalcem nakaže, da je slika klikljiva.

Postopek nastavitve interaktivne slike:

1. V razdelku Slika ob preletu z miško (Mouse-over Image) naložite drugo, nadomestno slikovno datoteko.

2. V spustnem meniju izberite želeni prehodni učinek (Transition Effect):

   • Postopno prikaži (Fade In): Osnovna slika ostane vidna v ozadju, nova slika pa se ob preletu z miško postopoma prikaže preko nje. Učinek je primeren, ko imata sliki prosojna ozadja in se medsebojno dopolnjujeta.

   • Raztopi (Dissolve): Osnovna slika ob preletu z miško povsem zbledi, medtem ko se druga slika postopoma prikaže. Možnost preprečuje prekrivanje prosojnih delov obeh slik.

3. Za urejanje obrezave (crop & zoom) ali nastavitev nadomestne slike kliknite ikono za preklop (Switch icon), ki se prikaže v zgornjem desnem kotu izbrane slike.

Opozorila glede združljivosti in podpore:

• Učinki Image Effects (npr. Instant Photo, Reflex) in interaktivna možnost Mouse-over Image med seboj niso združljivi. Na posamezni sliki lahko uporabite le eno od teh dveh možnosti.

• Prehodni učinek Iris v starejših brskalnikih (Internet Explorer 7/8) namesto krogov prikazuje pravokotne oblike.

• V brskalnikih, kot sta Safari in Google Chrome, se ob prehodu pri nekaterih postavitvah lahko opazi manjše vizualno nihanje (flicker) ob preletu z miško.