不丹旅游网站设计与开发使用WordPress

该客户拥有一个名为Raven不丹的网站,这是一个基本的信息网站,提供关于不丹的信息和他们提供的旅游。客户联系我们重新开发具有新功能和全新设计的网站。客户希望网站的主要功能是旅游模块、酒店模块、自定义评论、博客和定制开发的“创建您的行程”模块。因为这是为了旅游及旅游业,主要关注的是网站的外观和感觉。

项目详细信息

工业:旅游
工具使用:WordPress,自定义主题,高级自定义字段Pro, WP旅行,mPDF
技术应用:WordPress, PHP

地区:不丹

这个团队

项目协调员- 1
UI/UX设计师- 1
开发商- 1

网站的功能

该网站有以下特点。

  • 使用WordPress构建
  • 旅游和徒步旅行清单页
  • 根据类别浏览列表页面
  • 基于“地点”的旅游列表页面
  • 完整的详细信息页面,包括亮点,画廊,行程细节,常见问题,签证和护照信息,关税信息,如何达到和货币信息为每个旅游页面。
    带有“Book Tour”选项的旅游详细信息页面,通过表单将客户信息发送给管理员。
  • 定制设计的“关于不丹”专用页面,其中包括关于不丹和旅游业的所有信息,如遗产、食物、文化、气候、社区、自然、节日和最佳游览时间等
  • 团队页面,提供有关Raven不丹的团队和每个团队成员的专用页面的信息。
  • 酒店列表页面与评级
  • 酒店列表页面基于地点(类别)与评级
  • 酒店详细信息页与酒店的完整信息,如酒店类型,评级,位置,画廊,和详细描述。
  • 客户评论页面,显示来自Raven不丹的客户的评论。
    专门的常见问题页面,在不同的类别下有问题和答案。
    定制开发的“设计自己的行程”页面,允许客户使用多步表单设计自己的行程,并有各种选项可供选择。
  • 博客
  • 所有页面都有吸引力和独特的设计。
  • 加载速度很快
  • 定制设计的主页,提供了一个快速概述鸦不丹及其服务。

网站设计和开发过程

设计过程

由于该行业是旅游行业,网站的外观和感觉在网站的成功和覆盖面中起着重要的作用。不像其他网站,我们决定有更多的时间在这个网站的设计阶段。从字体选择,设计页面加载器到设计布局,我们的设计团队致力于每一个小细节来满足期望。我们的设计团队定期与客户开会讨论,获取/分享想法,并将其纳入设计中。对于每一页,我们都花了大量的时间来设计。当我们决定为所有网站页面设计模型时,我们采用了不同的方法。一旦页面的设计被批准,那么批准的设计就会被发送给开发团队,而不是等待整个设计阶段的完成。

渡鸦不丹旅游网站首页设计

主题选择

现有的网站只是一个提供旅游信息的信息网站。但是这个新网站不仅仅是一个信息网站。该网站有许多模块和自定义设计,所以我们决定去自定义主题开发

开发阶段

当我们决定从头开始做一个自定义主题开发时,我们必须计划我们要自定义构建的模块和那些可以通过使用第三方插件完成的模块。由于这是自定义主题开发,我们使用了高级自定义字段pro插件。

除了功能之外,我们还决定在整个网站中使用微妙的动画,使其更酷更吸引人。因此,我们在整个网站中采用了按钮、图像、链接等悬停效果的模式。

旅游模块

由于Tours模块是这个网站的核心,我们必须决定是使用任何第三方插件还是从头开始开发模块定制开发.我们对适合我们需求的可用插件进行了广泛的研究。同时考虑到项目的时间表,我们决定采用插件方法。我们为这个项目选择了“WP Travel”插件,我们决定自定义插件以满足我们的需求和自定义设计。

我们使用插件的核心设置的帖子类型和自定义分类类别,地点等,并匹配自定义设计,我们完全按照插件文档的要求,使用插件模板和插件挂钩来定制插件。

对于旅行团列表页面,我们使用了4列网格布局,为每个旅行团提供图像、旅行团标题、简短描述和天数。

渡鸦不丹旅游网站旅游页面设计

每个旅游细节页面都有很多与该旅游相关的信息。所以,为了以一种更好的方式为用户呈现它,我们使用了标签式设计。

旅游细节页面有关于旅游的重点,画廊,行程,常见问题,签证和护照,关税,如何到达,和货币信息的信息。这个页面也有一个专门的宽度视频部分,为每个旅游。

WP旅游插件提供了自己的“图书之旅”选项,内置表单,允许用户输入他们的查询,并将其发送给管理员。但它在表单字段和设计方面有自己的局限性。因此,我们必须自定义这个模块,并使用本节中使用Contact Form 7创建的Contact Form来满足我们的需求。

为了在前端突出显示特定的旅游,我们增加了管理员将旅游标记为“特色”旅游的能力,以及将其标记为“最受欢迎”的选项,这样无论旅游在主页还是旅游列表页面上列出,都可以显示最受欢迎的标签。

渡鸦不丹旅游网站旅游详细页面设计

我们使用ACF Pro插件创建自定义字段,用于在选项卡视图中显示信息,也用于其他信息,如可用性、持续时间、最佳访问时间等。

酒店模块

我们通过设置一个新的自定义帖子类型“Hotels”和一个自定义分类方法“Hotel Categories”来定制开发了这个Hotels模块。我们使用ACF Pro插件为星级、图库和酒店类型创建自定义字段。


渡鸦不丹旅游网站酒店页面设计

为了匹配外观和感觉,我们在酒店列表页面中使用了类似的4列网格布局,与旅游列表页面相比,图像尺寸不同。

每家酒店都有自己的专属页面,提供酒店的各种信息,如酒店名称、酒店描述、星级、画廊和酒店类型。

渡鸦不丹旅游网站酒店详细页面设计

顾客评论

customer reviews模块是一个自定义模块,通过设置一个新的自定义帖子类型“customer reviews”开发,与酒店模块相比几乎没有区别。在本模块中,我们决定不使用类别,甚至不使用详细信息页面。尽管Customer Reviews是一个独立的模块,但它只有一个带有分页功能的列表页面。每个评论将有一个评论图像,评论标题,评论描述,客户名称,位置和星级。

博客模块和CMS页面

对于Blog模块,我们采用了与其他列表页面不同的设计方法。我们采用了列表视图设计,而不是网格视图。在博客列表页面上,每个博客都有一个全宽度的博客特色图片、标题、描述和博客所列的类别。每篇博客文章都有社交分享按钮。


渡鸦不丹旅游网站博客页面设计

对于网站上的其他CMS页面,我们也使用了同样的博客详细页面设计。

作为重新设计,我们在整个网站做了一个布局,以确保所有的页面和帖子都有一个独特的设计模式,根据新的设计。

关于不丹

即使它只是一个CMS页面,这个页面有很多信息。另外,关于不丹的页面都是关于不丹和旅游业的。

由于关于不丹页面有如此多的信息,我们确保用户不需要滚动太多来阅读内容。因此,我们为主要标题使用了一个选项卡视图,为内部标题使用了一个垂直的类似选项卡的视图。

设计行程模块

尽管我们在网站上列出了各种各样的行程,客户还是决定为客户提供一个选择,让他们可以从各种地方和活动中选择自己的行程。


渡鸦不丹旅游和旅游网站定制Itnery页面设计

由于这个模块比较大,需要定制开发,所以我们决定在完成其他模块后再开发这个模块。

该模块有各种选项供客户选择,如旅行者数量(成人,学生,儿童,儿童),旅行日期(从&到日期),旅行目的,选择多选他们想要访问的地方(Bumthang, Haa, Paro),选择多选他们喜欢沉迷的活动(徒步旅行,露营,漂流)和基本联系信息,如姓名,电子邮件和电话号码等,也可以选择订阅Raven不丹的新闻通讯。

由于这个表单有这么多的字段和选项可供选择,将它们作为一个正常的表单显示在一个页面上并不适合我们整个网站的独特设计。因此,我们决定根据表单字段的性质将表单分成3个步骤,从而将该表单开发为Multi-Step表单。

  • 步骤1将有一个地方选择选项显示在一个很酷的UI与悬停和点击填充动画。
  • 步骤2将有活动选择显示在一个很酷的UI与悬停和点击填充动画。
  • 步骤3将有姓名,电子邮件,电话和通讯订阅复选框。旅行者、旅行日期和旅行目的字段的数量将出现在所有3个步骤中,因为这些可以随时更改。

一旦表单提交,用户将被重定向到一个感谢页面,该页面将有Whatsapp和Skype的链接,用户可以点击链接并开始与Raven不丹的团队聊天。

一旦表单成功提交,管理员将收到一封包含用户提交的详细信息的电子邮件,客户也将收到一封包含提交的详细信息的电子邮件和一个定制的PDF,其中包含关于不丹、Raven不丹旅游和他们提交的表单信息。

在开发这个PDF生成模块时,我们遇到了各种各样的障碍,因为它涉及许多步骤。我们使用mPDF动态创建一个PDF以及用户提交的信息,并将PDF作为附件发送到电子邮件中。

除了电子邮件,管理员还可以在管理后端检查表单提交。

网站迁移过程

我们在自己的服务器上进行开发。此外,由于这是一个网站改造,旧网站已经有很少的博客文章和页面。由于旧网站只是一个信息网站,我们在迁移之前在新网站上重新创建了所有的游览、页面和帖子。我们的搜索引擎优化团队还确保我们不会失去现有网站的任何SEO好处,通过分析现有网站的URL结构和设置必要的重定向。

在所有这些SEO检查之后,我们使用“all in One WP Migration”插件成功地将新网站迁移到实时环境中。

在迁移网站后,我们遵循以下步骤。

  • 正在修复CSS和JS
  • 移动响应性测试
  • 使网站在各个页面上看起来一致
  • 从功能测试和修复开始
  • 通过设计人员级别的测试和修复
  • 在测试之后,我们删除了在开发和测试阶段发布的测试表单提交。
  • 通过最终的实时测试和修复

结果

  • 标题中的简单导航增加了200%的点击量
  • 更好的用户体验,旅游清单和旅游详情页面
  • 更好的用户体验酒店列表和酒店详细信息页面
  • 干净和结构化的后端,方便将来客户端更新
  • 设计您自己的行程表,允许用户设计他们的旅行。这有助于筛选和识别更多的优质线索,从而确保更好的线索质量
  • 改善用户体验,吸引更多用户。
  • 网站已准备就绪新的营销活动吸引更多用户

作为顶尖的网站解决方案提供商, ColorWhistle可以创建,战略,设计和开发您的网站需求。从集成第三方工具到网站开发,我们可以为您的业务挑战和目标提供有效的解决方案。

如果您在网站设计、网站开发方面需要任何帮助数字营销适用于任何企业保持联系或致电+1(919)234-5140。我们很高兴与您合作。

拉杰夫
关于作者- Rajeev

Rajeev是一名WordPress开发人员,有7年以上的经验,在旅游、教育、房地产和电子商务等各个行业建立网站,性能和网站加载速度是核心目标。他还热衷于基于api的网站开发,因为他相信这可以使企业以创造性的方式超越。工作之余,他也是费德勒的粉丝,梦想有一天能在中心球场观看费德勒的比赛,他喜欢在业余时间打羽毛球!

准备开始了吗?

让我们来创作你的下一个数字故事

我们的专业认证- ColorWhistle
转到顶部
关闭弹出

大家一起说

    当然可以,请留下您的详细信息,我们的代表将很高兴给您回电!

    例:无名氏

    例:美国

    更多细节,加速这个过程:)

    Baidu
    map