WordPress-verkkosivustot: 14 mahtavaa esimerkkiä

Nämä hämmästyttävät WordPress-sivustot esittävät tämän suositun CMS: n parhaat puolet. Kun se käynnistettiin ensimmäisen kerran vuonna 2003, WordPress pidettiin harrastajien perusblogityökaluna. Hyvin nopeasti se lähti liikkeelle ja muuttui täysimittaiseksi CMS: ksi, joka käyttää nyt miljoonia sivustoja ympäri maailmaa. Ja luovat ammattilaiset ovat tuoneet CMS: n rajoja luomaan monimutkaisia ​​ja kauniita WordPress-verkkosivustoja siitä lähtien.

Näytämme sinulle mitä tämä uskomaton CMS voi tehdä, olemme valinneet joitain parhaita WordPress-verkkosivustoja. Jos tämä artikkeli innostaa sinua rakentamaan oman WordPress-verkkosivuston, nämä Wordpress-oppaat auttaa sinua pääsemään alkuun, tai jos haluat rakentaa mahtavan näköisen salkun, tutustu parhaan oppaan WordPress-salkun teemat .



01. Rafal Bojar

WordPress-sivustot: Rafal Bojar



Tämä valokuvasalkku käyttää WordPressiä Vue.js: n rinnalla(Kuvan luotto: Rafal Bojar)

Suunnittelija Zhenya Rynzhuk käytti WordPressiä puolipäättömänä CMS: nä Vue.js käyttöliittymälle, luoda tämä kiinnostava valokuvasalkku sivustolle Rafal Bojar . Siinä on kotisivu, joka näyttää valittujen tarinoiden esikatselut, tyylikäs ruudukko Bojarin koko työn esittelemiseksi, ja 'olemussivu', joka selittää valokuvaajan filosofiaa ja lähestymistapaa.

'Tavoitteena oli tarjota vierailijoille ainutlaatuinen kokemus ja esitellä Rafalin upeita teoksia', Rynzhuk sanoo. Pari keskusteli muutamista erilaisista taustavaihtoehdoista, mutta päätti WordPressistä, jotta sivustoa olisi helppo hallita ja päivittää säännöllisesti uusilla projekteilla.



WordPressin ja Vue.js: n ohella sivusto käyttää S3-ämpäriä tietojen tallentamiseen, joka toimitetaan Cloudfrontin kautta nopean latausajan varmistamiseksi. Rynzhuk käytti myös Kallioperä ja Hendrik-Jan de Harder's Luuranko näkymä sekä GSAP animaatioille.

02. Adel Vakula

WordPress-sivustot: Adel Vakula

Tämän mallin sivusto on täynnä viehättävää, leiriytyvää huumoria(Kuvan luotto: Adel Vakula)

Adel Vakula on kansainvälisesti kuuluisa malli Ukrainasta, ja tämä hänen mainoskampanjasivustonsa saapuu maanmiehiltään Yabloko ideoiden studio , joka paitsi suunnitteli ja koodasi sen, myös loi kaikki kuvitustyöt. Tuloksena on upeasti erottuva visuaalinen juhla, joka kattaa useita maalauksellisia vinjettejä, joissa on lumoava sankaritar.



Avautuvasta hattara-karkkia pilvimaisemasta, joka kirjaimellisesti kuplii hienoilla animaatioilla Vakula tähdet unelmoivissa muotokuvissa, jotka on suunniteltu osoittamaan karismaattinen persoonallisuus. Hän unelmoi unohtaa pariisilaisen yön huipulla, joka kaksinkertaistuu YouTuben toistopainikkeena, saatuaan New Yorkin metrojunan alustalta, jolla on täynnä kissaa. Vierailut Venetsiaan ja Ibizaan tarjoavat yhtä eksentrisiä taustoja Instagram- ja sähköpostilinkeille, joissa jopa cocktaileja nauttivat sinetit kannustavat seuraamaan. Se on kielen poskissa, mutta tehty niin viehätyksellä ja tekniikalla, että et voi olla rakastumatta. Jopa hiiren osoitin menee kaiken sydämen muotoiseksi.

WordPress CMS: ään rakennettu standout-käyttöliittymäelementti on hauska osa, jossa voit vetää ja pudottaa asuja virtuaaliselle Vakulalle katsomaan todellisia mallinnusnapsautuksia. Kun käyntikortit mahdollisiin lähetyksiin menevät, tämä on ikimuistoisempi asento kuin useimmat.

