Divi 3.0为您的WooCommerce商店提供了一个惊人的前端构建器

Divi是我们在WooCommerce和新版本中选择的WordPress主题 Divi 3.0 介绍了一个全新的“可视化构建器”(也称为“前端编辑器”),它是使用React(一个用于用户界面的现代JavaScript库)从头开始重新构建的。 这个新的构建器允许用户使用简单而美观的可视控件在其网站的前端编辑他们的WordPress页面。 激活构建器后,您会看到与您网站前端显示的页面完全相同的页面。

但是,在构建器处于活动状态时,使用Divi的大量内容元素和设计设置可以编辑页面。 您可以单击一个段落并开始键入,突出显示文本并调整其字体,大小和样式,或打开任何元素的设置并更改其内容,外观和位置。 拖动,删除,调整大小,复制,粘贴,删除和复制元素也很容易。

页面变得活跃,每个元素都感觉有形,因为您能够以自然和直观的方式操纵所有内容。 当您更改设计或向页面添加新内容时,会立即显示这些更改。 这是因为新的可视化构建器不依赖于传统的加载,因此在大多数构建器体验期间需要页面刷新或Ajax加载条。 这是WYSIWYG的未来。

从Divi的40 +模块添加新内容

在Divi 3.0中添加新内容很简单。 将鼠标悬停在页面上的所需位置,然后单击“+”按钮添加新元素。 您将看到Divi的40 +内容模块列表,可用于构建几乎任何类型的网站。 无需从中央底座拖放内容,因为当您需要时,Divi的内容工具提示始终存在。

直列主编1

轻松定制一切

当您开始调整内容的设计时,Divi 3.0的美丽就变得明显了。 一切都可以自定义,你可以看到这些变化出现 在实时:

  • 从数十种自定义字体中进行选择。
  • 调整文本颜色,大小,行高和字母间距。
  • 添加自定义填充和边距。
  • 更改列结构和行高。
  • 添加背景颜色和图像。
  • 启用视差背景和视频背景。
  • 拖放,复制和粘贴内容元素。
  • 为每个响应断点应用不同的设计设置。
  • 拖动以调整行高和宽度。
  • 享受美丽的内联编辑体验

当新的视觉生成器处于活动状态时,页面上的所有文本都可编辑。 无需打开元素的设置即可调整其文本内容。 只需单击任何段落并开始键入即可添加文本,或突​​出显示任何文本以调整其字体,大小,样式和间距。 他们创建了自己的内联编辑器用户界面,该界面非常流畅且使用非常好。 如果您对标准繁忙的TinyMCE界面感到沮丧,那么在使用Divi 3.0时会感到惊喜。

体验难以置信的速度

Divi 3.0的视觉构建器可能是您使用过的最快的在线网站构建体验。 几乎没有页面刷新或Ajax加载条。 实际上,在大多数建筑过程中没有任何传统的装载。 这是因为JavaScript为构建器提供支持,构建体验完全在浏览器中进行。

Divi 3.0构建器无需依赖浏览器与服务器之间的通信来进行更改,而只需等待应用程序计算每个更改的时间即可。 当与体面的计算机和现代的浏览器一起使用时,您在添加和调整内容时会经历近乎即时的更新。 您的服务器负载,服务器速度和Internet速度不再是一个因素。

“隐形”和可定制的构建器界面

可定制的接口,2

他们将新视觉生成器的设计代号为“ Invisible Interface”。 这代表了他们的核心设计理念之一,即“好的设计常常不被注意”。 最好的UI是一种不会妨碍您的UI,并且可以预测您的意图并为您提供解决方案。 这就是界面真正“直观”的含义。 Divi 3.0不会用不必要的网格,线条和按钮轰炸您。 没有浮动页眉或侧边栏来窃取屏幕空间或覆盖层,以使您的视线变得模糊。 首次加载构建器时,您甚至可能不知道它在其中,但是当您开始使用鼠标浏览该页面时,控件将变得显而易见。

Divi 3.0的可视化构建器是第一个提供可自定义界面的WordPress页面构建器。 这意味着当涉及构建器的控件的显示方式时,您不会被归入某些UI约定。 您可以选择将这些设置显示在模态弹出窗口中,也可以将弹出窗口捕捉到页面的侧面并进入“侧边栏”模式。 你可以调整
弹出窗口和侧边栏的大小和位置,以便您可以根据屏幕大小或页面上的内容优化空间。

Catalin Zorzini

我是一名网页设计博客,在花了几周时间努力寻找出来之后开始了这个项目 最好的电子商务平台 为了我自己。 查看我当前的 顶级10电子商务网站建设者.