Kui tegeled professionaalse veebiarendusega, oled ilmselt sattunud olukorda, kus väike kujundusmuudatus tähendab ootamatult palju käsitööd. Klient soovib muuta brändivärvi, kirjasuurust või elementide vahesid ning selgub, et samu väärtusi on kasutatud kümnetel lehtedel ja sadades elementides.
Suurte veebide puhul tekib teinegi probleem: mida rohkem elemente, vidinaid ja erandeid lisandub, seda keerulisemaks muutub saidi struktuur. HTML-i koguneb tarbetuid ümbriselemente, stiilireegleid tuleb juurde ning ühtse kujunduse hoidmine muutub järjest raskemaks.
Elementor 4.0 proovib seda muuta üsna põhimõtteliselt. Uue Atomic Editori keskmes ei ole enam niivõrd valmis vidinate kasutamine, vaid väiksemad taaskasutatavad elemendid, klassid, muutujad ja komponendid.
See muudab Elementori rohkem süsteemseks veebiehituse tööriistaks. Vaatame viit olulisemat muudatust.
1. Vähem „div-suppi“ ja lihtsam lehestruktuur
Elementori varasemate versioonide üks tuntud kitsaskohti on olnud mahukas HTML-struktuur. Ühe visuaalse elemendi kuvamiseks võib brauserisse jõuda mitu üksteise sisse paigutatud div-elementi ja muud ümbrist.
Atomic Editor läheneb sellele teisiti. Uued aatomelemendid kasutavad lihtsamat struktuuri ning Elementori sõnul on eesmärk vähendada tarbetuid ümbriselemente ja muuta DOM kergemaks.
See muutub eriti oluliseks suuremate veebide puhul. Ühe elemendi juures ei pruugi erinevus tunduda märkimisväärne, kuid kui lehel on kümneid või sadu elemente, hakkab lihtsam struktuur juba rolli mängima.
Vähem koodi tähendab brauserile vähem tööd ning arendajale selgemat HTML-i.
Atomic Editor ei muuda halvasti optimeeritud veebilehte iseenesest kiireks. Jõudlust mõjutavad endiselt pildid, skriptid, server, pistikprogrammid ja palju muud. Küll aga eemaldab Elementor ühe osa tarbetust struktuursest koormusest.
2. Muutujad ja klassid muudavad disainisüsteemi päriselt hallatavaks
Elementor 4.0 üks olulisemaid muudatusi on see, et kujundust saab senisest rohkem juhtida keskelt.
Selleks kasutatakse muutujaid ehk Variables’e ja klasse ehk Classes’e.
Muutujasse saab salvestada näiteks:
- värvi;
- kirjastiili;
- suuruse;
- vahe või muu korduvalt kasutatava väärtuse.
Oletame, et ettevõtte põhivärv on kasutusel nuppudel, linkidel, taustadel ja mitmes komponendis. Kui igas kohas on eraldi HEX-väärtus, tuleb brändivärvi muutmisel hakata neid kohti ükshaaval otsima.
Kui kõik kasutavad sama muutujat, piisab ühe väärtuse muutmisest.
Sama loogika kehtib klasside puhul. Võid luua näiteks kindla nupustiili ja kasutada sama klassi kümnetel või sadadel elementidel. Kui klassi hiljem muudad, kandub muudatus kõikjale, kus seda kasutatakse.
See ongi disainisüsteemi suur eelis: sa ei kujunda enam iga elementi eraldi, vaid lood reeglid, mille järgi kogu veeb töötab.
Ühtne Style Tab
Atomic Editor koondab visuaalsed seaded ühtsesse Style Tabi. Varasema süsteemi puhul võis eri vidinatel olla üsna erinev seadete ülesehitus. V4-s on stiilihalduse loogika elementide vahel ühtlasem.
Oluline muutus on ka responsiivne kujundamine. Stiile saab määrata eri ekraanisuurustele eraldi, mis annab märksa rohkem kontrolli selle üle, kuidas sama element töötab arvutis, tahvelarvutis ja telefonis.
3. Vormid ja vahelehed ei ole enam kinnised vidinad
Varasemas Elementoriga töötamise loogikas olid keerukamad vidinad sageli üsna jäigad. Vorm oli vorm ja vaheleht oli vaheleht – neid sai seadistada, kuid nende sisemist struktuuri ei saanud alati vabalt ümber ehitada.
Atomic Editor muudab selle põhimõtte paindlikumaks.
Näiteks Atomic Form koosneb eraldi elementidest. Vormi silt, sisestusväli, märkeruut, raadionupp ja saatmisnupp on iseseisvad osad, mida saab eraldi paigutada ja kujundada.
Vormi sisse saab lisada ka muid elemente, näiteks:
- teksti;
- ikoone;
- pilte;
- paigutuskonteinereid.
See teeb võimalikuks vormid, mille puhul ei pea enam töötama ühe monoliitse vidina etteantud struktuuri järgi.
Sarnane põhimõte kehtib Atomic Tabsi puhul. Vahelehe sisu ei piirdu enam üksnes etteantud tekstiväljaga, vaid selle sisse saab ehitada märksa keerukama paigutuse.
Interactions lisab liikumise samasse süsteemi
V4 toob kaasa ka Interactions-funktsiooni, millega saab määrata elementide käitumist näiteks kerimise, hiirega üle liikumise või klõpsamise korral.
See tähendab, et lihtsamate interaktsioonide jaoks ei pea tingimata kasutama eraldi lahendust või kirjutama kohandatud JavaScripti.
Näiteks saab panna elemendi ilmuma kasutaja kerimise ajal, reageerima hiirega üle liikumisele või muutuma klõpsamisel.
Oluline on seegi, et interaktsioone saab kohandada ekraanisuuruse järgi. Lauaarvutis toimiv efekt ei pea tingimata mobiilis samamoodi käituma.
4. Komponendid vähendavad korduvat tööd
Kui ehitad suuremat veebilehte, korduvad samad elemendid pidevalt: teenusekaardid, hinnapaketid, tegevuskutsed, töötajate profiilid, tootekaardid ja muud plokid.
Elementor 4.0 Components võimaldab sellise elemendi ühe korra valmis ehitada ning seejärel seda kogu saidil taaskasutada.
Oluline erinevus tavalisest kopeerimisest on see, et komponendi eksemplarid on seotud algse komponendiga. Kui muudad komponendi põhistruktuuri või kujundust, saab muudatus rakenduda kõigile selle kasutuskohtadele.
Samas saad määrata, millised väljad jäävad iga eksemplari puhul muudetavaks.
Näiteks võib teenusekaardi puhul lubada muuta:
- pealkirja;
- kirjeldust;
- pilti.
Samas võib kaardi paigutus, tüpograafia ja üldine stiil jääda komponendi tasandil paika.
See on eriti kasulik agentuuridele ja meeskondadele. Klient või sisuhaldur saab muuta vajalikku sisu, ilma et tal oleks põhjust iga kord komponendi kujundust lahti võtta.
Tulemuseks ei ole ainult ühtlasem disain, vaid ka vähem parandustööd.
Angie AI töötab koos uue süsteemiga
Atomic Editoriga on seotud ka Elementori AI-assistent Angie.
Angie abil saab loomulikus keeles luua muu hulgas klasse, muutujaid, vorme ja muid Atomic Editori struktuure. Samuti saab AI analüüsida olemasoleva kujunduse visuaalset stiili ning aidata selle põhjal luua taaskasutatavaid klasse ja muutujaid.
Siin on AI väärtus üsna praktiline: see võib vähendada esialgsele ülesehitusele kuluvat käsitööd. Lõplik struktuur ja kujundus jäävad siiski arendaja kontrolli alla.
5. V3 ja V4 võivad töötada kõrvuti
Kõige praktilisem küsimus olemasoleva Elementori veebi puhul on ilmselt see: kas nüüd tuleb kõik uuesti ehitada?
Ei tule.
Elementor 4.0 on üles ehitatud nii, et klassikalised V3 vidinad ja uued V4 aatomelemendid võivad töötada samal veebilehel kõrvuti.
Olemasoleva saidi uuendamine Elementor 4.0-le ei muuda seda automaatselt aatomsüsteemile ümber. Olemasolevatel veebidel saab Atomic Editori kasutusele võtta eraldi ning uut töövoogu järk-järgult rakendada.
See tähendab, et kogu saiti ei pea ühe projektina ümber ehitama.
Võid näiteks jätta olemasolevad lehed praegusele lahendusele, kuid ehitada uue maandumislehe juba muutujate, klasside ja aatomelementidega. Edaspidi saab uut süsteemi kasutada seal, kus sellest kõige rohkem kasu on.
Selline üleminek on mõistlik ka agentuuridele. Uut arhitektuuri saab esmalt katsetada väiksema projekti või üksiku lehe peal, ilma et kogu olemasolevat kliendisaiti peaks korraga muutma.
Kokkuvõte: Elementor liigub leheehitajast disainisüsteemi poole
Elementor 4.0 suurim muutus ei ole üks uus vidin ega efekt. Olulisem on muutus selles, kuidas veebilehte tervikuna üles ehitatakse.
Atomic Editor toob Elementorisse tööpõhimõtted, mis on suuremate veebiprojektide puhul juba ammu tuttavad:
- väiksemad ja taaskasutatavad elemendid;
- keskelt hallatavad muutujad;
- korduvkasutatavad klassid;
- komponendid;
- ühtsem stiilihaldus;
- lihtsam HTML-struktuur.
See võib tunduda väikese erinevusena seni, kuni haldad mõne lehega veebisaiti. Kümnete või sadade lehtedega saidil muutub aga küsimus kiiresti selles, kas iga muudatust tuleb teha kümnes kohas või piisab ühest.
Just selles peitub Elementor 4.0 kõige suurem lubadus: vähem üksikute elementide käsitsi sättimist ja rohkem süsteemi, mida saab järjepidevalt kasutada kogu veebis.
Kui ehitad Elementoris ainult ühe väikese veebilehe, ei pruugi sul olla põhjust kogu töövoogu kohe muuta. Kui aga haldad suuremaid saite, korduvaid kujundusi või mitut kliendiprojekti, tasub Atomic Editoriga kindlasti tutvuda.