onko kitkatilla koskaan ollut viiva

Kirjoittaja: Mark Billen

03. Keskimmäinen lapsi

WordPress-sivustot: Lähi-lapsen voileipäkauppa

Middle Child on rakennettu täysin räätälöityyn WordPress-teemaan - tutustu sivustoon napsauttamalla kuvaa

Palkittu, Philadelphiassa toimiva voileipäkauppa Keskimmäinen lapsi tarvitsi verkkosivuston, joka vastasi omituista, vaatimattomaa tunnelmaa. Täyden palvelun suunnittelu- ja teknologiastudio Itsetietoinen nousi haasteeseen ja loi täysin räätälöityyn sivustoon WordPress-teema käyttämällä Puu ja ACF - yhdistelmä, jonka studiokumppani Mike Wagz kutsuu 'pelinvaihtajaksi vakaville WordPress-teeman kehittäjille'.

Self Aware hyödynsi myös uusinta verkkoteknologiaa tarjotakseen parhaan mahdollisen kokemuksen: ulkoasu luotiin CSS-ruudukko ja a Huoltotyöntekijä tallentaa välimuistiin staattiset varat, mukaan lukien CSS- ja JavaScript-tiedostot, nopeuttaakseen alkuperäisiä latausaikoja.

'Keskimmäinen lapsi huokuu tunnelmaa jokaisesta nurkasta ja kalliosta', lisää Wagz. 'Se toivottaa asiakkaat lämpimästi tervetulleeksi kaikilta elämänaloilta oikean määrän hauskaa, kitchiä ja omituisuutta. Mielestäni tämä muotoilu on onnistunut, koska pystyimme vangitsemaan tämän hengen ja kääntämään sen verkkoon. '

Löydät täydellisen työkalun tutustumalla näihin alkuun verkkosivujen rakentajat . Plus, katso alla parhaat hinnat.

Tämän päivän parhaat verkkosivustojen rakentajien tarjoukset Wix Wix Connect -toimialue 3 puntaa / kuukausi Näytä HostGator HostGator Dedicated Hosting 119 dollaria / kuukausi Näytä Neliötila Henkilökohtainen 10 puntaa / kuukausi Näytä Tarkistamme päivittäin yli 130 miljoonaa tuotetta parhaaseen hintaan

04. Merisato

WordPress-sivustot: Sea Harvest -sivusto iPadissa

ED käytti sanomalehden tyyliä ulkoasussa WordPress-pohjaisessa verkkosivustossaan Sea Harvest

Kun Canberraan perustuvat äyriäismarkkinat Merisato tarvitsi uuden tuotemerkin identiteetin ja älykkään digitaalisen läsnäolon vastaamaan, se kääntyi Australian verkko- ja tuotemerkkitoimiston puoleen ED . WordPress-verkkosivustolla on silmiinpistävä sanomalehden tyyli, jossa on paljon omituisia yksityiskohtia tutkittavaksi.

'Kun ajattelemme meren antimia, monet meistä palaavat muistoon siitä, että ranta ja kalat syödään rannalla ystävien ja perheen kanssa', sanoo suunnittelija Cam Tidy. 'Usein nämä takeaway-nivelet käärivät ruokaa sanomalehteen, joten tuntui luonnolliselta tutkia sitä visuaalisena ideana.'

Staattisen, tulostetun asettelun toistaminen verkossa ei kuitenkaan ollut haasteita. Tiimi käytti CSS Flexboxia sijoittamaan sisältöä säilyttäen samalla tasaisen välimatkan näytön koosta riippumatta. Lähes jokainen mittaus perustuu reagoivaan asteikkoon, jossa käytetään REM-yksiköitä, mikä helpottaa tyyppien ja kuvien suhteiden hallintaa selaimen mittakaavassa.

kuinka tulla animaattoriksi pixarille

Kehittäjä Bryn Shanahanin suosikkiominaisuus on se, että käyttäjät voivat 'piirtää' sivustolla myös vuorovaikutteinen sanahaku . 'Saavutimme tämän peittämällä sivuston HTML5 Canvas -elementillä, jota käytettiin sitten käyttäjän piirustusten piirtämiseen', hän selittää.

