Sunday, January 10, 2016

5 Best Drag and Drop WordPress Page Builders Compared

Why Use a Drag and Drop Page Builder for WordPress?

Many WordPress beginners find it difficult to change or customize page layouts on their site. While premium WordPress themes come with different page layouts, those are extremely hard to customize for anyone who does not know code (HTML / CSS).
This is why users often ask us questions like: “how can we make WordPress drag and drop?” or “is there an easy drag and drop page builder for WordPress?”
There are also beginners who leave WordPress for solutions like Weebly and Wix because of easier design functionality. When we asked some users who switched, their response was: “I wish WordPress had a drag and drop website builder”.
Well, there are several great drag and drop page builder plugins available for WordPress. They allow you to customize every component on your site without writing a single line of code.
These components can be anything like adding multiple columns, parallex backgrounds, full width images, content slider, etc. Users can use these components as blocks to build their own layouts within their WordPress themes.
Now since there are different type of WordPress drag and drop page builders, some which are part of theme frameworks while others are plugins, we decided to compare them to make your decision easy.
Our criteria for comparing these WordPress page builders are: ease of use, flexibility, and the design output.
Having said that, let’s review the best page builders for WordPress in the market.

Video Tutorial


If you prefer the text version, then continue reading.

Beaver Builder

Beaver Builder
Beaver Builder is a premium WordPress drag and drop page builder plugin, and in our opinion the best one in the market right now.
Beaver is extremely fast and comes with a built in on-boarding tour that quickly familiarizes users with their interface.
Beaver Builder comes with a live drag and drop interface. You get to see all your changes as you add them by simply dragging elements from the right sidebar and dropping them on your page. You can click on any element in a page to edit its properties.
Beaver Builder also comes with several basic and advanced modules which cover almost anything you may want to add. It has sliders, carousel, backgrounds, content blocks, buttons, among many other things.
Pricing: Starting from $99 for single site license.
Our Grade: A+
Review: Beaver Builder is by far the best option in the market. It comes with pre-made templates to help you get started. The ability to customize every little detail makes it a perfect solution for ALL users.

Page Builder by Site Origin

Page Builder by Site Origin user interface
With more than half a million active installs, Site Origin’s Page Builder is one the most popular page builder in the market. One of the primary reason for it’s popularity is the price (free). It is available as a fully functional free plugin.
Site Origin Page Builder is fairly easy to use and works with any standard compliant WordPress theme. For components, Page Builder allows you to use WordPress widgets. It comes with several widgets of its own, and you can download and install any widget. See our list of the 25 most useful WordPress widgets because you can add all of them using page builder.
It also comes with a history tool which allows you to switch back and forth to undo and redo changes that you made. This is a huge time saver and gives you a peace of mind knowing that you revert and undo changes.
Pricing: Free
Our Grade: B
Review: This is the only free page builder that comes to close being great. You have a drag-and-drop interface to create and customize layouts. Although the live editing is not comparable to other solutions that we mention below, you can’t beat the value you are getting for the price.

Velocity Page

Velocity Page
Velocity Page is a simple but very powerful page builder plugin for WordPress. First of all, you get to edit your page with a live preview. Your page appear exactly how you see it during the editing process.
It comes with several built-in modules that you can use by clicking on the add element button. You can create new sections, rearrange columns, and add media from the same screen. This allows you to build multi-media rich pages with very little effort.
Pricing: Starting from $97 for single site license and limited features.
Our Grade: A
Review: Considering it’s coded by the lead developer of WordPress, Mark Jaquith, Velocity Pages goes above and beyond in code quality standards. It’s a very close second after Beaver Builder in terms of ease of use and design output.

Themify Builder

Themify Builder
If you are already using a WordPress theme by Themeify, then Themify Builder is already part of your theme. For other non-Themify WordPress themes, you can get the Themify Builder plugin.
This simple and highly intuitive page builder comes with several ready to use modules that you can add to your pages or posts. Many of these modules usually require you to install separate WordPress plugins.
Themify Builder allows you to edit your pages from the admin area as well as from your live site. With live editing you get to see exactly how your changes will appear on the site. Apart from that, Themify Builder comes with ready-to-use layouts that you can quickly apply to your page.
Pricing: $39
Our Grade: C+
Review: While the builder comes with promising features and it’s drag and drop, there is a learning curve that can leave a user frustrated. You can get nearly everything in Site Orign page builder for free.

Headway Themes

Headway Themes
Headway Themes is one of the most beginner friendly drag and drop themes for WordPress. It is different than other items on our list in the sense that it is actually a complete theme in itself.
It allows you to build any layout and any design you want using a simple drag and drop interface. It comes with built-in ready to use blocks that you can add to any page on your WordPress site. Apart from that, you can download many more blocks and templates from Headway Themes website.
Pricing: Starting from $59 for a single site license.
Our Grade: C+
Review: The rating for Headway Themes is C+ because it’s only a theme. Meaning you have to switch your existing theme while other solutions will work for any theme. Aside from that, the drag-and-drop functionality is superb. The community is excellent, and these guys in our knowledge were the first to do a true drag-and-drop functionality in WordPress.

Conclusion

As we compared the different drag and drop WordPress page builders, one thing became very clear. Beaver Builder and VelocityPage are clearly the top choice.
If you don’t mind spending little money to get the best in market along with guaranteed support from developers, then go for any of these two and you won’t regret it.
If price is a concern, then SiteOrigin Page Builder is your best choice.
We hope this article helped you find the best WordPress drag and drop page builder plugins for your site. You may also want to see our comparison to find the best WordPress photo gallery plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Monday, January 4, 2016

JQuery Simple FAQ plugin

jquerySimpleFAQ

Simple jQuery plugin for creating FAQ interfaces

Features

  • Simple to use. Use existing HTML data (ul > li) for source or use a JSON data array
  • Lots of options, but none required.
  • Fast live searching using Quicksilver, including relevancy sorting (optionally).
  • Add tags to FAQs to increase relevancy of searching.
  • Events triggered for extra preocess handling if necessary.

Basic Usage

With an HTML data source:
<ul id='faqs'>
  <li>
    <!-- Note that you MUST have the "question", "answer", and "tags" classes on these nodes -->
    <p class='question'>This is a question?</p>
    <div class='answer'>This is the answer.</div>
    <p class='tags'>tags, help, searching</p>
  </li>
  ...
</ul>
$('#faqs').simpleFAQ(); // Most simple form (all default options)
When using the 'data' option (JSON) and searching:
<div><input type='text' id='faqSearch' /></div>
<ul id='faqs'></ul>
$('#faqs').simpleFAQ({
  data: [
    {
      question: "This is a question?",
      answer: "This is the answer.",
      tags: "tags, help, searching" // OPTIONAL, useful for search scoring (and displaying if you wish)
    },
    ...
  ],
  allowSearch: true,
  searchNode: '#faqSearch'
});
See more examples at: http://jordankasper.com/jquery/faq/examples

Events

  • init.simpleFAQ: The basic UI container and event handlers have been added to the document (or have been updated). You should only ever receive ONE of these events per page load. (Arguments: event, $.jk.SimpleFAQ object)
  • show.simpleFAQ: Fired when an individual FAQ answer is shown. (Note: when searching for results, this will NOT fire when the FAQ is shown, only when the ANSWER is shown.) (Arguments: event, HTMLElement faq)
  • hide.simpleFAQ: Fired when an individual FAQ answer is hidden (either explicitly by the user, or because another FAQ was shown and the showOnlyOne option is true. (Note: when searching for results, this will NOT fire when the FAQ is hidden because it is not in the result set, only when the ANSWER is hidden after being shown.) (Arguments: event, HTMLElement faq)
  • searchStart.simpleFAQ: Fires when the user initiates a search. (Arguments: event)
  • searchEnd.simpleFAQ: Fired after a search sction is complete (all results will be showing at this point). (Arguments: event, array scores (NOTE: format will be: [ [score, faqNode], ...] ))
  • sort.simpleFAQ: Fired when the results of a search are sorted. (Arguments: event, array scores (NOTE: format will be: [ [score, faqNode], ...] ))

Event Example

$('#faqs').bind('searchEnd.simpleFAQ', function(jQEvent, results) {
  if (results.length < 1) {
    // do something when there are no results?
  }
});

Options

  • node: selector | HTMLElement | jQuery object The node (or selector) to use for the FAQ UI. If not set, the current node selected by $(...).simpleFAQ(); will be used. (default: null)
  • data: array The JSON data to use for the FAQs (will be added to any HTML FAQs). Format: [ { question: "...", answer: "...", tags: "multiple, tags" /* OPTIONAL */ } ] (default: null)
  • ns: string Used before all assigned classes and as an event namespace. (default: "simpleFAQ")
  • nodeType: string The type of node to look for (or use with JSON data) for FAQs. (default: "li")
  • questionClass: string The class that all questions will have (either you have to give them this class, or use the plugin to build the list). (default: "question")
  • answerClass: string The class that all answers will have (either you have to give them this class, or use the plugin to build the list). (default: "answer")
  • tagClass: string The class for a node in the answer that contains tags specific to each answer. If this exists, it boosts the score for search terms that are in the tags. (default: "tags")
  • showOnlyOne: boolean If true, only one answer will be visible at a time (accordion style). (default: false)
  • changeHash: boolean If true, the URL hash will be changed on each FAQ toggle, thus allowing for linking directly to a specific FAQ. (default: true)
  • slideSpeed: number | string The speed to open and close FAQ answers. String values must be one of the three predefined speeds: "slow", "normal", or "fast"; numeric values are the number of milliseconds to run the animation (e.g. 1000). (default: 500)
Search Options
  • allowSearch: boolean If true, adds searching ability (must provide searchNode) (default: false)
  • searchNode: selector | HTMLElement | jQuery object Only required if allowSearch is true; it is the element used for search input. NOTE: we use the keyup event, so this should be something that will emit that event correctly and can have a value! (Can be a node, jQuery object, or selector.) (default: null)
  • minSearchScore: number The minimum score a FAQ must have in order to appear in search results. Depends on what search function youa re using, but quicksilver returns scores between 0 and 1 (although the final score can be more than 1 based on tag scoring). (default: 0.5)
  • sortSearch: boolean Whether or not to sort search results by score (descending). (default: false)
  • showAllOnEmpty: boolean Should the plugin show all FAQs when there is no search input? (default: true)
  • caseSensitive: boolean Whether or not the search is case sensitive. (default: false)
  • keyTimeout: number A number of milliseconds to wait after a keyup event before initiating a search. Allows for better efficiency as a person is typing (live search principle). (default: 400)
  • partialTagScore: number What to increase the match score by when partial tags are matched (such as "sim" -> "simple") (default: 0.1)
  • exactTagScore: number What to increase the match score by when an exact tag is matched (such as "simple" -> "simple") (default: 0.2)
  • score: function A function used to score FAQ question and answer text (not tags). Should accept the full text and a single search token and return the score (generally a decimal number between 0 and 1, but this is up to you). (default: $.score (Quicksilver scoring function))
Blogger Wordpress Gadgets