Lavish Pro offers several features, but some require plugins if you decide to use them and should be considered as optional. You will need to download and install these because they are not included in the download of this theme. We do this so that everyone can choose which plugins they want to install, but it also ensures the most recent version of each plugin is installed. You can find all the plugin list when installing the theme as a notice in the top area.
Plugins the Demo Site Uses
In Additional Lavish pro comes with Revolution Slider bundled, you can find the slider plugin file in the theme package folder.
If you are new to WordPress and don't have knowledge of how to install plugins then follow the following:- http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners
Lavish uses the WordPress Customizer which is a feature WordPress offers you to make changes to your active theme. Every theme will load up within the customizer, but what will be different from theme-to-theme are the settings and options they offer. The customizer gives you a live preview window of your website, and within the left column, you will see a series of tabs, each labeled as to what they are for.
There are a few ways of getting to the customizer:
The two most common methods are from the dashboard home page and the menu under Appearance >> Customize
You will hear this often and this is something that WordPress recommends; but if you plan to make custom changes to your theme, whether mine or from someone else, the best way is to use a child theme. You can read more about child themes here:
The reason for using a child theme is because if updates are available for your theme, in this case the parent theme of Lavish, you won't lose any custom changes because they were done in the child theme. How this works is that the child theme inherits the styles and functionality of the main theme (the Parent theme), so any updates that happen, it will inherit those. However, if you made any custom changes to the theme, these exist in the child theme and not the parent theme, which is why when you update, you don't lose the changes.
Easy guideline for you:
When making core theme file changes with a child theme, this is done by copying the file from the parent theme and uploading it to your child theme, while maintaining the same file structure as the parent theme. So for example, if you wanted to modify the header.php file in the parent theme, you copy that file and upload it to your child theme to the exact same location as the parent theme.
Note:The child theme duplicates the same structure and layout as the parent theme.
Before you install the child theme, always make sure the parent theme is installed. It does not have to be activated, just installed, otherwise you will get an error.
To change the Featured Image Settings in the blog page. Go to Appereance-> Basic Settings -> Blog Settings -> Featured Images and choose any one options. You can choose wide featured image as well as small featured image on your blog pages.
Wide Featured Images
Wide Featured Images enables you to display full width featured images on the blog pages.
Small Featured Images
Small Featured Images enables you to display Small width featured images on the blog pages, the content will be aligned with the images on the left side.
In this theme you can hide the featured images on the Single Post View. To do so Go to Appereance->Basic Settings->Blog Settings->Featured Images-> Hide Full Post Featured Image.
You can hide the Footer info, Footer Navigation and Edit Link in the Lavish Free Theme.
Hide the Edit Link from the WebsiteYou can hide the Edit link that appears when you log in to the wp-admin. To Hide the Edit Link Go to Appereance -> Customize -> Basic Settings -> Blog Settings -> and check the Hide Edit Button.
Hide the Footer InfoYou can hide the footer info from the single post view of the blog. To Hide the footer info Go to Appereance -> Customize -> Basic Settings -> Blog Settings -> and check the Hide the Footer Info checkbox.
Hide the Footer NavigationYou can hide the footer Navigation from the single post view of the blog. To Hide the footer Navigation. Go to Appereance ->Customize -> Basic Settings -> Blog Settings -> and check the Hide the Footer navigation checkbox.
With Lavish Pro, you get several logo and title options to choose from:
If you are using a logo with a text based title and tagline, you may need to adjust your margins for this container with the setting "Site Title Margins" located on the Site Title & Tagline tab. Default setting is:
0 0 0 0 (means 0 pixels on the left, top, right, and bottom)
When adjusting, make sure you put the value like this sample:
5px 12px 16px 5px
If you are using a logo with a text based title and tagline, you may need to adjust your paddings for this container with the setting "Site Title padding" located on the Site Title & Tagline tab. Default setting is:
0 0 0 0 (means 0 pixels on the left, top, right, and bottom)
When adjusting, make sure you put the value like this sample:
5px 12px 16px 5px
Flat Responsive offers you three page widths:
The most common change people make with WordPress now is moving the blog further into the site and create a custom page for the front of their site; also known as a static front page. We will show you how this is done which is what we did for the live demo site for Circumference. What you put on your custom front page will be up to you, but this tutorial will get you started with a foundation to build on.
Now you have a static front page and your blog is not further in your site. Plus, you now have a Home and Blog menu link on your main menu.
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.
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:-
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|
There's a couple of ways to display post summaries in a blog:
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.
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, there are advantages to using excerpts, such as:
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:
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.
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 own layout using the col-md-n (n will be the number of columns you want to use) for your columns. For example, if you want two columns in your page, both containers would use this class:
This is what your column layout would look like:
<div class="col-md-6">Some content here</div>
<div class="col-md-6">Some content here</div>
WordPress does not make this easy when you want to publish a widget to just one (or a few) pages because there is no built-in function for that kind of capability, so you have to use plugins. To show widgets on selected we recommend you to install the Jetpack Widget Visibility.
To know how to install the jetpack and its components view our tutorial about it. https://styledthemes.com/flat-responsive-setup/415-how-to-install-jetpack-and-its-components
After you install the jetpack widget visibility go to the widget panel and select the widget that you want to show on selected pages. You widget panel will look like the side first image.
Click on the Visibility tab as pointed no 1 in image. After you click on it your widget will show like the right hand side widget box of the image.
You can hide/show widgets as no 2 options provide you the features.
On the right hand side widget no.3 denotes on what type of post do you want to apply the widget visibility. and no 4 detones the pages/post singularly.
No 5 will gave you options to add new settings.
WordPress has its own gallery shortcode that generates a gallery for your post or pages... Even adding on into a text widget is possible. Styling is usually provided from the default WP theme such as Twenty Thirteen, Twenty Fourteen, and others that may be available. Lavish Pro uses the default gallery styling as a foundation, but with a little enhancement of design to give you a little more for your gallery.
First thing you want to do is prepare your images that will be included in your gallery. We're one to always stress consistency with image sizes, but you do not have to have each photo the same size. We should also mention that with a previous tutorial, we mentioned about clearing your Media Settings (thumbnail sizes) and recommended you create your own sizes as you need them. If you do not have the capability to crop and size your photos, you can set your thumbnail media setting to be something you want WP to crop your photos as you upload them, even if your photos are different sizes.
Note: This tutorial will be based on each image being 800 x 355, so when the gallery is created, the thumbnails will be close to the 255 x 170 in size to the demo.
In this tutorial, we're going to show you how to use Google fonts in Lavish Pro theme.
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: https://www.google.com/fonts
Note: Using many google fonts can slow down your website, so we recommend you to use up to 2 fonts for your site.
WordPress has it's own default image styling and layouts which are common with every WP theme. These are:
Depending on the theme, usually the common styling is a border around the image, but Lavish Pro extends the styling concept to give you a little more in addition to the basic alignments that you see listed above. With Lavish Pro, you get the additional styles inlcuded
Offset is probably the more complicated style bcause of how it gets created in your page or post because it will require some code adjustments. However, we helped you out with a predefined snippet of code that gets you started so all you need to do is change the values. The image is also square where CSS transforms it into a circle for both the image and the colour offset background that you see. You can also have different sizes for your images. To achieve this result, you have some code to copy and paste:
<div class="la-offsetbox"><img class="la-offset" alt="custom-image" src="path-to-your-image.jpg" width="300" height="300" /></div>
With the circle style, CSS will automatically transform your image into a circle and apply a grey border around it as you see the screenshot below. You can have any size of image for this, plus you can align your image using the default WP alignment options. To use this style, add the following class to your image tag like this:
<img class="la-circle" ...
Thumbnail styling of images is probably the most common next to an image without styling. This one applies a background colour with an outer border around your image. You can also align your image using the default WP alignment styles. To use this style, add the following class to your image tag like this:
<img class="la-thumbnail" ...
By default, this is setup where your image is black & white until you hover over the image which then becomes coloured (see the screenshot below). You can modify the CSS if you prefer by reversing it so that the image starts off as coloured and then on hover becomes black & white. When hovering, the transition has a slight animation effect as it changes. To use this style, add the following class to your image tag like this:
<img class="la-bw" ...
In addition to this page, you can obtain image styling code from the HTML Snippets folder in your original pure-simple-package download.
Flat Responsive includes 19+ widget positions, with most page templates capable of displaying any position. To see a live demo of each widget position, you can check out the demo website for Lavish Pro Theme:
To know the layout postition of the widget please visit the widget layout page of the Lavish Pro theme.
This should be considered as optional, but we will explain and show you why we like to remove our WordPress media settings which are preset when you first install WordPress. If you go to:
Settings >> Media >> Media Settings
...you will see the following media sizes and other settings:
Now we will show you what it does by uploading 17 photos to our Media Library...
As you can see, WordPress will automatically generate thumbnails based on the settings (sizes) whether you want them or not. In fact, our media library went from 17 photos to a whopping 56! Why would you want to remove the settings? Because your hosting package has a certain amount of diskspace given to you, so if you upload a lot of images on a regular basis, that diskspace is going to get filled up fast and you will be billed by your hosting company for additional space requirements. Plus, if you keep regular backups of your site (as you SHOULD be doing), it means your backup files will continuously get bigger and bigger over time.
With the same 17 photos we uploaded, but removing each thumbnail size settings, this is what our media library now looks like:
If you notice in the first screenshot above, the Cropping and Organizing under Uploading Files are checked. We would also recommend unchecking both. For cropping, we prefer to do our own cropping for more control over what parts of the image are to be cropped.
For the Uploading and organization of your photos, we really cannot stand how WP organizes photos and other media. If you have a lot of uploads over a span of a year and you realize you need to find one to edit, good luck! Very hard to find with the 10's if not 100's of sub folders it creates. We prefer to have them go directly into the uploads folder -- all together.
Recommendation is to make each media size setting as 0 (zero) and uncheck both of the checkboxes. When you need an image for something, crop the image yourself, optimize it, size it, and then upload it.
If you would like to have one thumbnail size generated for a particular use and to maintain an easy way of having the same size for every photo you upload, you can change any of the settings to include the thumbnail size you want. So if you want a particular thumbnail size (that gets automatically cropped as well) for your blog featured images, you can decide on the size you want.
To change the blog layout in the Lavish Pro Theme. Go to Appereance-> Basic Settings -> Blog Layouts -> and choose any one options. We have 10 blog layouts available in the Lavish Pro Theme as they are :
How to change the Featured Image size?
Lavish Pro Comes with 2 Featured Image size; Wide Featured Image and Small Featured Image, if you choose wide featured image you will see a full width thumbnail on post, and if you choose small featured image you will see a left aligned small image.
Go to Appereance->Basic Settings -> Blog Settings -> and choose the featured image size of your choice via the checkbox.
Additionally, To hide the post thumbnail from single pages, Go to Appereance->Basic Settings-> Blog Settings-> and check the checkbox of Hide Full Post Featured Image
In this tutorial we are going to show you how to use counter values on Lavish Pro Theme. Lavish Pro comes with counter plugin which enables you to make your customer able to know about your recent products. To use the counter you should use shortcodes as follows:-
[counter start="150" value="195"]
Start = Starting Number of Counter
Value = Ending Number of Counter
Note: Rememer the starting number should be less than the ending number.
Using Icons With Counter
<i class="la_icons fa fa-adjust"></i>
[counter start="150" value="195"]
You can replace the icons class and put your custom icon class.
In this tutorial we are going to show you how to enable the move to top icon, which enables you to go to the top of the page.
To enable Move to Top, go to Appereance -> Basic Settings -> Move to Top -> check the checkbox.
In this tutorial we are going to show you how to make custom portfolio using Lavish Pro Theme. Lavish Pro themes comes with Custom Post type to make Portfolios. You can go to Appereance-> Style Portfolios and Enter your Portfolio Items.
To Display a Custom Portfolio
To display a custom portfolio you can use shortcodes
[style_portfolio total="8"] in total value you can put the desired number of Portfolios
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.
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-> Customize->Header Top Bar->Small Announcement Content|
|Top Bar Background||You can add your own background-color for the Top Bar||Apperance-> Customize->Header Top Bar-> Top Bar Colouring Options -> Top Bar Background|
|Top Bar Text Color||You can add your own Text-color for the Top Bar||Apperance -> Customize -> Header Top Bar-> Top Bar Colouring Options -> Top Bar Text Color.|
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.
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|
In this tutorial, we will be guiding to the page templates that Lavish Pro provides.
|Default Template||This template is default and it shows right column along with content.|
|Page Builder Templates||This template is especially for those who are using page builder|
|Page Full Width||This Templates Displays the Content full on the screen|
|Page Left and Right Column||This Templates Displays the Content along with left and right sidebar.|
|Page Left Column||This Templates Displays the Content along with left sidebar.|
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 you have the choice of free ones and paid ones.
Many people actually like to hide their page titles for many reasons and apparently is quite common. So what we will do is give you a quick tutorial on how you can do this on a per page basis or globally.
You can go to page editor and on the left hand side you can check the hide page title, which is a pre build feature of the theme.
You have another option when creating galleries in your web pages and posts by using a custom gallery that is included as a snippet, but you can do the same, also using the Widgetkit plugin. The Widgetkit plugin offers some gallery functions such as Spotlight which is a hover effect over the thumbnail, but it also offers a lightbox window to view your gallery as a slideshow.
This tutorial is a bit involving and will require you to work with some code, but most of the work we have done for you so that all you have to do is copy and paste code, then edit some parts of it. Here are a few things to make note of:
First thing you need to do is prepare your photos before you begin creating your gallery for a page or post. You will need to make thumbnails from the full sized photo that you want to showcase, because for each image, we need the full version as well as a thumbnail version. We will base this tutorial on the live demo site, so the size of thumbnail you want will be:
Thumbnail Size = 255 x 170 pixels
**Your full size image can be any size you want because they will open in a lightbox window.
When you make your thumbnails, we recommend you keep the name of your thumbnail file related to the full size by adding a suffix like -tn (short for thumbnail) to the end. For example, if your full size photo file is named "flowers.jpg", you will name your thumbnail as "flowers-tn.jpg" to help organize your images and keep them together.
Once you are done preparing your photos, upload both the full size and thumbnail versions to your Media Library. We would also recommend that you copy and paste the URL's of each thumbnail image into a text file somewhere for safe keeping because we will need these URL's shortly. With each image being uploaded, you will see an "edit" link. Click on that for each one and in the upper right corner you will see the following File URL field. Click in the URL box and select the URL and copy it by doing Ctrl C (for windows users) or Cmd C (for MAC users).
Widgetkit comes in two versions, a Lite version (Free) and a Pro version (paid). Unless you want the paid one, we recommend just starting out with the Lite version because it's FREE to download. Widgetkit is not available from the WordPress website, so you have to get it from YooTheme.com
Install it just like any WordPress plugin and activate it. It gets added to your admin menu group near the bottom.
We've already provided you with a preset gallery snippet... Basically it's like a mini template for your gallery. All you need to do is paste it and make some modifications to the gallery code. You will also find this code in the link part:
This is part of Widgetkit that activates the lightbox when you click on a thumbnail. The group:mygallery; name is the part that groups your thumbnails together so that you can view them as a gallery slideshow. You can change mygallery to any name you want for each new gallery you make.
If you want to change how many columns your gallery will have, for example, having 6 columns instead of the sample 4 layout of the snippet, you can change this:
<ul class="fr-gallery gallery-columns-4 clearfix">
<ul class="fr-gallery gallery-columns-6 clearfix">
The above gallery already has the lightbox data code to view the full size photos, but with Widgetkit, you can change the effects of how the lightbox is displayed:
Adding Spotlight is another feature of Widgetkit which is a hover overlay effect on your images. In the gallery code, this just needs one small snippet of code added to the first part of the link on our thumbnail. With our gallery we just made, the first part of the link ooks like this:
All we need to do is add the data-spotlight="on" like this:
<a data-spotlight="on" data-lightbox="group:mygallery;"
Now when you mouseover a thumbnail, you get a hover effect.
For examples of what Spotlight can do, check out the Yootheme website here:
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.
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:
where total is the number of Faq that you want to show with the help of shortcodes.
Flat Responsive offers you several widget styles that you can have when using the optional plugin called Widget CSS Classes. Widget styles you get are:
To give you an introduction to how the above styles look, you can check out the live demo site here:
When planning out your web pages that will include widgets, you will want to take note that some widgets may not look good with a particular style, but with another, simply amazing. This also will be dependent on third party widgets you install into your website as well.
You also get to use list styles on your widgets; widgets that are list type:
You can find the HTML Snippets folder in your original theme package download where the above styles and other classes can be found and used as a reference. For the Image style, this is a special style generally reserved for a text widget that has an inserted image along with content. The snippet text file has a sample for you to use as a starting point.
Installing this plugin is optional, but it will allow you to take advantage of the widget styles this theme has to offer. Unfortunately, this is another feature that WordPress does not have built into its core, so a plugin is required to achieve this capability.
Once you install this plugin, it adds a form field at the bottom of your widgets which is used to enter in the class or classes to style your widget.
With the above list of classes - with the exception of Default - you enter in the name into the form field you see in the screenshot. So if you wanted to style your widget with the Dot Line style, you would enter in: dotline
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:
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.