ED käyttää WordPressiä monissa verkkosivustoprojekteissaan, ja pitää sitä käyttäjäystävällisenä ja intuitiivisena asiakkaille. '[WordPressillä] on helppo taustakehitys, joka antaa enemmän aikaa keskittyä käyttöliittymään, jotta muotoilu herää eloon', lisää kehittäjä Adam Forcucci. 'Kyky tee siitä päätön WP Rest -sovellusliittymän avulla , antaa meille mahdollisuuden käyttää kehyksiä, kuten React, josta on tulossa alustan tulevan kehityksen ydin. '

05. Maxim Shkret

WordPress-sivustot: Maxim Shkret

'Sulava Panda' voidaan kehrätä vasemmalle ja oikealle(Kuvan luotto: Maxim Shkret)

Perustuu Venäjältä Pietarista, Maxim Shkret on freelance digital artist. Hänen vaikuttava WordPress-verkkosivustonsa avaa salkun verkkokaupan markkinoille ja käynnistää uuden varainhankinta-aloitteen.

Sivusto avautuu neljän 3D-mallin tai digitaalisen veistoksen sarjaan, jota voidaan vetää ja kääntää 360 astetta. Sika, Desert Fox, kaksisuuntainen yksisarvinen ja sulava panda voidaan kehrätä vasemmalle ja oikealle, jotta saavutetaan suosittu kulma. Napsauttamalla Osta tämä laukaus -painiketta kävijät voivat ostaa digitaalisen kuvan eri mitoilta eri hinnoin. Tuotot yhdistetään takaisin kunkin digitaalimallin muuttamiseksi todellisiksi fyysisiksi veistoksiksi käyttämällä 3D-tulostusviisiakselista CNC-työstöprosessia. Se on siisti idea kutsua avustajia ja osoittaa, kuinka joukkorahoitus voidaan liittää tyypillisesti passiiviseen kokemukseen.

Sivustotuotannon hyvityksiin sisältyy New Yorkin Sochnik Design Studio, mutta liukkaat käyttöliittymän ponnistelut eivät koskaan varjele Shkretin kykyjä. Tämä sisältää yksinkertaisen Galleria-osan still-veistoskuvista, jotka aaltoilevat ja heiluttavat vetisen suodattimen läpi. Se on hienovarainen vaikutus, mutta lisää tekstuurin tunnetta, jonka Shkret aikoo antaa jokaiselle kappaleelle.

06. KOBU

WordPress-sivustot: KOBU-luova toimisto

KOBU: n verkkosivusto avautuu aaltoilevalla laavavalaisimella

Portfoliosivustot tarjoavat yllättäen edelleen verkon hedelmällisimmän pohjan luovalle ilmaisulle ja inspiraatiolle. Tämä Portugalin toimiston verkkokortti KOBU seuraa tätä eetosta tyylikkäällä, hillittyyn WordPress-verkkosivustoon, joka kuplii edelleen hahmolla. Tekninen työ, joka kutsuu itseään 'brändilaboratorioon', joka ei pelkää kokeilua, osoittaa mielikuvituksen monimutkaisuudesta.

Elementtisarjan aikana saamme muistutuksen siitä, kuinka CSS ja SVG voidaan yhdistää maksimaalisen käyttöliittymämerkin saamiseksi. Absoluuttista sijoittelua käytetään viehättävien lankakehysmallien päällystämiseen, rikkomatta rohkeat taustavärilohkot ja linkittämällä osiot yhteen. Silmukkainen HTML5-videopaneeli saa ainutlaatuisen viiksen reunan käyttämällä SVG-muotoa yläpuolella olevana maskina, ennen kuin tapaustutkimuskuvien reunasäde on puolittunut pyöreiksi. Sivusto käyttää siististi slick.js-karusellikirjastoa 'ravistamaan' KOBU-tiimiä toimistohevosella pääsivun keskiosan läpi.

Seniitti on kuitenkin todennäköisesti vähän näkemämme ensin, se avautuu aaltoilevaan laavalampun tyyppiseen otsikkoon, joka on valmistettu manipuloimalla SVG-polkuja. Anime.js-laajennuksen, moniarvoisen JavaScript-animaatiomoottorin, avulla on huomiota herättävä temppu väripaletin luomiseen, ellei mitään muuta.

Kirjoittaja: Mark Billen

07. lomake

WordPress-sivustot: noformat-kotisivu

noformatin kotisivulla on paljon välittömiä vaikutuksia

muodossa on strategisen suunnittelun studio, joka sijaitsee New Yorkissa. Kotisivulla on animoitu silmämunan muotoilu, joka seuraa kävijän kohdistinta ruudun ympäri, kun taas päällekkäinen teksti syklii läpi kaiken, mitä noformaatti voi luoda. Silmämunan luomiseksi joukkue tutki ensin suunnittelua After Effects CC , ennen interaktiivisen version rakentamista three.js: n avulla, kertoo noformatin perustaja ja luova johtaja Ian Brewer.

