We are planning on giving the ability to change the responsiveness of the Font Manager in future updates. Currently, the only option to change the font size on mobile is using custom CSS only. You can apply the custom CSS on the local or global CSS option in Visual Composer.Each text that you applied to a page will have a different selector. You need to look for the selector on the text that you want to change, then you can use some custom CSS like this:,/* If the screen size is 600px wide or less, set the font-size of
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
How to add category filters to the post grid elements?
In Visual Composer, you can add filter option to any post grid element. Filters allow you to display menu above the post grid that allows to quickly switch between categories or other taxonomies.To enable category filters:Add a post grid element to your pageOpen element edit windowClick on the "Enable filters" toggleA new subsection "Filters" will appear where you can select the taxonomy and style filters
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
Features
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
Popup Builder
Visual Composer Website Builder allows you to create engaging popups for your WordPress site. The Popup Builder add-on is available to all premium license owners and can be downloaded from the Visual Composer Hub.With the help of popup builder, you can create site-wide and page-specific popups that get triggered:On-page initial load (only once)On-page loadExit-intentElement ID (when an element appears in the viewport)On-click (via Link Selector)You can set site-wide popups in Dashboard.The page-specific popups are controlled from the Frontend editor settings.To trigger popup on the element appearance, you will need to add a unique element ID to the Visual Composer element.Popup editorVisual Composer Popup Builder allows you to design custom popups using the Frontend editor. To access the Popup Builder editor, navigate to Popups in the Visual Composer Dashboard.First, you will need to specify the popup template name.Visual Composer Popup Builder editor interface is no different from the Frontend editor. This means you can use rows, columns, and content elements downloaded from the Visual Composer Hub to create a design for your popup.As you create a new popup template, you will have a popup container element added to the layout by default.The popup container is a default (root) element of the Popup Builder that allows you to style popup overall look (including overlay, close button, shape, and even popup width).For the width of the popup, you can use either pixel or specify popup width in percentage. The percentage will be automatically calculated depending on the screen size of the popup.The popup container attributes contain regular and container Design Options, that has additional functionality for popup.Note: Popup Builder has in-built responsiveness which means that your popup content will look good on all devices.Important: As you create a popup, don't think about the trigger events yet. You will be able to define popup displaying on various trigger events in the site-wide or page-specific templates.
Content elements & structure
Visual Composer offers hundreds of different content elements that you can use to build your pages. There are 40+ predefined elements available right from the start. You can download more elements from the Visual Composer Hub.All downloaded elements will be added to the element library and can be added to the page from the Add Content Window.When working with elements, there is a simple concept you should understand. There are 2 types of elements:Structure elements (section, row, column)Content elements (text blocks, images, buttons)Structure elements allow you to create the structure of your page. Your layout consists of rows divided into columns. Sections are used to combine rows.You can place content elements into columns. In other words, fill columns with the content.Rows and columnsA row is the root element of Visual Composer that can be divided into columns.To divide a row into columns, you will need to adjust the "Row Layout" available in the row edit window. To access the row edit window, use row controls.There is no limit in how many columns a row can contain. You can use percentage, fraction, and pixels to set column width. The maximum width of the row is 100%. This means having 50% and 50% columns will divide your row into 2 equal columns.Since rows and columns are responsive, the width will adapt to different screen sizes.To have fixed-width columns, you can use the pixel value. This is very useful if you don't want your column to reduce in width (ex. you have a logo image that you don't want to scale down on different devices).Another value accepted by the "Row Layout" is "auto". The auto means that it will take all the free space available up to 100%. For example, if you set your row layout to 30% and auto - you will have two columns where the first one will take 30% of all width and the second the rest 70%.It is allowed to have a row width that exceeds 100%. In such a case, columns that do not fit in will be moved to the down (stacking).In addition to a simple row layout, you can adjust custom responsiveness. It allows you to adjust column width for specific devices or even hide parts of the content.There are more controls available to rows that allow to stretch the content, set column height, column gap, content vertical position, and adjust advanced design options.Content elementsRegular content elements that can be placed inside columns are the ones you will use to build your content. Elements like text block, single image, buttons, galleries, and more will contain your static content.You can adjust the content and design of those elements from the element edit window.There are simple elements and more advanced elements that can contain other elements (ex. button group containing multiple buttons or tabs that can contain other elements).In addition, you can convert your static content elements into dynamic content elements. Dynamic content elements can display WordPress default fields and custom fields. To enable dynamic content, you will need to connect the element to the custom field.Some elements, like post list or post grid, are dynamic by default. The purpose of those elements is to display dynamic content (ex. a list of your posts).How to create your own elements?Visual Composer allows adjust attributes of any element and save it as a preset.To save an element as a preset:Add an element to the page and style itClick on the Settings" icon in the element edit windowName your element and click "Save as Preset"Your new element preset will be added to the Add Content WindowYou can use presets when creating branded elements for your site or working on the site for your customers. Element presets can reduce the time you spend styling different elements.For more advanced custom elements (not based on existing elements), you can use Visual Composer API. An API allows you to create completely custom elements for your projects or create addons for sale.How to substitute elements?You can easily substitute elements from the same group while keeping the content of the element the same.This allows you to quickly see how different elements look inside your layout (ex. how different buttons look).To substitute an element with another one:Open element edit windowClick on the substitute iconSelect another element from the listThe element will be substitutedHow to hide elements?You can hide any element of Visual Composer. This means that the element will still be available in the Frontend editor, but won't be visible to your site visitors.You can use the hide option to temporarily hide elements and enable them once needed.To hide an element:Open element edit windowClick on the "Eye" iconThe element will be hiddenTo unhide, perform the same steps.How to rename elements?Visual Composer allows giving your elements a custom name. That is very useful when working with large pages.Naming elements allow you to quickly navigate through the layout to overview your content.You can rename an element by clicking on the element title in the element edit window or in the Tree View.
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
Role Manager
Role Manager allows you to restrict WordPress user roles to access certain features of the Visual Composer editor or lock certain parts (elements) of your content.Role Manager addon is very useful to agencies that work with customers and large organizations.You can download Role Manager from the Visual Composer Hub with active premium license.For the free version users, Role Manager allows enabling/disabling Visual Composer for different post types (posts, pages, custom post types).Role Manager configurationYou can access Role Manager from Visual Composer Dashboard.In the Role Manager, you will have all available user roles listed.By default, the Administrator role has full access to all Visual Composer features, while Subscriber has no access to any features.To modify user role access, open accordion, and make adjustments.To help you out, Visual Composer has role manager presets available in the dropdown for all user roles. Applying preset will overwrite user role access rights.Element lockThe element lock feature is available within the Frontend editor in the element edit window or tree view.To lock the element, click on the "lock" icon. The element will now be available for edit only to the Administrator role. Click on the "unlock" icon to unlock the element.You can use element lock to disable content manager access to the overall page layout and leave only certain elements available (ex. text block). It will allow you to reduce human error and ensure design consistency when working with content.
Custom CSS & JS
Visual Composer makes it easy to add your custom CSS & JavaScript. You can add custom code to a specific page (local) or site-wide (global). In addition, you can control JavaScript placement in the header or footer of the page.You can add custom CSS & JavaScript from:Visual Composer Dashboard (global only)Visual Composer Frontend editor (local and global)You can access CSS & JS editor by opening Visual Composer page settings and switching to CSS or JavaScript tabs.When to use local or global CSS & JavaScript?If you want your code to execute on a single page or several pages out of many, it is highly recommended to use local CSS & JS. If you want to add custom code site-wide, you will need to use global CSS & JS. Local CSS & JS allows you to keep your site clean and improve your Core Web Vitals score since Google penalizes sites with unused CSS & JS.Element ID & Extra class nameAll elements of Visual Composer have 2 default parameters:Element IDExtra class nameYou can use those parameters to refer to specific elements or groups of elements from your custom CSS & JavaScript. To apply custom CSS & JS to specific elements:Add unique Element ID or Extra class nameOpen custom CSS or JavaScript tab in the SettingsAdd your custom codeImportant: It is not recommended to use the same Element ID for multiple elements.