No products in the cart. Shop Now

Inner Banner

VisionWP – Theme Instruction

Short Introduction ( VisionWP )

VisionWP is a block-based lightweight business WordPress theme. Apart from it, it is best suited to other different niches as well. This is a fully flexible, fast-loading, and easily customizable theme from which you can create a site with a unique and attractive layout. The benefit of VisionWp is, it is integrated with the most popular plugins like Elementor, RT Easy builder add-on, and Rise blocks-A Complete Gutenberg Page Builder.

Also, Clean Vision is a child theme of VisionWP, you can try it by installing it.

Are you ready to build a site with VisionWP? Let’s get ready.

Learn to install and Activate VisionWP

Now, it is your time to download, install and activate the theme.

  • Select Add New.
  • Then, search for  VisionWP. Click Install Now.
  • Then, click Activate button.
  • Now, the theme will be activated.
  • Go through the following options to customize the theme step wise.

Top Header Options Overview

From Customizer, go to Header Options. Then click on Top Header Options. Now, you are able to customize the top header area on your site’s requirements.

  • Enable Top header: If enabled, a page will display a header part.
  • Background color: It changes the background color of header.
  • Text color: It let you change the text color inside header.
  • Phone: You can add phone numbers to be in touch with viewers.
  • Email: If you want to get connected via email, you can add it here.

Customize Site Identity

Customizing Site Identity is an easy task. For Site Identity Customization you can go to Header Options from Customizer. Then Head to Site Identity Options. Below Mentioned features are customizable on the Site Identity section. Go for It.

  • Logo: Here, you can add a logo to your site.
  • Site title: What is your site name? Write on a site title box.
  • Tagline: Give a tagline for your site title.
  • Site Identity color: Site Identity color changes the color of site title text and tagline text.
  • Logo size: You can minimize and maximize the size of your logo here.
  • Site Identity Typography
  1. Font Family: You can choose your desired typography (font style) for a site identity.
  2. Text transform: It works perfectly on transforming text into uppercase, lowercase, capitalizes, and none.
  3. Font variant: The font-variant property allows you to change the targeted text to style: regular and italics.
  4. Font size: It helps you make a site identity font size small and big.
  5. Line Height and Letter Spacing: The line height property defines the amount of space above and below inline elements. Letter spacing property increases or decreases the space between characters in a text.
  • Display Site Title and Tagline: It gives you the option to display or not to display Site title and tagline.
  • Site Icon: if you add a site icon, it appears on your web browser.

Menu Options: Typography and Color

Do you want a stylist or standard font on your site’s menu? Menu Options come with typography and multiple color features. From Customizer go to Header Options. Next click on Menu Options. You can change typography in your own preferred style.

Menu Typography

Font Family: This option lets you choose your desired typography (font style) for menus.
Text transform: It works perfectly on transforming text into uppercase, lowercase, capitalizes, and none.
Letter Spacing: Letter spacing property increases or decreases the space between characters in a text.
Font variant: The font-variant property allows you to change the targeted text to style: regular and italics.
Font size: This enables you to make a menu font size small and big.

Menu Color

  • Menu Text Color: It let you change the color of a menu text.
  • Menu Hover Color: This property changes the color while hovering over the menu.
  • Sub Menu Background Color: If You have created a sub-menus, it let you change the background of the sub-menu.
  • Sub Menu Text Color: The sub menu text color is also changeable.
  • Sub Menu Hover Color: Besides these, it let you change the submenu hover color as well. Red is the hover color here in the picture.

Button Options: Label, Typography, Color, Padding, and Border

Vision Wp offers numerous options for buttons of a header. You can add links, change typography, background color along with hover color. Moreover, it enables one to work on padding sections. Along with this you can choose the border type and make a stylish and attractive border.

From Customizer, go to Header Options, Then hover your curser to Button Options. Customize according to your choice.

  • Label: Here, you can name to the link you want to add. The text depends on the link you want to share to your viewers.
  • Add link: It let you add a link to the button.
  • Typography: In this section, you can change the font family, font-variant, font size of the label text.
  • Background color: It helps you change the background of button. Along with this, it let you choose the hover color for the button background.
  • Text color: With it, you can change the label text color and hover color to the text.
  • Padding: It allows you to move the label text to the top, right, bottom and left.
  • Border type: It gives you the option to choose the type of border; none, solid, or dotted.
  • Border width: When you choose the border type, you can keep the width of the border of a button in four areas.
  • Border radius: It offers you more options for borders. You can design a very attractive border. The four corners of a button can be designed differently with radius options.
  • Border color: It let you select the border color and hover color of a button.

General Options: Header background color, Transparent header, Header order, Sticky header, and Header banner text

More important options for headers are here. It works on how you want your header to look. Do you want transparent or sticky?

To work on this feature, you should go to General Options which falls under Header Options. You know that we can go here from Customizer right?

This picture has a transparent header.
  • Header background color: You can change the whole header background color from this option.
  • Transparent Header: If you enable this feature, the header part will be transparent.
  • Sticky Header: If enabled, the header will stick and doesn’t disappear while scrolling the page.
  • Banner text: If you enable it, the banner text will appear there on the header banner image.
  • Header order: You can change the position of header items with this option.

(Note: If you disable the transparent header, then only you can get the option of a sticky header.)

Theme Options Overview

Themes Options can be customized to almost all the areas of the site except the header. You already customize the header section from Header Options. aren’t you?

General Options

Scrolling, again and again, makes you irritated right? Don’t you want to change the whole site’s background color? Sidebar position: right or left? Well, such functions can be done through general options.

From Customizer, go to Theme Options. Then press General Options to customize.

  • Background color: This features changes the whole background of the site.
  • Scroll to top: If you enable this feature, you can scroll a page from bottom to top in seconds.
  • Primary color: Primary color is also changeable.
  • Sidebar options: It allows you to change the position of a sidebar to the left and right. Or you can hide the sidebar as well.

What is your best Layout?

Do you want to change the layout of your site? If Yes,

From Customize section, go to Theme Options.

From Theme Options you will see Layout. Just click on that.

  • Site Layout: You can change the layout of a site in two different layouts: Custom and Boxed.
  • Container Width: It let you minimize and maximize the width of a container.

Theme Typography for you !

From Theme Options, go to Theme Typography and customize all the typography options available there.

  • Font Family: It changes the available standard fonts (serif, sans serif, monospace ),and google font (Poppins, Roboto, Lato, Raleway, Playfair Display etc ).
  • Font variant: It helps you change the font-variant: italics and regular.
  • Font size: With this, you can minimize and maximize the font size.
  • Text transformation: It helps to transform your text into capitalize, Uppercase and Lowercase form.
  • Line Height: It allows you to make spaces between words written in line format. It helps increase the line height and vice versa.
  • Letter Spacing: Letter spacing property increases or decreases the space between characters in a text.

(The same process works perfectly with heading Typography ( H1 to H6)options. )

What can you do with breadcrumb options?

  • From Customizer, go to Theme Options.
  • Next click on Breadcrumb Options.

Here you can edit the typography for breadcrumb: font family, font-variant, text-transform, line height, and letter spacing.

How to manage Blog/ Archives?

Do you want to keep blog posts on your site? If yes, At first you should write a blog post from Admin Panel >Post> Add New. You can create as many posts as you want to display on the blog page. At last, don’t forget to press on publish. Let’s go-to customization now.

  • From the Customizer section, move to Theme Options.
  • Next, click on Blog/ Archive.
  • Meta Order: You can rearrange the meta. You can order meta by dragging the meta title, category, and date/author to one another.
  • Home Page Title: You can name the title of the home page.
  • Read More Text: Our blog can be of more than 100 or 1000 words. We cannot show all blogs’ text on a page. So we take some excerpts and left others to read more options. With read more text you can name the read more text. That’s all.
  • Post Per Row: It enables you to show your blog posts in a row. How many rows on a page is your choice.
  • Post Pagination: We can post numerous blog posts and all blog posts cannot be displayed. That’s why visitors who want to see more blog posts can click load more and number options. You will get two options for post pagination: Number and Load More.

(Note: You should create a menu for a blog before customizing Blog/Archives. )

What options are available for the footer?

Theme Options come with footer options as well. To edit the footer section, you need to go to Themes Options from Customize. Then, from Theme Options, go to Footer Options and customize as you want.

  • Copyright Text: You can edit the copyright text and make your own copyright text.
  • Background Color: You can change the whole footer color.
  • Copyright Color: It allows you to change the color of the copyright text.

Learn to add a Banner image!

  •  From Customize section, go to Theme Options. Then click on Banner.
  • From Banner, the Header Image section will open.
  •  Below the current header, you can add an image from Add New Image.

How to reset all settings?

If you want to delete the changes you have made, please do click on this. It will delete all your data.

Background Image

1 . From Customize section, go to Background Image.
2. From Background Image, you will see :

Background Image

Select the image you want to add as a background image. The image will appear on a whole page of a site.

How to Create and Edit Menus?

Users can create menus in two different ways.

Menu Options

  • You can create a menu from Admin Panel > Appearance > Menus.
  • OR you can create a menu from Customizer > Menus > Create Menu.
  • When you are done creating Menus. Then you can add pages to menus.

Don’t forget to choose the menu location. VisionWP has only one menu location; Primary Menu. Just click on that.

For more information about creating menus, click on how to create a navigation menu?

How to create footer widgets?

Alike Creating Menus it also has two different ways to create footer widgets. One from Dashboard and the next from Customizer.

You can create Widgets from Admin Panel > Appearance > Widgets.

Next way; From Customizer sections, head to Widgets. Then add the widgets you want to display on the footer area from Add Blocks.

To learn more about footer widgets, go to How to edit and manage footer widgets?

How to set Home Page Setting?

From Customize section, go to Homepage Settings you will see two options. Your latest posts and a static page . You can choose what’s displayed on the homepage of your site. It can be your latest posts in reverse chronological order (classic blog), or a fixed/static page. To set a static you can choose what’s displayed on the homepage of your site, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

  • Your Latest Posts: This option only works if the Static Front Page is set to “Your latest posts.” This option allows to set the title.
  • A static page: you will be able to set a page as Front Page and you will find the Post Page option as well.
  •  Homepage: you can set any page as a Homepage.
  •  Posts Page: you can set any page as a blog.

Final Words

VisionWP is a Gutenberg block-based theme beautifully designed to touch the user’s heart. It has many attractive and helpful demos if you would like to import them. Learn to import starter sites from this link; how to import demos from RT Easy Builder?

You might have thoroughly enjoyed the extensive collections of elements and features of VisionWP. A review of VisionWP will give you more gist to acquire some more information about it. Check the Review of VisionWP.

This tutorial was helpful enough to work on customization. If in case you need help, dedicated team members of VisionWP can sort out your issues in minutes. Do contact us through chat.

Thank you!