14个精彩的网站可供浏览

当它于2003年首次推出时,WordPress被视为一种博客工具。它很快就起飞了,成为全球数百万网站上使用的完全成熟的CMS。从那以后,创意专业人士一直在推动CMS的界限,创建复杂而美丽的WordPress网站。

对于那些仍然认为它是业余爱好者和业余爱好者的工具的人,我们已经选择了一些最好的WordPress网站来向您展示这个令人难以置信的内容管理系统能够做什么。

+$And if you're fully convinced and inspired to make your own site, you can get started here with aWordpress教程

01. +$Middle Child

WordPress websites: Middle Child sandwich shop

+$Middle Child is built on a completely bespoke WordPress theme – click the image to explore the site

+$Award-winning, Philadelphia-based sandwich shop Middle Child needed a website that matched its quirky, unpretentious vibe. Full-service design and technology studio+$Self Aware+$rose to the challenge, creating a site based on a completely bespokeWordPress主题运用+$Timber+$ACF+$– a combination that studio partner Mike Wagz calls "a game-changer for serious WordPress theme developers".

+$Self Aware also made use of the latest web technologies in order to offer an optimal experience: the layout was created usingCSS网格,和服务人员+$caches static assets including CSS and JavaScript files in order to speed up initial load times.

+$"Middle Child oozes atmosphere from every nook and cranny," adds Wagz. "It warmly welcomes customers from all walks of life with just the right amount of fun, kitsch, and quirk. I think this design is successful because we were able to capture this spirit and translate it to the web."

02. 海洋收获

Sea Harvest website on iPad

ED在其基于WordPress的网站上使用报纸式布局进行Sea Harvest

当基于堪培拉的海鲜市场Sea Harvest需要一个新的品牌标识和智能数字存在匹配时,它转向澳大利亚网络和品牌代理机构ED。 WordPress网站采用引人注目的报纸式布局,有很多奇特的探索方式。

+$"When we think about seafood, many of us are taken back to a memory of eating fish and chips by the beach with friends and family," says designer Cam Tidy. "Often these takeaway joints would wrap your food in newspaper, so it felt natural to explore that as a visual idea."

+$Replicating a static, print layout on the web wasn't without its challenges, though. The team used CSS Flexbox to reposition content whilst maintaining consistent spacing, regardless of screen size. Nearly every measurement is based on a responsive scale using REM units, making it easier to maintain control over type and image proportions as the browser scales.

+$Developer Bryn Shanahan's favourite feature is the fact that users can 'draw' on the site, including via an互动文字搜索+$. "We achieved this by covering the site with an HTML5 Canvas element, which was then used to draw the user's drawings onto," he explains.

ED使用WordPress进行很多网站项目,发现它对用户友好且直观。 “[WordPress]具有简单的后端开发,可以让更多的时间专注于前端,将设计变为现实,”开发人员Adam Forcucci补充道。 “的能力使用WP Rest API使其无头,允许我们使用React等框架,这将成为我们在平台上未来发展的核心。“

03. +$KOBU

WordPress websites: KOBU creative agency

+$The website for KOBU opens with an undulating lava lamp-style homepage

+$Portfolio sites, unsurprisingly, continue to provide some of the web’s most fertile ground for creative expression and inspiration. This online calling card for Portuguese agency KOBU follows that ethos with a tasteful, restrained WordPress website that still bubbles with character. Calling itself a 'brand laboratory' that is unafraid of experimentation, the technical work here demonstrates imagination over complexity.

+$Over a series of elements, we get a reminder of how CSS and SVG can be combined for maximum frontend character. Absolute positioning is used to overlay charming wireframe motifs, breaking up the lines between bold background colour blocks and linking sections together. A looped HTML5 video panel gets a unique wiggly edge using an SVG shape as a mask positioned above, before case study images have their border radius halved to go circular. The site makes neat use of the slick.js carousel library to ‘trot’ the KOBU team, with office horse, through the middle of the main page.

+$The zenith, though, is probably the bit we see first, opening on an undulating lava lamp-style header produced by manipulating SVG paths. Utilising the anime.js plugin, a polyvalent JavaScript animation engine, it’s an eye-catching trick for establishing colour palette, if nothing else.

