创建和自定义WordPress网站has never been easier. You don't need to build it from scratch. You don't need to hire a developer. You don't need to learn everything about the back end of your site. You just need a drag and drop plugin.

在这篇文章中,我们将仔细研究这种类型的WordPress插件是以及为什么要一个。然后,我们将研究当今市场上的一些最佳选择。

Grow Your Business With HubSpot's Tools for WordPress Websites

These tools were initially developed because the WordPress Classic Editor lacked the functionality and design elements that users expected and needed to build their sites. But some users didn't want to install a plugin; they wanted the default editor to be redesigned. That's whyWordPress replaced the classic editor with the Gutenberg editor in WordPress 5.0 in December 2018

Now that the新块编辑器has been released for a couple of years, some wonder if drag and drop page builders are obsolete. Let's tackle this question below.

Will Gutenberg replace page builders?

To answer this question, we first have to understand the difference between the editing experience that Gutenberg offers and the editing experience that otherWordPress page builders提供。

在Gutenberg编辑中,将段落,图像或视频之类的元素显示为不同的内容块。这意味着您不必担心这些元素的一致性和组织 - 您只需移动,编辑和格式即可。25个块中的每一个都配备了自己的工具栏和设置,用于更改颜色,宽度和对齐方式。

尽管它不允许前端编辑,但Gutenberg确实提供了访问者在网站前端中会看到的内容的近似值,因此您不必在编辑器和预览屏幕之间不断切换。总体而言,Gutenberg编辑器与经典编辑器相比是一个巨大的改进,该编辑提供了更少的设计选项,所需的快捷代码,自定义的HTML代码以及嵌入,以在您的帖子和页面中添加多媒体和其他视觉元素。

However, page builders still offer more components and templates — and therefore, design possibilities — than the built-in Gutenberg.

For example, with the image block in the Gutenberg editor, you'll find some options for aligning, cropping, and resizing the image. Beyond that, you'll have to add some custom CSS in the Advanced tab of the sidebar, or download an图像优化插件。Whereas with a page builder plugin likeElementor, you can not only set the size and alignment of your images — you can also add a hover animation, border, shadow, opacity level, max-width, and styled caption.

In exchange for this greater functionality and flexibility, you just have to download or purchase andinstall these WordPress plugins由于它们是由第三方开发人员创建的,而不是内置的核心软件。bob电竞官方下载

现在,我们了解了拖放页面构建器插件的好处,让我们检查一下今年可用的一些最佳选择。

最好的页面构建器不仅将提供拖放功能 - 他们还将提供唯一的元素和模块,预览选项等。下面我们将查看免费和优质选项,以便您可以找到预算的理想工具。

免费拖放WordPress插件

Creating a custom website doesn't have to be expensive. Let's look at some free tools that can help you create a beautiful website that looks like it was created by a developer or web designer.

1。SiteOrigin Page Builder

Price:免费,提供高级计划

SiteOrigin Page Builder左侧侧栏设置图像源

SiteOrigin Page Builder从WordPress目录中下载了超过一百万个,是建造A的最受欢迎的免费工具之一responsive design

Its simple drag-and-drop interface, combined with its advanced row builder make it ideal for both beginners and advanced users. To create truly unique layouts, you can change the padding, spacing, and borders of your rows and widgets by filling in simple input fields instead of coding. However, you can add custom CSS for even more control, if you have the experience.

此页面构建器不仅与SiteOrigin无缝与其他工具和主题无缝集成 - 还与任何WordPress主题,使用许多WordPress widgetsyou already love, and looks just like the WordPress interface. That way, you get the best of WordPress's built-in functionality and its extensions — all without needing to learn a completely new tool.

SiteOrigin also generates and optimizes all code for your page to help improve performance and offers a live view of any edits you make in real-time. The caveat? While the SiteOrigin Page Builder is free and has no restrictions on the number of site installs, getting the most from this plugin — including extra addons, fast email support, and ongoing updates — means spending the $29 on Premium access.

2。Themive Builder

Price: Free

frontend-mode

Themive Builderis one of the most powerful and intuitive page builders forWordPressthat doesn't cost a dime. With this plugin, you can customize nearly every aspect of your site. Themify Builder has a back and front-end edit mode so you can drag and drop elements to create unique layouts on the back end and then make additional changes to the font, background, and border of these elements on the front-end.

