怎么用Elementor来编辑手机显示界面?响应式编辑

  • Post category:教程
  • Post comments:0评论

众所周知,Elementor是支持响应式设计的,那么,如何分别编辑手机端、平板端、电脑端的界面呢?

在响应式设计中,页面上的板块要适配不同设备大小的显示,需要分别在设备上设置,比如:文字大小,元素边距(margin)和填充(padding)等。

响应式编辑步骤:

  1. 选择需要设置的区块块、列、小部件或者元素,然后Elementor菜单栏左侧找到下图按钮进行切换设置

  2. 点击设备图标进行设置不同的值或属性内容

Elementor不同设备之间的编辑

控制响应式背景或边框

Elementor中的背景图像是自动响应设备的,但是您还可以控制每个设备的更多配置。

背景图像:如果需要,您可以为每个设备选择不同的背景图像,可以设置不同大小版本的相同图像,或完全不同的图像。

背景图像显示选项:您可以为每个设备选择不同的图像位置、附件、重复和大小。通过这种方式,您可以更好地控制在不同大小的设备上显示图像的哪个区域。

元素在不同设备的可见性

有时候我们不想在手机端显示太多内容,这时候就需要单独在手机端对某个元素进行隐藏操作,那么在Elementor编辑器里面是怎么设置的呢?

下面是设置步骤:

  1. 在Elementor左侧的菜单中,转到:高级设置——响应
  2. 根据需求,来设置元素在不同设备的可见性,如:隐藏在桌面上、在平板电脑上隐藏、隐藏在手机

Elementor不同设备,设置显示或隐藏

提示:当隐藏了一个元素,并在隐藏的设备界面编辑它时,这时候,看到改元素是有蒙版无法编辑的,这时候需要切换到其他显示的设备界面进行编辑。
例如,如果元素在手机上是可见的,但是在桌面平板上是隐藏的,那么您将能够在手机视图中编辑元素。

修改手机端和平板端响应式断点的数值

您可以设置移动断点和平板断点值。

  1. 转到Elementor > Settings > Style选项卡,设置mobile和tablet的断点值
  2. 保存修改
  3. 转到Elementor >工具>通用选项卡>重新生成CSS,点击重新生成文件

根据不同设备重新排序“列”

这个设置可以在平板或手机端把列进行反向显示。

下面是操作步骤:

  1. 选择“区块”,然后点击:高级——相应——反向列。
    2、设置您想要反向的设备端,如下图:

Elementor设置列排序

设备预览

通过单击面板底部相应的图标在桌面、移动或平板电脑视图之间切换。

Elementor可视化设备预览效果

重点提示

有些小伙伴可能有个疑问,为什么我在手机端编辑视图下修改元素之后,平板端和电脑端也会跟着变化呢?下面来说说Elementor切换视图编辑时需要注意的几点:

  1. 在预览一种模式(例如移动模式)时,您不能删除元素(小部件、列或区块),并且希望只从该类型的设备中删除它。删除元素将在所有设备上删除它们。但是,您可以通过进入元素的高级>响应选项卡并启用其可见性选项(在桌面上隐藏、在平板上隐藏或在移动设备上隐藏)来使用元素的响应可见性特性。虽然元素不会在这些设备上被删除,但它将被隐藏。
  2. 在预览一种模式时,你不能移动元素,并且期望它们只能在该类型的设备上移动。在任何预览模式下移动元素都会在所有设备上移动它们。一个例外是区块 > 高级设置 > 可视化 > 反向列 特性,它确实将列移动到它们的反向位置。
  3. 如果一个元素旁边没有一个视口图标,在一个预览模式下改变那个元素会在所有设备上改变它。

OK,以上就是Elementor编辑器在各种设备视图下编辑的知识点。各位小伙伴有不明白的,可以加微信进行探讨。

发表评论