See on “wide content” blokk H1

See on “wide content” blokk H2

See on “wide content” blokk H3

See on “wide content” blokk H4

See on “wide content” blokk H5

See on siis kõige tavalisem ja lihtsam blokk millega lisada sisu ja see on tekstisisene link. Tegelikult see bloki nimi on natuke eksitav – sisu ei ole väga “wide” vaid pigem narrow ehk kitsmalt. Panen siia pildi ka:

Seda blokki on hea kasutada näiteks lihtsa blogipostituse loomiseks.

See on üks loetelu:

• Loetelu punkt 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry
• Loetelu punkt 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry
• Loetelu punkt 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry
• Loetelu punkt 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry

See on aga quote – Lorem Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lisaks on olemas selline blokk nagu “Empty space” millega saab tekitada “õhku” blokkide vahele. Ka sellel lehel on kasutusel mitmeid “Empty space blokke nii lehe üleval, all kui blokkide vahel.

Igal lehel on päise all ka breadcrumbs, mis näitab lehe struktuuri “Avaleht” – “ülemleht” – “käesolev leht”. Vajadusel saab selle igal lehel eraldi peitu panna. Paremas ääres on selleks valik:

Pilti saab joondada ka keskele:

Või paremasse äärde:

Loomulikult on kõik blokid ka responsive seega vaata lehte erinevate ekraanisuuruste ja resolutsioonidega.

Lisan siia ka ühe video näidiseks:

 Järgmiseks presenteerin “Banner(s)” blokki

Blokil on mitmeid võimalusi seadistamiseks. Saab valida kas style on “full width” või “boxed”. Saab valida bänneri kõrgust 3 erineva resolutsiooni jaoks. Ja lisada ühe või mitu pilti. Lisan alla 4 erinevat näidist. Esimene näidis on 1 pildiga ja full width. Teine on 1 pildiga ja boxed. Kolmas on 2 pildiga ja boxed ning neljas näide 3 pildiga ja boxed. Kõikide näidiste piltide kõrguseks määrasin suurel ekraanil 300, keskmisel 250 ja väikel ekranail 200 (va viimane 3 pildiga blokk millel lisan väiksel ekraanil pildi kõrguseks 100px). Iga bloki vahele lisan 48/24(desktop/mobile) px “empty space” bloki, et nad ei oleks üksteise otsas.

Järgmiseks presenteerin “Posts” blokki

Blokil on väga palju erinevaid võimalusi kuvamiseks. Kõigepealt saab valida kas kuvab ainult ühe kategooria postitusi või mitme erineva kategooria postitusi – sellest sõltub siis disain. Edasi saab valida kategooria(d). Edasi mitu postitust ühe kategooria kohta kuvada 2, 3, 4, 5 või 6 postitust. Lisaks saab valida kas bloki taust on valge või roheline.

Näidiseks lisan 2 blokki. Esimene blokk ühe kategooriaga, 4 postitusega. Teine blokk 3 kategooriaga, 4 postitusega ja määran blokile rohelise taustavärvi.

Kui postituse tüübiks on valitud “Video” siis kuvatakse pildi peale rohelist Youtube-i ikooni. Kui on valitud mitme kategooriaga postituste blokk, siis kuvatakse pilti ainult viimasele postitusele kategooriast.

Kui valitud on ühe kategooriaga postituste layout, siis väiksel ekraanil on need postitused üksteise kõrval slaiderina.

Järgmiseks presenteerin “Slider” blokki

Slider blokil on võimalik igale slaidile valida 2 pilti – üks suurema ekraani jaoks ja teine väiksema ekraani jaoks. Lisasks on igal slaidil WYSIWYG tekstiredaktori lahter kuhu vabas vormis lisada pealkiri / sisu / nupp. Nupu lisamiseks tuleb kasutada sellist shortcode-i (lisan pildina muidu see muutuks veebis kohe nupukeseks):

button text – nupu tekst, url – korrektne https:// algusega url kuhu nupule vajutades suunata, new_tab 1 tähendab, et link avaneb uues tab-is ja 0, et samas tabis.

Slaidide arv ei ole piiratud. Näidiseks lisan 2 slaidiga slaideri.

Järgmiseks presenteerin “Gallery” blokki

Sellele blokile saab lisada pealkirja ning lisaks pildid. Lihtne blokk.

Järgmiseks presenteerin “Image + text” blokki

Antud blokil on võimalik valida kas pilt on tekstist paremal või vasakul pool. Ning kas teksti paigutus on üleval või all. Blokile saab määrata ühe pildi ja lisada jälle vabas vormis teksti tekstiredaktoris. Pildil saab määrata kõrguse suure ekraani jaoks ja väikse ekraani jaoks eraldi(näidisel desktop 500px ja mobile 300px).

Näidiseks lisan 2 blokki. Esimesel pilt paremal, tekst üleval. Ning teisele pildi vasakule ja tekst all. Väiksemal ekraanil on mõlemal blokil pilt üleval ja info all sõltumata valikutest.

Blokkide vahele lisan 48/24px õhku empty space blokiga.

Järgmiseks presenteerin “Accordion + text” blokki

Lihtne blokk millega lisada sisu kus 50% on tekstiala ja 50% akkordion. Saab valida kumb kumbal pool asetsem.

Näidiseks lisan ühe ploki kus akkordion on paremal ja muu sisu vasakul. Akkordioni kohale on võimalik lisada pealkiri.

Järgmiseks presenteerin “Featured content” blokki

See on lihtne blokk kus vasakul 2/3 laiusega on üks sisu ja paremal 1/3 laiusega on esiletõstetud sisu kollakal taustal

Järgmiseks presenteerin “Contact persons” blokki

Sellega saab näiteks sündmuse lehele lisada “speakers” või kontakti lehele kontaktisikud.

Viimaseks presenteerin “Newsletter” blokki

Blokile saab lisada pealkirja ja kirjelduse vormi kõrvale. Vorm ise tekib automaatselt.