'Käytimme kärkipiste- ja fragmenttivarjostimia optimoidaksemme grafiikkasuoritinten renderointia ja saimme sen sykkimään ja välkkymään sisällä olevan noformaattilogon', jatkaa Brewer. 'Sitten käytimme jälkikäsittelytehosteita antaaksemme sille orgaanisemman ja vähemmän 3D-ilmeen sumentamalla reunat ja lisäämällä kukinnan kohokohtiin.'

Loput sivustosta täyttävät ensimmäisen sivun vaikutukset. Liikkuvat siirtymiset ja hienovaraiset parallaksivaikutukset osoittavat teknisiä taitoja vaikuttamatta käytettävyyteen.

'' Valitsimme WordPressin sivustollemme nopeuden ja joustavuuden kannalta '', Brewer kertoo. 'Vuosien varrella olemme rakentaneet omia kirjastoja ja moduulipohjaisia ​​muokkausjärjestelmiä, joiden avulla voimme luoda tai muokata sivustoa nopeammin kuin mikään muu CMS-ratkaisu.'

08. Femme ja Fierce

Hollantilainen kokemussuunnittelustudio Ihmemaa on toimittanut verkkokauppaa sassilla verkkotunnukselle Femme ja Fierce . WordPress-verkkosivuston in-your-face, ristiriita-tastic värimaailma antaa verkkokaupan merkkiviestin alusta alkaen. Animoidut '' tarrat '' - tikkareiden pyörittäminen, nuolien nuoleminen, huulten nuoleminen - luovat röyhkeän tunnelman, ja niiden tulisi resonoida Snapchat / Instagram-sukupolven kanssa, johon tämä alue on suunnattu.

09. Sose Maison

Mash House WordPress -sivusto

Animoidut kirjoitukset herättävät tämän WordPress-verkkosivuston eloon

Perunamuusi on luova ja strateginen studio, joka sijaitsee Pariisissa. Sen WordPress-verkkosivusto erottuu pääasiassa aurinkoisen keltaisten animoitujen kirjoitusten ansiosta, jotka näkyvät hiirellä, lisäävät persoonallisuutta tylsiin tuotemerkkilausuntoihin ja elävöittävät siirtymiä. Ne auttavat myös kävijää etenemään ja kannustavat heitä tutkimaan ja olemaan vuorovaikutuksessa sivuston kanssa.

10. Olemme käytännössä

WordPress-sivustot: Olemme käytännössä

Me Virtually Are -sivusto käyttää 360 asteen videota hyvin palvelujensa myyntiin

Kun yrityksesi tarkoituksena on houkutella ihmisiä käyttämään virtuaalitodellisuutta kertoa tunteellisia tarinoita, tarvitset sivuston, joka houkuttelee ihmisiä työhösi. Ja boutique VR -studio Olemme käytännössä on onnistunut ja sitten jotkut. Sen sivuston rakensi Herdl WordPressissä käyttää runsaasti huipputekniikoita, mukaan lukien WebGL ja 360 asteen video, jotta saat vastustamattoman maun sen mukaansatempaavista palveluista. Tutustu Audin VR-koeajoihin odottamattomien julkkisvieraiden kanssa.

11. Asaro

WordPress-sivustot: Asaro

kuinka piirtää todellinen koira
Asaron sivusto on riittävän reagoiva näyttämään kauniilta kaikilla ruuduilla

Asaro tarjoaa ainutlaatuisia seikkailuelämyksiä ja viihdyttäviä matkoja superyacht-vieraille ympäri maailmaa. Osana laajempaa yritysbrändiä tämän tyylikkään verkkosivuston on suunnitellut ja kehittänyt Bristolissa toimiva toimisto Vihreä kameleontti .

Rakennettu mukautetulle WordPress-kehykselle, jotta sisällön editointi on asiakkaalle helppoa, kävijät vievät viehätysmatkalle. Hienovierailuefektit on linkitetty siististi interaktiiviseen katkoviivaan, joka kuvaa navigoinnin edistymistä tavalla, jolla jahdikapteeni voi merkitä kaavioita. Mukautettuja CGI-renderöintiä on käytetty graafisena laitteena edustamiseen Asaro Yksinoikeudella palvelutarjonta, kun otetaan huomioon valokuvavarojen niukkuus tapahtumien yksityisyyden vuoksi.

