标签： getting-started

System Requirements

Visual Composer plugin has been developed to work with WordPress. Make sure to follow these system requirements for having the best experience in using the Visual Composer Website Builder plugin.Server configurationVisual Composer server requirements are aligned with official WordPress requirements:PHP Version: 7.2 or higher;MySQL version: 5.6 or higher (you can also run WordPress on MariaDB 10.0 or higher);HTTPS support (this has become mandatory in terms of good SEO).Required PHP extensions:Zip (read more here);cURL (read more here);Exif (read more here);GD (read more here).For the Visual Composer Hub access, ensure that the following settings are in place:wp-content/uploads folder is writable (find more information in WP Codex);The memory limit in php.ini is set to memory_limit = 256M;Max execution time in php.ini is set to max_execution_time = 90.You can check if your WordPress hosting meets system requirements for Visual Composer under the System Status in the Visual Composer Dashboard Settings.If you find any cross sign (X) with red font in the System Status, it means there is something wrong with the server configuration and you need to contact your server administrator.For example:There is a cross sign (X) in the .zip extension, then you need to contact your server administrator/ hosting provider to enable the .zip extension on the server.Browsers compatibilityFor the best experience, we recommend you keep your browser updated at all times. Visual Composer Website Builder』s editor supports all latest versions of major browsers:Safari;Edge;Chrome;Firefox;iOS Safari.Note: Visual Composer editor does not support older browsers like Internet Explorer or iOS Safari 9 and below. This also means some functionality and styles of your published content (pages/posts) might be missing.Devices compatibilityVisual Composer Website Builder editor supports all major devices. This means that you are able to create and edit pages with the following devices:Mobile;Tablet;Laptop;Desktop.Note: You should use the latest browser version on your device in order to get the best experience with Visual Composer Website Builder. Please refer to the previous section of this document for more information.

Visual Composer Premium Activation

To get access to all features of Visual Composer, including Visual Composer Hub, you need to activate your Visual Composer Premium license. Access to the Visual Composer Hub is crucial since all premium elements, templates, and extensions are available there for downloading.Make sure you have installed the Visual Composer pluginOpen your WordPress admin panel (www.yoursite.com/wp-admin)Hover over Visual Composer and choose 'Activate Premium'Find your Premium subscription license key in my.visualcomposer.com under licenses.Click on the key icon and copy your Premium license keyGo back to your site and paste the license key into the fieldClick on the 'Activate' button.Don't be confused about installing the free version of the plugin and activating your premium license there. Visual Composer is the next generation editor that does not require separate .zip files for free and premium versions. Upon activation of the premium license, your version will be automatically upgraded and you will get full access to the Visual Composer Hub.Note: If you haven't already created your my.visualcomposer.com account, we've sent you an email so make sure to check it out and set a password. Your My Visual Composer account is where you can get your license key, manage your subscriptions, view purchase history, access support, and more.

Visual Composer vs WPBakery

Visual Composer Website Builder and WPBakery Page Builder are two completely separate plugins.The WPBakery Page Builder plugin relies on shortcodes to render its content while the new Visual Composer Website Builder relies on react-based output. Both are independent plugins and hence one cannot be replaced by another.It is important to mention that old versions of WPBakery Page Builder were called WPBakery Visual Composer before a complete rebranding and development of the new Visual Composer Website Builder. To understand which plugin you are using, follow these steps:Navigate to Plugins -> All plugins.Check the plugin name.If it is 「WPBakery Visual Composer」 then the plugin used is WPBakery Page Builder.A major difference between the two is that WPBakery Page Builder only works within the content area and hence areas such as header, footer, and sidebar cannot be edited using it. The Visual Composer Website Builder on the other hand allows editing the complete website.The following video explains detailed differences between the two:Here is a comparison between the features of the two:

Features

WPBakery Page Builder

Visual Composer Website Builder

Free version

Drag and Drop editor

Frontend editor

Tree view mode

Insights (Content Analysis)

Backend editor

Mobile editing

Inline text editor

Instant save

Header editor

Footer editor

Sidebar editor

Popup builder

Page layouts

Global header and footer

Dynamic content

Maintenance mode

Archive page editor (archive, category, tags, authors, search)

Works with any WordPress theme

Custom Post Type support

Multisite support

Multilanguage ready

RTL compatible

Template management

Blocks templates

Element presets

Element lock

Templatera/Global Templates (Reusable templates)

Template Export/Import

Design Options

Copy/Paste

Element clone

Element custom name

Grid Builder

Hide element

Keyboard shortcuts

Recent colors

Undo/Redo

