如何在 WordPress 中使用 SiteOrigin 页面构建器

已发表: 2021-07-26
siteorigin 插件审查
关注@Cloudways

与其他 WordPress 页面构建器一样,SiteOrigin 可帮助您使用一些 CSS 和零编码知识构建功能强大且响应迅速的网站。 您可以使用一些主题(免费和高级)以及免费和专业页面构建器插件。

我已经测试了 SiteOrigin 的 Pro 版本并构建了一个登陆页面。 它带有拖放功能,适用于任何主题,您可以同时使用所有 Free、Pro 和 WordPress 小部件。 让我们阅读本文以了解有关使用 WordPress 安装和配置 SiteOrigin 的更多信息。

  • 为什么选择 SiteOrigin 页面生成器?
  • SiteOrigin 页面生成器的功能
  • SiteOrigin Page Builder 的定价和计划
  • SiteOrigin 的系统/托管要求
  • 安装和配置 SiteOrigin 页面生成器
  • Cloudways 上的 SiteOrigin 页面构建器性能
  • SiteOrigin Page Builder 用户评论

为什么选择 SiteOrigin 页面生成器?

构建站点从 WordPress 编辑器中的工具栏开始,我们都很熟悉 Classic 和 Gutenberg。 它会生成少量的输出代码,并且不会显得臃肿,但是对于单页构建器,每一行输出代码都尽可能地进行了优化。

它可以实时预览您所做的每项更改,因为它没有前端构建器。

如果您对所做的事情不满意,您还可以轻松检查历史记录并恢复到以前的设计。 此外,它像其他页面构建器一样像往常一样使用行和小部件。

SiteOrigin 页面生成器的功能

SiteOrigin 的免费版本带有非常有限的选项“小部件”,但在 Pro 版本中,您有一堆有用的附加小部件来轻松构建您的网站。

自定义帖子类型生成器

SiteOrigin 最受欢迎和最有用的功能之一是具有可重用页面构建器布局和 WooCommerce 模板的自定义帖子类型构建器。 它与其他工具有点不同,我将更深入地解释如何使用它。

为了让您在 SiteOrigin 中创建自定义帖子类型模板,需要遵循一些重要步骤。

第1步

您需要添加新的自定义帖子类型,使用页面构建器构建帖子类型布局并选择帖子类型显示设置。

例如,从您的 WordPress 仪表板导航到工具 → 帖子类型,然后单击添加新按钮,将其命名为 Portfolio。 现在,单击 Text 和 Visual 选项卡旁边的 Page Builder 选项卡,使用 Page Builder Add Widget 和 Add Row 按钮来构建您的投资组合自定义帖子类型布局。

wordpress仪表板工具选项

请注意,您添加到模板中的任何内容都将显示在未来发布的每个作品集帖子中。 因此,如果您想在每个页面上显示特定的内容块,例如行动号召、订阅我们的时事通讯、关于我、推荐等,这将非常有用。

第2步

您需要知道如何将内容添加到您创建的自定义帖子类型。

创建自定义帖子类型投资组合后,您将能够在 WordPress 仪表板的左侧边栏中看到投资组合项目。 单击它,然后单击添加新。

wordpress仪表板组合

当您为 Portfolio 项目命名时,它会让您向其中添加内容。 请记住,您只能编辑不属于全局模板的小部件,这些小部件将标记为 read me a text。 最后但并非最不重要的是,如何将这些帖子添加到帖子轮播或帖子循环小部件中。

后循环小部件

SiteOrigin 包含 Post Loop Widget,但它依赖于活动主题内的循环模板。

要插入帖子循环小部件,只需在页面或帖子上添加一行您希望它显示的位置,选择博客或网格布局即可。 接下来,您需要通过单击按钮构建发布查询来选择将显示的小部件。

siteorigin 后循环小部件

在最后一步中,从查询构建器小部件顶部的帖子类型下拉列表中单击您的自定义帖子类型。

站点原点后轮播

如果您想在 post carousel 中执行此操作,唯一的区别是选择 post carousel 小部件而不是 Post Loop,其余步骤相同。

WooCommerce 模板生成器

WooCommerce 模板允许创建漂亮的 WooCommerce 特定页面和单一产品的视觉外观。 WooCommerce 模板生成器界面分为七个选项卡:

  1. 产品
  2. 产品档案
  3. 店铺
  4. 大车
  5. 空购物车
  6. 查看
  7. 我的账户

WooCommerce 模板生成器界面

对于 WooCommerce,构建单个产品所需的所有实际单个项目都作为小部件分发,这使您可以轻松创建产品。 您可以创建布局并使用 WooCommerce 小部件,例如价格、SKU、添加到购物车、短/长描述、产品图片、标题等。

WooCommerce 小部件

还有一个非常有用的产品追加销售小部件,它使您可以自由地使用 WooCommerce 追加销售功能。 但是,请注意这些小部件和 WooCommerce 页面的设计是由您的主题 CSS 设置的,并且可以使用 CSS 对其进行编辑。

其他小部件很常见,如地图、手风琴、CTA、标签、社交小部件、轮播等。

站点来源插件

siteorigin pro 插件

使用 Pro 订阅,您不仅可以获得 Pro Page Builder,还可以访问所有 Pro 功能、高级主题、CSS 和小部件。

SiteOrigin Page Builder 的定价和计划

SiteOrigin 提供两种定价模式。 第一个也是最有用的一个是年度订阅,它有 3 个包。

  • 单个站点,价格为 29 美元
  • 以 49 美元的价格提供多达 5 个站点的业务
  • 以 99 美元的价格开发无限站点

此外,还有一个单年许可证,您拥有的一切都相同,但不是订阅而是一年的更新和支持。

  • 单个站点,价格为 38 美元
  • 以 64 美元的价格提供多达 5 个站点的业务
  • 以 128 美元的价格开发无限站点

SiteOrigin 的系统/托管要求

尽管很难找到 SiteOrigin 的系统要求。 从一些支持论坛和在线评论来看,具有至少 512MB PHP 内存的 PHP 7.4 似乎可以解决问题。 但是,我使用 VultrHF 和 2GB PHP 内存进行测试。

当然,您需要最新的 WordPress 版本和所有其他插件。

安装和配置 SiteOrigin 页面生成器

在安装和配置方面,SiteOrigin 确实提供了大多数页面构建器没有的有趣功能。

至于 WordPress 中的所有内容,您应该直接从 Repository 安装免费的 SiteOrigin,然后上传从您的 SiteOrigin 帐户下载的 Pro 版本。 完成安装后,按照步骤安装/激活推荐的插件。

wordpress插件目录

成功安装插件包后,您应该激活所需的许可证和小部件。 至于许可证,它需要立即激活,而对于小部件,您可以现在或稍后在需要时激活它们。

站点来源高级许可证

SiteOrigin 的优点在于,您不必激活不需要的小部件,通过这样做,您可以节省一些资源并只使用您需要的选项。 蓝色的是活动的,灰色的是不活动的小部件。

站点来源高级插件

完成后,您可以使用 SiteOrigin 页面构建器开始构建您的站点。 导航到页面 → 添加新,然后单击下拉箭头,您将被提供使用 SiteOrigin 页面生成器和块编辑器添加新页面 → 选择 SiteOrigin 页面生成器。

siteorigin 页面构建器选项

就个人而言,不是前端构建器时代后端页面构建器的最大粉丝。 但是,这意味着它将消耗更少的资源,并且对您的服务器来说更轻。 不像一般的建筑商那么饿。

这就是页面构建器在实时编辑模式下的实际外观,这是一种有用的模式。 后端编辑器非常困难且耗时,因为您每次都需要点击预览以查看您所做的任何更改。

siteorigin实时编辑模式

当您单击“编辑”页面时,您将进入后端编辑器,从那里只需单击工具栏中的实时编辑器,您就会进入其中。

siteorigin 后端编辑器

在左侧,您有一个与定制器类似的侧边栏,您实际上是从中构建站点,而在右侧,它会重新加载视图以在进行任何更改后显示更改。

它不支持直接在站点中进行任何类型的拖放操作,但一切都必须通过左侧边栏定制器完成。

在左上角,您将看到包含 4 个项目的工具栏。 从左到右,他们将执行以下操作。

wordpress 后端编辑器工具栏

齿轮图标将打开可用的小部件,您可以将其插入到您创建的行中。 您可以在同一位置看到 WordPress 小部件和 SiteOrigin 小部件。 但是,您也可以选择左侧以仅查看 WordPress 或仅 SiteOrigin。

wordpress 小部件选项

下一个图标是一个 Burger,它将添加一个新行,这就是您选择行布局的时刻。 如果您需要更改布局,请不要担心,以后可以随时更改。

在编辑器中添加新布局

单击布局图标后,它实际上会打开导入/导出现有布局的选项。 我注意到 SiteOrigin 缺乏更多的布局和更现代的设计。 此外,通过此工具,您可以克隆您已经创建的现有页面或镜像部分/块。

页面构建器布局

最后一个图标是历史记录,如果您不喜欢结果或只是犯了错误,您可以在此处回滚您所做的事情。

Cloudways 上的 SiteOrigin 页面构建器性能

正如预期的那样,SiteOrigin 执行得非常好,因为它的代码没有太多膨胀,而且非常简单,这同时也是优点和缺点。 我们需要提一下,我们没有做任何图像优化。

gtmetrix 结果

– SiteOrigin 在 GTMetrix 上的结果

pingdom 结果

– SiteOrigin 在 Pingdom 工具上的结果

网页测试结果

– SiteOrigin 在 WebPageTest 上的结果

SiteOrigin Page Builder 用户评论

在安装任何插件之前,您应该检查的一件事是 WordPress.org 插件存储库上的评论和评级。 对于 SiteOrigin,到目前为止有 922 个 5 星评级,最近的评论很棒。

页面构建器由 siteorigin 官方插件页面

概括

如果您需要一个轻量级工具来构建一个简单的网站或登录页面,SiteOrigin 可能是您的最佳选择。 缺点是它不提供页眉和页脚构建器,因此您需要一些主题来允许编辑站点的页眉和页脚。

学习曲线很陡峭,您需要一些以前的 WordPress 经验以及对小部件和元素的了解。 缺乏前端编辑器也是新手的一个限制因素,它绝对需要一些 CSS 知识和技能才能使您的最终结果看起来很棒。 但是,另一方面,作为开发人员,大多数功能都非常方便,即使对于初学者来说并不直观。

SiteOrigin 周围的生态系统不像其他一些页面构建器那么大,但我们需要考虑到它的免费版本有 100 万活跃安装,Widget Bundle 有 900.000 活跃安装,一些外部添加作者有 30.000+活动装置。