跳到主要内容

WordPress网站:14个非常棒的例子

这些惊人的WordPress网站展示了这一流行的CMS中最好的。当它在2003年首次启动时,WordPress被视为业余爱好者的基本博客工具。很快它起飞了,成为一个完全成熟的CMS,现在为全世界数百万座位提供了数百万的网站。创意专业人员一直推动CMS的边界以创建以来创建复杂和美丽的WordPress网站。

为了向你展示这个难以置信的CMS能做什么,我们挑选了一些最好的WordPress网站。如果这篇文章激励你建立自己的WordPress网站,这些WordPress教程将帮助您开始,或者如果您想建立一个令人敬畏的产品组合,请查看我们的指南WordPress产品组合主题

01.Rafal Bojar

WordPress网站:Rafal Bojar

此摄影产品组合使用WordPress旁边的Vue.js (图片信用:Rafal Bojar)

设计师Zhenya Rynzhuk使用WordPress作为半无头CMS,与vue.js.对于前端,创建这一参与摄影投资组合网站Rafal Bojar。它提供了一个主页,显示所选故事的预览,是一个光滑的网格,用于展示所有Boja新利在线r的工作,以及解释摄影师的哲学和方法的“精华”页面。

Rynzhuk说:“我们的目标是为游客提供独特的体验,并展示拉法尔的惊人作品。”这对搭档讨论了一些不同的后端选项,但最终决定使用WordPress,这样网站就可以更容易管理,并且可以定期更新新项目。

除了WordPress和Vue.js之外,该网站还使用S3桶来存储数据,通过Cloudfront交付,以确保快速加载时间。Rynzhuk也使用了基岩和Hendrik-Jan de更加努力Vue骨架以及动画的GSAP。

02. Adel Vakula.

WordPress网站:Adel Vakula

这个型号的网站充满了迷人,露营的幽默 (图片信用:Adel Vakula)

Adel Vakula是一家来自乌克兰的国际知名模式,这座促销部门来自同胞的同胞Yabloko Ideas Studio,谁不仅设计和编码了它,而是创建了所有的插图工作。结果是一个华丽的独特视觉盛宴,涵盖了一些具有我们迷人的女主角的画家鹅卵石。

从开头的棉花糖云景,字面上的气泡与微妙的动画,vakula.梦幻肖像中的星星旨在展示魅力的个性。她在捕获纽约地铁列车从一个完整的商务猫捕获纽约地铁火车后,她随便俯瞰巴黎人的夜晚。访问威尼斯和伊维萨提供同样的古怪的背景,即可达到Instagram和电子邮件链接,在那里甚至鸡尾酒 - 啜饮的密封件鼓励跟随。这是脸颊的舌头,但是用这种魅力和技巧,你无法帮助坠入爱河。即使是鼠标指针也变得全部心形。

构建在WordPress CMS上,一个突出的UI元素是一个有趣的部分,您可以在虚拟vakula拖放到虚拟vakula以查看真实建模捕捉。作为可能的铸件的呼叫卡,这一个比大多数人更令人难忘的姿势。

作者:Mark Billen.

03.中年人

WordPress网站:中间儿童三明治店

中间孩子建在完全定制的WordPress主题 - 点击图片探索该网站

屡获殊荣的费城三明治店中间的孩子需要一个与其古怪,不稳定的氛围相匹配的网站。全方位服务设计和技术工作室自我意识升起挑战,创建一个基于完全定制的网站WordPress主题使用木材ACF.- Studio Partner Mike Wagz的组合调用“用于严重WordPress主题开发人员的游戏更改器”。

自我意识还利用最新的网络技术来提供最佳体验:使用的布局使用CSS网格和A.服务工作者缓存静态资产,包括CSS和JavaScript文件,以加快初始加载时间。

“中间儿渗出了每个角落和裂缝的气氛,”瓦古兹增加了。“它热情地欢迎各界人士的顾客,只需有适当的乐趣,媚俗和怪癖。我认为这种设计是成功的,因为我们能够捕捉这种精神并将其翻译在网上。”

要查找完美的工具,请查看这些顶部网站建设者。另外,请看下面最好的价格。

04.海收获

WordPress网站:iPad上的海收获网站

在其WordPress的网站上使用了一份报纸风格的布局,用于海洋收获

当堪培拉的海鲜市场海收获需要一个新的品牌标识和智能数字存在来匹配,转向澳大利亚网页和品牌机构埃德。WordPress网站体育了一个醒目的报纸风格的布局,充满了古怪的触摸探索。

设计师凯姆•泰迪(Cam Tidy)表示:“当我们想到海鲜时,许多人会回想起与朋友和家人在海滩上吃炸鱼和薯条的记忆。”“通常这些外卖店会把你的食物用报纸包起来,所以把它作为视觉创意来探索就很自然了。”

