Get the Official WPSaviour App Now!

BlogTutorials

Ultimate Visual Composer Drag & Drop Page Builder Guide For WordPress

The Seen Composer has grow to be one in every of many excessive selling net web page developing plugins for WordPress. As a result of it’s launch in May 2011 the plugin has exploded with larger than 150,000+ prospects (and that’s not counting the an entire bunch of tons of of consumers who obtained a replica bundled with a theme), 200+ add-ons & extensions and an entire bunch of optimistic consider all through the web.

In case you don’t already private your private copy of the plugin, possibly you’ve seen it bundled with a premium WordPress theme so far or maybe you’ve come all through an outdated Seen Composer data someplace on the web. A lot has modified as a result of the Seen Composer was first launched so we wished to data you via your entire superior choices that make up this extremely efficient plugin.

Meet The Seen Composer

Visual Composer Page Builder

In case you’re not acquainted, the Seen Composer is a drag & drop net web page builder plugin for WordPress. This beneficial dandy plugin takes the laborious half out of constructing custom-made making an attempt WordPress posts and pages. There’s not coding data required. Merely arrange the plugin and chances are you’ll get to work creating your posts and pages. It’s moreover applicable with most free themes and many premium ones, plus it’s completely applicable with widespread plugins like Contact Kind 7, Slider Revolution and many others ( which we’ll contact on later).

Placing in The Seen Composer

Sooner than chances are you’ll assemble your private pages you’ll must get hold of and arrange the Seen Composer. There are two strategies to protected a replica of the plugin: each purchase your private copy or purchase a premium theme with the plugin included. The plugin works exactly the an identical no matter which route you choose, the one distinction in these two methods is how you place in it.

Alternative 1: Purchase Your Private Copy To Use On Your WordPress Site

The first method to get your fingers on a replica of the Seen Composer is to purchase the plugin in your self. Merely go to CodeCanyon, add a replica of the Seen Composer to your basket (we advocate together with the extra help so that you simply’ll have a full yr of assist from the plugin creator at your disposal) and full your purchase.

Purchase The Visual Composer

Subsequent navigate to your downloads net web page. Click on on on the inexperienced Acquire button subsequent to the Seen Composer plugin you merely purchased and select the Installable WordPress File Solely.

Download The Visual Composer

Now, log into your WordPress dashboard and navigate to Plugins > Add new. Click on on on the Add Plugin button on the excessive of the show.

Upload Visual Composer Plugin

Select the Seen Composer zip file you downloaded from CodeCanyon. Then merely click on on to place in and activate the plugin.

Since you acquire the plugin moreover, you will have in order so as to add your license code to finish the activation course of. Merely click on on on the hyperlink on the excessive of your show after which on the big blue button to activate your copy of Seen Composer.

Click To Activate Visual Composer

This could open a portal as a way to allow WPBakery to substantiate your purchase. Click on on the big inexperienced Approve button. Don’t worry – you’re solely giving WPBakery permission to confirm that your username/email correspondence really did purchase a replica of the Seen Composer.

Activate Via Envato

Merely observe the prompts to complete activation and return to your WordPress dashboard. Now you’re ready to start developing!

Alternative 2: Seen Composer Was Bundled With Your WordPress Theme

In case you acquire a theme with the Seen Composer included arrange is totally totally different, and it’d moreover fluctuate by creator. We’ll current you the way one can arrange the plugin within the occasion you’re using a WPSaviour theme like Entire (and it should be pretty comparable with most totally different premium themes).

First you’ll want to get hold of and arrange your WordPress theme. In case you acquire your theme from Themeforest it’s the an identical course of as downloading the Seen Composer. Log into your Themeforest account and go to your downloads net web page. Then discover your theme, click on on on the get hold of button and select the installable WordPress file solely.

Download WordPress Theme

Subsequent log into your WordPress arrange and click on on on Look > Themes > Add New. Then click on on on the Add Theme alternative on the excessive of the net web page. You may must open the downloaded zip file to seek out the installable WordPress file. It’s as a result of the Entire theme is bundled with added choices like premium plugins, sample data and PSD recordsdata.

Install Total WordPress Theme

Whenever you’ve located the file chances are you’ll add, arrange and activate the theme. After activation Entire will speedy you to arrange actually helpful plugins – along with the Seen Composer.

Total Recommended Plugins

Merely click on on the hyperlink to Begin Placing in Plugins. Select Arrange from the bulk actions dropdown, confirm the entire plugins that you simply actually need to place in after which click on on Apply.

Install Recommended Plugins

That’s all you want to do! No must activate the Seen Composer by means of Envato. Since you acquire a theme as an alternative of your private copy of the plugin you do not have a license code to substantiate and you will not have entry to plugin updates until they’re provided to you by the theme creator.

Optional Visual Composer Activation

In spite of everything should you want to purchase your private copy to acquire updates sooner you positively may, nevertheless it is not required to utilize the Seen Composer alongside along with your theme. With that one, chances are you’ll switch on to really using the plugin.

Getting Started With The Seen Composer Net web page Builder

Now that you have Seen Composer put in it’s time to get started alongside along with your plugin settings. In your WordPress dashboard it’s best to now see a Seen Composer alternative. Click on on on it to open your settings net web page.

Visual Composer General Settings

The Regular Settings tab includes straightforward decisions for enabling/disabling responsive components from stacking on small screens (so you might have a daily three column row grow to be three single column rows vs. shrinking the three column row on cell), selecting a Google font subset and a rest button for turning the Seen Composer guided excursions once more on.

Visual Composer Role Manager

In case you’re website online makes use of a lot of client roles then the Seen Composer Perform Supervisor will certainly are available in helpful. This setting net web page permits your to restrict client entry to various Seen Composer choices based totally on place. This way chances are you’ll allow admins entry to all choices whereas limiting editors to solely weblog pages and contributors to nothing the least bit.

We talked about this earlier all through arrange, nevertheless the Product License tab is the place chances are you’ll verify your license code within the occasion you acquire your private copy of the plugin. In case your copy of Seen Composer acquired right here bundled with a theme chances are you’ll ignore this half.

Net web page Builder Parts

Visual Composer Page Builder Elements

The Seen Composer comes with 34 customary net web page builder components for lots of choices you’d want so as to add to your pages (the screenshot above displays all of them, plus the Contact Kind 7 issue which we talk about later). A lot of the components embrace added decisions for colors, borders, padding, margins, custom-made CSS, animations and further. Proper right here’s a quick rundown of what’s included:

  • Rows are the online web page of your pages. You’ll use the row issue to create columns and to insert your complete totally different net web page components.
  • Textual content material Blocks are exactly what they sound like – blocks of textual content material. using the standard WordPress WYSIWYG editor chances are you’ll add and format textual content material with this module.
  • Icons embrace font icons from the subsequent icon libraries: FontAwesome, Open Iconic, Typicons, Entypo, Linecons and Mono Social.
  • Separator & Separator With Textual content material are strategies to create line (and or textual content material) breaks between sections you create in your pages.
  • Message Bins are good for together with notes, alerts or totally different boxed massages.
  • Fb, Tweet, Google+ and Pinterest are all straightforward social sharing buttons chances are you’ll add for purchasers to share the online web page you could be creating.
  • FAQs are toggles that may be utilized for together with hidden content material materials prospects can reveal as they be taught via your net web page.
  • The Single Image is just that – a straightforward image with added decisions for sizing, animation, hyperlink and further.
  • Tabs, Excursions & Accordions are identical to the FAQs in that they embody hidden or collapsable content material materials nevertheless with the first half open.
  • A Pageable Container is a elementary content material materials slider (nevertheless chances are you’ll insert almost any net web page builder issue into each container “net web page”).
  • Personalized Headings make it easy in order so as to add your private headings to sections using custom-made fonts, sizing, colors and further.
  • Buttons imply you may add hyperlinks to totally different pages or exterior web pages.
  • A Title to Movement is a callout area with an added button that catches prospects consideration and imply you may add just a little little bit of convincing content material materials.
  • The Widgetised Sidebar means which you could insert your private custom-made sidebar anyplace on the net web page.
  • The Video Participant makes it easy to insert utterly totally different video codecs supported by WordPress.
  • Google Maps is one different straightforward alternative – merely paste in your Google Map code to insert a map in your net web page.
  • Progress Bars, Pie Charts, Spherical Charts and Line Charts are all strategies to graph or present data or experience.
  • Empty Space makes it straightforward in order so as to add a vertical break between components.
  • Put up, Media, Put up Masonry and Media Masonry Grids are all custom-made grids chances are you’ll add to pages (with the selection to mix and match submit or media varieties).

Visual Composer Widget Elements

The plugin moreover consists of 8 widget components that may be utilized to assemble your private sidebar within the occasion you choose to take motion. These grow to be helpful when creating custom-made landing pages the place your sidebar will not be in a typical net web page location, or in case your full website online is an enormous neighborhood of landing pages with no two using the related sidebar.

Seen Composer Extensions

The elemental Seen Compose components are good for getting started, nevertheless in the end you’ll want or need additional to create your custom-made net web page layouts. That’s potential by means of extensions. There are a variety of utterly totally different sources for Seen Composer extensions.

Total Page Builder Elements for Visual Composer

The first method to lengthen your Seen Composer is thru your theme. An superior occasion is our Entire WordPress theme which includes 39 added net web page builder components. These are included utterly with Entire to work with it’s choices, so it’s a must to have the theme put in and vigorous to utilize them. Entire consists of extensions for custom-made submit varieties (testimonials, workers, portfolios), custom-made galleries, straightforward sliders, social and far more. This makes it less complicated as a way to add the content material materials you want the place you want it.

Third Party Visual Composer Addons

In case your theme doesn’t embrace any extensions chances are you’ll arrange third event Seen Composer Extensions. These can range from free to $55 and may be discovered from numerous authors on CodeCanyon and throughout the web. In case you’re making an attempt in order so as to add a lot of additional choices like pricing tables and social then the free Symple Shortcodes plugin is the best way by which to go (we created it proper right here at WPSaviour after all). When you want to add a boatload additional decisions then a premium plugin akin to Remaining Add-on’s is maybe greatest for you. There are literally an entire bunch of decisions – chances are you’ll see a full guidelines of applicable add-ons on WPBakery.

Nonetheless you choose to extend your Seen Composer we advocate that you just don’t use the entire theme and plugin extensions on the related time. Further simply is not always increased – notably on this case. Not solely will this create numerous overlap and duplicate decisions nevertheless it should moreover significantly decelerate your website online (a ton of code goes into each net web page builder issue). So resolve the extension that works most interesting for you and stick with it.

Backend & Frontend Enhancing

With the Seen Composer you aren’t restricted on how one can assemble and edit your pages. With this extremely efficient plugin you’ve got acquired the selection to makes changes from the modular backend or from the seen frontend.

Visual Composer Backend Editor

Seen Composer Backend Editor

In case you choose to utilize the backend editor each issue is displayed as a modular issue you may insert, drag and drop into place. This method is sweet should you want to shortly format a wireframe of what you want your net web page to look like and may be earlier than the frontend in case you’ve a slower server or net connection.

The backend editor is fairly easy to utilize. Merely click on on on the blue button for the Backend Editor to permit the Seen Composer for the online web page or submit you could be enhancing.

Enable the Backend Editor

Then click on on on the turquoise button to +Add Parts.

Add Elements Via the Backend Editor

From proper right here you may start inserting any and all net web page components you prefer to!

Visual Composer Frontend Editor

Seen Composer Frontend Editor

The frontend editor presents a considerably higher view of what your closing net web page will appear as if as a result of it’s principally a real-time seen editor. It means which you could insert your entire related net web page builder components as a result of the backend editor with the extra advantage of with the flexibility to really see them as an alternative of a module. You can see how giant a 300px image really seems to be like, or if a purple button with a #6e2f93 hex value really pops.

To permit frontend enhancing click on on on each of the two Frontend Editor decisions to your net web page or submit.

Enable the Frontend Editor

This could refresh your show and take you to a reside frontend preview of your submit or net web page with all of the an identical net web page developing decisions as a result of the backend editor.

Add Elements Via the Frontend Editor

Merely click on on to start together with components. The first distinction proper right here is now you can see components as you insert them and chances are you’ll use the preview decisions inside the excessive bar to get an idea of how your net web page will appear as if on desktops, laptops, tablets and telephones.

Together with & Enhancing Net web page Parts

Whether or not or not you use the once more or entrance -end editor you’ll have the an identical decisions for customizing your various net web page builder components. Whereas decisions do fluctuate between components there are a variety of key choices to focus on after inserting your issue.

Visual Composer: Edit Row

Seen Composer Row Selections

It would not matter what you want to add to your net web page it’s a must to insert a row first. As quickly as inserted chances are you’ll hover on the frontend issue to reveal the blue row decisions (inside the backend these are always seen on the excessive of each row).

  • The first Row icon is the place chances are you’ll click on on to tug & drop the row to a model new place in your net web page.
  • The Pencil icon opens decisions to your row settings. These may fluctuate based totally in your theme. With the Entire theme you’ll discover decisions for native scroll ID, row stretch (for full-width rows), full peak row, minimal peak, visibility on cell, centered content material materials, equal heights columns, animation, typography, max width, column spacing, background video or parallax and design decisions (margin, border, padding, background color/image).
  • Columns are to stipulate the number of columns in your row. There are default decisions for as a lot as 6 columns, nevertheless chances are you’ll moreover define your private custom-made column format if you’d like.
  • Plus supplies a model new row beneath the one you could be enhancing.
  • The Duplicate icon will clone your current row and all its contents (aka all of the climate you’ve inserted into the row). That’s good should you want to reuse a row format a lot of cases on the an identical net web page.
  • Trash is simply to delete an entire row and its contents.
Visual Composer: Edit Column

Seen Composer Column Selections

When you hover on a row inside the frontend editor moreover, you will notice yellow column decisions (inside the backend you will uncover the related decisions & icons displayed above each column).

  • The first Column icon is comparable as rows – click on on on it to tug & drop and rearrange columns inside their row.
  • The Pencil is widespread column settings. Very similar to rows, column decisions may fluctuate based totally on the theme you could be using. With Entire the subsequent decisions may be discovered: visibility on cell, animation, typography, minimal peak, design decisions (margin, border, padding, background), and responsiveness settings (custom-made offset, width or hidden decisions based totally on machine).
  • For columns the Plus icon will add a part to the best of the column, above another issue already inserted.
  • As soon as extra, the Trash icon is to delete your full column plus its contents. After deleting a column the keep columns maintain their dimensions (within the occasion you delete 1 of three columns, the remaining 2 columns will nonetheless be 1/3 sized columns) so have in mind to edit your column widths after deleting.
Visual Composer: Edit Page Element

Seen Composer Net web page Issue Selections

Inside your row or columns you will use the plus icon to insert an internet web page issue. Throughout the screenshot above we’ve added a Message area. When you insert a part the settings will routinely open. To edit a part that you just’ve already added merely hover on the issue inside the entrance or once more -end editor to reveal the subsequent decisions:

  • The Pencil Icon will open the settings (which can be described beneath).
  • The Duplicate icon will clone your net web page issue exactly as you’ve got acquired it (settings and all).
  • Lastly the Trash will delete solely your net web page builder issue. from the row or column the place you inserted it, leaving all totally different components in tact.
Visual Composer: Page Element General

Net web page Issue Regular Selections

When you insert a model new issue or click on on on the Pencil icon for a part you will open the online web page builder issue settings. These are (for in all probability essentially the most half) lower up into a lot of tabs to make it less complicated as a way to see the entire customization decisions obtainable to you. Together with the settings tab, there is a gear icon inside the excessive correct nook you may use to keep away from losing your chosen settings as a preset to be reused later or as a default to be routinely used each time you insert this explicit issue.

The Regular tab consists of widespread decisions to your net web page issue. These will fluctuate based totally on which issue you insert (nevertheless in every case enhancing is as simple as using a dropdown, color picker, confirm or textual content material area). For example the Message Discipline inside the screenshot above consists of decisions for a mode, kind, color, icon, textual content material and animation. Nevertheless within the occasion you insert a Button as an alternative you’d uncover decisions for textual content material, url, vogue, kind, color, measurement, alignment, icon and animation.

Visual Composer: Page Element Design

Net web page Issue Design Selections

The Design Selections tab is the second customary tab you’ll see on almost every net web page builder issue. From proper right here chances are you’ll add a custom-made background (color or image), border, padding and margin to your issue. The alternatives to Simplify Controls reduces the CSS area decisions so chances are you’ll enter one widespread value for each decisions (margin, border and padding). One discover to remember: should you apply a background it is contained inside your border. So rising your padding will improve the seen background your added spherical your issue, nevertheless within the occasion you improve your margin you will improve the empty home spherical your net web page issue (revealing the row/net web page behind it)

In spite of everything counting on the module you insert your net web page issue may have many additional tabs. For example the Seen Composer Put up Grid has added alternative tabs for Info Settings and Merchandise Design. And in case you’re using custom-made net web page components by means of an extension identical to the Entire Employees Grid there could also be way more decisions built-in (akin to query decisions, custom-made image cropping, meta, social hyperlinks, excerpts, and so forth.) counting on what the extension creator has included.

Remember: You can checkout an entire guidelines of components in our Entire Builder Modules Info. Nonetheless, one of many easiest methods to be taught what every module does is to fiddle with the Seen Composer. Create a check out net web page and apply inserting and enhancing components. You’ll shortly get the dangle of it and be developing pages like knowledgeable!

Trendy Applicable Plugins

Together with Seen Composer extensions many widespread plugins are applicable with the Seen Composer and add their very personal net web page developing issue routinely. Listed below are a lot of of the assorted plugins you’ll be utterly happy to take heed to will work seamlessly with the Seen Composer plugin for even increased net web page developing.

WooCommerce Elements for Visual Composer

WooCommerce: When you want to assemble a retailer with WordPress then WooCommerce is the best way by which to go. Not solely is that this plugin free and full of superior choices however it absolutely’s completely applicable with Seen Composer. As quickly as put in and activated WooCommerce will not solely add it’s private settings & decisions, however it absolutely moreover supplies 17 new net web page builder components to your to play with.

Revolution Slider WordPress Plugin

Slider Revolution: Sliders are a great way in order so as to add an consideration grabbing and content material materials packed half to any net web page and Slider Revolution is a perfect plugin to do precisely that. With this plugin chances are you’ll drag and drop components like textual content material, buttons, photographs and even films all with added animations & outcomes to create spectacular sliders. See it in movement on numerous our Entire demos!

LayerSlider WordPress Plugin

LayerSlider: One different good alternative for sliders is the LayerSlider plugin. It’s merely as superior as Slider Revolution nevertheless with a barely utterly totally different interface and decisions. It even encompasses a custom-made transition builder so chances are you’ll create one among a kind animations. It’s moreover one in every of many two premium sliders bundled with our Entire WordPress theme so your understand it’s pretty good.

Contact Form 7 Free WordPress Plugin

Contact Kind 7: Contact varieties are an mandatory part of any website online – whether or not or not you’re a blogger with a form for enterprise inquiries or a dentist with an appointments variety. Contact Kind 7 is completely free, versatile and with the Seen Composer inserting your contact varieties is straightforward with the custom-made variety issue.

WPML WordPress Translation Plugin

WPML: If that you should create a multi-lingual website online WPML is among the many premier decisions for translating your posts and pages. Plus WPML is totally applicable with the Seen Composer so it’s potential to translate every custom-made net web page you assemble.

qTranslate X Translation Plugin

qTranslate: In case you don’t have to spend cash on WPML, qTranslate is an excellent free alternative that is completely applicable with the Seen Composer (it’s one in every of many free plugins we advocate to make your WordPress website online multilingual).

Yoast SEO Plugin

Yoast search engine optimisation: Yoast makes it easy for any client to reinforce onsite search engine optimisation. There are many mandatory search engine optimisation options along with sitemaps, meta descriptions, breadcrumbs and further. Higher of all – Yoast search engine optimisation performs good with Seen Composer so chances are you’ll worry about creating increased pages as an alternative of researching search engine optimisation.

Templatera Template Manager for Visual Composer

Templatera: This plugin isn’t merely applicable – it was created by WPBakery (the authors of Seen Composer) to extend the efficiency of their net web page builder. Templatera makes it potential to keep away from losing and reuse templates so developing repeat pages is straightforward. As quickly as put within the plugin supplies it’s private alternative all through the Seen Composer settings in your WordPress dashboard so it’s straightforward to import, export and reuse your templates (which we thought was such an superior attribute that we bundled this plugin with Entire too).

And we’re constructive there are numerous additional good applicable plugins! In case you’re uncertain a number of new plugin’s compatibility with the Seen Composer merely contact the creator of your new plugin and ask.

Superior Selections For The Seen Composer

For additional superior prospects there are a pair additional decisions all through the Seen Composer it’s best to use in order so as to add custom-made shortcodes to your net web page builder and to create custom-made media grids.

Visual Composer Shortcode Mapper

First is the Shortcode Mapper. This choice is found all through the Seen Composer settings and may be utilized to map your private custom-made shortcodes to the Seen Composer. That’s good in case you’ve a shortcode that you just love (like maybe one for a pricing desk) that isn’t included with the Seen Composer by default.

The second superior alternative is the included Grid Builder. With this choices chances are you’ll create custom-made grids (identical to the media and submit grids) along with your private custom-made layouts to your content material materials. For example, chances are you’ll create a custom-made weblog submit grid with spherical photographs, submit creator’s title in a daring custom-made font, custom-made excerpt measurement, a be taught additional button and a second button linking to a extremely helpful product. Get the thought? You can assemble any grid format you want with tons of decisions for components, colors, margins, borders and further.

Wrapping Up

There’s tons you’ll be able to do with WordPress and the Seen Composer. When you want to see the online web page builder at work merely try any of our Entire theme demos the place we’ve tried to showcase the variety of varieties and layouts that could be created using the Seen Composer.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
SUBSCRIBE NOW
Terms and Conditions apply
close-link
Click Me