Stíluselemek a Diviben – esztétikus és egyedi design

Ha a szerkezeti elemek a helyükön vannak, akkor ideje tartalommal megtölteni és felöltöztetni őket, stílust adni nekik. A Divi ebben is a lehetőségek végtelen sorát kínálja. A letisztult, minimalista stílustól a mozgalmas, vibráló, animált megoldásokig minden megvalósítható vele. A weblapok esetén is létezik első benyomás. Nem mindegy tehát, hogy annak stílusa milyen képet közvetít a honlap tulajdonosáról, legyen szó akár magánszemélyről vagy cégről.

Biztosan tudod, hogy a különböző színek, árnyalatok más és más érzelmeket váltanak ki belőlünk, más-más tulajdonságokkal társítjuk őket. Érdemes ennek tudatában választani. Egyszerűbb design esetén a fekete és fehér színek mellé elegendő lehet egyetlen karakteres szín társítása. Cég esetén ez lehet például a fő arculati szín. De általánosságban elmondható, hogy 3-4 színnél nem ajánlott többet választani, s ezek legyenek olyanok, amelyek harmonizálnak egymással. A Diviben hexadecimális és rgba színekkel tudunk dolgozni. A színeket részben áttetszővé is tudjuk tenni. Emellett hátterek esetében lehetőség van például színátmenetek választására is. A Divi színpalettája megőrzi számodra az általad gyakran használt színeket, kaphatsz tőle színpaletta javaslatot, de akár teljesen saját ízlésed – pl. a weboldaladon használt színek – szerint átszabhatod az alap színpalettát is.

Árnyékokat is használhatsz figyelem felkeltésre vagy arra, hogy 3 dimenziós hatást adj egy elemnek. Méretük, elhelyezkedésük, színük és intenzitásuk széles skálán állítható. Itt is elfelejtheted a grafikai tervező programokat!

Az elválasztók átmenetet képeznek a különböző tartalmi blokkok között. Elválasztanak és az egész weboldal szempontjából össze is kötnek. Teheted őket a szakaszok elejére és a végére is. Egyszerű tört vonalas elválasztó, hullámvonal vagy „felhőcskés” design? A több tucat közül lehet bármelyik. Ami a honlapod általános stílusához a legjobban illeszkedik. Kombinálva őket a Divi más stílus elemeivel pedig olyan szuper design megjelenéseket alkothatsz, amikről senki nem mondaná meg, hogy nem Photoshoppal készültek.

Az egérmutató alatt megváltozó stílussal érdekessé és interaktívvá tehető a weboldal. Ez a lehetőség minden helyen rendelkezésre áll, ahol csak értelme van. Nagyszerű eszköz a felhasználói élmény növelésére!

Ha úgy döntesz, hogy nem akarsz minden tartalmat azonnal láthatóvá tenni, jó megoldás olyan dobozokban elhelyezni őket, amelyekben akár vízszintesen, akár függőlegesen is görgethetővé tehetők a szövegek.

Kedvelt megoldás a kattintásra lenyíló kapcsolók vagy harmonikák választása is, például a gyakran ismételt kérdések és az ezekre adott válaszok megmutatására.

Ez ismét egy olyan területe a Divi eszköztárának, ahol a szerkesztőből ki sem lépve hozhatsz létre Photoshop-os hatásokat. Árnyalat, telítettség, fényesség, kontraszt, invert, elmosódottság, áttetszőség, szépia – állítsd kedvedre! És használd a hátterek keveréséből adódó design lehetőségeket is!

Nem szükséges grafikai program a Diviben ahhoz sem, hogy az elemeket a tér három dimenziójának bármelyikében arrébb tegyük, elforgassuk, átméretezzük, elferdítsük, stb.

Ráadásul mindezt egy amatőrök számára is könnyen érthető és használható felületen.

A Divi elemeit animálni is tudod. Megválaszthatod az elem mozgási módját (pl. beúszik a képbe, megfordul, kibomlik, megremeg, stb.) irányát, gyorsaságát, időzítését. Eldöntheted, hogy egyszer történjen, amikor a látogató az adott elemhez ér a görgetésben vagy pedig ismétlődjön.

Itt említem meg, hogy a Divivel parallax hatás is elérhető.

A kreatív design megvalósítását segíti, hogy az egymásra helyezett elemek „takarási” sorrendjét meg tudod változtatni a z-index segítségével.

S ha még ez sem lenne elég, a különböző stíluselemeket természetesen kombinálhatod is.

A Divibe kóddal is beilleszthetsz tartalmakat. A hanganyagok és videók elhelyezéséről már volt szó. Emellett Google térképet is lehet tenni kóddal például a Kapcsolat oldalra. A közösségi médiával való összekapcsolódás is így történik, hogy a látogatóid megoszthassák a tartalmaidat ezeken a felületeken, illetve like-olják, kövessék a te közösségi média oldalaidat.

A Divi egy reszponzív sablon, így tökéletesen alkalmazkodik a weboldalad megjelenítésében ahhoz, hogy a látogató milyen eszközön (asztali gép, tablet vagy mobiltelefon) nézi. Az általad elképzelt design tökéletes megvalósítását szolgálja, hogy saját magad is be tudod állítani, hogy egy-egy elem hogyan jelenjen meg a különböző eszközökön. Eszköz specifikus tartalmakat hozhatsz létre, letilthatsz egyes tartalmakat bizonyos eszközökről. A tökéletes szabadságot kapod kézhez.

A reszponzivitás egyik eszköze a méretezés is a Diviben. S itt most nem az elemek kisebb-nagyobb megjelenítési lehetőségéről van szó, az magától értetődő.

Hanem arról, hogy a Diviben milyen mértékegységekben adhatod meg az elemek méreteit. Pixelben (px), képernyő szélességben (vw), képernyő magasságban (vh) és százalékban (%).

Ebből az elég hosszúra nyúlt felsorolásból is láthatod, a Divi mennyi lehetőséget és milyen tervezői szabadságot ad számodra egy weboldal elkészítésekor.

Ha pedig ennek ellenére nem találnál valamire megoldást, akkor ott van a Divi kód szerkesztője, amivel elem, oldal vagy az egész weboldal szintjén könnyen tudod változtatni a megjelenést. Most ez még talán elképzelhetetlennek tűnik, de hamarosan már nem lesz az.

Ezzel viszont már áttérünk a Divi szerkesztő felületére, beállításainak ismertetésére.