Author 诗语

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

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 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.

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 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]