作者:+$Mark Billen

04. NOFORMAT 

noformat homepage

Noformat的主页有很多直接影响

Noformat是一家位于纽约的战略设计工作室。主页采用动画眼球设计,跟随访客在屏幕周围的光标,而覆盖文本循环遍历noformat可以创建的所有内容。为了创造眼球,该团队首先探索了设计After Effects CC在使用three.js构建交互式版本之前,noformat的创始人兼创意总监Ian Brewer解释道。

+$"We used vertex and fragment shaders to optimise for GPU rendering and made it pulsate and flash the noformat logo inside," continues Brewer. "We then applied post-processing effects to give it a more organic and less 3D look by blurring the edges and adding bloom to the highlights."

该网站的其余部分辜负了第一页的影响,光滑的滚动过渡和微妙的视差效果展示了技术技能,而不会影响可用性。

+$"We chose WordPress for our site for speed to launch, and flexibility," explains Brewer. "Over the years we have built our own libraries and module-based editing systems that allow us to create or edit a site faster than any other CMS solution."

05. 女人和凶猛

荷兰体验设计工作室仙境已经为Femme和Fierce提供了电子商务。 WordPress网站的面对面,冲突式配色方案提供了在线时尚零售商的品牌信息。动画'贴纸' - 旋转棒棒糖,刺箭,舔嘴唇 - 创造一种厚颜无耻的感觉,应该与Snapchat / Instagram一代产生共鸣。

06. Puree Maison

Purée Maison WordPress website

动画涂鸦使这个WordPress网站栩栩如生

PuréeMaison是一家位于巴黎的创意和战略工作室。它的WordPress网站脱颖而出,主要归功于悬停时出现的阳光黄色动画涂鸦,为无聊的品牌陈述注入个性,并活跃过渡。他们还帮助访问者找到自己的方式,并鼓励他们探索和与网站互动。

07. 我们实际上是

We Virtually Are's site

我们实际上是网站充分利用360度视频来销售其服务

当您的业务就是用虚拟现实来吸引人们讲述情感故事时,您需要一个吸引人们进入您工作的网站。精品VR工作室We Virtually Are已经管理了那个,然后一些。它的网站,由Herdl在WordPress上,使用大量尖端技术,包括WebGL和360度视频,为您提供不可抗拒的沉浸式服务。查看奥迪的VR测试驱动器,以及意外的名人客人。

08. +$Asaro

WordPress websites: Asaro

+$Asaro's site is responsive enough to look beautiful on all screen sizes

+$Asaro is a provider of unique adventure experiences and entertaining journeys for superyacht guests around the world. As part of a broader corporate rebrand, this slick website was designed and developed by Bristol-based agency绿色变色龙

+$Built on a custom WordPress framework to keep ongoing content editing easy for the client, visitors are taken on a voyage of discovery packed with charm. Subtle scroll effects are linked neatly to an interactive dotted line, plotting navigational progress in the way a yacht captain might mark charts. Custom CGI renders have been utilised as a graphical device for representing Asaro’s exclusive service offerings, in light of a scarcity of photographic assets due to the private nature of the events.

+$“The art direction was inspired by a mixture of water drop photography and theatrical poster design,” explains creative director Tom Anderson. “We loved the aesthetic of the photography style and felt that it tied in nicely with the underlying nautical theme of the project.”

+$Responsive enough to not only look beautifully consistent on smaller screens, access speed was also a motivation for streamlining performance. With boat dwellers at the mercy of marine web connectivity, load times are more chipper than choppy across desktop, tablet and mobile.

作者:+$Mark Billen

09. 丹麦设计博物馆

WordPress websites: Danish Design Museum

智能使用视差滚动和响应式图像使丹麦设计博物馆的网站成为必看之处

由哥本哈根设计和品牌推广机构建造愚蠢的工作室,丹麦设计博物馆的网站不仅展示了博物馆的档案,收藏和研究,而且还以最新的风格呈现。从它开放的SVG动画博物馆的标志,到引人注目视差滚动当您滚动浏览内容时,它可以提升心情,增强情绪,是完美的在线体验。

10. 华特迪士尼公司

Walt Disney website

甚至迪士尼也利用了WordPress的力量

想进一步证明WordPress不仅适用于业余爱好者和小公司吗?全球巨头迪斯尼使用WordPress创建其光滑的网站。精简的背部网站设计保持简洁,充足的空白空间,而文本框上的彩虹色调则增添了迪士尼魔力的暗示。沃尔特迪斯尼公司的使命是成为世界领先的娱乐和信息生产商和提供商之一。通过其专业网站,它可以展示其品牌组合,以帮助区分其内容,服务和消费产品。

11. 凯蒂佩里

Katy Perry's website

甚至主要名人也在使用Wordpress提供的工具

流行公主Katy Perry使用WordPress来主持她的官方网站。聚焦 - 可以理解 - 在视觉和社交媒体线索上,该网站利用艺术家的高规格投资组合作出大胆的陈述。向下滚动以查看旅行日期,商品等,或使用图标查看更多信息。

这是一个干净利落但前卫的网站,它将艺术家独特的泡泡糖流行个人形象与用户友好,光滑的mag风格功能融为一体。繁忙的乐队网站充斥着太多动画和音乐的日子已经一去不复返了。佩里的网站证明,只需简单的白色背景和易于导航的链接,您就可以充分体现个性,让粉丝可以轻松地在方便时聆听,观看和学习。

12. 墨水盒

Ink Tank website

Kao Collins的网站旨在让您考虑墨水

+$Starting out in 1989 as Collins Inkjet, a one-man operation supplying ink for Kodak's continuous inkjet printer, today Kao Collins is one of the world's leading suppliers. And if you've never really thought about ink (beyond cursing when your printer runs out), Kao Collins' site, The Ink Tank, is about to change that.

由__建造DBS Interactive+$, The Ink Tank is an eye-catching WordPress site that pulls out all the stops to bring you cutting-edge news from the ink industry and showcase some of the creative ways businesses and artists are currently using ink. The highlight, as far as we're concerned, is its History of Printing section: a gorgeous parallax single-pager packed with animation and effects, taking you all the way from clay tablets to today's high-speed single pass printing, and looking ahead at some of the future possibilities of printing.

13. 哈佛大学设计研究生院

Harvard GSD website

哈佛GSD的WordPress网站引人注目,俏皮和积极

陈规定型的大学网站往往是一个非常无聊和过时的事情。但是,哈佛大学设计研究生院的网站,由设计Upstatement+$, sets the bar much higher. "The GSD is a fantastic place where all kinds of amazing ideas are being generated, and we wanted to really bring out the stories and topics inside the school and surface them in a way that showcases the ideas and energy of the community," says Mike Swartz, partner at Upstatement.

GSD的设计引人注目,充满乐趣和积极进取,尽管它可以在需要的时候让内容显示出来。周到的动画在恰当的时刻交织在一起,而不是压倒性的。每个悬停状态都会调用动画,帮助用户与内容进行交互。图像的使用是有目的的 - 没有一个用作背景或纹理。所有都有功能,大多数都有评论。

除了所有视觉复杂性之外,网站背后的开发团队将这个项目带到了另一个层次。 Swartz说:“Upstatement在这个项目上的工程负责人Mike Burns与学校一起收集并对其基础设施进行了现代化改造,将其全部整合到一个由WordPress驱动的API中。”

14. 旅行波特兰

Travel Portland website - built on WordPress

精彩响应的Travel Portland网站建立在WordPress上

+$Travel Portland aims to inspire people to visit Portland in Oregon, US, and to help them plan their trip with tools and content, highlighting the unique opportunities in the city. Every page of its site has been designed cleanly, with images capturing the Portland experience – from waterfalls to food trucks.

响应精美的网站建立在WordPress上,并使用基于Zurb基金会框架的定制响应主题。整个站点也使用第三方API,包括Storify,MapBox,Weather Underground和ChooseCulture。

该团队使用MaxMind的地理位置API,使他们能够根据访问者的位置自定义主页上的内容。这使他们可以为城镇内访客提供与规划阶段相比的不同信息。聪明。

阅读更多:



翻译字数超限