Page Builder Sandwich

获取 PBS Pro

作者： Neil Lock

  • Page Builder Sandwich 的工作原理

    How-Page-Builder-Sandwich-Works本文将简要介绍 Page Builder Sandwich 的工作原理，旨在为那些对我们的页面构建器如何与 WordPress 各项功能整合感兴趣的用户提供入门参考。我不会深入探讨 Page Builder Sandwich 的各项具体功能，如果您想了解这些，请前往我们的视频页面，我们在那里通过简短的屏幕录像单独展示了每一项功能。

    如果您想知道 Page Builder Sandwich 与市面上其他页面构建器有何不同，请查看我们的文章《Page Builder Sandwich 与其他产品的区别》.

    Where is the page builder?

    它在哪里？我可以用它编辑什么？

    与许多其他页面构建器不同，Page Builder Sandwich 运行在您网站的前端。如果您在后台，我们在内容编辑器按钮旁边提供了一个“前端”（Frontend）按钮，可以将您带到页面的前端。

    Page Builder Sandwich 允许您编辑文章、页面和自定义文章类型的内容。不过，它不允许您直接编辑聚合的前端博客文章列表以及网站中的其他非单篇内容区域。不妨这样理解：如果您想要编辑的内容在后台有内容编辑器（比如“新建文章”和“新建页面”），那么就可以使用 Page Builder Sandwich。您可以编辑各个独立的页面和博客文章，例如，如果您有一个引入了餐厅菜单或作品集项目的插件，您也可以对它们进行编辑。

    在前端时，我们在您的管理栏（adminbar）中放置了一个蓝色的“使用 Page Builder Sandwich 编辑”（Edit with Page Builder Sandwich）按钮。只需点击它即可开始编辑您的页面。

    直接内容编辑

    借助 Page Builder Sandwich，我们让内容编辑变得尽可能轻松省心。编辑内容直观又简单，只需点击并输入即可。就是这么简单。

    The inspector

    隆重推出：检查器（Inspector）

    我们注意到很多页面构建器都有大量的弹窗。就个人而言，我不喜欢弹窗，因为它们会分散注意力，而且基本上是在对您说：“嘿，停下你手头的事，先把这些字段填好”。它们打破了原本流畅的编辑体验。因此，我们全面减少了弹窗的使用，取而代之的是创建了检查器。

    检查器是一个侧边栏样式的区域，包含了您可能需要的所有格式化和排版工具。检查器可以停靠在屏幕的左侧或右侧，以便您轻松查看正在编辑的内容。

    通过检查器，您可以调整各种文本属性，例如标题、字号、粗体、斜体、文字颜色等。除此之外，它还允许您添加图像并创建行或分栏内容。它还能进行更高级的编辑，例如将行调整为全宽行、设置行和列的背景颜色、内容垂直对齐方式，以及外边距和背景。它的功能非常强大，您会发现自己在大多数情况下都会用到它。

    与 WordPress 主题集成

    从本质上讲，Page Builder Sandwich 几乎没有自带样式。当您编辑内容时，您看到的样式大部分基于您的主题。

    与简码（Shortcodes）集成

    简码是 WordPress 中非常重要的一个方面，您的网站中很可能会使用到一些简码。Page Builder Sandwich 对这些处理得非常好，您的简码将直接在前端渲染呈现。简码依然可供编辑，而且最棒的是，在您编辑简码后，它们会连同您的更改一起重新渲染。

    为了方便起见，您可以使用检查器来编辑简码。如果您想要更多的控制权，还可以双击简码以原始形式进行编辑。除此之外，您网站中可用的所有简码都列在检查器中，以便轻松添加到您的内容中。

    No bloat

    网站臃肿问题如何解决？

    谁会喜欢缓慢的网站？我们不喜欢，您肯定也不喜欢。我们确保了 Page Builder Sandwich 对您网站的性能几乎零影响。在未登录状态下，至多仅会排队加载行和列的 CSS 样式，以及您所使用简码所需的必要 JS 和 CSS 脚本。

    针对开发者

    如果您是一名开发者，并且在您的 WordPress 插件中使用了简码，Page Builder Sandwich 提供了一个简码 API（Shortcode API），以便您可以轻松为客户提供相应字段，方便快捷地创建和修改简码。

    如果您想进一步扩展功能或与 Page Builder Sandwich 的某些部分进行集成，我们还提供了一系列实用的动作（action）和过滤器（filter）钩子供您使用。

  • 什么是页面构建器以及为什么前端至关重要

    What-is-a-Page-Builder-and-Why-Front-End-Matters如果您是一位硬核博主，所进行的所有内容创作都围绕着撰写偶尔配有插图的长篇通篇文章展开，那么现有的 TinyMCE 内容编辑器或许足以满足您的需求。当前的工具集已经包含了撰写文章所需的必要工具，例如粗体、斜体、标题等基本文本格式化工具。但也仅此而已了。

    缺乏友好的排版布局功能

    虽然您可以使用当前的 TinyMCE 内容编辑器撰写文章，但除了单列连续的文本流之外，您没有其他得体的方式来对内容进行排版。开箱即用的状态下，您无法将文本排成两列或多列，也无法创建带有不同背景颜色的分区内容。如果您希望网站的其他部分（如着陆页和联系页面）显得独具特色，您就需要某种形式的基础布局能力。

    其他人曾尝试通过利用 WordPress 的短代码（shortcode）功能来解决这个问题。简而言之，短代码允许通过使用特殊标签来插入代码片段。有一些 WordPress 插件引入了不同的短代码，您可以用它们来创建分栏内容。例如，如果您想将内容放在双栏布局中，可以用多个分栏标签包裹您的内容。虽然这种方法“行得通”，但它在视觉上并不直观友好，因为随着内容不断增加，最终一切看起来都会像是一团乱麻。

    为了填补这一布局空白，页面构建器（Page Builder）应运而生。

    Page building blocks

    页面构建器让排版布局内容的创建变得轻而易举

    页面构建器为您提供了额外的工具，让将内容编排为独特布局变得非常简单。页面构建器通常会移除后端的 TinyMCE 内容编辑器，并替换（或添加）一个新的编辑器来帮助您将内容可视化。如果您以前从未使用过后端页面构建器，可以想象一组积木，其中每个积木代表一种类型的内容：图像、文本或短代码。然后，它允许您将这些积木拖放到不同的布局和列中。

    除了排版布局之外，页面构建器还使短代码的创建和放置变得更加容易。以前，短代码会以其原始形态完整地展现在您眼前。您会看到方括号以及混在内容中的所有属性和值。页面构建器通常会加入短代码生成器——即弹出对话框，相比手动输入，通过这种方式选择短代码属性更加用户友好。

    前端页面构建器是未来的趋势

    虽然所有这些都为设计师和内容创作者带来了更好的体验，但后端页面构建器本身存在一个巨大的问题。尽管您可以直观地看到内容的示意图，但您所看到的并不是真正的最终内容。这导致人们不得不频繁查看页面预览，以确认自己的操作是否正确。在使用后端页面构建器时，我个人往往会随随便便点击预览按钮至少 20 次，仅仅是为了检查内容是否对齐正确，或者外边距是否分布均匀。这既耗费大量时间，又让人烦恼不已。

    为了解决这种不便，页面构建器应当被引入到前端。如果做到了这一点，就能消除页面布局过程中的猜测环节，因为您可以即刻看到最终效果。

    截至目前，市面上有很多后端页面构建器，而前端页面构建器却屈指可数。在为数不多的几款产品中，就有 Page Builder Sandwich。如果您想了解更多关于 Page Builder Sandwich 的独特之处以及为什么它是适合您的工具，请阅读文章 Page Builder Sandwich 与众不同之处.

  • 针对 PBS 用户的 Cloudways 专属优惠！

    我们正在与网络上最出色的托管云主机平台之一 Cloudways 展开合作。如果您还没听说过他们，他们在 WordPress 社区中备受信赖，事实证明他们是目前最可靠的主机服务之一。他们还拥有许多非常强大的功能，例如多云基础设施、多个数据中心和 SSD 主机托管，外加一键克隆、一键备份与恢复以及一键域名映射。

    好消息是，我们与 Cloudways 携手为想要尝试 Cloudways 的 Page Builder Sandwich 爱好者打造了专属优惠，同时也作为对现有 Cloudways 用户的回馈！只需输入优惠码 只需输入优惠码：

    CWPBS15

    ……即可在升级 Cloudways 账户时立减 $15 。此优惠还为您提供 Cloudways 上的 1GB DigitalOcean 服务器免费使用 1 个月。对于想要更换主机服务商，或是打算搭建新网站或 Web 应用的人来说，这是一个不可多得的绝佳机会。

    希望您能像我们享受与 Cloudways 的合作一样，喜欢这项优惠活动！

  • 页面与插件：最大化您的WordPress体验

    pages-and-plugins-maximizing-your-wordpress-experience

    WordPress 的某些功能（尤其是那些较复杂的功能）可能需要新用户花些时间去熟悉。如果你恰好是这些新用户之一，WordPress 那些错综复杂的专业术语可能会让你陷入一种望而生畏的循环，尤其是在不可避免地感受到信息过载的时候。天哪。

    现在，如果你属于这部分特定的 WordPress 用户，我们恳请你不要慌张；好消息是，认为身为 WordPress 新手就自动等同于只能获得有限的 WordPress 体验，这纯粹是一种误解。这种想法是几乎每个人都会犯的普遍错误，我们极力建议你不要重蹈覆辙。

    事实上，你无需对软件和代码的内部运作有那么深入的理解，就可以开始搭建网站——或者说，让网站按你所期望的方式运行。“这怎么可能呢？”你可能会问？嗯，实现这一点的方法之一就是在你的网站上创建页面，并添加插件。

    WordPress 兼具复杂性与便利性，通过我们针对新手的多篇初学者文章，我们基本上已经涵盖了这一点。此前，我们还讨论了插件如何为 WordPress 的可定制性和灵活性做出贡献，以及它们如何让用户充分利用他们的 WordPress 体验。虽然熟悉插件的重要性对你的建站之旅至关重要，但 WordPress 的基本要素——例如页面的存在，也可以让你迎来一个非常好的开端。

    20160824_Una_PBS_Article_2

    页面与文章的定义区别

    在 WordPress 的领域里，“页面”（page）这个词几乎总是与“文章”（post）联系在一起——比如“页面和文章”——有时人们会误以为它们是可以互换的术语。可以说，这两者之间确实容易让人混淆（尤其是当你还在 WordPress 新手池的浅水区摸索的时候）。因此，记住这一点，尽管这些事情看起来微不足道，但熟悉 WordPress 的细微之处总是一个好主意，特别是当你刚起步时。

    区分文章和页面的一个简单标识是：文章是你在网站上创建的各个独立条目（例如，你现在正在阅读的这篇文章就是一篇 post）。这些条目对网站来说并不完全是必需的，除非你的网站像我们一样拥有一个活跃的博客。然而，设置页面可能是你网站的一个关键要素，这也是本文将更加侧重的内容。

    页面是建筑积木

    除非你以前从没碰过电脑（我们认为这不太可能），否则很有可能你已经见过或听说过网站页面，或者至少对它们是什么有了相当的概念。如果你还不熟悉，别担心；在访问其他网站时，你也很可能已经遇到过页面了：常见问题（FAQ）和/或“关于我们”部分、联系表单以及图片库。对于初学者和新建的网站来说，从某种意义上说，它们就像是积木。如果把它们组合在一起，就构成了你网站的核心内容以及它所提供的一切。

    因此，留心这些基本差异固然很好。但是，结合你基本的插件常识，即使你是一个初学者，实际上也处于一个极佳的位置，可以充分利用你对 WordPress 页面的新认知。不过，现在的问题在于，该怎么做。

    20160824_Una_PBS_Article_1

    善加利用：你可以安装的基础插件

    在基础的 WordPress 网站上，创建页面当然很容易。你只需要摸索一下，阅读一些说明，点击几个按钮，就可以搞定了。但是，如果你想要的不仅于此，你就需要安装几个插件了。

    1. SEO（搜索引擎优化）插件

    让你的网站出现在公众视野中已经够难的了，而宣传推广你的网站的任务更难。相信我。这就是为什么 SEO 插件的一点点帮助对于你的网站提升排名至关重要。

    在 Sandwich，我们使用 Yoast，它通常被称为当今市场上领先的 SEO 插件。不过还有许多其他的 SEO 插件可供选择，如果你想权衡自己的选择，有很多像 SitePoint 这样的网站对比并分析了不同的 SEO 插件。

    1. 备份插件

    备份是你在搭建网站时必须采取的最重要预防措施之一；你再怎么小心也不为过。毕竟，花几分钟（或几小时，取决于你的经验）来设置一个好的备份插件，总比在数据不小心被清空后花费无休止的时间重新搭建网站要好得多。

    1. 安全插件

    外面的世界是非常残酷的，网络世界亦是如此。坏人会想要窃取你的数据，甚至黑入你的网站等等。因此，安装一个安全插件并配合备份以防万一总是一个好主意。我们使用 VaultPress 来兼顾备份和安全。

    1. 防垃圾内容插件

    没人喜欢垃圾信息（Spam），除非它是午餐肉（Spam）。真美味.

    好吧，抛开广受欢迎的罐头食品不谈，多余的垃圾信息有多种方式潜入你的 WordPress 网站。根据 WPExplorer 的说法，虽然可以手动调整 WordPress 来防止垃圾信息，但你也可以选择一个更快捷的解决方案：为你的网站安装一个防垃圾内容插件。

    1. 缓存

    安装缓存插件是提高网站和服务器性能的可靠方法。我们使用 WP Fastest Cache 已经有一段时间了，但还有许多其他高评价、值得信赖的缓存插件——比如 W3 Total Cache——你也可以尝试一下。

    你可以在 WordPress Codex 网站.

    冷知识：Cache 的发音是 ˈkash，而不是 kashè

    为你的页面准备的其他插件

    1. 联系表单插件

    作为网站所有者，你有责任回答受众的问题并回复他们的建议。因此在建站旅程之后的某个时刻，他们可能希望——甚至需要——与你取得联系；而这就是联系表单插件的用途所在。虽然你可以从头开始为你的网站构建一个联系表单，但我们不得不承认，有时候这样做并不是很实际，因为这样做肯定会耗费你一些时间，特别是当你是个初学者时。

    WPBeginner 提供了一份清单，列出了他们评选出的市场上最好的联系表单插件，而 Site Point 也有一篇类似的文章介绍了那些可以免费使用的插件。

    2. 社交媒体插件

    除非你是一个人们经常蜂拥而至的网站，否则不可否认，要想让你的网站内容（如文章）流传开来是颇具挑战性的。这就是为什么有时会出现对社交媒体插件的需求。如果你的受众发现你的内容足够有趣，他们很可能会想要将其分享给社交媒体平台上的朋友。

    3. 评论工具 / Disqus

    正如我们所提到的，与受众交流是必不可少的，尤其是当你的网站内容围绕特色专题文章展开时。了解你的受众也能给你带来优势；你可以利用他们提供的任何反馈来改善你的网站和/或你的产品。

    Disqus 是一个非常流行的评论工具，也是市场上最受欢迎的工具之一。Kikolani 也有一篇非常实用的文章，可能会帮助你决定哪种评论工具最适合你的网站。

    插件数量远超你的想象

    适用于 WordPress 网站的插件列表并不止于本文。这些只是我们认为非常有用的少数几个；WordPress 插件的领域所拥有的绝对不止我们上面列举的这八个。

    话虽如此，我们可能无法面面俱到。那么，你心目中是否有认为应该上榜的插件呢？在下方的评论区告诉我们吧，我们可能会在我们未来的文章中采纳你的建议！

    祝建站愉快！

  • Page Builder Sandwich 2017：年度回顾

    2017年，我们开始扩展 Page Builder Sandwich 的功能。这一年对我们来说是一个巨大的飞跃，我们感到无比高兴。

    我们收到了来自广大用户以及 WordPress 朋友们的大量反馈和支持。正因如此，我们才能够打造出意义非凡的成果，让您能与我们一同创造精彩。

    So without further ado, let’s look back at Page Builder Sandwich’s 2017. Here are our favorite updates and releases from this year.

    Parallax Scrolling

    Parallax Scrolling is a background effect that gives your page a a 3D layered look while you scroll.  We made adding this effect easy for our users- simply select the Parallax Scrolling option in your row’s background to add the parallax effect.

    Video Backgrounds

    就像视差滚动一样，Page Builder Sandwich 让您只需复制粘贴 Vimeo 或 YouTube 链接，或手动上传视频，即可轻松添加精美的视频背景。

    Ken Burns Backgrounds

    您注意到大多数纪录片中展示历史档案素材的方式了吗？它们在屏幕上展示一张静态图片，然后缓缓放大？那被称为肯·伯恩斯效果（Ken Burns effect）。没错，Page Builder Sandwich 也在2017年推出了这项功能。

    Blank Page Template

    想从一张白纸开始？Page Builder Sandwich 满足您的需求。我们还在2017年推出了空白页面模板（Blank Page Template），让您可以在完全空白的画布上设计您的网站。

    Full Page Templates

    Page Builder Sandwich released its very first set of Page Templates in January 2017. Niche-based and professionally designed, these templates also allow for manual editing so you can customize them the way you’d like.

    Mobile Responsiveness

    2017年，我们在功能列表中引入了移动端响应式设计（Mobile Responsiveness）。现在，您可以在移动设备上无缝浏览您的网站。

    All 800+ Google Fonts

    我们为您提供了超过800种 Google 字体，让您的网站更加丰富多彩、灵活多变。

    200% Performance Increase

    Bigger, better, faster. Page Builder Sandwich increased its performance by 200% in 2017.

    What’s in Store for 2018?

    Page Builder Sandwich 一直是真正用户友好、真正直观且真正的前端页面构建器。随着大家分享各自的需求，我们为您提供最佳网页制作体验的愿景也在不断成长。

    汲取您的想法，我们为2018年打造了更出色的产品！

    Frontly Builder is the next step in our evolution and we’re at the final stages of development!

    Leave us your email to get first dibs on updates!

    ’til relaunch

    没有大家的支持，我们就无法走得这么远，非常非常感谢2017年陪伴在我们身边的每一个人！让我们在2018年创造更多令人惊叹的作品。我们2018年见！

    此致，
    Page Builder Sandwich 团队

  • 我们很快就会发布重磅之作。

    In a few short months, we’ll be relaunching as Frontly Builder.

    目前，它仍处于紧张的开发阶段。即便如此，我们还是无比兴奋地想向大家展示我们的最新成果。在这里，我们将讨论为什么要做出这一转变、Frontly 与 PBS 有何不同，以及您需要关注哪些内容。

    从 Page Builder Sandwich 到 Frontly Builder

    Before the idea of Sandwich, we noticed a little pattern with page builders everywhere: A lot of them were difficult to use.

    For example, some of these builders would have you go through numerous pop-ups and other settings if you want to add something as simple as an image, a row, a button.

    And if you wanted to change a column’s settings, clicking on the edit button takes you to yet another pop-up that requires you to input settings like size and margins through dropdown options that aren’t very flexible.

    It was frustrating because we knew that page builders should exist to make things easier for users, not the other way around.

    Other wordpress page builders
    Other WordPress Page Builders

    This is how we came up with Page Builder Sandwich.

    We wanted to introduce a builder that was going to maximize users’ experience when creating webpages, allowing them to create awesome things the fast and easy way.

    We received lots of great feedback that allowed Sandwich to evolve. And the more our audience grew, the more suggestions we received on how we could further improve the plugin.

    We were in a state of constant development, and we loved it.

    Page Builder Sandwich has true front-end power, and so will Frontly Builder.

    重新定义基于“真正前端”运行的含义

    Sandwich 一直在不断演变。

    Apart from the feedback (both negative— things we could work on; and positive ones— which we knew we had to retain), Sandwich’s capacity to grow increased, too. We kept finding more and more ideas and solutions to further improve PBS.

    And the more wants and needs from PBS arose, the more our code’s main foundation got tweaked.

    想象一个加满了你所有喜爱配料的真正三明治。

    当然，它味道肯定很棒，但你怎么把它放进嘴里呢？它又该如何实现其主要目的——被吃掉呢？

    This is kind of what happened with PBS. We realized that so much more could be done with it with an even more efficient, stronger foundation. That we could take it further.

    正如我们所提到的，Page Builder Sandwich 一直处于不断演进的状态中。

    Frontly is the next step to that evolution.

    You’ll still get an awesome support team, theme and plugin compatibility, and more.

    LIKE US ON FACEBOOK to see the logo!

    这并不是与 Page Builder Sandwich 的告别。

    It’s a hello to Frontly.

    So what makes Frontly different from Page Builder Sandwich?

    We’ve been working really hard to maximize Frontly’s development. The goal now is to make it an insanely better version of PBS — to embody what it means to operate on true front-end.

    Right now, we’re focusing on further improving Frontly’s UX and UI. We’ve worked on giving it a smoother look, a more user-friendly experience, and features that’ll let you build professional-looking websites in even less effort and less time.

    Questions on Frontly?

    We have a short FAQ post you can check out. Add a comment below so we can add your questions to our list!

    即将推出，敬请期待。

    While we’re crazy excited to show you guys what we’ve come up with, we wanna make sure everything is just right for you. So leave us your email to get first dibs on updates, tips and trick, and big promos on the release date.

    We are relaunching as Frontly Builder.

    Leave your email so you don’t miss out.

     

  • 3.0 版本：重新思考页面构建器的工作方式

    version-3-0-rethinking-how-a-page-builder-should-work自我们将 Page Builder Sandwich 推出给公众以来，已经过去 10 个月了。我们现在拥有大约 6,000 个活跃安装量，这对我们来说是一项相当不错的成就。我们也因此收到了大量的反馈，无论好坏。然而，大家的共识是，与其他页面构建器相比，人们很喜欢用它来轻松构建布局和创建内容。

    我们收到的大量反馈都是功能请求，在过去的几个月里，我们添加了许多此类功能。但随着我们不断这样做，我们在此过程中也开始慢慢改变用户界面。结果，我们也顺带改变了用户体验……变得越来越糟。事情发展到了这样一个地步：我们需要重新思考界面，因为它不仅不再流畅，而且各项不同功能也无法很好地与其融合。

    已弃用的界面

    在 PBS 的早期版本中，我们希望一切都以按钮的形式呈现。为什么？因为按钮很容易使用。你只需要……点击它们即可。在较旧版本的检查器（上面图片中的侧边栏）中，单击按钮会增加数值，然后按住 Shift 单击按钮会减少数值。这听起来足够简单。但是随着轮播、选项卡、地图和其他新元素及功能的添加，所有这些按钮变成了一堆设计各异的不同图标，开始看起来有点像象形文字，而不是一个炫酷的界面。对于老用户来说这还不是问题，但如果你是 PBS 的新用户，看起来就会相当令人生畏。

    其次，检查器上出现了一些问题。最初的想法是让所有内容在检查器内部都保持简单且可用。我所说的所有内容，是指一切——从将文本转换为标题，到更改背景颜色、字体颜色等等。然而在目前的状态下，检查器现在包含许多选项，让你不得不一直使用鼠标滚轮上下滚动。这与我以前希望为用户打造的检查器大相径庭。

    最后，我们最近为你最喜欢的插件引入了简码映射功能.该功能需要我们创建文本字段、数字滑块、复选框以及其他新的选项类型，以使你的简码编辑体验更加愉快。起初，这是个好主意，是的，它确实让你操作简码变得更容易。但同样，该功能偏离了我们“仅用按钮”的界面设计。回想起来，只用按钮来更改简码属性确实是不可能的。现在，在最新版本中，我们最终得到了 2 种类型的控件： 按钮和简码字段。

    还有其他几个原因让我们认定我们的界面不再有效（或不再适合我们的需求），但以上几点是主要的。不过有一点始终是肯定的： 我们知道必须更新界面。

    定义页面构建器理想的工作方式

    我们没有立即盲目介入并仓促改动，而是退后一百步来重新审视整个页面构建器的体验。我们希望为界面注入新的生机。说实话，我们不想年复一年地不断重构它。这很累人，而且绝对不会给 WordPress 社区带来实质性的帮助。这一次，我们决定缓慢而谨慎地行事。我们研究了 Page Builder Sandwich 的每一个角落，探讨是什么让它成为一个优秀的页面构建器，最终将整个编辑体验提炼成了几个核心概念。

    核心概念 #1：直接在内容中打字编辑

    安装页面构建器的主要原因之一是为了摆脱 WordPress 后台文本编辑器的限制。并不是说后台编辑器不好，但是在创建网页时，它不能立即向你展示访问者所看到的网页效果，也不允许你在单列布局之外进行内容排版。你在那里只能看到文本和一些图片，但看不到任何更复杂的内容（例如联系表单）。你确实可以添加简码，但它们不会以渲染后的形式显示*。

    * 其他人正在制作插件来解决这个问题，例如 Shortcake UI，但这是另一码事。

    这正是前端页面构建器发挥作用的地方。它们将编辑体验从后台带到了前端，让你按照访客真实看到的方式来编辑网站. 正如 Pippin 所言：所见即所得（WYSIWYG）。

    作为前端编辑器的另一个好处是它允许你直接编辑文本。在网站构建中输入标题和段落时，能带来如同使用常规文字处理器般的轻松自如。按钮和选项卡标签也应该可以通过直接点击并键入来进行修改。

    这是大多数其他页面构建器表现不佳的领域。它们中的大多数都强迫你在文本字段内打字来编辑所有内容。再次强调，在真正的前端页面构建器中不应该出现这种情况。自第 2 版以来，直接输入和编辑文本一直是 Page Builder Sandwich 的强项，我们确保在第 3 版中仍然坚持这一点。

    核心概念 #2：利用鼠标进行快速调整

    鼠标是一个强大的工具，但在页面构建器中经常被忽视。通常，页面构建器用它来让人们拖动内容并放置在不同位置，或者点击按钮或输入框。虽然这没什么问题，但在页面构建方面，你可以用鼠标做的事情还有很多。

    其一，使用鼠标作为编辑页面的工具具有绝佳的视觉反馈，尤其是在调整外边距、内边距和尺寸等视觉属性时。现在，调整元素变得非常自然流畅。

    在 PBS 第 3 版中，你将能够使用鼠标调整多项内容。你可以调整各个元素之间的外边距/间距、列内的内边距，以及图像、图标和地图的尺寸。我们还将允许你更改数值的按钮替换成了滑块。

    核心概念 #3：文本应易于设置样式

    如果你从显示器前稍稍退后一步，你会发现添加到网页中的大部分内容都是文本。是的，我们确实有图片和图标来搭配它们——最近我们还倾向于在网站中添加更大的图片。但是大部分的重要内容都是文本：标题、项目符号列表、段落、引用等。与此同时，我们如何为文本设置样式以适应我们的设计也同样重要。我们要么改变它们的大小和颜色，要么将它们加粗或倾斜。这是为了让我们的内容更具可读性、相关性，并对读者更具吸引力。

    因为我们经常为文本设置样式，所以允许更改样式的按钮应该非常易于访问。它们不应该被收纳在一个我们需要先打开的弹出框中。大多数页面构建器都患有这种通病。为了让它们的用户界面贴上“整洁无杂乱”的标签，甚至连最常用的选项都被隐藏了起来，不在显眼处显示。

    为了解决这个问题，我们参考了最常用的文字处理器。我们注意到它们通常在屏幕顶部附近有一行带有大量按钮的工具栏用于设置文本格式，第 3 版也采用了相同的布局。现在，我们在屏幕顶部常驻了一整行文本样式按钮。这使得样式设置非常迅速，近乎成为你文本编辑的本能直觉。

    核心概念 #4：高级样式选项应灵活且易于理解

    页面构建器的根本宗旨是让人们能够轻松创建令人惊艳的设计。这意味着我们应该提供大量不同的设置和选项，同时又不会带来艰难的学习曲线。能够调整外边距、内边距和文本样式固然很好，但这些作用有限。你需要更丰富的选项来完成工作，例如背景图片、图案、边框、固定背景等等。将所有这些不同的设置堆叠在一起可能会让人不知所措，因此我们简化了其中一些设置并将它们分类整理，以便在第 3 版中使操作更加友好。

    核心概念 #5：简码支持

    最后，别忘了我们的页面构建器是建立在 WordPress 之上的。我们应该拥抱这个平台及其特性，而不是限制它们或偏离它们。WordPress 提供的一个重要功能是简码。这并不意味着全部内容都应该由简码组成——那样会很乱——而是我们应该与它们保持兼容。许多插件和主题都使用简码，如果忽略它们将是一大损失。事实上，简码在创建页面时为用户提供了极大的灵活性。

    几周前我们引入了简码映射系统，因此我们已经映射了来自数百个插件的数百个简码。我们优先考虑了 WordPress 插件目录中最受欢迎的插件，因此你很有可能在自己的网站中遇到它们。这在第 3 版中得到了进一步强化，我们将在未来继续改进这一点。

    结语

    我们融合了上述所有核心特性，并将它们融入了 Page Builder Sandwich 第 3 版中。这是我们迄今为止为 WordPress 构建的最佳页面构建器。它更直观、使用起来更自然，性能更快，使用更简单，并且比以往任何时候都更加友好。

    如果你对核心页面构建器功能有任何想法，请在下方发表评论告诉我们。

  • #PBSUpdate：全页面细分领域模板

    PBS Version 4.0 has been our biggest update yet, and with its release, we’ve included a new game-changing feature, the Full Page, Niche-Based Templates.

    The Full Page Templates are a set of 10 professionally designed, niche-based templates. They’re ready to use upon downloading PBS, and can be used as is, or may be tweaked to fit your taste.

    Use as a Starting Point for Your Page

    使用模板是制作网页最高效的方式之一。它们通常作为解决网站设计和布局问题的快速方案提供给用户，并提供多种（通常是不同主题的）选项可供选择。随着 4.0 版本的更新，Page Builder Sandwich 终于推出了自己的一套模板。

    A screenshot of one of our templates, the PBS Farm Template

    The Benefits

    PBS 的整页模板经过专门设计，旨在免去您从头开始设计网页的负担。每个模板都针对特定的利基市场量身定制，且每个模板都包含适合特定行业的元素。例如，酒店模板包含了 Google 地图、联系表单以及专用于展示您酒店设施的板块等功能。另一方面，时尚模板则包含一个轮播图，您可以在其中展示最新产品并在下方标明价格。

    Tweak, Tweak, Tweak

    由于这些模板是预先设计好的，它们还能通过节省时间和资源来简化页面构建过程。但是，如果您选择的模板不包含您可能希望在页面上拥有的功能（例如您希望工业模板具有视频背景的首屏横幅），也不必担心。您只需直接在 PBS 中调整元素属性，即可根据自己的品味和需求对模板设计进行微调。

    A section of the PBS Farm Template with tweaked colors and different photo that may cater to a different niche

    The 10 templates we currently have available (we’ll be releasing more soon!) are themed according to the following common niches and industries:

    1. Hotel Template

    • For hotels, spas, or similar business.
    • Includes video background hero header, carousel testimonials, contact form, Google Map, and more.

    2. Law/Corporate Template

    • For law firms and other corporate businesses.
    • Includes about us section, carousel testimonials, meet the team section, and more.

    3. Fashion Template

    • Use for online clothing stores and other e-commerce sites. Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.
    • Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.

    4. Farm Template

    • Ideal for subscription e–commerce sites.
    • Includes promo header, call–to–action buttons, subscription plan sections, and more.

    5. Restaurant Template

    • Perfect for restaurants and other delivery service businesses.
    • Includes hero header with space for delivery numbers, menu section, business hours section, and more.

    6. Concert Template

    • Ideal for concerts and other big events or gatherings.
    • Includes countdown, video background, affiliates section, prices section, subscription button, and more.

    7. Forum Template

    • Use for communities, small organizations, and more.Includes call-to-action buttons, about section, count up, meet the team section, and more.
    • Includes call-to-action buttons, about section, count up, meet the team section, and more.

    8. Portfolio Template

    • For photography or art portfolios, and more.
    • Includes iconified skillset section, gallery, social media buttons, and more.

    9. Industrial Template

    • Use for industrial or manufacturing businesses, and more.
    • Includes hero header with video background, about us/featured product sections, carousel testimonials, and more.

    10. Wedding Template

    • Perfect for weddings and other small intimate events.
    • Includes hero header with video background, photo gallery, RSVP section, Google Map, and more.

    Some samples of PBS’ Full Page Templates: the Law, Forum, and Hotel Templates

    The Future of Full Page Templates

    虽然我们目前有 10 个模板可用，但我们目前正在制作更多模板。当然，我们希望涵盖所有常见的利基市场和行业，但如果您有任何建议，欢迎随时给我们留言。

    祝建站愉快！

  • 如何添加视差效果、视频背景和肯·伯恩斯效果

    Page Builder Sandwich 拥有一个我们统称为“炫酷背景特效”（Fancy Background Effects）的功能。其中包括三种效果：视差特效（Parallax Effect）、视频背景（Video Backgrounds）和肯·伯恩斯特效（Ken Burns Effect）。

    What are the different Fancy Background Effects?

    PBS 的炫酷背景特效能为您的网站带来吸引访客所需的助力。它们是抓住注意力的绝佳方式，若运用得当，可以在网站流量方面取得引人注目的成效。

    视差特效

    在页面上应用视差特效可以为您的背景增添层次感与深度感，让网站的某些元素在滚动时“脱颖而出”。以下是应用了视差背景与未应用视差背景的页面示例对比。

    With Parallax Scrolling

    The background image scrolls at a different rate as the rest of the elements in the page.

    Without Parallax Scrolling

    The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

    Video Backgrounds

    视频背景允许您使用循环播放的视频代替静态图片作为背景。PBS 视频背景的妙处在于，只需根据提示粘贴所需的 YouTube 或 Vimeo 链接，我们就会为您将其转换为视频背景。您当然也可以上传自己的视频来实现这一点。

    您可以查看以下一些视频背景示例：

    The Ken Burns Effect

    Ken Burns, who popularized the Ken Burns effect in film.

    In documentaries, do you ever notice when they show photos that slowly zoom into detail? That’s called the Ken Burns Effect. You can access these effects on Page Builder Sandwich, too.

    How do I add the Fancy Background Effects?

    您可以按照以下步骤找到所有炫酷背景特效：

    Step 1: Choose a row you’d like to add an effect on. Click on this row’s settings button (the gear icon on the left). This will open the Properties Inspector.

    Step 2: Once the Properties Inspector pops up, scroll down a bit until you find the option called “Fancy Background Effects”.

    Step 3: Once you’ve found it, you’ll see that you can click a dropdown button and select which background effect you’d like on your row.

    Step 4: Depending on which Fancy Background Effect you choose, you can adjust each effect’s settings. For example, for the Parallax effect, you can adjust its height and position.

    大功告成！之后，您就可以看到炫酷背景特效在您的网站上全方位呈现了。

    Have you used PBS’ Fancy Backgrounds yet?

    您是否还有其他想要建议我们添加的背景特效？或者想向我们展示您使用 PBS 制作并应用了这些特效的网站？欢迎在下方评论区留言告诉我们！

  • Frontly Builder：常见问题解答

    A few months ago, we announced the launch Frontly Builder, a bigger, better front-end page builder with increased performance and awesome new stuff. Think of it as a new and improved version of Page Builder Sandwich.

    目前仍在筹备中，但很快就会与大家见面。在此期间，我们相信大家对 Frontly 可能会有一些疑问。因此，我们为大家整理了一份简短的常见问题解答（FAQ）！

    What will happen to my PBS-run site?/Will I lose everything I’ve built using PBS?/Will the Frontly update destroy my website?

    • No, definitely not! Everything you’ve made using Page Builder Sandwich will remain intact, and nothing will change.

    I purchased Page Builder Sandwich before the Frontly release. What do I do?

    • The only thing you have to do is… nothing. For current PBS users, Frontly will be released as an “update”. You’ll just be upgraded to a “better” version of PBS- Frontly.

    Will I have to repurchase Frontly?

    • No. If you’ve purchased PBS before the Frontly release, you don’t need to purchase anything. As mentioned, everything will be released as an “update” for old users, so you won’t have to lift a finger or shell anything out- we’ve sorted everything out for you guys. ?

    目前就介绍到这里！如果您还有更多疑问，请在下方留言，我们会将其补充到这份常见问题解答列表中。

    我们希望您能和我们一样对 Frontly 满怀期待！到时见。 ?

    留下您的邮箱，第一时间获取最新动态！