标签： how-tos

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 hide content on mobile?

You can use responsive design options of any element (including rows and columns) to hide an element on different devices.To hide an element:Open element edit windowScroll down to Design OptionsSelect "Custom" under Device typeSelect device where you want to hide the elementSet "Show on device" toggle to OFFIn addition, you can hide whole columns on specific devices with the responsive row layout.To hide columns on different devices:Open row edit windowEnable "Custom responsiveness settings" toggleChange the value of columns you want to hide to "hide"

How to set a background color/image for the whole page?

You can add background image or color to the whole page created with Visual Composer. To add an image or color as a background, you can use Page Design Options.To access Page Design Options, click on Settings - Design Options.In there, you can specify various design attributes for the page, including background iamge and color.Note: To apply background image to the whole page, make sure to use Visual Composer blank page layout or apply page design options in the Layout Builder.

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 link to a section on the same page?

To link to a particular section on a page locate the row in which the element is added. Edit the row and under the Element ID field, enter the id that you want to assign to it.Let』s suppose that the ID added (ex. 「about」) and should be linked via the button element. To do so, add a button element and under the Link Selection section, click on Select a URL. Now select custom option in the dropdown on left and enter #about in the field.To access it from an external page, change the dropdown value to http:// or https:// and prepend the page link to it as: page-url#about.

How to set a column to be a specific size?

In Visual Composer, you can specify column size in pixels which means it will be fixed across devices.To set column size in pixels:Open row edit windowIn the Row Layout section, set the column size in pixels.

How to create a transparent header?

You can create a transparent header that will be placed on top of the content (ex. hero image). It can help you blend a header part with your content which is a popular design pattern to be used on the homepage.To create a transparent header, you will need to follow these steps:Create a new layout for your transparent header in Theme Builder.In the header section, create the preferred design of your header.On the design option, set the background to none.On the content area row, set row margin-top value to negative (ex. -120).Give the row an extra class name (ex. transparent-header).Add custom CSS to the page to control z-index (required to display header on top of the content).,.transparent-header{
Z-index: -1;
},After doing so, you have a transparent header in a layout. If you want to create a page using that transparent header, make sure to use it on layout setting of the page.You can also do it with header builder, the steps will mainly be the same. You can refer to this video in creating a transparent header.

How to make Visual Composer work with Wordfence?

The WordFence plugin can sometimes cause an issue with Visual Composer post-editing or downloading of assets. It majorly occurs due to a false trigger from WordFence to block such operations. To handle it add following values under: WordFence - All Options - Whitelisted URLs.

URL

Param

/wp-admin/admin-ajax.php

request.body[vcv-content]

/wp-admin/admin-ajax.php

request.body[vcv-elements-css-data]

/wp-admin/admin-ajax.php

request.body[vcv-zip]

/wp-admin/admin-ajax.php

request.queryString[vcv-action]

/wp-admin/admin-ajax.php

request.queryString[vcv-admin-ajax]

/wp-admin/admin-ajax.php

request.queryString[vcv-zip]

/index.php

request.queryString[vcv-ajax]

How to set custom excerpt lengths for grid items?

Every post grid element allows to overwrite WordPress default excerpt length.To set custom excerpt:Add post grid element to the pageOpen post grid element edit windowClick "Custom excerpt length" toggleSet custom excerpt length for the post grid

How to create arrows indicating the submenu in the menu?

To create arrows ( or any other symbol ) to indicate the presence of submenus in your navigation menu you can use the below code :,.menu-item-has-children:after{
content: '▼';
top: 50%;
right: 0;
margin-top: -10px;
font-size: 22px;
position: absolute;
}

.menu-item-has-children .menu-item-has-children:after{
content: ' 25BA';
top: 50%;
right: 0;
margin-top: -10px;
font-size: 22px;
position: absolute;
},You can choose the symbol from: http://www.blooberry.com/indexdot/html/tagpages/entities/arrow.htm  and use their CSS values from: http://www.evotech.net/articles/testjsentities.html.