Șabloane (layout-uri)
Șabloanele (Layouturile) permit utilizatorilor platformei Itotem Digital Signage CMS să creeze conținut multimedia personalizat, combinând mai multe elemente media într-un singur design, destinat afișării pe ecrane.
Un șablon reprezintă o suprafață de lucru editabilă, cu dimensiuni fixe, în care poți adăuga, poziționa și redimensiona diferite elemente de conținut, denumite widgeturi.
Prin utilizarea șabloanelor, poți combina imagini, videoclipuri, texte, documente PDF și pagini web interactive, obținând un design adaptat nevoilor tale de comunicare.
1. Interfața editorului de șabloane
Pagina de creare și administrare a unui șablon este împărțită în trei zone funcționale:
- Zona butoanelor de acțiune (2.1) – conține comenzile necesare pentru administrarea și salvarea șablonului.
- Zona Canvas (Pânza de lucru) (2.2) – reprezintă suprafața pe care construiești designul și poziționezi elementele multimedia.
- Zona de setări Canvas și Widget(2.3) – permite configurarea dimensiunilor, pozițiilor și proprietăților vizuale ale elementelor selectate.
Editorul oferă o reprezentare vizuală a designului, astfel încât să poți observa modul în care elementele vor fi afișate pe ecranul final.
2. Configurarea rezoluției șablonului
Fiecare șablon trebuie creat și salvat folosind rezoluția ecranului pe care urmează să fie afișat (3.1).
Este important să configurezi corect atât dimensiunile, cât și orientarea designului, pentru ca elementele să fie poziționate corespunzător pe dispozitivul final.
Dacă nu cunoști rezoluția ecranului, o poți identifica în zona de informații a Cardului ecran din platforma CMS.
2.1. Exemplu – ecran Full HD în orientare portret
Pentru un ecran Full HD instalat în orientare verticală, configurează următoarea rezoluție:
- Lățime: 1080 pixeli
- Înălțime: 1920 pixeli
După introducerea dimensiunilor, zona Canvas se redimensionează automat pentru a simula proporțiile ecranului pe care va fi afișat șablonul.
Astfel, poți construi designul direct în formatul și orientarea dispozitivului final.
2.2. Ajustarea nivelului de zoom
În funcție de rezoluția șablonului și de dimensiunile monitorului pe care lucrezi, este posibil ca întreaga suprafață Canvas să nu fie vizibilă simultan.
Pentru a ajusta afișarea, utilizează bara de Zoom disponibilă în editor.
Aceasta permite:
- Micșorarea suprafeței de lucru pentru a vizualiza întregul design.
- Mărirea suprafeței pentru a edita mai ușor detaliile.
- Adaptarea vizualizării la dimensiunile monitorului utilizat.
Important: Modificarea nivelului de Zoom afectează exclusiv modul în care Canvas-ul este afișat în editor. Rezoluția și dimensiunile reale ale șablonului rămân neschimbate, iar designul final nu este influențat.
3. Adăugarea conținutului într-un șablon
La crearea unui șablon nou, suprafața Canvas este inițial goală.
Dacă un astfel de șablon este asociat unui ecran fără a conține elemente media, dispozitivul va afișa o suprafață complet neagră.
Pentru a construi designul, trebuie să adaugi unul sau mai multe widgeturi.
3.1. Tipuri de widgeturi disponibile
Editorul permite utilizarea următoarelor tipuri de elemente:
| Tip widget | Funcționalitate |
|---|---|
| Imagine | Afișează o imagine selectată din biblioteca Media a contului. |
| Video | Redă un fișier video din biblioteca Media. |
| Text | Afișează un text personalizat, cu opțiuni de formatare vizuală. |
| Afișează prima pagină a unui document PDF încărcat în biblioteca Media. | |
| Website | Afișează o pagină web interactivă, pe baza adresei URL introduse. |
Fiecare tip de widget dispune de propriile setări, adaptate conținutului pe care îl afișează.
3.2. Adăugarea unui widget pe Canvas
Pentru a adăuga un element multimedia:
- Identifică tipul de widget dorit în zona de selecție.
- Apasă pe Cardul widgetului corespunzător. (5.1)
- Editorul adaugă automat un chenar nou pe suprafața Canvas. (5.2)
- Selectează chenarul pentru a accesa setările elementului. (5.2)
- Configurează conținutul, poziția și dimensiunile widgetului. (5.3)
Chenarul reprezintă zona în care va fi afișat conținutul media.
Materialul asociat widgetului este încadrat în interiorul acestei suprafețe și nu va depăși vizual limitele definite.
Poți muta și redimensiona chenarul pentru a adapta poziționarea elementului în design.
4. Selectarea și editarea widgeturilor
Pentru a modifica un widget existent, apasă pe chenarul acestuia din zona Canvas.
Atunci când widgetul este selectat:
- Chenarul este evidențiat prin borduri colorate, indicând faptul că elementul se află în modul de editare.
- Zona laterală de setări afișează automat proprietățile widgetului selectat.
- Poți modifica poziția, dimensiunile și setările specifice tipului de conținut.
Controalele de navigare între widgeturi (6.1) permit selectarea rapidă a widgetului anterior sau următor din șablon.
La utilizarea acestor controale, widgetul corespunzător este selectat și evidențiat automat în zona Canvas, iar panoul lateral afișează setările specifice acestuia.
Fiecare widget are atât proprietăți comune, cât și opțiuni individuale, în funcție de tipul său.
4.1. Proprietăți comune ale widgeturilor
Toate widgeturile permit configurarea unor proprietăți de bază (7.1):
- Poziția X – stabilește poziționarea orizontală a elementului pe Canvas.
- Poziția Y – stabilește poziționarea verticală a elementului pe Canvas.
- Lățimea – definește dimensiunea orizontală a chenarului.
- Înălțimea – definește dimensiunea verticală a chenarului.
Poziționarea se realizează într-un sistem de coordonate cartezian (X, Y), raportat la suprafața de lucru.
Aceste setări permit amplasarea precisă a widgeturilor, inclusiv atunci când dorești să construiești un design cu mai multe zone de conținut aliniate.
5. Configurarea unui widget Imagine
Widgetul Imagine permite afișarea unui fișier grafic din biblioteca Media a contului.
Pentru a configura un astfel de element:
- Apasă pe cardul Imagine pentru a adăuga widgetul pe Canvas. (8.1)
- Selectează chenarul nou creat. (8.2)
- În zona laterală de setări, apasă butonul dedicat selectării imaginii. (8.3)
- Editorul deschide biblioteca Media, filtrată automat pentru a afișa numai fișierele de tip imagine.
- Selectează o singură imagine (9.1).
- Confirmă selecția. (9.2)
Imaginea aleasă va fi afișată automat în interiorul chenarului widgetului.
5.1. Încadrarea imaginii în widget
După selectarea fișierului, zona de setări oferă controale specifice pentru modul de încadrare a imaginii.
Acestea permit ajustarea felului în care imaginea este afișată în interiorul chenarului, în funcție de proporțiile sale și de dimensiunile widgetului.
Poți modifica dimensiunile și poziția chenarului pentru a obține compoziția dorită.
După salvarea șablonului și distribuirea acestuia către un ecran, imaginea va fi afișată în aceeași poziție și cu aceleași proporții configurate în editor.
6. Configurarea unui widget Video
Widgetul Video permite includerea unui fișier video din biblioteca Media în designul șablonului.
Pentru a adăuga un videoclip:
- Apasă pe cardul Video. (10.1)
- Editorul creează un nou chenar pe Canvas. (10.1)
- Selectează chenarul pentru a afișa setările dedicate. (10.1)
- Utilizează butonul de selecție media pentru a deschide biblioteca contului. (10.3)
- Alege fișierul video dorit.
- Ajustează poziția și dimensiunile widgetului.
Fișierul video va fi redat în zona definită de chenar, conform configurației șablonului.
6.1. Utilizarea mai multor elemente multimedia
Poți continua să adaugi imagini, videoclipuri și alte widgeturi în același șablon.
Platforma permite astfel construirea unor compoziții multimedia complexe, cu mai multe zone de afișare.
Totuși, numărul de elemente care pot fi redate simultan depinde de performanța dispozitivului de redare.
Important: Capacitatea de a reda simultan mai multe videoclipuri sau elemente multimedia complexe poate varia în funcție de echipamentul utilizat. Pentru șabloanele cu multe widgeturi, verifică performanța designului pe dispozitivul final.
7. Ordinea de suprapunere a widgeturilor
Atunci când un șablon conține două sau mai multe widgeturi, chenarele acestora se pot suprapune parțial sau complet. (11.2)
În această situație, ordinea de afișare a widgeturilor determină care element va fi vizibil deasupra celorlalte.
Poți privi această organizare ca pe un teanc de foi suprapuse: fiecare widget reprezintă o foaie, iar poziția sa în teanc determină dacă apare în fața sau în spatele celorlalte elemente.
Editorul oferă controale dedicate pentru modificarea ordinii de suprapunere. (11.2)
Prin intermediul acestora, poți muta un widget mai sus sau mai jos în ordinea de afișare.
Exemplu:
Poți construi un design în care:
- O imagine ocupă întreaga suprafață Canvas și funcționează ca fundal.
- Un videoclip este afișat într-o zonă centrală.
- Un widget Text este poziționat peste imagine.
- O pagină web interactivă ocupă o altă regiune a ecranului.
Prin ajustarea ordinii de suprapunere, poți controla modul în care aceste elemente se combină vizual.
8. Salvarea și actualizarea șabloanelor
După finalizarea designului, salvează șablonul pentru a păstra configurația widgeturilor și a suprafeței Canvas. (12.1)
Orice modificare ulterioară a unui șablon salvat poate afecta toate ecranele care îl utilizează.
De exemplu, poți modifica:
- Poziția sau dimensiunile unui widget.
- Imaginea sau videoclipul asociat.
- Proprietățile vizuale ale unui element.
- Ordinea de suprapunere a widgeturilor.
- Setările suprafeței Canvas.
După salvare, configurația actualizată este sincronizată automat cu ecranele care utilizează șablonul.
9. Comportamentul ecranelor online și offline
Sincronizarea modificărilor depinde de conexiunea la internet a dispozitivelor.
- Ecrane online – primesc automat modificările salvate și actualizează designul afișat.
- Ecrane offline – continuă să utilizeze versiunea stocată local, urmând să preia configurația actualizată la reconectarea la internet.
Important: Modificarea unui șablon existent afectează toate ecranele care îl utilizează. Dacă dorești un design diferit pentru un anumit ecran, ia în considerare crearea unui șablon separat.
10. Utilizarea șabloanelor pentru experiențe interactive
Prin combinarea widgeturilor multimedia cu un ecran tactil și cu pagini web interactive, poți transforma un afișaj digital obișnuit într-o experiență interactivă.
De exemplu, integrarea unei aplicații web precum Invarte.ro într-un widget Website poate permite dezvoltarea unor campanii digitale în care utilizatorii interacționează direct cu conținutul afișat.
Roata digitala personalizabilă - invarte.ro
Aceste soluții pot fi utilizate pentru:
- Campanii promoționale interactive.
- Experiențe digitale pentru vizitatori.
- Prezentări multimedia.
- Puncte de informare și interacțiune.
- Activări de marketing și comunicare.
Notă: Funcționalitățile interactive depind de pagina web integrată și de capacitățile dispozitivului pe care este afișat șablonul.
11. Asocierea unui șablon cu un ecran
După crearea și salvarea șablonului, acesta poate fi asociat unui ecran compatibil pentru a fi utilizat ca design de afișare.
Pentru instrucțiuni privind configurarea și distribuirea unui șablon către un dispozitiv, consultă documentația dedicată:
Setarea unui Layout – Ecran tip Afiș Dinamic
Recomandare: Înainte de distribuirea unui șablon către mai multe ecrane, verifică rezoluția, orientarea și performanța designului pe un dispozitiv reprezentativ. Astfel, te poți asigura că toate widgeturile sunt afișate corect și că echipamentul poate reda conținutul multimedia configurat.