Uzorci: Usluge i projekti
Kartice usluga i izvedenih projekata — mreže, karuseli, foto-kartice. Prvo V3 verzije (referenca za oko), zatim atomic (ono što koristi motor). Ispod svakog uzorka piše od čega je složen.
V3 — standardni Elementor
Složeno klasičnim Elementor widgetima (Heading, Icon, Image, Button, Container) uz malo CSS-a. Referenca za oko.
Uzorak 01 — Usluge, kartice s izrezom
Naše usluge
Grijanje i hlađenje kako treba
Od hitnog popravka isti dan do dizalice topline za cijelu kuću — jedna ekipa za svako godišnje doba.
Ugradnja dizalice topline
Zračne i split dizalice topline dimenzionirane za vaš dom, uz pomoć oko poticaja.
Popravak i zamjena klima uređaja
Brza dijagnoza, iskrene opcije i popravak isti dan za sve marke klima uređaja.
Servis kotlova i bojlera
Redoviti servis, sigurnosne provjere i popravci da grijanje radi cijelu zimu.
Kvaliteta zraka u prostoru
Pročišćivači, ovlaživači, ventilacija i čišćenje kanala za zdraviji zrak.
S čime je napravljen
Izvor: https://demo.modeltheme.com/thermnova/ — Tamo je cijela sekcija jedan widget teme (mtfe-solaris-services-core) — kod nas ga nema, pa je složena od postojećih elemenata.
- Naslov sekcije: Elementor Heading (oznaka, klasa
ap-oznaka— pilula i pulsirajuća točka su CSS) + Heading H2 + Text Editor. - Kartice usluga: Container kao poveznica (
<a>, klasaap-kartica) > Icon (ap-kartica__krug) + unutarnji Container (ap-kartica__ploha) s Heading H3, Text Editor i Image. - Izrez u kutu: CSS
mask: radial-gradient(…)na pločici — krug stoji u izrezu, izvan maske. - Hover: kartica se podigne s mekom sjenom (
drop-shadow), krug iz tamnog u bijeli s plavom ikonom, slika se poveća 5 %. Isto na fokus tipkovnicom; bez animacija ako ih korisnik ugasi. - Gumb: Elementor Button, zaseban element (nije dio kartica).
Svijet: v3 · Pravilo: 3–6 usluga, svaka ima vlastitu fotografiju i stvarnu stranicu na koju kartica vodi; bez fotografija se ne koristi.
Radi postojećim elementima, ali je krhko: šest elemenata po kartici i CSS klase koje motor mora točno pogoditi. Prijedlog: naš element aipress-kartice-usluga, izgled „izrez s krugom”.
Uzorak 02 — Usluge, slika s pločicom
Usluge solarne energije
Pouzdana, obnovljiva i isplativa energija
Prijeđite na sunce: niži računi, čista energija i stručan servis za domove, tvrtke i sve između.
S čime je napravljen
Izvor: https://solaria.bravisthemes.com/home-4/ — Tamo je to widget teme pxl_post_grid — kartice automatski vuku objave tipa „usluga” (naslov, sažetak, istaknuta slika).
- Naslov sekcije: isti element kao u uzorku 01, varijanta
ap-oznaka--obicna(oznaka bez pilule i točke). - Kartice usluga: Container kao poveznica (
ap-kartica ap-kartica--plocica) > Image 1:1 + Container pločica (ap-kartica__plocica) s Icon (žuti krug sa strelicom), Heading H3 i Text Editor. - Pločica: negativna gornja margina (−100 px) pa prelazi preko slike; krug je na gornjem rubu pločice.
- Hover: sporo povećanje slike (1,5 s, 120 %), kao na originalu.
- Gumb: Elementor Button, zaseban element.
Svijet: v3 · Pravilo: 3 usluge u redu; svaka treba kvadratnu fotografiju i vlastitu stranicu; tekst kratak (do ~80 znakova) jer pločica prekriva sliku.
Ista građa kao uzorak 01, drugi izgled — dokaz da je aipress-kartice-usluga jedan element s izborom izgleda, a ne element po dizajnu. Treba znati i vući objave tipa „usluga” umjesto ručnih kartica.
Uzorak 06 — Projekti, karusel s veom
Naši solarni projekti
Svjetlija budućnost uz čistu energiju
Pogledajte naše najnovije instalacije — od obiteljskih krovova do poslovnih sustava, svaka složena za najveću učinkovitost.
S čime je napravljen
Izvor: https://solaria.bravisthemes.com/home-4/ — Tamo widget teme pxl_post_carousel nad objavama tipa „portfolio”.
- Naslov sekcije: Heading (oznaka) + Heading H2 + Text Editor.
- Karusel: Pro Nested Carousel 3 / 2 / 1, žute strelice, bez točkica; svaki slajd je Container kao poveznica s pozadinskom slikom: Icon strelica + Heading H3 + Text Editor kategorija.
- Hover: tamnoplavi veo 50 %, kategorija izađe ispod naslova, slika se poveća 20 % (1,5 s) — sve na hover cijele kartice.
Svijet: v3 · Pravilo: Samo stvarni projekti s vlastitom fotografijom; 3–8 projekata; naziv kratak (do ~30 znakova).
Radi s Pro elementom + CSS. Pravi izvor bi bile objave tipa „projekt” (Pro Loop Carousel) — to je posao za naš element ili Loop predložak.
Uzorak 07 — Usluge, foto-kartice s ikonom na hover
Na čemu radimo
Sve za ugodan dom
Od jedne hladne sobe do cijele kuće — grijemo, hladimo i čistimo zrak u svakom domu.
S čime je napravljen
Izvor: https://demo.modeltheme.com/thermnova/ — Tamo widget teme mtfe-brand-showcase; ikona na hover je PNG koji izlazi iz kartice.
- Naslov sekcije: isti kao uzorak 01 (oznaka s točkom + H2 + uvod); pozadina sekcije je fina mreža iz CSS gradijenata.
- Kartice: red Containera 4 / 2 / 1 > kartica Container kao poveznica, pozadinska slika 3:4 > Icon (skrivena, u sredini) + Heading H3 na dnu.
- Hover: fotografija se zatamni i poveća 6 %, naslov izblijedi prema gore, velika bijela ikona iskoči iz sredine s laganim odskokom, kartica dobije duboku sjenu. Isto na fokus tipkovnicom.
- Gumb: Elementor Button, zaseban.
Svijet: v3 · Pravilo: 3–4 glavne usluge; svaka treba tamniju, atmosfersku fotografiju (bijeli naslov mora biti čitljiv) i ikonu koja je jasno opisuje.
Radi postojećim elementima + CSS. Fotografije moraju biti tamnije (noćne, atmosferske) da bijeli naslov bude čitljiv — pravilo za odabir fotki.
Uzorak 10 — Usluge s animiranim ilustracijama
Kako vam možemo pomoći
Tri načina na koja domove održavamo ugodnima. Odaberite što vam odgovara ili nas pitajte da pomognemo odlučiti.
Ugradnja dizalice topline
Dizalica topline za hladnu klimu, dimenzionirana za vaš dom i ugrađena u jedan do dva dana, uz pomoć oko poticaja.
Zamjena sustava grijanja
Zamijenite stari kotao ili ga spojite s dizalicom topline za niže račune i ravnomjerniju toplinu.
Servis i popravci
Godišnji servis, popravak isti dan za sve marke i planovi koji čuvaju jamstvo.
S čime je napravljen
Izvor: https://demo.modeltheme.com/thermnova/ — Tamo widget teme mtfe-home-services. Ilustracije ovdje su naše (nacrtane u istom stilu), ne preuzete.
- Kartice: red Containera 3 > bijela kartica: HTML (SVG ilustracija), Heading H3, Text Editor, poveznica sa strelicom (cijela kartica klikabilna).
- Animacija: na hover: ventilator se vrti, linije zraka i topline teku, ključ se njiše, kvačice se „crtaju”; kartica se podigne, strelica pomakne.
Svijet: v3 · Pravilo: Za uslužne djelatnosti s 2–4 glavne usluge; ilustracija mora odgovarati usluzi (biblioteka naših SVG ilustracija), boje iz kita.
Atomic ne može (@keyframes, SVG s animiranim dijelovima). Vrijednost je u biblioteci naših ilustracija po djelatnosti — prijedlog: naš element aipress-ilustracija + set SVG-ova.
Uzorak 11 — Usluge, kartice koje se ispune bojom
Naše usluge
Usluge koje pružamo
Nudimo cijeli raspon savjetovanja i edukacija — analizu podataka, poslovno savjetovanje i strategije za nove poslovne pothvate.
Financijska analiza
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
Upravljanje novcem
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
Računovodstveni izvještaji
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
Nudimo i mnogo drugih usluga — pogledajte sve usluge
S čime je napravljen
Izvor: https://demo.bravisthemes.com/bizznep/ — Tamo widget teme pxl_post_carousel (layout service-carousel4) nad objavama tipa usluga.
- Naslov sekcije: puna pilula u boji + H2 + uvod.
- Kartice: red Containera 4/2/1, neparne pomaknute 53 px niže > bijela kartica: Heading broj u pilulici, Icon, Heading H3, Text Editor opis i „Pročitaj više”.
- Hover: kartica se ispuni naglasnom bojom, sav tekst i ikona postanu bijeli (broj ostaje bijela pilula), „Pročitaj više” iskliže dolje i vrati se.
Svijet: v3 · Pravilo: 3–6 usluga s kratkim opisom (do ~90 znakova) i ikonom; boja ispune = naglasna boja kita.
Radi postojećim elementima + CSS, a gotovo cijeli efekt radi i u atomicu — vidi atomic verziju.
Uzorak 13 — Usluge 2×2 s bannerom
Naše usluge
Pouzdane usluge za vize i useljenje, uz stručno vodstvo
Stalni boravak
Stručna pomoć u postupku za stalni boravak u raznim zemljama — pripremimo svu potrebnu dokumentaciju.
Pomoć nakon dolaska
Prijava boravišta, bankovni račun, zdravstveno — sve što treba u prvim tjednima u novoj zemlji.
Studentske vize
Od upisa do vize: vodimo vas kroz cijeli postupak za studij u inozemstvu.
Zahtjev za useljenje
Procjena uvjeta, prikupljanje dokumenata i praćenje zahtjeva do odluke.
Agencija
br. 1
Radimo s 30 zemalja
S čime je napravljen
Izvor: https://demo.bravisthemes.com/visora/ — Tamo widgeti teme pxl_icon_box (layout 8) i pxl_banner_box (layout 2).
- Kartice: 2×2 Containera: Icon u crvenom krugu, Heading H3, Text Editor opis i „Saznajte više ↗”.
- Hover: kartica se ispuni crvenom, sav tekst postane bijel, krug ikone postane proziran s unutarnjim sjajem.
- Banner: visoki Container s pozadinskom slikom; gore lijevo crvena oznaka „Agencija br. 1″ u izrezanom kutu (okvir u boji sekcije); dolje bijela kartica s okruglim zastavicama (CSS, ne slike) i „Radimo s 30 zemalja”.
Svijet: v3 · Pravilo: 4 usluge + jedna snažna fotografija i stvarna tvrdnja za oznaku (nagrada, broj zemalja/klijenata); bez tvrdnje banner ide bez oznake.
Postojeći elementi + CSS. Banner je dobar „dokaz povjerenja” uz usluge — pravilo: samo stvarna tvrdnja klijenta.
Uzorak 16 — Usluge, foto-kartice sa zastorom
Naše usluge
Usluge koje pružamo
Savjetovanje i edukacije za analizu podataka, poslovno savjetovanje i strategije za nove poslovne pothvate.
Provedba poslovnih ideja
Financijske projekcije
Priprema za investitore
Nudimo i mnogo drugih usluga — pogledajte sve usluge
S čime je napravljen
Izvor: https://demo.bravisthemes.com/bizznep/home-3/ — Tamo widget teme pxl_post_carousel (layout service-carousel3).
- Kartice: red 3 Containera s pozadinskom slikom i tamnim gradijentom: Icon u bijelom krugu gore, veliki bijeli Heading dolje, skriveni gumb (Text Editor).
- Hover: tamni zastor klizne slijeva preko fotke, krug ikone pozeleni s bijelom ikonom, iz dna izroni bijeli gumb „Pročitaj više”.
Svijet: v3 · Pravilo: 3 usluge s fotografijama ljudi na poslu; naslov kratak (2–4 riječi) jer je velik.
Postojeći elementi + CSS. Efektan uzorak za 3 glavne usluge.
Atomic — Elementor 4
Isti uzorci složeni atomic elementima kroz build-composition, s globalnim varijablama boja. Ovo motor koristi.
Uzorak 01 — Usluge, kartice s izrezom (atomic)
Naše usluge
Grijanje i hlađenje kako treba
Od hitnog popravka isti dan do dizalice topline za cijelu kuću — jedna ekipa za svako godišnje doba.
Ugradnja dizalice topline
Zračne i split dizalice topline dimenzionirane za vaš dom, uz pomoć oko poticaja.
Popravak i zamjena klima uređaja
Brza dijagnoza, iskrene opcije i popravak isti dan za sve marke klima uređaja.
Servis kotlova i bojlera
Redoviti servis, sigurnosne provjere i popravci da grijanje radi cijelu zimu.
Kvaliteta zraka u prostoru
Pročišćivači, ovlaživači, ventilacija i čišćenje kanala za zdraviji zrak.
S čime je napravljen
Izvor: https://demo.modeltheme.com/thermnova/ — Isti uzorak kao V3 verzija, složen kroz elementor/build-composition — istim putem kojim gradi AIPRESS motor. 0 upozorenja.
- Naslov sekcije: e-flexbox oznaka (e-div-block točka + e-paragraph) + e-heading H2 + e-paragraph.
- Kartice usluga: e-grid 4 / 2 / 1 stupca > kartica e-flexbox kao
<a>> e-flexbox krug s e-svg ikonom + e-flexbox ploha (e-heading H3, e-paragraph, e-div-block > e-image). - Boje: globalne varijable kita
--u01-naslov,--u01-tekst,--u01-naglasak,--u01-krug— ne upisane ručno. - Izrez u kutu: globalna klasa
u01-izrez(maska) — inline stil masku odbija, klasa je prima. - Hover: kartica se podigne sa sjenom; slika se poveća 5 % kad je miš na slici; krug postane bijel kad je miš na krugu.
Svijet: atomic · Pravilo: 3–6 usluga, svaka ima vlastitu fotografiju i stvarnu stranicu; bez fotografija se ne koristi.
Granica atomica: stil se veže samo na vlastiti hover elementa — „miš na kartici mijenja krug” atomic ne zna (nema selektora roditelj → dijete), a točka ne pulsira jer atomic nema @keyframes. Za vjeran hover treba naš atomic element aipress-kartice-usluga.
Uzorak 02 — Usluge, slika s pločicom (atomic)
Usluge solarne energije
Pouzdana, obnovljiva i isplativa energija
Prijeđite na sunce: niži računi, čista energija i stručan servis za domove, tvrtke i sve između.
Ugradnja solarnih panela
Brza, sigurna i certificirana ugradnja iskusnih tehničara.
Održavanje solarnih panela
Redoviti pregledi i čišćenje za najveći učinak sustava.
Projektiranje sustava po mjeri
Učinkovit solarni sustav složen prema vašim potrebama za energijom.
S čime je napravljen
Izvor: https://solaria.bravisthemes.com/home-4/ — Isti uzorak kao V3 verzija, složen kroz elementor/build-composition. 0 upozorenja.
- Naslov sekcije: e-paragraph oznaka + e-heading H2 + e-paragraph.
- Kartice usluga: e-grid 3 / 2 / 1 > kartica e-flexbox kao
<a>> e-div-block > e-image 1:1 + e-flexbox pločica (−100 px preko slike) s krugom (e-flexbox + e-svg zakrenut 45°), e-heading H3, e-paragraph. - Boje: globalne varijable
--u02-naslov,--u02-tekst,--u02-naglasak,--u02-pozadina. - Hover: sporo povećanje slike (1,5 s) kad je miš na slici.
Svijet: atomic · Pravilo: 3 usluge u redu; svaka treba kvadratnu fotografiju i vlastitu stranicu; tekst kratak (do ~80 znakova).
Ovaj uzorak atomic složi u potpunosti, bez klasa i bez našeg elementa — jedina razlika: zoom kreće s miša na slici, ne na cijeloj kartici.
Uzorak 06 — Projekti, mreža s veom (atomic)
Naši solarni projekti
Svjetlija budućnost uz čistu energiju
Pogledajte naše najnovije instalacije — od obiteljskih krovova do poslovnih sustava, svaka složena za najveću učinkovitost.
S čime je napravljen
Izvor: https://solaria.bravisthemes.com/home-4/ — Složeno kroz build-composition, 0 upozorenja.
- Mreža: e-grid 3 / 2 / 1 > kartica e-flexbox kao poveznica: e-svg strelica + e-heading H3 + e-paragraph kategorija.
- Pozadina: višeslojna pozadina na samoj kartici (gradijent + slika); veličine slojeva i prijelaz kroz globalnu klasu
u06-projektjer ih inline stil odbija. - Hover: veo se zatamni i slika se poveća — oboje na samoj kartici, pa radi.
Svijet: atomic · Pravilo: Kao V3, ali mreža umjesto karusela — za više od 3 projekta treba karusel (V3 Pro ili naš element).
Atomic nema karusel (mreža umjesto toga), a kategorija ne može izaći na hover kartice jer je dijete — stoji stalno vidljiva.
Uzorak 07 — Usluge, foto-kartice (atomic)
Na čemu radimo
Sve za ugodan dom
Od jedne hladne sobe do cijele kuće — grijemo, hladimo i čistimo zrak u svakom domu.
S čime je napravljen
Izvor: https://demo.modeltheme.com/thermnova/ — Složeno kroz build-composition.
- Kartice: e-grid 4 / 2 / 1 > kartica e-flexbox kao poveznica s višeslojnom pozadinom (gradijent + slika) > e-heading H3.
- Hover: zatamnjenje, povećanje slike i sjena — sve na samoj kartici (globalna klasa
u07-prikazza veličine slojeva).
Svijet: atomic · Pravilo: Kao V3, ali bez ikone na hover — za puni efekt treba naš element.
Glavni efekt atomic ne može: ikona koja iskoči i naslov koji nestane su djeca kartice, a atomic ne mijenja dijete na hover roditelja. Kandidat za naš element aipress-kartice-usluga, izgled „foto s ikonom”.
Uzorak 11 — Usluge, ispuna bojom (atomic)
Naše usluge
Usluge koje pružamo
Nudimo cijeli raspon savjetovanja i edukacija — analizu podataka, poslovno savjetovanje i strategije za nove poslovne pothvate.
01.
Analiza rasta
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
→ Pročitaj više
02.
Financijska analiza
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
→ Pročitaj više
03.
Upravljanje novcem
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
→ Pročitaj više
04.
Računovodstveni izvještaji
Savjetovanje za svaku financijsku projekciju, izvještaj i analizu.
→ Pročitaj više
S čime je napravljen
Izvor: https://demo.bravisthemes.com/bizznep/ — Složeno kroz build-composition.
- Kartice: e-grid 4/2/1 > kartica e-flexbox kao poveznica: e-paragraph broj, e-svg, e-heading H3, e-paragraph opis i „Pročitaj više”.
- Trik: boja je postavljena na kartici, djeca nemaju svoju — pa hover kartice (pozadina + bijela boja) oboji i njih. Tako atomic zaobilazi ograničenje „roditelj → dijete”.
Svijet: atomic · Pravilo: Kao V3; samo klizanje „Pročitaj više" atomic nema.
Atomic složi skoro sve — fali samo klizanje „Pročitaj više” (@keyframes). Dobar kandidat za motor bez vlastitog elementa.
Uzorak 13 — Usluge 2×2 s bannerom (atomic)
Naše usluge
Pouzdane usluge za vize i useljenje, uz stručno vodstvo
Stalni boravak
Stručna pomoć u postupku za stalni boravak u raznim zemljama — pripremimo svu potrebnu dokumentaciju.
Saznajte više ↗
Pomoć nakon dolaska
Prijava boravišta, bankovni račun, zdravstveno — sve što treba u prvim tjednima u novoj zemlji.
Saznajte više ↗
Studentske vize
Od upisa do vize: vodimo vas kroz cijeli postupak za studij u inozemstvu.
Saznajte više ↗
Zahtjev za useljenje
Procjena uvjeta, prikupljanje dokumenata i praćenje zahtjeva do odluke.
Saznajte više ↗
Agencija
br. 1
Radimo s 30 zemalja
S čime je napravljen
Izvor: https://demo.bravisthemes.com/visora/ — Složeno kroz build-composition.
- Kartice: e-grid 2×2 > kartica e-flexbox: hover kartice + nasljeđivanje boje (kao uzorak 11).
- Krug: stalno crven s unutarnjim sjajem — na crvenoj kartici izgleda kao original, a nije potreban hover djeteta.
- Banner: e-image preko cijelog stupca + oznaka i bijela kartica kao apsolutni e-flexbox.
Svijet: atomic · Pravilo: Kao V3; zastavice izostavljene (HTML), krug ne mijenja izgled na hover nego je stalno crven sa sjajem.
Atomic složi gotovo sve; izostavljene su samo zastavice (HTML).
Uzorak 16 — Usluge, zastor (atomic)
Naše usluge
Usluge koje pružamo
Savjetovanje i edukacije za analizu podataka, poslovno savjetovanje i strategije za nove poslovne pothvate.
S čime je napravljen
Izvor: https://demo.bravisthemes.com/bizznep/home-3/ — Složeno kroz build-composition.
- Kartice: e-grid 3/2/1 > kartica e-flexbox s višeslojnom pozadinom; na hover se pojavi puni tamni sloj.
Svijet: atomic · Pravilo: Zastor se ne „kliže" nego se pojavi odjednom; krug i gumb ne reagiraju na hover kartice.
Zastor se pojavi odjednom (pozadina se ne može „kliziti”), a krug i gumb ne reagiraju — za puni efekt naš element.