At the moment there is no mechanism to migrate your layout from the WPBakery Page Builder plugin to the Visual Composer Website Builder.To migrate the site, you can temporary install both plugins on your WordPress site to redesign WPBakery pages in Visual Composer. Once all the pages are redesigned, you can remove WPBakery plugin.
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]
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.
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"
If a website is using white text, it becomes difficult to work with it in the default TinyMCE editor since the background is white as well.Visual Composer has a dark mode option which enables dark-colored background for TinyMCE.You can enable it using a toggle below the TinyMCE editor as depicted in the screenshot:
There are two ways to duplicate the Headers, Footers and Sidebars:The first method is by using the export/import addon available in the Visual Composer Hub. Once the addon is downloaded, navigate to: Visual Composer - Theme Builder - Headers and hover onto a header name for the export option to appear.Click on Export to export it as a .zip file. The exported template can then be imported via: Visual Composer - Import. The same process can be applied to the Footers and Sidebars.The second method to duplicate is by using a plugin called Yoast Duplicate Post. Once the plugin is installed, navigate to: Settings - Duplicate Post - Permissions and select Header, Footer, and Sidebars under the "Enable for these post types" setting.Now when you navigate to Visual Composer - Theme Builder - Header, you will now have an option to clone it.
There are cases when you want to place two buttons side-by-side and avoid stacking of those buttons on mobile devices.You can use Button Group element that allows adding multiple buttons next to each other. Button Group element can be downloaded from the Visual Composer Hub.Once you add Button Group element, you can select the number of buttons and button styles from the available buttons. For every button, you can adjust button attributes per your needs.
Visual Composer row settings allow to set all columns within a row to have the same height. The height of the columns will be similar to the column with the longest content.To set an equal height for all columns:Open row edit windowEnable "Column equal height" toggleAll columns in a row are now equal in heightIn addition to equal columns height, you can also manipulate with content vertical position. By default, the content is placed on the top, but you can align content vertically in the middle or stick to the bottom of the columns.
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.
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.
