WordPress-webhelyek: 14 fantasztikus példa

Ezek a csodálatos WordPress-webhelyek bemutatják ennek a népszerű CMS-nek a legjobbjait. Amikor először indult 2003-ban, a WordPress-t az amatőrök alapvető blogolási eszközének tekintették. Nagyon gyorsan felszállt, és teljes értékű CMS-vé vált, amely immár webhelyek millióit működteti a világ minden tájáról. A kreatív szakemberek pedig azóta is túllépik a CMS határait, hogy összetett és gyönyörű WordPress-webhelyeket hozzanak létre.

Annak bemutatására, hogy pontosan mit tehet ez a hihetetlen CMS, kiválasztottuk a legjobb WordPress-webhelyeket. Ha ez a cikk inspirálja Önt saját WordPress-webhelyének létrehozására, akkor ezeket Wordpress oktatóanyagok segít elindulni, vagy ha egy fantasztikus megjelenésű portfóliót szeretne felépíteni, nézze meg a legjobb útmutatónkat WordPress portfólió témák .

01. Rafal Bojar

WordPress-webhelyek: Rafal Bojar



Ez a fotós portfólió a WordPress programot használja a Vue.js mellett(Kép jóváírása: Rafal Bojar)

Tervező Zhenya Rynzhuk félig fejetlen CMS-ként használta a WordPress alkalmazást Vue.js a kezelőfelület számára, hogy létrehozza ezt a vonzó fényképészeti portfólió webhelyet a Rafal Bojar . Tartalmaz egy kezdőlapot, amely a kiválasztott történetek előnézetét jeleníti meg, egy sima rács Bojar összes munkájának bemutatására, valamint egy „esszencia” oldal, amely elmagyarázza a fotós filozófiáját és szemléletét.

'A cél az volt, hogy a látogatóknak egyedi élményt nyújtsunk, és bemutassuk Rafal csodálatos munkáit' - mondja Rynzhuk. A pár megvitatott néhány különféle háttér-opciót, de a WordPress mellett döntöttek, hogy a webhelyet könnyen kezeljék és rendszeresen frissítsék új projektekkel.

A WordPress és a Vue.js mellett a webhely S3 vödröt használ az adatok tárolására, amelyeket a Cloudfronton keresztül szállítanak a gyors betöltési idők biztosítása érdekében. Rynzhuk is felhasználta Alapkőzet és Hendrik-Jan de Harder Csontváz nézet , valamint a GSAP az animációkhoz.

02. Adel Vakula

WordPress-webhelyek: Adel Vakula

Ennek a modellnek a weboldala bájos, kempingező humorral teli(Kép jóváírása: Adel Vakula)

Adel Vakula nemzetközileg híres modell Ukrajnából, és ez a promóciós oldal honfitársaktól érkezik Yabloko ötletek stúdió , aki nemcsak megtervezte és kódolta, hanem megalkotta az összes illusztrációs munkát. Az eredmény egy pompásan jellegzetes vizuális ünnep, amely számos festői matricát ölel fel elbűvölő hősnőnkkel.

A nyitó vattacukorfelhőtől, amely szó szerint finom animációkkal buborékol, Vakula csillagok ábrándos portrékon, amelyek célja egy karizmatikus személyiség bemutatása. Szeszélyesen elnézi a párizsi éjszakát egy vízköpő tetején, amely a YouTube lejátszási gombjaként működik, miután elkapott egy New York-i metró vonatot a bokszoló macskával kiegészített peronról. A velencei és az ibizai látogatások ugyanolyan különc hátteret biztosítanak az Instagram és az e-mail linkekhez, ahol még a koktélokat kortyoló pecsétek is ösztönzik a követést. Ez nyelvtudatos dolog, de olyan bájjal és technikával készült, hogy nem lehet nem szerelmes. Még az egérmutató is teljes szív alakú.

A WordPress CMS-re épített kiemelkedő felhasználói felület egy szórakoztató rész, ahol a ruhákat virtuális Vakula-ra húzhatja, és megtekintheti a valós modellezési pillanatokat. Mivel az esetleges castingok névjegykártyái mennek, ez a legemlékezetesebb pózokat éri el, mint a legtöbb.

