There are two ways in which a row height can be adjusted:Margins and paddingsIn row design options, a margin or padding can be added to a row to adjust its height. Different values can be set based on the screen size.Empty space elementAn empty space element can be added within a row and its height can be adjusted via element settings.You can download the empty space element from the Visual Composer Hub.
If you have a long page, it will be a good idea to have a back to the top button that will bring your customer to the top of the page.With Visual Composer, you can do that by giving an element id on your first row. And then you can create a button or icon and link it to that element id. It's the same method as How to link to a section on the same page.After that, you can set your button or icon to be sticky all the time. So it will always stick when user scrolling.
Using Visual Composer you can link to a downloadable file using any of its elements that output the link. For this example, let』s create a button that will open/download a pdf file when clicked.The first step is to upload the file via the WordPress media library. Once done, copy the file URL using the 「Copy URL to clipboard」 button. Now add a button element and in it』s link selection field, paste this url under URL.
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.
It's very easy to change content area width using Visual Composer Website Builder. Navigate to the Theme Builder - Theme Builder Setting - Layout Settings, and you will find layout width setting at the bottom.The default value is 1140px. If you fill in some size for example 480px, your content area will be 480px width. You will not be able to edit outside of the content area.If you are using a layout width the sidebar, the width will be calculated by summing content area and the space reserved for the sidebar.
WordPress natively does not support SVG and hence it cannot be added via Visual Composer image element. But, you can use the Raw HTML element to add it.To do this, upload the image via media uploader and grab its URL. Finally, add Raw HTML element with HTML code in image format and paste the URL in img src.The code in Raw HTML element will look like:,,Note: WordPress requires tag in SVG before uploading it via media uploader. If you do not have such tag, then you can edit the SVG file using any text editor and add following on the first line:,
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 CSS animations in Design Options allow to specify custom animation speed. You can control delay in seconds for all animations.To set custom animation speed:Enable element animation in the element Design OptionsSet custom animation speed
A blank space can be added by giving padding or a margin to the element. It can also be added by adding an Empty Space element within a column.The space can be adjusted using the height field in the element setting. It also allows setting the different amounts of space depending upon the screen size.
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.
