SUITS Material Design WordPress Theme Tour – by gameofWP.com

hey guys this is Pratik from gameofwpcom i will be taking you on the tour of SUITS – Material Design WordPress Theme In this tour we'll learn about all the elements, templates provided by the theme and all the types of home pages in the demo content

So let's get started First of all about the theme The theme is very sophisticated & elegant theme and very harmonious layout you can see all the white spacing, the line heights of the typography the theme is based on the material design library by Google it is a very robust library supports all the modern browsers The theme is very accessibility focused So using the tab key, just the tab key the person can navigate easily around the theme theme includes the page builder so you can build page as you like you don't need to write a line of code and it also includes One Click demo importer, so you can basically get a kick start directly from the theme itself so the theme is very good for all the corporate websites, the blogs portfolios, even the creative agencies can use possibilities are basically limitless because of the inclusion of Visual Composer that is the page builder The homepage starts with customer journey in the top of the homepage you let the user know what to expect from this website and you ask them to scroll down, that's why the learn more button is there Also the primary call-to-action button is used to drive the main value proposition of your website like the buy now button or the sign up button you can always use this button on the top of the page but don't forget to also include the button in the bottom of the page because users always scroll down to the website According to a survey by Chartbeat, They surveyed about 2 Billion web visits and found out that 66% percent of the time the users generally are in the below the Folds section, that means the scrolled section of the website so you need to take care of the content there and in the top of the website they get to know what to expect on the website and next you can give them the value proposition, the benefits, the features of the page also if you're product based website you can always keep the pricing plans

Images always help in producing great content but make sure you compress them some of the websites like compresspngcom or compressjpegcom can be used to do that at last always keep the call-to-action buttons Testimonials or the customer stories help making the conversion even better so always keep the customer stories in the homepage so that gives the user validation – the social validation the next thing is the second home page so the second home page contains the video background with a text on it and you can see the parallax effect right here the video and the texts are moving at different speed, it gives a very good scrolling effect, again the customer stories and the features, benefits and a very large primary call-to-action button right here below the page and the footer section always contains social links of your website so that the user can connect to you easily and interact with you In the elements section we have accordion, buttons, charts, icon, et cetra So the theme currently supports 12 types of basic elements and you can also add icons besides the menu names as you can see here i've done here

I'll be teaching you how to do this in the upcoming videos so let's look at the chart, you can make all the type of pie charts and bar charts the blue section that you see on the top of the page, lists out what type of customization you can do with the elements, like the charts have two pre-defined styles like pie chart and bar charts, 17 predefined colors and always you can choose custom colors if you want, design shapes, and pie animation so basically there are 8 types of pie animations Element itself can be animated using 37 different types of animations

Let's look at accordions so these are the default types of accordions you can also make them auto-play, you can change the colors change the icon position, whether they need to be on the left or right or not at all and you can insert any other elements in those accordions as well, so i have inserted some templates you can see the small icon cards here text and image contents can also be embedded Any type of element included in Visual Composer can be embedded in these accordions Let's look at call-to-action boxes call-to-action boxes can be used on homepage as well as all the pages actually so these are the default type of call-to-action boxes you can use these type of boxes according to your site's theme and colors so this is a big call-to-action box Let's look at icons basically icons can be defined in 5 sizes There are 17 predefined colors and different background shapes you can see this is a circle icon this is the default icon, the background shape with the square and rounded edge square circle around the icon and outline square These can also be customized with unlimited custom colors Let's look at the message boxes so whatever you were seeing on the top of your screen in the blue boxes These are basically the message box and you can also animate them try out different predefined colors 25 predefined colors are there, 3 different types of shapes are there and you can see the different types of 3D information boxes, square edged, round edged boxes next are the progress bars So basically progress bars can be used to showcase the skills if you are using it in a portfolios or something Rows-columns can be easily defined using Visual Composer so you can divided in half or 1/3 so the total needs to be 12 column so you can divide the 12 columns as you like So this 1/2 actually means the 6+6 and therefore this is 4 + 4 + 4 3 + 3 + 3 + 3 Let's take a look at separators There are different types of seperators, you can use dashed seperators, dotted sepearators

They are basically the elements that are used to separate two different sections or elements and it makes them look very clean On the Homepage also, I've used some separators you can look here it makes the headline more powerful & very clean effect Going to video player

So this is not a basic video player it can play youtube and vimeo videos as well as

it is named video player but you can also embed SoundCloud, Slideshares and whatnot Instagram, Reddit, Kickstarter campaign and facebook campaign, et cetra Any type of widgets can be imported here whatever is supported by WordPress I'll given a link here you can go to the official wordpress

org website and see what all is supported on the video player let's look at the sidebars It is padded from both the sides as you can see but header has been extended you can also do this in the theme option this is a full page without the sidebar Full width page let's look at the left sidebar the right sidebar okay all these templates can be used for the making the homepages I have literally made the homepage in just two minutes using these templates So templates are the small sub-modules of the homepage you can use them to make any type of pages which you want so this is just a call-to-action box you can just drag-and-drop it using the Visual computer and there are many more elements and templates which are not listed here but you can always explore So in the next videos i'll be recovering on how to make such type of pages and how to use the elements

So let's take a look at how the blog looks like I have made some sample posts here let's click on the first blogpage In this blogpage you can see the featured image on the top of the page as you scroll down you can see all the types of different markups you can even embed tweets different type of HTML tags, the pre content – large block of codes can be written here

next post can be seen from here so these are how the image alignment works

left alignment the Center alignment, right alignment and all the caption can be listed here so if you want to go to the top of the page you can just click on this scroll-to-top button and there you go, you are on the top of the page Let's go to the home page it has 2 different types of menus, top navigation menu and also a drawer menu You can always disable the headlines or the search box here if you don't need, you can totally disable the drawer menu itself We have a search option also here and That is it !! This is the SUITS – Material Design WordPress Theme You can buy this on ThemeForestcom Theme will be listed in the description of this YouTube Video You can also try out the hosting links which are provided in the description Just click and check out their plans, they have discounts going on right now

Thank you for watching! Like and Subscribe 🙂

Free Email Updates
We respect your privacy.

free email marketing tools

affiliate marketing