Szerző: Mark Billen

03. Közép gyermek

WordPress-webhelyek: Közép gyermek szendvicsbolt

A Middle Child egy teljesen egyedi WordPress témára épül - kattintson a képre a webhely felfedezéséhez

Díjnyertes, filadelfiai székhelyű szendvicsbolt Középső gyerek szükség van egy olyan weboldalra, amely megfelel a mókás, igénytelen hangulatának. Teljes körű szolgáltatást nyújtó tervező és technológiai stúdió Öntudatos felállt a kihívás elé, egy teljesen testre szabott webhelyet létrehozva WordPress téma felhasználásával Fűrészáru és ACF - olyan kombináció, amelyet a stúdiópartner, Mike Wagz „játékváltónak nevez a komoly WordPress témafejlesztők számára”.

A Self Aware a legújabb webes technológiákat is felhasználta az optimális élmény érdekében: az elrendezést az alkalmazás segítségével hozták létre CSS Rács , és a Szolgáltató gyorsítótárba helyezi a statikus eszközöket, beleértve a CSS és a JavaScript fájlokat, a kezdeti betöltési idő felgyorsítása érdekében.

'A középső gyermek minden zugból elárasztja a légkört' - teszi hozzá Wagz. 'Ez melegen fogadja az ügyfeleket az élet minden területéről, megfelelő szórakozással, giccsel és furcsasággal. Úgy gondolom, hogy ez a tervezés sikeres, mert meg tudtuk ragadni ezt a szellemet és lefordítottuk az internetre.

A tökéletes eszköz megtalálásához nézze meg ezeket a felső részeket weboldal készítők . Ráadásul a legjobb árakat lásd alább.

A mai legjobb weboldal-készítő ajánlatok Wix Wix Connect Domain 3 font / hó Kilátás HostGator HostGator dedikált tárhely 119 USD / hó Kilátás Tértér Személyes 10 font / hó Kilátás Naponta több mint 130 millió terméket ellenőrizünk a legjobb áron

04. Tengeri szüret

WordPress-webhelyek: Sea Harvest webhely iPad-en

Az ED újság stílusú elrendezést használt a Sea Harvest WordPress-alapú webhelyén

Amikor a canberrai tenger gyümölcsei piaca Tengeri betakarítás új márkanévre és intelligens digitális jelenlétre volt szükségük, az ausztrál web- és márkaügynökséghez fordult ED . A WordPress webhely szembetűnő újság stílusú elrendezéssel rendelkezik, rengeteg furcsa elemzéssel.

'Ha a tenger gyümölcseire gondolunk, sokunk emlékét idézi fel, hogy a parton a barátokkal és a családdal együtt eszünk halat és chipset' - mondja Cam Tidy tervező. 'Gyakran ezek az elvihető ízületek újságba csomagolták az ételt, ezért természetesnek tűnt ezt vizuális ötletként feltárni.'

A statikus, nyomtatott elrendezés interneten történő replikálása azonban nem volt kihívás nélküli. A csapat a CSS Flexbox segítségével újrapozicionálta a tartalmat, miközben a képernyő méretétől függetlenül állandó távolságot tartott fenn. Szinte minden mérés egy REM egységeket alkalmazó reszponzív skálán alapul, így a böngésző méretezésével könnyebben fenntartható a típus és kép aránya.

A fejlesztő, Bryn Shanahan kedvenc funkciója, hogy a felhasználók „rajzolhatnak” az oldalon, többek között egy interaktív szókeresés . 'Ezt úgy értük el, hogy egy HTML5 Canvas elemmel borítottuk a webhelyet, amelyet azután felhasználtunk a felhasználó rajzaira' - magyarázza.

Az ED a WordPress programot számos webhelyprojektjéhez használja, felhasználóbarátnak és intuitívnak találva az ügyfelek számára. „A [WordPress] könnyű háttér-fejlesztéssel rendelkezik, amely több időt biztosít arra, hogy a kezelőfelületre összpontosítson, hogy a design életre keljen” - teszi hozzá Adam Forcucci fejlesztő. 'A képesség, hogy fejetlenné tegye a WP Rest API használatával , lehetővé teszi számunkra, hogy olyan keretrendszereket használjunk, mint a React, amely a jövőbeni fejlesztésünk alapjává válik. '

