Elementor入门:如何使用Elementor

Elementor 是WordPress的可视化页面构建器插件,可通过实时可视化方式创建网页。

本分步指南将引导你逐步了解如何使用Elementor创建网站。

如果你是Elementor新手,这些步骤将帮助你了解成功建立页面的基本条件。

你将了解:

  • 在WordPress中用Elementor编辑器创建一个新页面
  • 使用Elementor构建你的首页
  • 在页面插入模板
  • 预览并发布页面
  • 响应式编辑

一、Elementor入门:如何创建一个新页面

创建一个新页面

file-GJnsDydf7q
file-F31unOdcSu
  1. 在WordPress信息中心的左上角,点击 Pages > Add New
  2. 单击“ 使用Elementor编辑”进入Elementor页面生成器
  3. 兼容性:WordPress 5.0以上版本(Gutenberg),使用古腾堡(Gutenberg)中的“使用Elementor编辑”按钮

Elementor 编辑器界面

file-rXyyfL0PfR-1024x642

二、Elementor入门:创建首页

创建首页

Elementor使用三个主要的构建块:SectionsColumnsWidgets

Sections是最大的构建基块,内部是Columns组。列位于Sections的内部,用于容纳Widget。小部件放置在Columns内部。
你可以使用其句柄控制Section,Column和Widget。

是最大的构建基块,内部是Columns组。列位于Sections的内部,用于容纳Widget。小部件放置在Columns内部。
您可以使用其句柄控制Section,Column和Widget。

file-GKGhfpvcns

你可以选择显示或隐藏编辑手柄,方法是单击汉堡菜单以打开Elementor的“ 样式和设置配置”菜单。单击“ 首选项” 选项卡,然后将开关滑动到“ 是”以将鼠标悬停在元素的“编辑”按钮上时显示“编辑手柄”,或者将“ 否”隐藏在悬停时的手柄。

file-tVHYQXjE0E

编辑中

要编辑SectionColumnWidget,请右键单击其手柄。

file-kugbN2l438

部分

  1. 单击_fHI0KtB0pL_p37MzyKp3S3XVoITHXPNat0AxCeFIHiRdhL9qibTMsIPGgwuK6EfOgqTAw0Ozvu2fklB8B2r4-OXj8JtTy7_Ek7yDyl5ftpywptE2R0wjJTE_xBFKRBNuV3ODTK5 图标创建一个Section,或单击6ihOjw37Ym-Nn8xWO5OrbnETpg4nf2AWEz-XNNui4TnMUEJoJEsuZJiGAQusYKCch8Xjm-YnKG7nHAL4QCrHXOX9xr7z2R38R14DHu1iU4K_T78dgYqVbHPbR-HG_l_0BwLAGPRO 图标以使用我们库中的预先设计的PageBlock
  2. 设置列结构 
  3. 右键单击以编辑,复制,复制,删除等。Elementor入门:如何使用Elementor使用“ 节”手柄进行以下操作:添加节,拖动节或删除

  1. 设置列宽。您可以在“ 布局”下执行此操作,也可以在“ 列”之间拖动虚线。
  2. 要添加更多列,请右键单击 > 添加新列
  3. 插入小工具到您的

小部件

  1. 列中插入小部件
  2. 窗口小部件的  宽度由宽设置

三、Elementor入门:添加模板

模板是预先设计的页面和块,只需单击一下即可将其插入任何页面。

  1. 在编辑屏幕上,单击 图标。
    li><li>单击放大镜图标  <img src=预览模板。
  2. 单击“ 插入”以选择所需的模板。
  3. 放下您喜欢的模板并将其保存到“ 我的收藏夹”
  4. 单击右上角的箭头Elementor入门:如何使用Elementor以上传.json  或.zip文件。

四、Elementor入门:预览并发布页面

设计完页面后,预览并发布。 转到底部面板:

  1. 要预览,请单击图标。 
    注意:“ 预览” 链接与实际页面链接不同
  2. 如果对结果满意,请继续并单击按钮。 
  3. 点击“ 看看 ”以查看已发布的页面
    Elementor入门:如何使用Elementor

保存草稿

在Elementor中,你可以编辑已发布页面并将工作另存为草稿。这意味着在将工作另存为草稿时,不会破坏已发布的页面。

  1. 单击更新/发布旁边的箭头
  2. 选择保存草稿
file-WPvhsRelOW

五、Elementor入门:响应模式编辑

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

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

  1. Elementor入门:如何使用Elementor要控制的单个元素旁边查找视口图标。 
  2. 单击要编辑其设置的特定设备图标。

Elementor入门:如何使用Elementor

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

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

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

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

能见度

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

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

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

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

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

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

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

列排序

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

设备预览

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

W-Mna2SIduSyMoeiEmssAqiWliA2-KX6x084L4eg-hWfpf7IlmmvTf_Pe7mYsAHyRhAaDNOd79c0vh03DO2UPvcslJkR2TrUON43eybsFG1G8IryOOgXHnk4KlZ6l_sIyJbGECbv

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

  • 在预览一种模式(例如,移动设备)时,你无法删除元素(小部件,列或节),并且期望仅从该类型的设备中删除该元素。删除元素将在所有设备上将其删除。但是,可以通过转到元素的“ 高级”>“响应式”选项卡并启用其任何可见性选项(在桌面上隐藏,在平板电脑上隐藏或在移动设备上隐藏)来使用元素的“ 响应式可见性”功能  。虽然不会在这些设备上删除该元素,但是它将被隐藏。
  • 在预览一种模式时,你不能四处移动元素,并期望仅针对该类型的设备移动它们。在任何预览模式下移动元素将在所有设备上移动它们。一个例外是“ 部分”>“高级”>“响应式”>“反向列”功能,该功能会将列移至其反向位置。
  • 如果某个元素旁边没有视口图标 Elementor入门:如何使用Elementor,则在一种预览模式下更改该元素将在所有设备上对其进行更改。
本文由 8源码吧 作者:liaolong 发表,其版权均为 8源码吧 所有,文章内容系作者个人观点,不代表 8源码吧 对观点赞同或支持。如需转载,请注明文章来源。

发表评论