不过,复制静态,打印布局并非没有挑战。该团队使用CSS FlexBox来重新定位内容,同时保持一致的间距,无论屏幕大小如何。几乎每次测量都基于使用REM单元的响应量大,使得更容易根据浏览器尺度保持对类型和图像比例的控制。

开发人员Bryn Shanahan最喜欢的功能是用户可以在网站上“绘制”,包括通过交互式wordsearch。“通过用HTML5 Canvas元素覆盖网站,我们通过HTML5 Canvas元素覆盖了这一点,然后用来将用户的图纸绘制到”中“。”

ED使用WordPress进行了许多网站项目,为客户提供了用户友好和直观的。“[WordPress有]易于后端开发,它允许更多的时间专注于前端将设计带入生活中,”为Coveloper Adam forcucci添加了开发者。“的能力使用WP REST API使其无头,允许我们使用框架,例如React,这成为我们未来在平台上发展的核心。“

05.Maxim Shkret.

WordPress网站:Maxim Shkret

'熔化熊猫'可以左右旋转 (图片信用:Maxim Shkret)

出于俄罗斯圣彼得堡,Maxim Shkret.是自由数字艺术家。他令人印象深刻的WordPress网站将投资组合与电子商务市场结婚,推出了一项小说筹款计划。

该网站在一系列四种3D模型上打开,或者可以拖动和旋转360度的数字雕塑。猪,沙漠狐狸,双人自然的独角兽和熔化的熊猫可以左右旋转,以实现有利的角度。通过点击“购买此镜头”按钮,访问者可以以各种尺寸为各种价格购买数字图像。使用3D打印五轴CNC加工过程将汇总回收将每个数字模型转换为实际物理雕塑。这是邀请贡献者的一个简洁的想法,并展示了众群方法如何附加通常被动经验。

网站生产信用包括纽约的索契设计工作室,但Slick UI的努力从未覆盖过Shkret的才能。这包括静止雕塑镜头的简单画廊部分,通过水式过滤器纹波和波。这是一个微妙的效果,但提高了纹理感觉的感觉旨在给每件作品。

06. Kobu.

WordPress网站:KOBU创意机构

Kobu网站打开了起伏的熔岩灯风格的主页

不出所料,作品集网站继续为创意表达和灵感提供一些最肥沃的土壤。18新利最新版这是葡萄牙办事处的网上电话卡Kobu.遵循带有雅致的精美的歌词,克制仍然具有字符的泡沫。致电自己是一个没有实验的“品牌实验室”,技术工作在这里证明了对复杂性的想象力。

通过一系列元素,我们可以了解如何将CSS和SVG结合起来,以获得最大的前端字符。绝对定位用于覆盖迷人的线框图案,打破大胆的背景色块之间的线,并将部分连接在一起。一个循环的HTML5视频面板得到一个独特的摆动边缘使用SVG形状作为掩膜,之前的案例研究图像的边界半径减半成为圆形。该网站巧妙地使用slik .js carousel库来“快步”KOBU团队,与办公室马,通过主页面的中间。

然而,Zenith可能是我们首先看到的钻头,通过操纵SVG路径产生的起伏熔岩灯样标题。利用Anime.js插件,一个多价Javacript动画引擎,它是建立颜色调色板的引人注目的技巧,如果没有别的话。

作者:Mark Billen.

07. noformat.

WordPress网站:noformat主页

Noformat的主页有很多直接影响

noformat是一家位于纽约的战略设计工作室。主页具有动画的眼球设计,沿着屏幕周围的游客的光标遵循屏幕,而NoforMat可以创建的所有内容覆盖文本周期。创造眼球,团队首先探索了设计影视特效CC,在使用three.js建立交互式版本之前,请解释Noformat的Ian Brewer,创始人和创意总监。

“我们使用顶点和片段着色器来优化GPU渲染,并使其脉动并闪烁NoFormat Logo内部,”勒瑞尔继续。“然后我们应用后处理效果通过模糊边缘并将绽放添加到亮点来使其更具有机和更少的3D外观。”

网站的其他部分与第一页的效果相当,流畅的滚动过渡和微妙的视差效果在不影响可用性的情况下展示了技术技能。

“我们为我们的网站选择了WordPress以获得速度,以发动和灵活性,”啤酒商解释道。“多年来,我们建立了自己的库和基于模块的编辑系统,允许我们比任何其他CMS解决方案更快地创建或编辑网站。”

08. Femme和凶悍

荷兰体验设计工作室仙境用Sass提供了电子商务Femme和fierce.。WordPress网站的内容,冲突式调色方案从OFF中提供了在线时尚零售商的品牌信息。动画的“贴纸” - 旋转棒棒糖,刺臂箭头,舔嘴唇 - 创造一个厚脸皮的感觉,并应与此范围的Snapchat / Instagram生成产生响应。

09. Puree Maison.

PuréeMaisonWordpress网站

动画涂鸦让这个WordPress网站生动起来

泥精制的是一个创意和战略工作室,总部设在巴黎。它的WordPress网站之所以能脱颖而出,主要是因为它在鼠标悬停时出现了阳光黄色的动画涂鸦,为乏味的品牌声明注入了个性,以及生动的过渡。它们还可以帮助访问者找到他们的路线,鼓励他们探索和与网站互动。

我们几乎是

WordPress网站:我们几乎是网站

We Virtually Are的网站充分利用360度视频来销售其服务

当你的业务是用虚拟现实吸引人们来讲述情感故事时,你需要一个吸引人们进入你的工作的网站。以及精品VR工作室我们几乎是成功地做到了这一点。它的网站,由牧草在WordPress上,使用大量的尖端技术,包括WebGL和360度视频,为您提供不可抗拒的沉浸式服务。查看奥迪的VR测试驱动器,配有意外的名人客人。

11. asaro

WordPress网站:Asaro

Asaro的网站响应于所有屏幕尺寸时足以看起来很漂亮

Asaro是一家独特的冒险体验和世界各地超级游艇客人的娱乐旅程。作为更广泛的企业Reband的一部分,这座Slick网站是由布里斯托尔的代理商设计和开发的绿色变色龙

建立在自定义WordPress框架上,以保持对客户端的持续内容编辑,参观者被带入魅力的发现。微妙的滚动效果与交互式虚线整齐地链接到交互式虚线,在游艇船长可能标记图表的方式绘制导航进展。自定义CGI渲染已被用作代表的图形设备asaro由于事件的私密性,摄影资产的稀缺,我们提供了独家的服务。

“艺术方向受到水滴摄影和戏剧海报设计的混合的启发,”Creative Director Tom Anderson解释道。“我们喜欢摄影风格的审美,并认为它与项目的底层航海主题很好地捆绑在一起。”

响应性足够好,不仅在小屏幕上看起来很漂亮,访问速度也是简化性能的一个动机。由于船上的居民受海上网络连接的支配,在桌面、平板电脑和移动设备上加载时间比波动更频繁。

作者:Mark Billen.

12.丹麦设计博物馆

WordPress网站:丹麦设计博物馆

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

由哥本哈根的设计和品牌机构建造愚蠢的工作室,丹麦的网站设计博物馆不仅展示了博物馆的档案,收藏品和研究,还呈现出爆炸最新风格。从博物馆徽标开放的SVG动画,通过引人注目Parallax滚动随着内容滚动,滚动的情绪增强调色板递送,它是必不可少的设计目的地的完美在线存在。

13. Katy Perry.

WordPress网站:Katy Perry

即使是主要名人也正在利用WordPress提供的工具

Pop Princess Katy Perry使用oodpress以外的方式托管她的官方网站。专注 - 可理解 - 在视觉和社交媒体提示上,该网站利用艺术家的高规格组合射击来发表大胆的陈述。向下滚动以查看旅游日期,merch等,或使用图标发现更多。

这是一个干净的剪辑又有前卫的网站,该网站设法将艺术家独特的泡沫平台个人形象混合,具有用户友好的光泽Mag样式功能。繁忙的乐队网站的日子已经过去了,你无法停止的动画和音乐。佩里的网站证明您可以只使用简单的白色背景和易于通航的链接在充足的个性中包装,使粉丝能够轻松聆听,观看和学习的选择。

14.墨水罐

WordPress网站:墨水坦克

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

从1989年开始,柯林斯喷墨公司是一家为柯达连续喷墨打印机提供油墨的公司,如今高柯林斯是世界领先的供应商之一。如果你从未真正考虑过墨水(除了在打印机用完时诅咒别人),高·柯林斯(Kao Collins)的网站“墨水坦克”(The ink Tank)即将改变这一点。

由__建造DBS互动墨槽是一款引人注目的WordPress网站,拉出所有停车,让您从油墨行业带来尖端新闻,并展示一些创意方式企业和艺术家目前正在使用墨水。突出显示,就我们而言,它是其印刷部分的历史:一款华丽的视差单人游机包装有动画和效果,从粘土片到达今天的高速单通印刷,并展望未来在一些未来的印刷可能性。

生成CSS -网页设计师会议:9月26日,Rich Mix, Shoreditch,伦敦

(图片信用:未来)

阅读更多: