Comparison slider, Carousel, Curved Boxes Menu, Accordion... #2021-08

Klik MALL CMS (Content Management System), s katerim postavljamo spletne strani in spletne trgovine, smo dopolnili z nekaj popularnimi elementi (widgets). Nekateri so povzeti iz odprtokodnih skript, nekatere pa smo razvili sami. 



Bi si tudi vi želeli strani, kjer developerji redno objavljajo nadgradnje, ki jih ni potrebno vedno plačati?

Preberite na dnu strani par besed o tem, kako deluje Klik MALL in kako lahko prihanite na stroških razvoja vaše strani.

Comparison Slider (Desktop)

Odličen pripomoček za prikaz primerjav (Before vs. After; Inside vs. Outside...)

Inside
Outside

Tako urejen Slider je bolj prilagojen računalniškim zaslonom in prikazu slik formata 16:9 (npr. 1920x1080px). Za primerjavo je spodaj tudi Slider (Mobile), ki pa je bolje prilagojen mobilniku v portrait postavitvi.

Nasvet: Ena izmed možnosti je, da se v stran vnese 2 sliderja, prikaže pa tistega, ki je bolje prilagojen zaslonu uporabnika.

Comparison Slider (Mobile)

Na tej strani je tudi primer Comparison sliderja, prilagojen prikazu na mobilnih napravah, a je skrit. V željeni obliki (Screenshot) ga lahko vidite, če odprete to stran na vašem mobilniku ali zožate okno brskalnika.

Če želite videti, kako je videti slider neustreznih proporcij glede na velikost zaslona, ga pa lahko razprete tudi tukaj:

PRIKAŽI Mobile Slider

Carousel

Implementrali smo znani in preverjeni Slick carousel widget. Odličen pripomoček za npr. predstavitve sceenshot-ov aplikacije (primer: ZOIA Beta), slik artiklov v trgovini na mobilnih napravah ipd.




Nastavitev: 1 slide/stran




Nastavitev: Default: 2x slide/stran + 1x slide/stran na mobile

Curved Boxes Menu

Ta element smo sprva izdelali za navigacije za Restavracijo Mirje (Screenshot - Mirje Menu) in Free-DOM. Uporaben je kot menu ali dodatek pri predstavitvi vsebine.

Demo: 'Curved boxes' se na desktopih prikažejo kot 4 v vrsto, na mobile zaslonih pa 2 v vrsto.





Accordion

Primer uporabe: prezentacija za ZOIA Beta App.

Accordion je odličen element za predstavitev vsebin...

na vseh velikosti zaslona, še posebej pa na mobilnih napravah.

Bullet-naslovi prikažejo uporabniku glavne točke...

S klikom na posamezni naslov pa se mu razkrije dodatne infomacije posamezne točke.

Če bi bila vsa vsebina accordion-a prikazana takoj,

je lahko besedila preveč in uporabnik enostavno ne prebere ničesar.

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.

Naslovi kot kazalo. Dodatne info pa v zaprtem predalu.

Odprli ste "predal"

Circled Data-box

Primer uporabe: Screenshot - Blog

Uporabnikov želi opraviti nakup v svojem jeziku
40%
Obiskovalcev raje vidi, da je vsebina strani predstavljena v njihovem jeziku
65%

Zoom-in Image

  • Zoom-In Background Image + hide overflow
  • Zoom-In Image + grayscaled filter

* Zoom na mouse-over ne deluje na mobilnih napravah, ker mobilne naprave ne registrirajo :hover

Circled lists

  1. Klik MALL Blagajna za vaše podjetje
  2. Lorem Ipsum is simply dummy text
  3. of the printing and typesetting industry
  4. Lorem Ipsum has been the industry's
  5. standard dummy text ever
  6. since the 1500s


  1. BIG circles + Template colors
  2. Lorem Ipsum 2
  3. Lorem Ipsum 3
  4. Lorem Ipsum 4


Pri razvoju Klik MALL platforme pogosto razvijemo nek gradnik ali oblikovni slog, ki je uporaben tudi za druge projekte oz. vidimo, da bo iskan v prihodnje. Takšne elemente vključimo v skupni del sistema, kjer jih nato lahko uporabimo za izboljšave strani obstoječih strank in pri izdelavi strani za nove.

Razlika med takšno "živo" platformo in samostoječimi spletnimi stranmi (običajno na WordPress ali Magento) je, da mora lastnik strani vse nadgradnje:

  1. Poiskati, inštalirati in občasno tudi popravljati sam (npr. "Wordpress site down after update; Magento site is slow).
  2. Naročiti implementacijo oz. razvoj pri programerju ali oblikovalcu.

Zelo malo ali nič se ne bo nadgradilo brez vložka vašega dela, časa in denarja.

Ta objava je prikaz sistema, ki deluje nekoliko drugače. Skrb za sistem 24/7 (varnost, delovanje, kakovost gostovanja) je tudi naša, ne le vaša. Stalno dodajamo nove funkcionalnosti in izboljšave, marsikakšno nadgradnjo naredimo brezplačno.

WordPress je odličen sistem (nad Magentom smo bistveno manj navdušeni). Ima pa upravljanje spletne strani ali trgovine mnoge dodatne zahteve, ki jih nekaj let nazaj ni bilo.

Če vam vse večje zahteve po tehničnem znanju in cene nadgradenj postajajo (pre)veliko breme in znižujejo užitek pri opravljanju vašega dela, se priporočamo za posvet.