05. Maxim Shkret

WordPress-webhelyek: Maxim Shkret

Az „Olvadó Panda” forgatható balra és jobbra(Kép jóváírása: Maxim Shkret)

Az oroszországi Szentpétervárról Maxim Shkret szabadúszó digitális művész. Lenyűgöző WordPress weboldala az e-kereskedelmi piacon veszi igénybe portfólióját, újszerű adománygyűjtési kezdeményezést indítva.

A webhely négy 3D-s modellből vagy digitális szoborból nyílik, amelyeket 360 fokkal el lehet húzni és el lehet forgatni. Pig, Desert Fox, kettős természetű egyszarvú és Melting Panda foroghat balra és jobbra a kedvelt szög elérése érdekében. A „Vásárolja meg ezt a képet” gombra kattintva a látogatók különböző dimenziókban vásárolhatnak digitális képeket, különböző árakon. A bevételt összegyűjtjük, hogy minden digitális modellt valóságos fizikai szoborrá alakítsunk, 3D nyomtatási öttengelyes CNC megmunkálási eljárással. Ez egy jó ötlet a közreműködők meghívására, és megmutatja, hogyan lehet a crowdfunding megközelítést egy tipikusan passzív élményhez kötni.

A helyszíni produkció kreditjei között szerepel a New York-i Sochnik Design Studio, de az ügyes felhasználói felület erőfeszítései soha nem árnyékolják be Shkret tehetségét. Ez magában foglalja a Galéria egyszerű szakaszát a szoborfelvételekből, amelyek hullámzanak és hullámzanak egy vizes szűrőn. Finom hatás, de fokozza a textúra érzetét, amelyet Shkret minden egyes darabhoz meg akar adni.

06. KOBU

WordPress weboldalak: KOBU kreatív ügynökség

A KOBU honlapja hullámzó lávalámpa-stílusú kezdőlappal nyílik

A portfólióhelyek nem meglepő módon továbbra is a web legtermékenyebb terepét jelentik a kreatív kifejezés és inspiráció számára. Ez az online hívókártya a portugál ügynökség számára KOBU ezt az etoszt követi egy ízléses, visszafogott WordPress-webhellyel, amely még mindig karakteres. Magát „márka laboratóriumnak” nevezve, amely nem fél a kísérletezéstől, az itt végzett technikai munka a képzeletet mutatja be a bonyolultság felett.

Elemek sorozatára emlékeztetőt kapunk arról, hogyan lehet a CSS és az SVG kombinálni a maximális frontend karakter érdekében. Az abszolút pozícionálást a bájos drótváz motívumok átfedésére használják, felosztva a vastag háttérszínblokkok közötti vonalakat és összekapcsolva a szakaszokat. A hurkolt HTML5 videopanel egyedi, éles szélet kap, SVG alakkal, mint fent elhelyezett maszk, mielőtt az esettanulmány képeinek szegélysugara felére csökken, hogy körkörös legyen. Az oldal a slick.js körhinta könyvtárat rendben használja, hogy a főoldal közepén keresztül „ügetje” a KOBU csapatát, irodai lóval.

A zenit azonban valószínűleg az a bit, amelyet először látunk, és egy hullámzó lávalámpa-stílusú fejlécen nyílik, amelyet az SVG-utak manipulálásával állítottunk elő. Az anime.js plugin, egy többértékű JavaScript animációs motor felhasználásával figyelemfelkeltő trükk a színpaletta létrehozásához, ha más nem.

Szerző: Mark Billen

07. forma

WordPress-webhelyek: noformátum honlap

A noformat honlapjának rengeteg azonnali hatása

forma egy stratégiai tervező stúdió New York-ban. A honlapon animált szemgolyó van, amely a látogató kurzorát követi a képernyőn, miközben az átfedésben lévő szöveg körbevezet minden olyan dolgot, amelyet a formátum létrehozhat. A szemgolyó létrehozása érdekében a csapat először a dizájnt fedezte fel After Effects CC , mielőtt a three.js-t felhasználná egy interaktív változat elkészítéséhez, magyarázza Ian Brewer, a noformat alapítója és kreatív igazgatója.