Blank Page Wizard

Custom CSS

Custom JavaScript

Element replace

Role manager

Icon libraries

Google fonts

Instagram-like filters

Parallax effects

Gradient background

Slideshow background

Carousel background

Zoom In/Out background

Video background

Element animations

Background image position

Shape divider

Box Shadow

Instant column resize

Column stacking

Reverse column stacking

Row full width/height

Responsive preview mode

Automatic responsiveness

Custom row responsiveness

Yoast SEO support

Shortcode support

WordPress widget support

Gutenberg element

Block for Gutenberg

Custom widget support

Giphy integration

Unsplash Stock Images

API

Staging activation

3rd party Add-ons

WooCommerce Support

Cloud library

Menu elements

Online customer support

Theme integration

Developers License

Interface

Visual Composer Website Builder has a what-you-see-is-what-you-get interface for creating and editing page designs. With Visual Composer, you instantly see any results you make and ensure that your site is ready for publishing without exiting the editor.Once a new page is created or an existing page edited using Visual Composer you will see the Visual Composer Editor Interface load up.Navigation barThe main control of Visual Composer Website Builder is the navigation bar. The navigation bar is located on the left side of the screen. With the navigation bar, you can access all the options available to Visual Composer Website Builder.The navigation bar has the following options.Add Content ( Elements, Templates, and Blocks )The Add Content element lets you add a variety of elements, templates ( Visual Composer Hub Templates or templates saved by you ), and  Blocks ( Visual Composer Hub blocks or blocks saved by you ) to your page.Tree ViewThe tree view is located on the Visual Composer navigation bar. If your design has too many elements you can switch on to the tree view to have a compact overview of your layout in the familiar tree-like structure and interact with the elements on the page using the tree structure. It also provides an easy way to edit your pages using mobile devices.Insights and NotificationThe Insight and Notification tool provides you with a qualitative and quantitive analysis of your page』s content and displays any notifications that we send to our users.Responsive ViewThe responsive view option allows you to instantly check your design on several types of devices.SettingsThe settings option in the navigation bar allows you to access On-Page settings, use the Design Options for that page, set custom CSS and Javascript, and assign pop-ups for that page.The theme that you have chosen for your website generally has a header, footer, sidebar layout defined. However, Visual Composer lets you create a post, page, or a custom post type completely from scratch ignoring the theme layout.To select/change a page layout you will need to complete these simple steps:Create a new page or 'Edit' existing page;Open Visual Composer Settings from the Navigation bar;Choose the layout of your choice;Optional: specify header, footer, or sidebar templates created using Visual Composer ;Optional: control the width of the layout by choosing boxed (default) or stretched - full width.On-page Design Options lets you apply margins, borders, paddings globally with the ability to set custom parameters for different device types. The Design Options also allows you to set background color and upload a background image only for that particular page.When you are ready to publish or save the page as a draft you can click on the 『tick』 icon.Element controlEach element in Visual Composer has its own control using which that particular element can be operated upon. There are three types of controls :Row controls ( with a blue border )Column controls ( with a  yellow border )Element controls ( with a green border)As you hover elements in the Frontend editor, you will see a full hierarchy of elements from left to right (ex. row, column, single image).In addition to default controls that work on mouse hover, Visual Composer has right-click functionality. Once you right-click on the element in your layout, you will instantly see the element controls.You can edit elements already added to the page using the Edit Element Window. To access the edit element window you can hover over the Element Control and choose Edit from the drop-down menu. Elements can also be double-clicked to edit.You can edit paragraphs and titles of text-based content elements without using the edit element window. To do this you can simply double click on those elements which opens the inline editor.

Getting started

Create a new page

Once the Visual Composer is installed, you are ready to create your first page using it. To do so, navigate to Pages -> Add New with Visual Composer.The editor window (with an option to add an element) will be displayed on the left. Your page will be displayed on the right. To add an element, click on the element thumbnail from the list. For example, click on the text block element to add a text block.The row and section are master elements that allow adding other elements within them. Once a row is added, you can divide it into columns under row settings. You can either select predefined layouts or enter custom column layouts (percentage, fractions, and pixels are accepted).To add any element within a row hover onto it and click on the 「Add」 option (plus icon). This will allow you to select any element from the editor that can be added to the row.To edit an element, simply right-click on it and select 「Edit」. You can move an element from one place to another by clicking (hold it) and dragging it around your page. You can move elements from one row to another or move rows and columns.A single image or a group of images can be displayed using elements such as Single Image and Image Gallery respectively. To add an image, upload it via the WordPress media library and select it from the element settings.Each element has its own design options which allow controlling its padding, margin, and border along with the background and animation. Design options allow you to style any element to your liking and adapt it for different devices.The Visual Composer Hub option in the editor will provide you access to the library which has a wide range of elements, templates, and building blocks. A premium license activation will allow downloading all elements while the free version has a specific list of available elements.Once the page is ready, you can preview or publish it using the publishing options available in the editor.

Dashboard & settings

The dashboard contains general configuration related to Visual Composer. You can access it on the left side of the WordPress admin panel after you install the plugin.In addition, Dashboard contains access to different features of Visual Composer (ex. Theme Builder, Font Manager, etc.)SettingsVisual Composer settings allow you to: configure default editor options, overview license information, and  :Configure default editor optionsControl data sharingReset editor bundle Enable/disable maintenance modeCheck system statusOverview license information

Free vs Premium

The Visual Composer Website Builder has two versions: Free and Premium. The Free version has the features to build a basic website. The Premium version on the other hand has a wide range of functions that can build any type of website. Using a premium version an entire website can be built from scratch including the website areas such as header, footer, sidebar, etc.The following table explains detailed differences between the Free and Premium versions of Visual Composer Website Builder.

Features

Free

Premium

Drag and Drop editor

Frontend editor

Tree View mode

Mobile editing

Inline text editor

Insights (Content Analysis)

Works with any WordPress theme

Custom Post Type support

Multisite support

Multilanguage ready

RTL compatible

Template management

Design Options

Element clone

Copy/Paste

Element custom name

Hide element

Keyboard shortcuts

Recent colors

Undo/Redo

Blank page wizard

Custom CSS

Custom JavaScript

Element replace

FontAwesome icons

Icon library add-ons (more icons)

Google Fonts

Font Manager

Instagram-like filters

Simple Parallax effect

Parallax effect add-ons

Gradient background

Slideshow background

Carousel background

Zoom In/Out background

Video background

Element animations

Background image position

Box shadow

Shape divider

Column resize

Column stacking

Reverse column stacking

Row full width/height

Responsive preview mode

Automatic responsiveness

Yoast SEO support

Shortcode support

WordPress widget support

Custom widget support

Header builder

Footer builder

Sidebar builder

Popup builder

Visual Composer page layouts

Archive page editor (archive, categories, tags, author, search results)

Maintenance mode

404-page template

Global Templates

Template Export/Import

Elements presets

Element lock

Template presets

WooCommerce Support

Dynamic content

Visual Composer Hub access

Gutenberg compatibility

Premium content elements

Premium templates

Blocks templates

Unsplash Stock Images

Giphy integration

Post grid elements

Menu elements

Header elements

Footer elements

Compatibility elements with popular plugins

Facebook widgets

Pricing table elements

Tabs and Accordions

Pageable containers

Section element

Flip/Hover boxes

Testimonials

Syntax highlighter

Image carousel

Premium buttons

Online customer support

Install Visual Composer

To get started using Visual Composer Website Builder, you need to install the plugin first. There are 2 ways of installing Visual Composer, automatic installation and manual installation.Install Visual Composer automaticallyTo automatically install the Visual Composer plugin to your website, follow these steps:Go to visualcomposer.com/get-startedEnter your email address and click 「Get Started」For installation, choose and click the 「Free version」Enter your site URL and click on 「Check Your Website」Click on 「Click to Finish Installation」You will be redirected to your WordPress admin panel and the plugin will be installed on your website.Install Visual Composer manuallyIf you prefer to install the Visual Composer plugin manually, you need to download the plugin first by following these steps:Go to visualcomposer.com/get-startedEnter your email address and click 「Get Started」For installation, choose and click the 「Free version」Choose manual installation and click 「Download visualcomposer.zip」After you download the plugin, you need to upload it to your website by following these steps:Open your WordPress Admin panel and navigate to PluginsSelect 'Add New' (left side corner)Select 'Upload Plugin' (upper left corner)Choose the visualcomposer.zip that you have downloaded before and click 'Install Now'WordPress will install the plugin automaticallyClick 'Activate Plugin' to finish the installationInstall Visual Composer from WordPress dashboardYou can also install Visual Composer directly from your WordPress admin dashboard. To do it, follow these steps:Log into your WordPress Admin panel;Go to the Plugins section;Click on 「Add New」 at the top;Type 「Visual Composer」 in the search bar;Locate 「Visual Composer Website Builder」 and click on 「Install Now」;Click on 「Activate」 to finish the installation.Now you have installed Visual Composer on your website and get access to the Visual Composer Hub - an online library of content elements, templates, and extensions.