标签： how-tos

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.

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.

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

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:,

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

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.

Visual Composer Website Builder has a feature called Design Options where you will be able to control your margins, padding, border, and radius.By making use of this feature you will be able to add specific margin/ padding on the specific device only.For example, you want to give your button a top margin of 50px but for mobile-only, you just need to select the device type to custom, then select mobile. When you give a top margin of 50px on mobile, it will not be affecting your desktop or tablet design. This feature is so powerful that you can have your preferred design on your specific devices. You can watch this video to understand more about margins, paddings, borders, and radius.

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

While editing, sometimes you need the same element over and over again. In Visual Composer editor, you can copy and paste elements so you can have the identical element with the same content, same color.There are several ways to copy and paste elements in Visual Composer.From element controlSelect the element that you want to copyHover over the element controlClick CopyHover over the column that you want to paste element Click PasteFrom right clickThe process is pretty similar to copy and paste from element control. The only difference is, you can directly right click on the element and on the column:From tree viewSelect the element that you want to copyHover over the sandwich iconClick copyAfter that, select the column where you want the element to show upHover over the sandwich iconClick pasteClone instead of copy and pasteIf you just want to have the identical element directly below it, you can use clone instead. You can find it on top of the copy:Copy element from different pageYou can use these methods to also copy an element from a page and paste it on a different page within the same site. You just need to have two pages opened on separate tabs, and copy element between them.And if you want to copy all elements from a page, instead of copying, you can use the Global Templates feature.