'A csúcs- és töredékárnyékolókkal optimalizáltuk a GPU-megjelenítést, és lüktettük és villogtattuk benne a noformátum-logót' - folytatja Brewer. 'Ezután utófeldolgozási effektusokat alkalmaztunk organikusabb és kevésbé 3D-s megjelenés érdekében, az élek elmosódásával és a kiemelésekkel a virágzás hozzáadásával.'

A webhely többi része megfelel az első oldal hatásának, a gördülékeny görgetésű átmenetek és a finom parallaxis effektusok megmutatják a technikai készségeket, a felhasználhatóság befolyásolása nélkül.

'A WordPress-t választottuk webhelyünkhöz a gyors elindítás és a rugalmasság szempontjából' - magyarázza Brewer. 'Az évek során saját könyvtárakat és modulalapú szerkesztő rendszereket építettünk ki, amelyek lehetővé teszik számunkra, hogy bármely más CMS megoldásnál gyorsabban hozzunk létre vagy szerkesszünk egy webhelyet.'

08. Femme és Heves

Holland élménytervező stúdió Meseország az e-kereskedelmet sass-val szállította Femme és Fierce . A WordPress webhely arcán megjelenő, ütközés-tasztikus színvilága az online divatkereskedő márkaüzenetét adja ki. Az animált „matricák” - nyalókák forgatása, nyilak ütése, ajkak nyalása - pimasz érzetet keltenek, és visszhangot kell adniuk azzal a Snapchat / Instagram generációval, amelyre ez a tartomány vonatkozik.

09. Püré Maison

Mash House WordPress webhely

Az animált firkák életre hívják ezt a WordPress-webhelyet

Krumplipüré egy kreatív és stratégiai stúdió Párizsban. WordPress-webhelye elsősorban a napsütéses animációs firkáknak köszönhető, amelyek az egérmutatón megjelennek, személyiséget árasztanak az unalmas márkakijelentésekben és élénkítik az átmeneteket. Ezenkívül segítik a látogatót a tájékozódásban, és arra ösztönzik őket, hogy fedezzék fel és interakcióba lépjenek a helyszínnel.

10. Gyakorlatilag vagyunk

WordPress-webhelyek: gyakorlatilag azok vagyunk

Mi a Virtually Are webhelyén nagyszerűen felhasználjuk a 360 fokos videókat szolgáltatásainak eladásához

Amikor vállalkozása arról szól, hogy elbűvölje az embereket a virtuális valóság segítségével érzelmi történetek elmeséléséhez, akkor szüksége van egy webhelyre, amely vonzza az embereket a munkájába. És butik VR stúdió Gyakorlatilag vagyunk sikerült, majd néhány. Helyét építtette Herdl a WordPressen rengeteg csúcstechnikát alkalmaz, beleértve a WebGL-t és a 360 fokos videókat, hogy ellenállhatatlan ízelítőt nyújtson magával ragadó szolgáltatásaiból. Nézze meg az Audi VR tesztvezetéseit váratlan hírességekkel kiegészítve.

11. Asaro

WordPress-webhelyek: Asaro

Az Asaro weboldala elég érzékeny ahhoz, hogy minden képernyőméretnél gyönyörű legyen

Az Asaro egyedülálló kalandélményeket és szórakoztató utazásokat kínál a szuperhajós vendégek számára szerte a világon. Egy szélesebb vállalati márkanév részeként ezt a csúfos weboldalt egy bristoli székhelyű ügynökség tervezte és fejlesztette Zöld Kaméleon .

Egyéni WordPress keretrendszerre építve, hogy a folyamatos tartalomszerkesztés az ügyfél számára egyszerű legyen, a látogatók elbűvölő felfedező útra indulnak. A finom görgetési effektusok szépen összekapcsolódnak egy interaktív szaggatott vonallal, és megrajzolják a navigációs folyamatokat, ahogyan a jachtkapitány megjelölheti a diagramokat. Az egyedi CGI-megjelenítéseket grafikus eszközként használták a reprezentációhoz Asaro Exkluzív szolgáltatási kínálatát, tekintettel a fényképészeti eszközök szűkösségére az események privát jellege miatt.

