Setup Tutorials for Lavish Pro

Welcome to the Setup Tutorials for Lavish Pro Theme. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Managing Header Options

In this tutorial, we will be showing managing the header options for the Lavish Pro theme as it comes with two header styles.  Header Styles 1: This Style will enable to view the menu within the slider. The slider will start from top and menu will be in the top area of the slider overlapping it. The styles used in the demo is Header Styles 1. Header Styles 2: This Style will enable to view the menu as the default themes styles. The slider will start from the bottom of menu.   How to manage and change the Settings for Header Settings:- Customize Title Description How to Change : Change the Header Style You can change the header styles for your websites as per your choice from the navigation panel. Apperance-> Customize-> Header Settings-> Header Style 

How to Create a Faq Page

Lavish Pro comes with Custom Post type Features Enabled for Frequently Asked Questions.  How to Create a New FAQ? 1) Go to WordPress Dashboard. 2) Click on FAQ and click New 3) Now Fill up the details as shown in the screenshot. 4) Save the Post. How to Display the Frequently Asked Questions On the Frontend? Shortcodes Method: If you are willing to show FAQ in a content of page or footer rather than making the Faq extra page. You can use the shortcodes method. 1) In the Content Paste the following shortcodes: [style_faq total=”6″] where total is the number of Faq that you want to show with the help of shortcodes.    

How to Display/Hide the Search Icon

Flat Responsive has options to display Search bar on the top with the menu as well as you can use the search widget on widgets postion to display the Search Form. Customize Title Description How to Change : Hide the Search Icon You can Display/Hide the Top bar from the Customize Panel. In Default it is set to be shown. Apperance-> Customize-> Header Settings-> Search Icon -> Check the Search Icon Hide Change the Search Icon Color You can change the search icon color Apperance-> Customize-> Header Settings-> Search Icon -> Search Icon Color

Displaying Top Bar

Lavish ProHas Options to Display the Top Bar on the top of the page. You can get option to display a short description/Announcement and bunch of social icons on the top. You will get the options to change the settings for the top bar, Settings and their configuration are displayed below in the table. Customize Title Description How to Change : Hide the Top Bar You can Display/Hide the Top bar from the Customize Panel. In Default it is set to be shown. Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Top Bar. Hide Announcement/Small Details You can hide the announcement and show only social icons Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Announcement. Hide Social Icons You can hide the social icons and show only Announcement/Small Description Apperance-> Customize->Header Top Bar->Top Bar Display -> Hide Social Icons. Announcement Content You can add your content to Announcement/Small Description Apperance->…    read more 

How to Use Excerpts instead of the content summary

There’s a couple of ways to display post summaries in a blog: Content summary with the classic “Read More” Using excerpts which have a set number of words (sometimes characters) Content Summary Using the content summary method is the most common because when you create your post, you select where you want to split your post with a “Read More” tag. This gives you a shortened version of your post on the front-end of your website with a Read More button or link. Excerpts You actually get a couple excerpt options where the first takes a certain number of words from the beginning of your post, while the other lets you create your own “custom excerpt” instead of using the content from your post. It’s also important to know that excerpts DO NOT inherit formatting such as bold, underline, italic, etc. They also strip out media such as images.  However,…    read more 

The Page Builder template

One of the upcoming trends are themes with Page Builders that are either built into the theme or use a plugin. A page builder is a feature that allows the user to create various page layouts simply by a drag and drop method. In a sense, what you are building is a page with widgets. No content is added like you would with a normal page or post when using the editor. For Circumference, it does not include a page builder coded into it, but does provide you with a blank page template named: Page Builder Choosing a page builder plugin is something you will need to sit down with a coffee and explore what choices you have by searching Google for “WordPress Page Builder Plugins” and see what comes up. One in particular will be the Page Builder plugin by SiteOrigin and appears to be a popular (free) option. Basically…    read more 

How to use Icons

Lavish Pro uses font icons from FontAwesome which means you can have different sizes, just like a font. You can use icons almost anywhere, especially with the html snippets that Flat Responsive has like “icon boxes”, “media boxes” etc. How to Find an Icon that you need and place into content Go to Select a Icon that you want Click on the icon that you want, you will find a html snippets provided to you. For Example: the snippets looks like Copy and Paste the Snippets to your content. Now your icons shows in the content.  

Page Columns

To give you more flexible layouts, you can use page columns (content columns) which uses the Bootstrap framework. Using Bootstrap 3, you get a 12 grid column layout which is also responsive. To read more documentation on the grid layout, check out the Bootstrap website here: Bootstrap Grid Circumference is built using Bootstrap and the overall width uses the grid system. Basically the width is made up of 12 grid columns and uses css classes to create varying widths of containers, for example, the logo container and the main navigation container uses this method where the logo is 5 grid columns wide and the nav is 7 grid columns wide. Getting Sample Columns In your original downloaded theme package is a folder called HTML Snippets. Inside that is a text file “Columns” which you can use to get you started and offers some instructions as well. You can create your…    read more 

Introduction to HTML Snippets

HTML Snippets are like mini-templates that you can use inside your page content and find in your theme package that you downloaded. Generally you have themes with shortcodes, but this theme uses HTML Snippets instead because they are true HTML compared to shortcodes; shortcodes can also be a bit confusing as well. This theme currently offers the following snippets: accordion panels blockquotes call-to-action columns contact form custom images dividers drop cap form elements icons icon boxes list styles logo bar media boxes price columns  progress bars recent posts plus special headings tables text labels widgetkit gallery widgetkit slide captions widgetkit slideshow settings widget styles How you use these will be up to you, but for most of the snippets that relate to in-page elements like icon boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for each one….    read more 

How to work with Google Fonts

In this tutorial, we’re going to show you how to use Google fonts in Lavish Pro theme. What is Google Fonts ? Google Fonts is an interactive directory of free hosted API for web fonts. This directory has now more than 650 web fonts and it’s increasing each day. You can find those fonts here :  Getting Started Download the Plugin After you have downloaded the plugin Activate the plugin After you activate your plugin you can go to Settings menu, and select google fonts Choose font from the dropdown and click on the show options, afterthat select the tags where you want your google fonts implemented . For example if you want your h1 class to be font “abel” choose font abel and select the h1 property. If you want different fonts for all selector you can choose the fonts from font1, font2 and font 3 respectively. After…    read more