'Taidesuunta sai inspiraationsa vesipisaravalokuvien ja teatterijulisteiden yhdistelmästä', kertoo luova johtaja Tom Anderson. 'Rakastimme valokuvaustyylin esteettisyyttä ja tunsimme, että se liittyi hyvin projektin taustalla olevaan meriteemaan.'

Riittävän reagoiva näyttämään kauniisti yhtenäisiltä pienemmillä näytöillä, pääsynopeus oli myös motivaatio suorituskyvyn virtaviivaistamiseksi. Veneen asukkaiden ollessa meren verkkoyhteyksien armoilla latausajat ovat enemmän hakkuria kuin hajanaista työpöydällä, tabletilla ja mobiililaitteella.

Kirjoittaja: Mark Billen

12. Tanskan muotoilumuseo

WordPress-verkkosivustot: Danish Design Museum

Parallaksirullauksen ja reagoivien kuvien älykäs käyttö tekee Tanskan muotoilumuseon sivustosta pakollisen

Kööpenhaminassa toimivan suunnittelu- ja tuotemerkkitoimiston rakentama Tyhmät studiot , Tanskan sivusto Suunnittelumuseo paitsi esittelee museon arkistoja, kokoelmia ja tutkimuksia, mutta myös esittelee sen räjähdysmäisesti ajan tasalla. Museon logon SVG-animaatiosta aina huomiota herättävään parallaksi vieritys ja mielialaa parantava paletti vaihtuu, kun selaat sisältöä, se on täydellinen online-läsnäolo tärkeälle suunnittelukohteelle.

13. Katy Perry

WordPress-sivustot: Katy Perry

Jopa suuret julkkikset käyttävät Wordpressin tarjoamia työkaluja

Popprinsessa Katy Perry käyttää muuta kuin WordPressiä virallisen verkkosivustonsa ylläpitämiseen. Keskittymällä - ymmärrettävästi - visuaaliin ja sosiaalisen median vihjeisiin, sivusto käyttää taiteilijan korkean spesifikaation laukausta rohkeaan lausuntoon. Vieritä alas nähdäksesi kiertueen päivämäärät, oheistuotteet ja paljon muuta tai löydä lisää kuvakkeilla.

Se on puhdas, mutta hermostunut sivusto, joka onnistuu sekoittamaan taiteilijan erottuvan henkilökohtaisen bubblegum pop -kuvan käyttäjäystävälliseen, kiiltävään mag tyyliin. Menneet ovat kiireisten bändisivustojen päivät, jotka ovat täynnä liikaa animaatioita ja musiikkia, jota et voi lopettaa. Perryn verkkosivusto todistaa, että voit pakata paljon persoonallisuutta käyttämällä vain yksinkertaista valkoista taustaa ja helposti navigoitavia linkkejä, jolloin fanit voivat kuunnella, katsella ja oppia helposti ja heidän mukavuudessaan.

14. Mustesäiliö

WordPress-sivustot: mustesäiliö

Kao Collinsin sivusto on suunniteltu saamaan sinut ajattelemaan mustetta

Kao Collins on yksi maailman johtavista toimittajista, joka aloitti toimintansa vuonna 1989 Collins Inkjet -yrityksenä, yhden miehen toimintana, joka toimittaa mustetta Kodakin jatkuvalle mustesuihkutulostimelle. Ja jos et ole koskaan ajatellut mustetta (kiroamisen lisäksi, kun tulostimesi loppuu), Kao Collinsin sivusto The Ink Tank on muuttamassa sitä.

Rakentanut DBS Interactive , Mustesäiliö on katseenvangitsija WordPress-sivusto, joka vetää kaikki pisteet esiin tuodakseen uusimpia uutisia musteteollisuudesta ja esittelemällä joitain luovia tapoja, joita yritykset ja taiteilijat käyttävät tällä hetkellä mustetta. Kohokohta on siltä osin kuin painamme sen historiaa: upea parallaksi-yksisivulaite, joka on täynnä animaatioita ja tehosteita. joillakin tulostamisen tulevaisuuden mahdollisuuksilla.

Generate CSS - konferenssi verkkosuunnittelijoille: 26. syyskuuta, Rich Mix, Shoreditch, Lontoo

piirikynä ipad air 2: lle
(Kuvan luotto: Tulevaisuus)

Lue lisää: