如何在 WordPress 中构建受 Airbnb 启发的图片库

已发表: 2023-01-04

您是 WordPress 用户并注意到流行的租赁平台 Airbnb 使用的图片库看起来有多好？如果您想在您的网站上复制它，请不要再犹豫了！您可以在不到 10 分钟的时间内使用正确的工具和几个简单的步骤快速重现它。

无论您是经验丰富的 WordPress 用户还是新手，本教程都会为您提供所有您需要了解的知识，让您开始行动！

Airbnb 的画廊设计

简洁而强大的网站设计对于成功创建转换和将客户转变为回头客至关重要。这就是 Airbnb 的房源图片库的目标。

让我们探讨一下为什么 Airbnb 图片库如此受欢迎：

高质量的专业拍摄地点
主要图像的简单、干净和用户友好的布局
完整画廊的干净展示
通过灯箱轻松浏览所有照片的能力
显示每个图像的标题或说明
灯箱图像过渡效果
通过各种渠道的画廊共享选项
导航箭头

幸运的是，您可以使用 Modula 插件轻松地在 WordPress 上重新创建 Airbnb 画廊风格的图像。调整一些简单的设置，就是这样！继续阅读，您会发现将您的图片库变成类似 Airbnb 的图片库是多么容易。

像在 Airbnb 上一样打造令人惊叹的图片库

您需要一个 WordPress 网站和一个托管服务提供商来设置您的图片库，因此在继续执行这些步骤之前牢记这一点至关重要。如果您还没有网站，可以按照 WordPress 安装指南中的说明快速构建一个网站。

一旦您的网站启动并运行，您需要选择一个插件来帮助创建您的图片库。尽管 WordPress 存储库中还有其他图片库插件，但我们建议使用 Modula。这个插件有很多自定义选项，一个具有基本功能的免费版本，并且是用户友好的。

创建这种类型的图片库需要一些设置，您可以通过购买 39 美元的入门计划来解锁。购买后，有四个主要步骤可以像在 Airbnb 上一样构建和展示画廊。

️ 安装模块

第一步是安装和激活 Modula。为此，请转至 WordPress仪表板>插件>添加新插件。

您会注意到新打开页面的右上角有一个搜索栏。一旦您输入“Modula”，它就会迅速出现在第一个搜索结果中。单击“立即安装”按钮开始安装。

️ 创建图片库

安装并激活 Modula 后，就可以创建类似 Airbnb 的画廊了。前往您的 WordPress 仪表板，然后选择Modula > Galleries 。

从那里，选择添加新开始创建您的画廊。

您将被重定向到一个新窗口，您可以在其中为您的图库添加标题，如果您想上传新图像，请选择上传图像文件；如果您使用已导入的图像，请选择从库中选择。

将图像添加到图库后，您应该会看到它们。从这里开始，我们可以开始自定义图库，并使其尽可能接近 Airbnb 图片库。

️ 编辑图库

有趣的部分来了。 Modula 有多种定制选项，所以让它接近 Airbnb 的图片库设计会非常简单。

首先，当您点击 Airbnb 房源时，您会看到数量有限的图片——准确地说是五张——点击后会打开一个包含所有图库图片的灯箱。要重新创建它，请在 Modula 画廊编辑模式中向下滚动并查看 Modula 的所有自定义设置。

默认情况下，画廊类型设置为 Creative Gallery，但现在我们需要将其设置为Custom Grid 。接下来，拖动前五个图像的角并展开它们，使其像这样填满。

为了限制您第一眼看到的图像数量，您会在“常规”选项卡下找到“最大图像数”部分。继续并将其设置为五。

接下来，我们注意到 Airbnb 图库图像之间存在一些间距。要实现类似的效果，请将装订线值降低几个像素。默认情况下，它设置为 10px，但您可以将桌面值降低到 8。您还可以尝试调整平板电脑和手机的值，看看哪个更好。

然后，转到灯箱和链接选项卡并启用显示所有图像按钮以在打开灯箱时显示所有图库图像。如果您跳过此步骤，您的灯箱将仅循环播放前五张图片。

接下来，当您将鼠标悬停在 Airbnb 画廊上时，我们注意到一个很好的悬停效果。使用 Modula，您可以编辑鼠标悬停的外观。前往悬停效果选项卡，将悬停颜色设置为深灰色，并将不透明度降低到 25%。

当您将鼠标悬停在图像上时，您还可以将光标图标更改为指针图标，就像在 Airbnb 上一样。

为了让人们更容易地循环浏览图像，您可以在灯箱和链接下打开以下设置：缩略图按钮、自动启动缩略图、底部缩略图。

一些 Airbnb 房源可以在每张图片下方显示说明文字。 Modula 允许您轻松设置字幕。不要忘记点击灯箱和链接设置下的显示图像标题。您甚至可以将标题的位置设置为显示在灯箱的左侧、右侧或中心。在“字幕”选项卡下，您将有更多选项来编辑字幕。您可以设置颜色、字体、字体大小、字体样式，甚至移动版本的字体大小。

当您打开 Airbnb 图库中的灯箱时，您会注意到导航按钮可以帮助您在图片库中循环。 Modula 也为您提供此功能。打开灯箱和链接选项卡下的导航按钮设置。

当谈到 Airbnb 上的灯箱时，您会注意到纯黑色的背景色。您也可以使用 Modula 实现这一目标。在同一个 Lightbox & Links 选项卡下，向下滚动直到您看到Lightbox background color 。在这里您可以设置任何您喜欢的颜色并指定不透明度或使其成为纯色。

Airbnb 在灯箱上有一个分享按钮，可以在各种社交渠道上分享房源。 Modula 也有这个功能，可以访问一些最流行的平台。在同一个 Lightbox & Links 选项卡下，启用Share 按钮选项后，您将看到六个新的共享选项出现：Facebook、Twitter、Pinterest、WhatsApp、LinkedIn 和 Email。您可以单独选择要在图库中显示的内容。

Airbnb 上的灯箱有一个可见的关闭按钮，用户可以点击该按钮关闭灯箱画廊。您也可以使用 Modula 显示关闭按钮。