WordPress-websteder: 14 fantastiske eksempler
Disse fantastiske WordPress-websteder viser det bedste fra dette populære CMS. Da det først blev lanceret i 2003, blev WordPress betragtet som et grundlæggende blogværktøj til amatører. Meget hurtigt startede det og blev et fuldt udviklet CMS, der nu driver millioner af websteder over hele verden. Og kreative fagfolk har skubbet CMS 'grænser for at skabe komplekse og smukke WordPress-websteder lige siden.
For at vise dig præcis, hvad denne utrolige CMS kan gøre, har vi valgt nogle af de bedste WordPress-websteder rundt. Hvis denne artikel inspirerer dig til at oprette dit eget WordPress-websted, disse Wordpress tutorials vil hjælpe dig med at komme i gang, eller hvis du vil opbygge en fantastisk portefølje, skal du tjekke vores guide til de bedste WordPress-porteføljetemaer .
01. Rafal Bojar
Designer Zhenya Rynzhuk brugte WordPress som et semi-headless CMS, med Vue.js til frontend, at oprette denne engagerende fotografiporteføljeside til Rafal Bojar . Den har en hjemmeside, der viser forhåndsvisning af udvalgte historier, et glat gitter til fremvisning af alt Bojars arbejde og en 'essens' side, der forklarer fotografens filosofi og tilgang.
'Målet var at give besøgende den unikke oplevelse og fremvise Rafals fantastiske værker,' siger Rynzhuk. Parret diskuterede et par forskellige backend-muligheder, men besluttede sig for WordPress, så webstedet ville være let at administrere og regelmæssigt opdatere med nye projekter.
Udover WordPress og Vue.js bruger webstedet en S3-spand til at gemme data, som leveres gennem Cloudfront for at sikre hurtige indlæsningstider. Rynzhuk brugte også Grundfjeld og Hendrik-Jan de Harders Skeletudsigt samt GSAP til animationerne.
02. Adel Vakula
Adel Vakula er en internationalt berømt model fra Ukraine, og dette reklameside for hende ankommer fra landsmænd Yabloko idéstudie , som ikke kun designede og kodede det, men skabte alt illustrationsarbejdet. Resultatet er en storslået særpræget visuel fest, der spænder over et antal maleriske vignetter med vores glamourøse heltinde.
Fra det åbne bomulds candy cloudscape, der bogstaveligt talt bobler med subtile animationer, Vakula stjerner i drømmende portrætter designet til at demonstrere en karismatisk personlighed. Hun har lunefuld udsigt over den parisiske nat oven på en gargoyle, der også fungerer som en YouTube-afspilningsknap, efter at have fanget et New York Subway-tog fra en platform komplet med busking-kat. Besøg til Venedig og Ibiza giver lige så excentriske baggrunde til Instagram- og e-mail-links, hvor selv cocktail-nippende sæler tilskynder til en følge. Det er tunge i kind ting, men færdig med sådan charme og teknik, at du ikke kan lade være med at blive forelsket. Selv musemarkøren går helt hjerteformet.
Bygget på WordPress CMS er et standout UI-element et sjovt afsnit, hvor du kan trække og slippe tøj til en virtuel Vakula for at se ægte modelleringsknapper. Når telefonkort til mulige støbninger går, slår denne en mere mindeværdig stilling end de fleste.
Forfatter: Mark Billen
03. Mellembarn
Prisvindende sandwich-butik i Philadelphia Mellemstore barn havde brug for et websted, der matchede dets quirky, uhøjtidelige stemning. Fuld service design og teknologi studie Selvbevidst tog udfordringen op og skabte et websted baseret på en helt skræddersyet WordPress-tema ved brug af Tømmer og ACF - en kombination, som studiepartner Mike Wagz kalder 'en spilskifter til seriøse WordPress-temaudviklere'.
Self Aware benyttede sig også af de nyeste webteknologier for at tilbyde en optimal oplevelse: layoutet blev oprettet ved hjælp af CSS-gitter og en Servicearbejder cacher statiske aktiver inklusive CSS- og JavaScript-filer for at fremskynde de indledende indlæsningstider.
'Middle Child oser af atmosfære fra alle kroge og kroge,' tilføjer Wagz. 'Det byder varmt velkommen kunder fra alle samfundslag med den helt rigtige mængde sjov, kitsch og quirk. Jeg synes, dette design er vellykket, fordi vi var i stand til at fange denne ånd og oversætte det til internettet. '
For at finde dit perfekte værktøj, tjek disse top hjemmesidebygere . Plus, se nedenfor for de bedste priser.
04. Havhøst
Når Canberra-baseret fiskemarked Havhøst havde brug for en ny brandidentitet og smart digital tilstedeværelse for at matche, vendte det sig til det australske web- og brandingbureau ED . WordPress-webstedet har et slående layout i avisstil med masser af finurlige detaljer at udforske.
'Når vi tænker på fisk og skaldyr, bliver mange af os ført tilbage til et minde om at spise fish and chips ved stranden med venner og familie,' siger designer Cam Tidy. 'Ofte pakkede disse takeaway-led i din mad i avis, så det føltes naturligt at udforske det som en visuel idé.'
Replikering af et statisk printlayout på nettet var dog ikke uden sine udfordringer. Holdet brugte CSS Flexbox til at omplacere indhold og samtidig opretholde en jævn afstand, uanset skærmstørrelse. Næsten hver måling er baseret på en responsiv skala ved hjælp af REM-enheder, hvilket gør det lettere at opretholde kontrol over type og billedforhold, når browseren skaleres.
Udvikler Bryn Shanahans foretrukne funktion er det faktum, at brugerne kan 'tegne' på webstedet, herunder via en interaktiv ordsøgning . 'Vi opnåede dette ved at dække siden med et HTML5 Canvas-element, som derefter blev brugt til at tegne brugerens tegninger på,' forklarer han.
ED bruger WordPress til mange af sine webstedsprojekter og finder det brugervenligt og intuitivt for klienter. '[WordPress har] let back-end-udvikling, som giver mere tid til at fokusere på frontend for at bringe designet til liv,' tilføjer udvikler Adam Forcucci. 'Evnen til gør det hovedløst ved hjælp af WP Rest API , giver os mulighed for at bruge rammer som React, som bliver kernen i vores fremtidige udvikling på platformen. '
05. Maxim Shkret
Baseret ud af Sankt Petersborg, Rusland, Maxim Shkret er en freelance digital kunstner. Hans imponerende WordPress-websted gifter sig med portefølje til e-handelsmarkedet og lancerer et nyt fundraising-initiativ.
Webstedet åbner på en serie af fire 3D-modeller eller digitale skulpturer, der kan trækkes og roteres 360 grader. Gris, ørkenræv, dobbelt natur enhjørning og smeltende panda kan drejes til venstre og højre for at opnå en favoriseret vinkel. Ved at klikke på knappen 'Køb dette skud' kan besøgende købe et digitalt billede i forskellige dimensioner til forskellige priser. Provenuet vil blive samlet tilbage til at omdanne hver digitale model til ægte fysiske skulpturer ved hjælp af en 3D-udskrivning fem-akset CNC-bearbejdningsproces. Det er en pæn idé til at invitere bidragydere og viser, hvordan en crowdfunding-tilgang kan knyttes til en typisk passiv oplevelse.
Webstedsproduktionskreditter inkluderer New Yorks Sochnik Design Studio, men den glatte UI-indsats overskygger aldrig Shkrets talent. Dette inkluderer et simpelt gallerisektion med stadig skulpturskud, der krusker og vinker gennem et vandigt filter. Det er en subtil effekt, men øger følelsen af struktur Shkret har til hensigt at give hvert stykke.
06. KOBU
Porteføljesider giver ikke overraskende fortsat noget af Internets mest frugtbare grund til kreativt udtryk og inspiration. Dette online telefonkort til portugisisk agentur KOBU følger den etos med et smagfuldt, tilbageholdt WordPress-websted, der stadig bobler med karakter. At kalde sig selv et 'brandlaboratorium', der ikke er bange for eksperimentering, viser det tekniske arbejde her fantasi over kompleksitet.
Over en række elementer får vi en påmindelse om, hvordan CSS og SVG kan kombineres for at give maksimal frontendkarakter. Absolut positionering bruges til at lægge charmerende trådrammemotiver på, bryde linierne mellem fed baggrundsfarveblokke og forbinde sektioner sammen. Et HTML5-videopanel i loop får en unik, svirrende kant ved hjælp af en SVG-form som en maske, der er placeret ovenfor, før casestudiebilleder halveres deres kantradius for at blive cirkulære. Webstedet gør brug af slick.js-karruselbiblioteket pænt til at 'trave' KOBU-teamet med kontorhest gennem midten af hovedsiden.
Zenithen er dog sandsynligvis den smule, vi ser først, og åbner på en bølgende lavalampe-lignende header produceret ved at manipulere SVG-stier. Ved hjælp af anime.js-pluginet, en polyvalent JavaScript-animationsmotor, er det et iøjnefaldende trick til oprettelse af farvepalet, hvis ikke andet.
Forfatter: Mark Billen
07. form
form er et strategisk designstudie med base i New York. Hjemmesiden har et animeret øjeæbledesign, der følger den besøgendes markør rundt på skærmen, mens overlejret tekst cykler gennem alle de ting, som noformat kan skabe. For at skabe øjeæblet udforskede holdet først designet i After Effects CC , inden du bruger three.js til at opbygge en interaktiv version, forklarer Ian Brewer, grundlægger og kreativ direktør for noformat.
'Vi brugte vertex og fragment shaders til at optimere til GPU-gengivelse og fik det til at pulsere og blinke noformat-logoet indeni,' fortsætter Brewer. 'Vi anvendte derefter effekter efterbehandling for at give det et mere organisk og mindre 3D-look ved at sløre kanterne og tilføje blomster til højdepunkterne.'
Resten af webstedet lever op til virkningen af den første side med glatte overgange og subtile parallakseffekter, der viser tekniske færdigheder uden at påvirke brugervenligheden.
'Vi valgte WordPress til vores websted for hurtig start og fleksibilitet,' forklarer Brewer. 'I årenes løb har vi bygget vores egne biblioteker og modulbaserede redigeringssystemer, der giver os mulighed for at oprette eller redigere et websted hurtigere end nogen anden CMS-løsning.'
08. Femme og hård
Hollandsk oplevelsesstudie Eventyrland har leveret e-handel med sass for Femme og hård . WordPress-webstedets in-your-face, sammenstød-tastic farveskema leverer online modeforhandlerens brandbesked fra off. Animerede 'klistermærker' - snurrende lollipops, jabbende pile, slikning af læber - skaber en fræk følelse og skal resonere med den Snapchat / Instagram-generation, som dette interval er rettet mod.
09. Puree Maison
Kartoffelmos er et kreativt og strategisk studie med base i Paris. Dens WordPress-websted skiller sig ud hovedsagelig takket være de solrige gule animerede klatter, der vises på svævningen, injicerer personlighed i kedelige mærkeerklæringer og giver liv til overgange. De hjælper også besøgende med at finde rundt og opfordrer dem til at udforske og interagere med webstedet.
10. Vi er næsten
Når din virksomhed handler om at tryllebinde mennesker, der bruger virtual reality til at fortælle følelsesladede historier, har du brug for et websted, der trækker folk ind i dit arbejde. Og boutique VR-studie Vi er næsten har formået det og derefter nogle. Dens websted, bygget af Herdl på WordPress bruger masser af banebrydende teknikker, herunder WebGL og 360-graders video, for at give dig en uimodståelig smag af dets fordybende tjenester. Tjek dens VR-testkørsler til Audi, komplet med uventede berømthedsgæster.
11. Asaro
Asaro er en udbyder af unikke eventyroplevelser og underholdende rejser for superyachtgæster rundt om i verden. Som en del af en bredere corporate rebrand blev dette smarte websted designet og udviklet af Bristol-baseret agentur Grøn kamæleon .
Bygget på en tilpasset WordPress-ramme for at holde løbende indholdsredigering let for klienten, bliver besøgende taget på en opdagelsesrejse fyldt med charme. Subtile rulleeffekter er pænt knyttet til en interaktiv stiplet linje, der tegner navigationsfremskridt på den måde, som en yachtkaptajn måske markerer kort. Brugerdefinerede CGI-gengivelser er blevet brugt som en grafisk enhed til at repræsentere Asaro 'S eksklusive servicetilbud i lyset af en knaphed på fotografiske aktiver på grund af begivenhedernes private karakter.
”Kunstretningen var inspireret af en blanding af vanddråbefotografering og teaterplakatdesign,” forklarer kreativ direktør Tom Anderson. 'Vi elskede det æstetiske ved fotograferingsstil og følte, at det hænger pænt sammen med det underliggende nautiske tema for projektet.'
Responsiv nok til ikke kun at se smukt konsistent ud på mindre skærme, adgangshastighed var også en motivation for at strømline effektiviteten. Med beboere, der er underlagt marine webforbindelser, er indlæsningstiderne mere skæve end hakkete på tværs af desktop, tablet og mobil.
Forfatter: Mark Billen
12. Design Museum Denmark
Bygget af Københavns-baseret design- og brandingbureau Dumme studier , stedet for Danmarks Designmuseum viser ikke kun museets arkiver, samlinger og forskning, men præsenterer det også i en up-to-date stil. Fra dets åbning af SVG-animation af museets logo til iøjnefaldende parallaksrulning og stemningsfremmende paletbytter, når du ruller gennem indholdet, er det den perfekte online tilstedeværelse til en vigtig designdestination.
13. Katy Perry
Popprinsesse Katy Perry bruger ingen ringere end WordPress til at være vært for sit officielle websted. Fokuserer - forståeligt nok - på visuelle og sociale medie-signaler, og webstedet bruger høje spec porteføljebilleder af kunstneren til at komme med en dristig erklæring. Rul ned for at se turnédatoer, merch og mere, eller brug ikonerne til at finde mere.
Det er et rent, men alligevel kantet sted, der formår at blande kunstnerens karakteristiske bubblegum pop personlige image med en brugervenlig, blank mag stil funktionalitet. Borte er de dage, hvor travle bandsider er fyldt med for meget animation og musik, du ikke kan stoppe. Perrys hjemmeside viser, at du kan pakke masser af personlighed ved hjælp af bare en simpel hvid baggrund og let navigerbare links, der giver fans mulighed for at lytte, se og lære let og når det passer dig.
14. Blækbeholderen
Kao Collins startede i 1989 som Collins Inkjet, en enmandsoperation, der leverer blæk til Kodaks kontinuerlige inkjetprinter, og er i dag en af verdens førende leverandører. Og hvis du aldrig rigtig har tænkt på blæk (ud over forbandelse, når din printer løber tør for), er Kao Collins websted, The Ink Tank, ved at ændre det.
Bygget af DBS Interactive , Blækbeholderen er en iøjnefaldende WordPress-side, der trækker alle stopper for at give dig banebrydende nyheder fra blækindustrien og fremvise nogle af de kreative måder, virksomheder og kunstnere i øjeblikket bruger blæk på. For os er det højdepunktet afsnittet Historie om udskrivning: en smuk parallax single-pager fyldt med animation og effekter, der fører dig hele vejen fra ler tabletter til nutidens high-speed single pass-udskrivning og ser frem på nogle af de fremtidige muligheder for udskrivning.
Læs mere:
