Visual Composer Premium Activation

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.

System Requirements

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.

Interface

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.

Install Visual Composer

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.

Free vs Premium

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

Dashboard & settings

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

Create a new page

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.

Theme Builder

Theme Builder

Theme Builder is a premium Visual Composer addon that allows you to design custom layouts for singular (pages, posts, custom post types) and archives (category pages). You can then overwrite your theme default templates site-wide or per-page basis.The addon will be downloaded automatically once you activate Visual Composer Premium.You can access Theme Builder from the Dashboard menu.In the Theme Builder you can:Create Layouts for singular and archivesAssign layouts to pages, posts, custom post types, and archives in the Layout SettingsCreate custom headers, footers, and sidebarsImportant: It is recommended to use Layout Builder to design headers, footers, and sidebars right in the layout.Create new layoutTo create a new layout open the "Layouts" section and click on "Add Layout".The editor will load and you will have to name your layout and select the type. There are two layout types to choose from:SingularArchiveBecause of a different WordPress structure, it is required to specify the layout type you want to build. You will not be able to change it after.Note: You can create several layouts for singular and archive to use on different posts, pages, custom post types, and archive-type pages.Once you select the type, you can start building. The editor will load and you will see predefined content already available. You can remove that content at any time.For the singular templates, you will have the content area defined as a part of the page. The content area is a mandatory element for singular layouts. This area will be used by your pages and posts to output the content. You will be able to create content within this area for specific pages and posts once you assign the layout to the post type.For the archive page templates, you will need a post list or post grid element added with "Dynamic WP Query" specified as a Source. This will indicate that the post list is dynamic and is based on the archive page type it is assigned to.In addition to mandatory elements, you can use any other Visual Composer elements. This allows you to design the layout around your content area or post list. You can design the header, footer, sidebar, and apply page-wide Design Options.Important: If you plan to use the same header, footer, or sidebar across multiple layouts, consider building this part as a Global Template. Global Templates make it easy to modify all copies of your template from one place.Theme Builder offers a list of additional elements available only in the Layout Builder. These are dynamic content elements that work as placeholders. With these elements, you can specify the places where to display WordPress default and custom fields (ex. post title, comment area, featured image, and ACF fields).Once your layout is ready, save it. It is time to assign your new layout.Assigning layoutWith Visual Composer Theme Builder you can assign layout site-wide or apply it to specific page.How to assign layout template globally?To assign layout globally, navigate to Dashboard - Theme Builder - Theme Builder Settings. In the Layout Settings, locate the page, post, custom post type, or archive type you want to overwrite and select the layout template from the dropdown menu. Save the changes and your custom layout will be automatically applied to all new and existing pages.How to apply layout template locally?You can apply a layout template to be used on a specific page.To do that, open the page or post with the Frontend editor and navigate to page settings. Make sure you have the page layout set to "Default".Choose your layout template from the dropdown menu. The layout will be applied automatically.Don't forget to save the page for changes to take effect.

Templates

Templates

Visual Composer allows you to work with templates. A template is a set of elements formed as a ready-to-use layout. A template can be added to the page with a single click.Once a template is added, you can replace the content of the template with your own. Using templates speeds up the process of creating a page.You can use Visual Composer predefined templates, download templates from the Visual Composer Hub, and create your own templates to reuse them.Note: Features like block templates, global templates, template download, and export are premium features.How to add a template?All downloaded and created templates can be added to your page from the Add Content Window.Open the Add Content Window, navigate to templates and click on the template you want to add.If you want to download more templates, visit Visual Composer Hub. The Hub gives you access to different types of templates, including page templates and block templates.A block template is a template that can be used as a section (part) of your page.How to create your own templates?In Visual Composer, you can create your own templates.To save all your page as a template:Open Add Content WindowNavigate to the Templates tabName your template the inputClick "Save Template"The template will be saved and added to the listIn addition to page templates, you can save a part of your page as a template. You can save any row (with content included) as a template. To save row as a template:Open row Edit WindowClick on the Settings iconName your template the inputClick "Save as a Block"The template will be saved and added to the listTo delete templates:Open Add Content WindowClick on the Settings iconClick on the "Cross" icon of the template to delete itGlobal templatesGlobal templates allow to display the same template on several pages and update it from one place. As you modify the global template, all copies of that template will be updated automatically.This allows to speed up the content management process and ensure design consistency for similar blocks.With the Global templates addon downloaded, all templates created and downloaded can be used as global templates.To access global templates, open Visual Composer Dashboard and navigate to Global Templates. There you can edit, delete, and create new templates.To add a global template to the page you will need to use the Global Template element. The element will be downloaded automatically together with the addon.Once you add an element to the page, you can choose any of your templates from the dropdown menu.Note: If you want to add a template as a regular template (not global) you can still add template through the Add Content Window.Export and Import templatesYou can export Visual Composer templates (by one or bulk) to upload them to another site.To export the template, make sure to install the Export/Import addon from the Visual Composer Hub.To export templates open Visual Composer Dashboard and navigate to Global Templates.Note: You can also export headers, footers, sidebars, layouts, and popups.In the list of templates, hover over the template you want to export and click on "Export". If you want to download several templates, select the templates and choose Export from the Bulk actions.Your template/s will be downloaded as a zip file.To import templates, navigate to Dashboard - Import and select a zip file that contains templates. The templates will be uploaded to your site and added to the list.