为什么要预览移动版布局
超过50%的网站访问者将使用手机访问您的站点,约有3%会使用平板电脑。这意味着拥有一个在移动设备上显示良好的网站非常重要。
事实上,移动版的重要性如此之大,以至于谷歌现在使用移动优先索引来进行网站排名算法。这意味着谷歌将使用您网站的移动版本进行索引。
即使您使用的是响应式WordPress主题,您仍然需要查看您的网站在移动设备上的显示效果。您可能需要为移动用户的需求创建不同版本的关键登陆页面。
请记住,由于有许多不同的移动屏幕尺寸和浏览器,大多数移动预览可能并不完全完美。最终测试总是应该在实际移动设备上进行。
方法1:使用WordPress主题定制器
您可以使用WordPress主题定制器来预览WordPress站点的移动版本。只需登录到您的WordPress仪表盘并进入“外观 » 定制”屏幕。
这将打开WordPress主题定制器。在这个教程中,我们将使用Astra主题。根据您所使用的主题,您可能会在左侧菜单中看到略有不同的选项。
在屏幕底部,简单点击手机图标。
然后,您将看到站点在移动设备上的预览。
这种预览移动版本的方法在您还没有完成创建博客或它处于维护模式时特别有用。
现在,您可以对网站进行更改,并检查这些更改在移动版本中的效果,然后再上线。
方法2:使用Google Chrome的开发者工具设备模式
使用Google Chrome浏览器查看网站的移动版本是另一个方法。Google Chrome浏览器有一组开发者工具,可以让您在任何网站上运行各种检查,包括查看它在移动设备上的预览。
只需在桌面上打开Google Chrome浏览器并访问您想查看的页面。这可能是您站点的某个页面的预览,也可以是竞争对手的网站。
然后,右键点击该页面并选择“检查”选项。
一个新面板将打开在屏幕右侧或底部。
在开发者视图中,您可以看到站点的HTML源代码、CSS和其他详细信息。
接下来,点击“切换设备工具栏”按钮以切换到移动视图。
您将看到站点的预览缩小到移动屏幕尺寸。
在移动视图中,站点的一般外观也将发生变化。例如,菜单将折叠,额外的图标将移动到左侧而不是菜单的右侧。
当您将鼠标光标悬停在站点的移动视图上时,它会变成一个圆圈。这个圆圈可以用鼠标移动来模拟移动设备的触摸屏。
您还可以按住“Shift”键,然后点击并移动鼠标来模拟捏合移动屏幕进行缩放。
在站点的移动视图上方,您将看到一些额外的选项。
这些设置可以让您做一些额外的事情。例如,您可以选择一种类型的智能手机来看站点的显示效果。
您还可以模拟站点在快速或慢速3G连接下的性能。您甚至可以使用旋转图标旋转移动屏幕。
附加内容:如何在WordPress中创建移动特定内容
确保您的网站具有响应式设计,以便移动访问者可以轻松导航您的网站,这很重要。
然而,简单地拥有一个响应式站点可能还不够。移动设备用户通常在寻找与桌面用户不同的内容。
许多高级主题和插件允许您创建在桌面和移动设备上显示不同的元素。您还可以使用像SeedProd这样的页面构建器插件在移动视图中编辑您的登陆页面。
您应该考虑为您的潜在客户生成表单创建移动特定内容。在移动设备上,这些表单应要求最少的信息,理想情况下只需要一个电子邮件地址。它们还应该看起来不错并且易于关闭。
另一个创建移动特定弹出窗口和潜在客户生成表单的好方法是使用OptinMonster。这是市场上最强大的WordPress弹出插件和潜在客户生成工具。
OptinMonster具有特定的设备目标显示规则,使您可以向移动用户显示与桌面用户不同的广告活动。
我们希望这篇文章能帮助您了解如何预览站点的移动布局。您还可以查看我们的专家精选插件,将WordPress站点转换为移动应用程序并了解如何创建移动友好网站。