WordPress Active Themes

A Digital Marketplace

Inner Banner

VisionWP – Theme Instruction

Short Introduction ( VisionWP )

VisionWP is a block based lightweight business WordPress theme. Apart from it, it is best suited on other different niches as well. This is full flexible, fast loading and easily customizable theme from which you can create a site with unique and attractive layout. The benefit of VisionWp is, it is integration 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 customize top header area on your site’s requirements.

  • Enable Top header :If enabled, 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 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 Site Identity section. Go for It.

  • Logo :Here, you can add logo of 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. Font variant: The font-variant property allows you to change the targeted text to style : regular and italics.
  3. Font size : It helps you make a site identity font size small and big .
  4. Text transform : It works perfectly on transforming text into : uppercase, lowercase, capitalize and none.
  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 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 comes with a 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: You can choose your desired typography (font style) for menus.
Font variant: The font-variant property allows you to change the targeted text to style : regular and italics.
Font size : It helps you make a menus font size small and big .
Text transform : It works perfectly on transforming text into : uppercase, lowercase, capitalize and none .
Letter Spacing : Letter spacing property increases or decreases the space between characters in a text.

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 menu.
  • Sub Menu Background Color: If You have created sub menus, it let you change background of sub menu.
  • Sub Menu Text Color :The sub menu text color is also changeable.
  • Sub Menu Hover Color :Beside these, it let you change sub menu 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 button of a header. You can add link, change typography , background color along with hover color. Moreover, it enables to work on padding sections. Along with this you can choose the border type and make a stylist and attractive border.

From Customizer, go to Header Options, Then hover your curser to Button Options. Customize as 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 link to the button .
  • Typography : On 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 button background.
  • Text color : With it, you can change 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 options to choose the type of the border; none, solid, dotted .
  • Border width : When you choose the border type, you can keep width on the border of a button in four areas.
  • Border radius : It offers you more option for border .You can design a very attractive border .The four corner of a button can be design 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 of header are here. It works on how you want your header to look. You want transparent or sticky?

To work on this feature, you should go to General Options that 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 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 be stick and doesn’t disappear while scrolling the page.
  • Banner text : If you enable, the banner text will appear there on header banner image .
  • Header order :You can change the position of header items with this option.

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

Theme Options Overview

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

General Options

Scrolling again and again makes you irritating 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 features, you can scroll a page from bottom to top in second.
  • Primary color : Primary color is also changeable.
  • Sidebar options : It allows to change the position of a side bar to the left and right. Or you can hide sidebar as well.

What is your best Layout ?

Do you want to change 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 layout of a site in two different layout : Custom and Boxed.
  • Container Width : It let you minimized and maximized 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 for 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 the 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, 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 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 like chat.

Thank you!