TheSify Builder的其他独特功能包括一个列和行生成器,使您能够创建响应式网格,这些网格在台式机,平板电脑和移动设备上显示出不同的显示,以及超过60个动画效果,您可以将其添加到要弹出的元素中像您一样在页面上CTA buttons

有了40多种可用的专业设计,站点所有者很容易简单地导入他们想要的布局,替换关键文本和图像,并开始引起访客的关注。Themify可以轻松预览您正在做的工作,撤消您所做的更改以及复制页面以快速开发。

While Themify does make its standalone plugin available for free — and offers a substantive number of templates — the best themes are gated behind an $89 Theme Club. It's worth noting, however, that if you're currently using another theme on your website from a different company, you can get 50% off Theme Club access by providing your site URL and a screenshot of your receipt for other theme services.

3。Boldgrid的帖子和页面构建器

Price:免费,提供高级计划

Text Setting pop-up on BoldGride page builder interface

Boldgrid的帖子和页面构建器专为所有技能水平的用户设计,提供了易于使用的Wysiwyg界面,为初学者和高级定制选项提供了简单的控件,并为专业人员提供了高级定制选项。

Its drag and drop system is built on the Bootstrap Grid so you can drag and drop columns, rows, and containers to create unique and responsive layouts. You can add animations and control the margin, padding, box shadows, borders, and alignment of almost any element. Although the Post and Page Builder by BoldGrid will work best with BoldGrid themes, it's designed to work with almost any WordPress theme so you aren't restricted.

与许多增值功能包括ability to quickly add animations, Google Maps, and Web Components without the need for shortcodes, this streamlined WordPress drag and drop page builder plugin stands out as one of the best free options available. Based on open-source software, BoldGrid has an active support community and is continually growing — but the sheer amount of customization options can be overwhelming for site owners just starting out.

For more blocks, blog widgets, and sliders, you can upgrade to the premium version.

4。Nimble Page Builder

Price: Free

Once installed, Nimble Page Builder is integrated into theWordPress Customizer。您可以轻松地拖放文本,图像,表格, maps, icons, and other modules onto the page and preview how they'll look live on your site. You can use the Nimble Page builder options on any post or page, from your home page to a single post or page, category or tag page, 404 pages, or even search results. You can even start building a page from scratch.

不必担心您选择哪个主题。由于Nimble Page Builder使用本机WordPress Action Hocks,因此它与所有WordPress主题兼容。Nimble Page Builder提供了各种各样的内容模块,包括经典的文本编辑器,图像,列布局,联系表,按钮和图标,为免费插件解决方案提供了强大的建筑体验。

它还符合其“敏捷”的绰号,尤其是对于移动设备。它是作为移动优先插件设计的,在任何移动设备上都非常快。

If there's any area for potential concern it's the relatively low user base; as of May 2021, there are only 50,000 Nimble Page Builder installations, although the plugin does appear to have an active support community.

5.现场作曲家

Price: Free

现场作曲家WordPress drag-and-drop plugin

图像源

现场作曲家is a free front-end page builder plugin that has helped over 50,000 WordPress users create and customize a site with ease. With a front-end page builder like Live Composer, you know exactly how your page will look when published. All the headings, images, and CTA buttons you drag and drop on the page will look exactly how your site visitors will see them. Since there's no need to make changes, hit thePreview按钮,进行更多更改,点击Preview, and so on, you can create custom pages in real-time.

现场作曲家comes with over 30 modules for creating custom landing pages and blog posts that are optimized for desktops and mobile devices. You can add testimonials, image galleries, call-to-action buttons, comment forms, and more simply by dragging and dropping the module onto the page.

免费的现场作曲家插件为营销人员,SEO专家,企业主,设计师和开发人员提供好处 - 网站所有者可以访问灵活的DIY工具,SEO友好的代码,视觉页面作曲家,以及自定义其WordPress的各个方面的能力地点。

使用实时作曲家的潜在陷阱与更高级的站点构建有关 - 如果用户想访问省时功能集成,例如内容限制,面包屑或Google Maps,则他们需要为Live Composer的官方扩展包付费。

6.GT3 Page Builder

Price: Free

Gallery module settings in GT3 Page Builder

图像源

GT3页面构建器是WordPress的另一个免费但功能强大的拖放页面构建器。

使用此工具,您可以创建无限数量的自定义页面。GT3页面构建器配备了许多有用的模块,用于在业务网站上创建帖子和页面。其中包括标准功能,例如手风琴和切换,滑块,画廊,博客,视频和进度栏,以及更独特的模块,例如您的团队,推荐,定价等。每个都是可自定义的 - 您可以简单地填写输入字段或添加自定义CSS,如上图所示。