'A művészeti irányt a vízcseppfotózás és a színházi plakáttervezés keveréke ihlette' - magyarázza Tom Anderson kreatív igazgató. 'Imádtuk a fotóstílus esztétikáját, és úgy éreztük, hogy ez jól kapcsolódik a projekt mögöttes tengeri témájához.'

Elég érzékeny ahhoz, hogy ne csak szépen következetesen nézzen ki a kisebb képernyőkön, hanem a hozzáférési sebesség is motiválta a teljesítmény ésszerűsítését. Mivel a hajólakók a tengeri webkapcsolat kegyében vannak, a betöltési idő inkább aprító, mint szaggatott az asztali, táblagépes és mobil eszközökön.

Szerző: Mark Billen

12. Dániai Design Múzeum

WordPress weboldalak: Dán Design Múzeum

A parallaxis görgetés és az érzékeny képek intelligens használata miatt a Dán Design Múzeum helyszíne kihagyhatatlan

A koppenhágai székhelyű tervező és márkaépítő ügynökség építette Hülye stúdió , a dánok webhelye Design Múzeum nemcsak bemutatja a múzeum archívumait, gyűjteményeit és kutatásait, de frappáns, korszerű stílusban is bemutatja. A múzeum logójának SVG animációjától kezdve a figyelemfelkeltőig parallaxis görgetés és a hangulatjavító paletta felcserélődik, miközben végiggörgeti a tartalmat, ez tökéletes online jelenlét egy alapvető tervezési célpont számára.

13. Katy Perry

WordPress-webhelyek: Katy Perry

Még a nagy hírességek is használják a Wordpress által biztosított eszközöket

Katy Perry pophercegnő nem mást, mint a WordPress-t használja hivatalos honlapjának tárolására. A látványra és a közösségi média jelzéseire összpontosítva a webhely magas színvonalú portfólió-felvételeket készít a művészről, hogy merészen nyilatkozhasson. Görgessen lefelé a túra dátumainak, az árucikkek és egyebek megtekintéséhez, vagy használja az ikonokat további felfedezéséhez.

Ez egy letisztult, mégis pörgős webhely, amely képes összekeverni az előadó jellegzetes, személyes bubblegum pop képét egy felhasználóbarát, fényes mag stílusú funkcionalitással. Elmúltak az elfoglalt zenekari oldalak, túl sok animációval és zenével, amelyeket nem lehet megállítani. Perry honlapja bebizonyítja, hogy rengeteg személyiséget tud csomagolni, csak egy egyszerű fehér háttér és könnyen navigálható linkek segítségével, lehetővé téve a rajongók számára, hogy egyszerűen és kényelmesen hallgassanak, nézhessenek és tanulhassanak.

14. A tintatartály

WordPress-webhelyek: Ink Tank

Kao Collins webhelyét úgy tervezték, hogy gondolkodjon a tintán

1989-ben a Collins Inkjet néven indult, egyszemélyes művelet, amely tintát szolgáltat a Kodak folyamatos tintasugaras nyomtatóihoz. Ma Kao Collins a világ egyik vezető beszállítója. És ha még soha nem gondolt a tintára (azon kívül, hogy káromkodjon, amikor a nyomtatója elfogy), Kao Collins webhelye, a The Ink Tank ezen változtatni készül.

Által építve DBS Interactive , A tintatartály egy figyelemfelkeltő WordPress-oldal, amely kihúzza az összes állomást, hogy élvonalbeli híreket nyújtson a tintaipar számára, és bemutassa azokat a kreatív módszereket, amelyekkel a vállalkozások és a művészek jelenleg használják a tintát. Ami a mi szempontunkat illeti, a Nyomtatás története szakasz: egy csodálatos parallaxis személyhívó, animációkkal és effektekkel teli, amely az agyagtábláktól a mai nagysebességű egyutas nyomtatásig vezet, és előre tekint a nyomtatás néhány jövőbeni lehetőségénél.

Generáljon CSS-t - a webes tervezők konferenciája: szeptember 26, Rich Mix, Shoreditch, London

(Kép jóváírása: Jövő)

Olvass tovább: