U ovoj lekciji ću vam pokazati kako se kreira segment koji sadrži tzv. okvire za rezime (Summary Boxes). Oni sadrže kratak pregled nekog proizvoda ili usluge i omogućavaju korisniku da jednim klikom dobije više informacija. Kao što možete videti na ovoj skici, pojedini sadržaji se jednim delom preklapaju sa slikom koja predstavlja pozadinu susednog segmenta a pošto su oni delimično transparentni, ovaj sadržaj nije potpuno zaklonjen. U ovoj lekciji ću vam pokazati kako se sve ovo može postići.

U tom cilju je potrebno da kreiram novi segment a pošto ću njegov sadržaj iskoristiti kao osnovu za dodavanje novih elemenata, on za sada može da ima samo jednu kolonu. Ako nakon toga selektujem ovu kolonu i otvorim Style odeljak, neće mi biti teško da za boju pozadine (Background Color) izaberem tamno zelenu (Forest). Pošto bih želeo da ova površina bude delimično providna, ja ću odmah prikazati čitavu paletu i na postojeću heksadecimalnu vrednost dodati B3. To će biti dovoljno da se njen stepen  transparencije postavi na 75% pa mogu da nastavim dalje, pređem na opcije koje se odnose na alternativno stanje (Hover) i ponovim isti postupak. Ovom prilikom ću na osnovnu boju (Forest) dodati malo veći stepen transparencije a to se može postići dodavanjem broja 80.

Sledeća grupa parametara koje treba promeniti se odnosi na izgled slova, pa ću zato kliknuti na opciju Typography i za naslove (Heading Color) izabrati potpuno belu boju (White). Isti postupak mogu da primenim i za prateći sadržaj (Text Color) ali bi zato linkovi trebali da budu znatno uočljiviji pa ću za parametar Link Color izabrati jarko žutu nijansu (Tumeric).

Sada sam potpuno spreman za dodavanje novog vidžeta, pa ću zato preći na odgovarajući odeljak i u polje za pretragu upisati Icon. Čim se na ekranu pojave vidžeti koji u svom nazivu imaju ovaj pojam, mogu da izaberem Icon Box i da ga jednim potezom postavim na odgovarajuću lokaciju. Kao što vidite, ovaj element sadrži jednu ikonicu, naslov i prateći tekst a pošto se ovi elementi mogu slobodno birati, neće mi biti teško da kliknem na opciju Upload SVG i u okviru koji sledi izaberem poslednju ilustraciju. Ja sam se za ovakav format ikona opredelio zato što mi on omogućava da naknadno menjam njene parametre.

Pošto sam postavio željenu ikonu, mogu da promenim postojeći naslov i unesem prateći tekst a ne bi bilo loše da čitav sadržaj povežem sa odgovarajućom Web stranicom. Da bih saznao njenu tačnu adresu, ja ću trenutno aktivnu stranicu prikazati u Preview režimu i odmah kliknuti na opciju Design & Services. Nakon toga će se njena adresa pojaviti u gornjem levom uglu ekrana pa mi neće biti teško da je iskopiram i prenesem u polje pod nazivom Link.

Ja bih želeo da ikonica bude postavljena sa leve strane, pa ću zato kliknuti na odgovarajuću opciju (Left) i odmah preći na Style odeljak jer se tu nalazi parametar koji služi za određivanje njene boje (Primary Color). U ovom slučaju mi odgovara da ona bude bela, pa ću zato izabrati opciju White a da bih naglasio njenu funkciju, ja ću za alternativno stanje (Hover), izabrati jarko žutu. Nakon toga mogu da podesim razmak između ikonice i teksta a to se može postići promenom parametra pod nazivom Spacing. Na kraju mi preostaje još samo da malo povećam čitavu ikonu pa ću zato parametar Size povećati na 80 i proveriti šta sam postigao. Za sada ne izgleda loše, ali bi moglo da bude još bolje ako bih malo doterao ove tekstualne elemente. Zato ću kliknuti na opciju Content i jednim potezom promeniti razmak između redova (Line Height). Ako pre toga za jedinice izaberem Em, neće mi biti teško da rastojanje za naslov smanjim na nulu (0) a opis (Description), povećam na 1.3.

Da bih podesio odstojanje od samog okvira (Padding), ja ću preći na Advanced odeljak, promeniti jedinice, isključiti njihovo povezivanje i u prvo polje (Top) uneti 1.5. Nakon toga mogu da istu vrednost upišem u treće polje (Bottom) i dovršim čitav postupak.

Pošto sam uspešno formirao prvu kolonu, mogu da je dupliram i odmah pređem na unos novih sadržaja. To podrazumeva selekciju novog elementa, otvaranje Style odeljka i promenu pozadine. Ovom prilikom ću se odlučiti za jarko žutu (Turmeric) i odmah povećati stepen providnosti. To znači da ću na postojeću heksadecimalnu vrednost dodati B3 a zatim preći na Hover odeljak, izabrati istu boju i dodati joj još veći stepen providnosti. Da bi tekstualni sadržaj postao još uočljiviji, ja ću kliknuti na opciju Typography i za Link Hover Color izabrati tamno zelenu boju (Teal). Nakon toga mogu da selektujem čitav vidžet i izborom opcije Upload SVG prikažem unapred pripremljene ilustracije. Ovoga puta mi je potrebna ona na kojoj je prikazana staklena tegla sa par listića, pa ću jednim klikom dovršiti ovaj postupak. Na kraju je potrebno još samo da promenim postojeći naslov i prateći tekst, kao i da ih povežem sa odgovarajućom stranicom. Pre toga je neophodno da saznam njenu adresu, pa ću zato kliknuti na link Solution i zatim iskopirati kompletan URL. Ovaj podatak treba ubaciti u polje pod nazivom Link i na taj način povezati ova dva elementa. Na kraju treba još samo da za alternativnu boju (Hover) izaberem tamno zelenu (Teal) jer su ostali parametri već usklađeni sa konkretnim potrebama.

Za kreiranje trećeg elementa ću ponovo iskoristiti prvu kolonu jer ona već poseduje neke od potrebnih karakteristika. To se na žalost, ne odnosi na boju pozadine pa zato moram da pređem na Style odeljak I iz liste izaberem tamno zelenu (Teal) a zatim otvorim čitavu paletu i povećam stepen transparencije. Ako na isti način dodam i četvrti element, ovaj segment će konačno početi da liči na ono što sam želeo da postignem, ali moram da priznam da na njemu postoji još nekoliko detalja koje treba promeniti. To se pre svega odnosi na zaobljene uglove, pa ću zato selektovati prvu kolonu, kliknuti na opciju Border i odmah isključati automatsko prenošenje podataka. Nakon toga mogu da u prvo polje (Top) upišem osmicu (8) i na taj način blago zaoblim levi gornji ugao. Sličan postupak treba ponoviti i za poslednju kolonu, pa ću je zato selektovati, prikazati odgovarajuće parametre i ovoga puta povećati vrednost koja se odnosi na desnu stranu (Right).

Da bi se ovi sadržaji preklopili sa postojećom slikom, neophodno je da selektujem čitav segment, pređem na Advanced odeljak i upotrebim tzv. negativne margine. To se može postići ako u prvo polje unesem npr. -23 ali pošto to očigledno nije dovoljno, ja ću ovu vrednost povećati na -80 i na taj način postići željeni efekat. Ukoliko sada mišem pređem preko neke od ovih kolona, njena pozadina će postati malo svetlija pa ću biti u prilici da vidim i ono što se nalazi u drugom planu.

Pre nego što nastavim dalje, ja ću promeniti naziv ovog odeljka a to se najlakše može uraditi u samom Navigator-u. U tom cilju je dovoljno samo dva puta uzastopno kliknuti na postojeći naziv i umesto njega uneti npr. Summary Boxes. Pošto je to sređeno, mogu da proverim kako će sve ovo izgledati na različitim uređajima. Zato ću jednim klikom preći na prikaz koji odgovara tablet računarima, da bih odmah primetio da su ove četiri kolone postale preuske za sadržaj koji se u njima nalazi. Da bih to ispravio, ja ću odmah selektovati prvu kolonu, otvoriti Layout odeljak i parametar Column Width postaviti na 50%. Ako isti postupak ponovim i za sve ostale kolone, one će automatski ispuniti dva reda što znači da će i njihov sadržaj biti mnogo jasniji.

Pošto bi sada gornji desni ugao druge kolone trebalo da bude zaobljen, ja ću prvo selektovati odgovarajući element, preći na Style odeljak i otključati nezavisno podešavanje parametra Border. Nakon toga mogu da u drugo polje (Right) upišem osmicu (8). Poslednja kolona zahteva suprotnu intervenciju, što u ovom slučaju znači da parametar Border treba u potpunosti ukinuti tj. svesti na nulu (0). Na kraju treba još samo da selektujem čitav segment, pređem na Layout odeljak i parametar koji se odnosi na njegovu širinu (Width) podesim na 700 piksela. To će biti dovoljno da se sa obe strane pojavi malo slobodnog prostora što je u skladu sa osnovnim zahtevima.

Pre nego što dovršim ovu lekciju, moram da proverim kako će sve ovo izgledati na mobilnim telefonima. Zato ću u vrhu ekrana potražiti treću ikonicu (Mobile) i na taj način suziti površinu koja je predviđena za prikaz svih sadržaja. Kao što vidite, sve kolone su sada postavljene jedna iznad druge što znači da su za postizanje željenog efekta potrebne sasvim male izmene. Zato ću odmah selektovati prvu kolonu, preći na Style odeljak, kliknuti na opciju Border i u prva dva polja (Top i Right) upisati osmicu (8). Zatim ću preći na sledeću kolonu i u ovom slučaju ukinuti bilo kakvo zakrivljenje. Na ovaj način sam postigao da primena ovog efekta bude ograničena na prvi element, dok će svi ostali zadržati oštre uglove.

Ponekad nije lako izvršiti selekciju pojedinih segmenata ali se ovaj problem može rešiti upotrebom Navigator-a. Ja ću na ovaj način jednim klikom selektovati čitav segment, preći na Advanced odeljak i za parametar Padding izabrati procente. Nakon toga mogu da isključim automatsko prenošenje podataka i u drugo i četvrto polje (Right i Left) unesem četvorku (4). To će biti dovoljno da ovaj segment postane malo uži i pregledniji.

Sada mogu da kažem da je ova stanica konačno dovršena i da sam uspeo da u potpunosti ispunim sve postavljene zahteve.