Site owners can also expand the impact of GT3 with Gallery Pro — for $45, users gain access to additional image download, social sharing, text and gallery options. GT3 bills itself as “everything you need to get things done”, and looking at its feature list, this claim isn't far off the mark: From the ability to display testimonials and price tables to promo text, progress bars, and message boxes, GT3 is all about making it easy to create the site you want, when you want it.

Worth noting? So far, this free plugin has registered just over 13,000 downloads, marking it as a relatively new entry into the drag and drop page builder market.

Premium Drag and Drop WordPress Plugins

要在更短的时间内构建和自定义更多页面,您需要一个高级页面构建器。下面的工具具有丰富的功能和模板,并由成千上万的WordPress站点所有者使用。

7.ElementorPage Builder

Price:免费,提供高级计划

Elementor编辑文本框

Elementoris a visual drag and drop page builder with advanced design capabilities, making it the page builder of choice for over five million WordPress users.

Elementoroffers hundreds of templates to choose from. Once you select a template, you can customize it with Elementor's live editing and switch between desktop, tablet, and mobile previews to create beautiful and responsive pages in real-time. You can add forms, sliders, buttons, images, headlines, search bars, and more with the 80+ widgets built into the Elementor interface.

值得注意的是,Elementor是由专业的WordPress设计师构建的。该工具提供了像素完美的设计,该设计仍然可以生成干净的代码和可自定义的站点模板。

根据Elementor网站的数据,成千上万的开发人员为其开源项目做出了贡献,进而推动其作为最受欢迎和功能性的页面构建器插件之一的影响。这种专业的重点既是Elementor的强度和潜在陷阱,而经验丰富的设计师可以很好地利用该工具来创建顶级站点,但对于建立第一页的站点所有者来说,它可能太复杂了。

If you're building a basic site, then check out thefree version。It may offer all the templates, widgets, and animation effects you need for free.

8.Divi Builder

价格:一年,$ 89;终身通道,$ 249

Divi是另一个WordPress page builder数以百万计的用户使用。使用Divi,您将获得一个前端编辑器,因此您可以拖放元素,包括特殊效果,添加自定义CSS以及实时查看编辑。

Two of its most unique features are the split testing system and the Magic Color Manager. With the former, you can create multiple versions of a page with different colors, headlines, or entire layouts and show them to different visitors to determine which variation performs better. Divi's Magic Color Manager is a dynamic color system that automatically remembers your recently used colors and stores them for easy access and also suggests new colors that match your current palette using an algorithm.

Divi bills itself as “the most popular WordPress theme in the world”. While that's probably an exaggeration, more than 15,000 five-star reviews on TrustPilot suggest that Divi is doing something right. With support for design freelancers, marketing agencies, and website owners, Divi helps bridge the gap between businesses just starting out and companies with more in-depth design requirements.

如果您购买the Divi theme, you'll get the Divi Builder and over 800 pre-designed templates, along with 100 full website packs. However, if you decide on another theme, then you can still install the Divi builder on your site. Divi doesn't lack options, meaning that if you decide Divi is best for your site it's worth checking out its in-depth documentation and connecting with its active community for help.

Check out some of thebest example websites created with Divi

9.海狸建造者

Price: Standard Plan, $99/year; Pro Plan, $199/year; Agency Plan, $399/year

Beaver Builder拖放WordPress插件

Beaver Builder是一款用于WordPress的前端拖放页面构建器,用于175,000多个站点。

使用此页面构建器编辑页面快速简便。您可以从模板或空白页开始,然后将内容的列拖放到您的页面上。一旦您用文本,图像等填充这些列,就可以准备出版。

喜欢红利,你可以购买海狸建造的me and get the Beaver Builder plugin included with your purchase. However, you can use the Beaver Builder plugin with any WordPress theme — though it will work best with a theme with a full-width layout and minimalist design. Beaver Builder is also developer-friendly, offering clean code, a stable platform, and well-documented PHP, CSS, and JS options. Businesses can use Beaver Builder on unlimited sites with just one license, and the tool works with other themes and plugins such as Astra, Genesis, and Page Builder Framework.

这个急切的海狸的潜在缺点?这有点昂贵的一面,甚至在第一年之后的40%续约折扣中考虑。对于代理商或专业开发人员来说,Beaver Builder是一项可靠的投资,但是对于新的网站所有者来说,免费的拖放插件可能是开始的地方。

10.Visual Composer

Price:免费,提供高级计划

Pasting image in Visual Composer drag and drop interface

Visual Composer is another popular premium page builder that lets you customize the look of your entire website. In addition to pages, posts, and custom post types, you can modify the headers, footers, and menus across your entire website.

You can start with one of Visual Composer's professionally designed templates, or you can simply start dragging and dropping elements to build a page from scratch. For almost any element, you can add background effects, shadows, and animations, and control the padding, margin, border, and radius.

Visual Composer使用Cloud Hub库提供500多个内容元素,模板,附加组件和块,全部来自一个插件。而且,忠于其名称,Visual Composer就是为了提供实时视觉设计,使您可以创建高转换的着陆页,引人注目的弹出窗口和像素完美的页面,这些页面都具有很好的SEO支持。

当然视觉作曲家提供了深度nd breadth of tools for any company to build a great WordPress site, the sheer volume and variety of options skews this plugin toward professional designers. For first-time site builders, meanwhile, simpler and more streamlined plugins may be preferable.

11。WPBakery Page Builder

价格:常规计划,$ 45;扩展计划,$ 245

WPBakery Page builder frontend editor

With over four million downloads, WPBakery Page Builder is one of the most popular page builder options on the market.

Like the Themify Builder, it offers a front- and back-end editor mode. You'll also get access to WPBakery's template library, which contains over 80 predesigned templates and layouts, and over 50 content elements.

In addition to its robust built-in functionality, the WPBakery builder can be extended with over 250 add-ons. This multitude of features and add-ons makes the WPBakery Page Builder ideal for creating complex and detailed layouts for your pages, posts, and custom post types. This building bakery isn't just frosting with no cake — sites like Forbes, TechRadar, and Web Designer have all used WPBakery to create their WordPress pages.

WPBakery extends its reach with support for both front- and back-end page building, making it possible for site owners to completely transform their WordPress site from the ground up. The plugin also comes with dedicated, Monday-to-Saturday support to help companies keep their design projects on track.

While the Regular version of WPBakery offers a substantive feature set, it's easy to end up spending more than anticipated with the plugin's host of available addons, which range in price from $12 to $30.

12。SeedProd

价格:基本计划,每年40美元;加上计划,每年100美元;专业计划,每年200美元;精英捆绑计划,$ 240

SeedProd WordPress拖放插件

Seedprod具有WordPress用户的3,000多个五星级评分,并且有充分的理由 - 此拖放页面构建器使用户可以轻松地在几分钟内创建出色的着陆页。网站所有者不需要任何编码知识来充分利用Seedprod,如果不满意的话,他们可以享受14天退款保证的好处。

Key features of SeedProd include landing-page-specific blocks that are designed for maximum utility with minimum fluff, a host of landing page templates, pre-built “smart” sections that include headers, calls to action, and spam protection from bots and fraudulent submissions.

Worth noting? SeedProd's focus is high-converting landing pages rather than general page building. While it offers a wide variety of tools to help you build better landing pages, other plugins may be a better choice if you're looking for a whole-site solution.

最好的WordPress拖放插件是什么?

Best Free WordPress Drag and Drop Plugin: SiteOrigin Page Builder

With more than a million downloads from the WordPress store, SiteOrigin offers both ease of use and advanced building features — all for free — making it a great choice for first-time site builders.

Best Premium WordPress Drag and Drop Plugin: Elementor

If you want the best, you’ve got to pay for the best. Elementor offers a massive variety of features, functions, and customization options that help earn it top spot on our list of WordPress drag and drop premium plugins.

创建自定义WordPress网站

WordPress is a powerful content management system, but most site owners extend its built-in functionality with plugins. This is true of its editing capabilities. The Gutenberg editor is an easy-to-use block editor, but a third-party page builder offers more design options and templates.

The drag and drop plugins mentioned above are some of the best WordPress page builders. Any of them can help you create a site that looks exactly the way you want it to without needing to code.

编者注:该帖子最初于2020年9月发表,并已更新以进行全面性。

使用WordPress网站上的HubSpot工具,并在不处理代码的情况下连接两个平台。点击这里了解更多。

使用WordPress网站上的HubSpot工具,并在不处理代码的情况下连接两个平台。点击这里了解更多。

Originally published May 17, 2021 7:00:00 AM, updated May 17 2021

主题:

WordPress Plugins