How to create a sticky menu in Visual Composer?

How to create a sticky menu in Visual Composer?

To create a sticky menu, edit the row element in which the menu is located. Scroll down to the Sticky section in row settings and enable the stickiness.If you are using a transparent header and want to display a header with a background when the user scrolls down, then you can use the show on sticky option. This will display the row having the background only when it becomes sticky and will hide it otherwise.

How to create a sitewide sidebar in Visual Composer?

How to create a sitewide sidebar in Visual Composer?

With Visual Composer Website Builder, you can have a sitewide sidebar that will show across your website.It's very easy to create a sitewide sidebar, you just need to follow these steps:Create a new layout in Layout Builder.In the content area row, make sure you add another column for the sidebar columnYou can divide it by 80% content area, 20% sidebar or vice versa depending on you want the right sidebar or left sidebar.After that, you can fill in anything on the sidebar column, such as an image, your ads, or something else. If you have done editing the layout, you can publish, and make sure to apply it on post/ page/ custom post type. That's it.Another method that you can use is by using the sidebar menu. You can create a sidebar on it, and if you want to display it, make sure you choose the layout that has a sidebar on it, then you can select the sidebar that you wanted.

How to create a sandwich menu for the mobile and a normal menu for the desktop?

How to create a sandwich menu for the mobile and a normal menu for the desktop?

Once a menu is created in the WordPress dashboard: Appearance - Menu. It can be displayed using menu elements such as the basic menu element of Visual Composer.In the basic menu element settings, the 「Enable sandwich menu」 option allows displaying a sandwich menu when the screen size is not sufficient to display a normal horizontal menu which otherwise will force the menu items onto the next line. Due to this, a user accessing the page from mobile sees a sandwich menu.

How to create a link to a downloadable file?

How to create a link to a downloadable file?

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.

How to create a custom 「Add to Cart」 button?

How to create a custom 「Add to Cart」 button?

If you are running a WooCommerce store, you may want to use these buttons as an "Add to Cart", but don』t know how?You can download any button from the Visual Composer Hub and make it act like an "Add to Cart" button.To add "Add to Cart" link to the button:Add the button to your page and open element edit window;Click on 『Select URL』;In the popup, select Custom in the URL drop-down menu;Enter 『Add to Cart』 URL with appropriate product id (ex. /?add-to-cart=1404).

How to copy and paste elements?

How to copy and paste elements?

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.

How to control page design on different devices?

How to control page design on different devices?

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.

How to change the font size on mobile devices?

How to change the font size on mobile devices?

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

to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

How to change the animation speed?

How to change the animation speed?

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

How to change content width?

How to change content width?

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.