Elementor入门:响应模式编辑

如何调整手机,平板电脑和台式机的设置

许多可编辑功能具有“ 移动”,“ 平板电脑 ”和“ 桌面”设置。最常见的用途包括:文本大小,元素的边距和填充等。

  1. file要控制的单个元素旁边查找视口图标。 
  2. 单击要编辑其设置的特定设备图标。

file ALpQdlt3JX

控制设备的背景图像和边框

Elementor中的背景图像会自动响应设备,但你也可以控制每个设备的更多选项。

  1. 背景图像:你可以根据需要为每个设备选择不同的背景图像,无论是同一图像的尺寸合适版本,还是完全不同的图像。
  2. 背景图像显示选项:你可以为每个设备选择不同的图像位置,附件,重复和尺寸。这样,你可以更好地控制在不同设备尺寸上显示图像的哪个区域。

你可以在响应模式下编辑该特定区域,在该模式下不隐藏该区域。例如,如果该元素在移动设备上可见,但在台式机和平板电脑上隐藏,则可以在移动设备视图中编辑该元素。

能见度

你可以根据设备选择显示 / 隐藏块。

  1. 转到部分设置 > 高级>响应式
  2. 设置你的显示设置,从选择隐藏在桌面上隐藏在平板电脑,或隐藏在手机上

file GPsrDAeCEw

当隐藏一个元素并切换到隐藏它的视图时,将看到该元素被“静音”。这清楚地表明此元素将在实时站点中隐藏,但仍使你能够根据需要进行编辑。 

你可以在响应模式下编辑该特定区域,在该模式下不隐藏该区域。例如,如果该元素在移动设备上可见,但在台式机和平板电脑上隐藏,则可以在移动设备视图中编辑该元素。

更改手机和平板电脑的断点

你可以设置手机和平板电脑的断点值。

  1. 转到  Elementor  >  设置  >  样式选项卡,然后设置手机和平板电脑的断点值
  2. 保存更改
  3. 转到Elementor > 工具常规选项卡重新生成CSS,  单击  重新生成文件

列排序

此功能反转列的顺序。
要使用“ 列排序”,请转到“区域设置” >“ 高级” >“ 响应式” >“ 反向列”,然后将其设置为“ 是”。

设备预览

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

W Mna2SIduSyMoeiEmssAqiWliA2 KX6x084L4eg hWfpf7IlmmvTf Pe7mYsAHyRhAaDNOd79c0vh03DO2UPvcslJkR2TrUON43eybsFG1G8IryOOgXHnk4KlZ6l sIyJbGECbv

救命!我在移动预览中进行了一些更改之后,桌面上也被改了!为什么?

  • 在预览一种模式(例如,移动设备)时,你无法删除元素(小部件,列或节),并且期望仅从该类型的设备中删除该元素。删除元素将在所有设备上将其删除。但是,可以通过转到元素的“ 高级”>“响应式”选项卡并启用其任何可见性选项(在桌面上隐藏,在平板电脑上隐藏或在移动设备上隐藏使用元素的“ 响应式可见性”功能  虽然不会在这些设备上删除该元素,但是它将被隐藏。
  • 在预览一种模式时,你不能四处移动元素,并期望仅针对该类型的设备移动它们。在任何预览模式下移动元素将在所有设备上移动它们。一个例外是“ 部分”>“高级”>“响应式”>“反向列”功能,该功能会将列移至其反向位置。
  • 如果某个元素旁边没有视口图标 file,则在一种预览模式下更改该元素将在所有设备上对其进行更改。
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments