标签： how-tos

Visual Composer and GDPR

Yes, Visual Composer and all services provided by Visual Composer is fully GDPR compliant. In addition, we ensure that all 3rd party services that are related to our data processes and storage are fully GDPR compliant as well. Make sure to visit our Privacy Policy for all necessary information on what type of data we store about the customers, how we use it, and steps on how to retrieve this information automatically.Important: Visual Composer plugin does not store any information about your customers (website visitors).What is GDPR?On May 25』th, 2018, the General Data Protection Regulation (GDPR) takes effect across the European Union. These laws aim to provide customers with more control over their personal data and protect their rights.

How to transition from a transparent to a solid header on scrolling?

In order to achieve a header that changes from transparent to a solid header, you can do that by following this tutorial:You need to create a solid header that is sticky. Make sure you set the sticky to "Show on Sticky", so it will only show when it is sticky.Below that solid header, you need to create a transparent header.That's it By doing so, you will have a header that transitions from a transparent to a solid header on scrolling.

How to use custom fonts?

To use custom font files for your site you need to follow the below process:Create a folder to store your font file in your child theme ( eg a folder 'font' is created in: http://yoursite.com/wp-content/themes/child-theme/font/). It's important to create a child theme and store the font file inside the child theme so that the font file is not overwritten when you update your theme. In the style.css of your child theme add the below code. Here we are including a font called Alex, you need to replace the font name and file name that you are using.You can now style the text in the style.css of your child theme using the CSS font-family rule.,@font-face {
font-family: Alex;
src: url(http://yoursite.com/wp-content/themes/child-teme/font/AlexBrush-Regular.ttf);
font-weight: normal;
},#apply {
font-family: "Alex", Arial, sans-serif;
}

How to create two buttons side-by-side?

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.

How to place a text to overlap with an image?

You can place elements of Visual Composer on top of one another (including text over image) by applying negative margin value in the element Design Options.To overlap elements:Add any two elements on the page (ex. image and text)Open the edit window of the second elementIn the Design Options add negative top margin valueNote: You can use responsive Design Options settings to control the overlap across different devices.

How to duplicate headers, footers, and sidebars?

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.

How to reduce the space between menu items?

If you are using the basic menu element, maybe some of you feel that the space between menu items is too big for your design. Right now, we do not have that option yet, but you can achieve it by using some custom CSS. You can apply this custom CSS to the local or global CSS options in Visual Composer:,.vce-basic-menu-container .vce-basic-menu ul .menu-item a {
padding: 16px 10px !important;
},The first pixel is controlling the vertical, and the second pixel is controlling the horizontal. You can experiment with it in your page.

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 enable dark mode in TinyMCE?

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:

How to save a row as a template?

There is such a case when you need the same row that you created before. It will be wasting time if you need to create the same row from scratch. With Visual Composer Website Builder, you can save a row as a template block to shorten the time. To save a row as a template block, you just need to:Select the row that you want to save as a template blockClick the gear iconName the template then click save as a blockThat's it.You can locate your saved template block on the template tab in Visual Composer Editor