To display Site Logo, Site Title, Tagline and Site Icon on your site.
Navigate to Dashboard > Appearance > Customize > WordPress Default > Site identity.
Logo– Upload a logo image with specific width and height.
Site Title & Tagline – Display site title & tagline in-place of Logo.
Site Title & Tagline Show/Hide – Check on the radio button display site title and tagline.
Site Icon – You can upload a site icon for your tab in browser.
Set up Homepage
To setup homepage on your site follow the below instructions –
Go to Wp Dashboard > Page > Add New > Create a Page. Just give name “Home” to that page.
Now at the right sidebar of your editor you will see Page attributes > Template option.
Click on the template and select the option “Homepage template”.
After that publish your page.
Now navigate to Customize panel > WordPress Default > Homepage Settings.
In homepage settings. Select the radio button of “A static page” and choose your “Home” page in “Homepage” option which you have created.
This will setup home page on your site and it will show all the sections.
Layout Setting
Header
For header setting, Go to Appearance > Customizer > Layout > Header.
Above Header
Above header appears at the top of “Main header” this can be used to show multiple elements.
Here you will get option to hide it, or can add one, two or three column.
You can select any one design according to your need.
In this columns you can show elements like social icons, menu, search, Text, Widgets.
Also you will get styling options to set Height, Border Bottom and Border Color”
Main Header
In main header your logo and main navigation will be displayed along with Menu.
To show navigation menu in your “header” first set the menus from the dashboard.
Now in Main header settings, you can modify your overall header by adding layout with other content.
Menu Alignment – You can choose the menu alignment. You can align the menu to left, right and center.
Column 1 – Here you can add “Button”, “Call To” or “Widgets”.
Button Text and Button Link – Here you can give text to your button and link where you want to redirect it.
Mobile Menu Open – Choose the Mobile menu alignment left, right or center.
Off Canvas Sidebar – Choose the location of Off-canvas sidebar before or after the logo.
Sticky Header – Make your header stick at the top of your site by enabling sticky header.
Enable or Disable Wishlist, Account and Cart – These checkbox will allow you to show or hide “Wishlist”, “Cart” and “Account” icon in mobile device.
Blog
This setting will allow you to manage your blog settings
To change Blog setting, Navigate to Appearance > Customizer > Layout > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.
Blog Post content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
Read More Text – In read more text, put the text you want to display for your Read more button.
Post Pagination – It will provide you Numbered navigation, Load more and Infinite scroll for your blog page.
By checking the box you can disable the sidebar in blog single page.
Note – Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.
Sticky Sidebar
For sticky sidebar, Go to Customize > Layout > Sticky sidebar. This will stick your sidebar.
Footer
For this setting, Go to Appearance > Customize > Layout > Footer.
In footer area you can add important content and navigation option of the site. You can add Copyright in below footer (copyright area).
Above Footer
It appears right above the footer widget and allows you to show multiple elements.
You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the height, bottom border and Border color.
Widget Footer
In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.
Below Footer
It appears Below the footer widget and allows you to show multiple elements.
You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the height, bottom border and Border color.
Move to Top
Move to top button is shown in the bottom right side of site, It is used to navigate to the top of your page.
To set Move to Top, Go to Appearance > Customize > Layout > Move to Top.
You can also disable it by checking the box.
Frontpage Sections
Top Slider
To add Top slider, Go to Appearance > Customizer > Frontpage Sections > Top slider. There are five layouts in Top slider in which you can add slide images, Logo images, Title, Sub title, Text and link too.
Design of each slider layout is different from each other.
You can also On/Off the slider.
You can Disable or enable the section anytime you want.
Tabbed Product Carousel
To add Tabbed Product Carousel, Go to Appearance > Customizer > Frontpage Sections > Tabbed Product Carousel. First you have to create categories to show product in this section.
You can show recent, featured or random product in this section.
You can also enable Single Row Slide or show the default one. Enable the Slide autoplay.
You can Disable or enable the section anytime you want.
Product Carousel
To add Product Carousel, Go to Appearance > Customizer > Frontpage Sections > Product Carousel.
With Product Carousel you can show your shop category products using slider. You can show recent, featured or random product in this section.
You can also enable Single Row Slide or show the default one. Enable the Slide autoplay.
You can Disable or enable the section anytime you want.
.
Woo Category
To add Woo Category, Go to Appearance > Customizer > Frontpage Sections > Woo Category.
In Woo Category you can shop categories using 3 different layouts.
You can also enable Single Row Slide or show the default one. Enable the Slide autoplay.
You can Disable or enable the section anytime you want.
.
Product List Carousel
To add Product List Carousel, Go to Appearance > Customizer > Frontpage Sections > Product List Carousel.
Select the Category or you can select All categories to show.
You can show recent, featured or random product in this section.
You can Disable Content Padding of your site.
You can Disable or enable the section anytime you want.
Big Featured Product
To add Big Featured Product, Go to Appearance > Customizer > Frontpage Sections > Big Featured Product.
In Big featured product section you can show your categories products in given layout. You can only show recent, featured or random products which you have selected as featured.
To set your Product as Featured Product, Go to Dashboard > Products > Select the Star in the featured column. Or you can select Quick Edit and then the Featured option.
You can Disable or enable the section anytime you want.
Tabbed Product List Carousel
To add Tabbed Product List Carousel, Go to Appearance > Customizer > Frontpage Sections > Tabbed Product List Carousel.
You can show recent, featured or random product in this section.
You can Disable or enable the section anytime you want.
Ribbon Section
To add Ribbon Section, Go to Appearance > Customizer > Frontpage Sections > Ribbon Section.
You can show ribbon background image, text, button text and button link.
You can Disable or enable the section anytime you want.
Banner Section
To add Banner Section, Go to Appearance > Customizer > Frontpage Sections > Banner Section.
There are five banner layouts. You can upload desired images.
You can Disable or enable the section anytime you want.
Brand Section
To add brand, Go to Appearance > Customizer > Frontpage Sections > Brand Section.
Upload brand images, link and show them in your site.
You can Disable or enable the section anytime you want.
Highlight Section
To add Highlight Section, Go to Appearance > Customizer > Frontpage Sections > Highlight Section.
You can show recent, featured or random product in this section.
You can Disable or enable the section anytime you want.
Custom Section
To add Custom Section, Go to Appearance > Customizer > Frontpage Sections > Custom Section.
You can show recent, featured or random product in this section.
You can Disable or enable the section anytime you want.
Color and Background
For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.
Global Color
For Global colors option, Go to Appearance > Customize > Global Colors.
Color Scheme – You can choose Dark or Light scheme for your site. Dark will make your site black in color. Whereas the light will make your site overall White.
You can change the default color all over the site using Theme Color. You can pick color for link, link hover color, text color, title color, background color & Background image.
Header Color
For this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall header which includes “Main Header”, “Above header”, “Page Header”, “Mobile/Pan Color”
Above Header –
Background Color & Image – Pick color for your above header background or you can upload image there.
Above Header Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Menu item only.
Above Header Sub Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Sub Menu item only.
Above Header Content – Pick color for text, link and hovered link. These will be applied for Above Header Content only.
Main Header –
Site Title – Pick color for your site title, title Hovered Color and Tagline. To display your Site Title from Appearance > Customizer > Site Identity.
Background Color & Image – Pick color for your header background or you can upload image there. These will be applied for Main Header Background only.
Main Header Content – Pick color header text, link and hovered link. These will be applied for Main Header Content only.
Main Menu – In Main Menu option you can pick color for each Menu item and for menu background area. Individual Color options are given for Menu and Sub menu. These will be applied for Main menu items only.
Mobile/Pan Color –
Background Color & Image – Pick color for your Mobile/Pan background or you can upload image there.
Mobile/Pan Content Color – Pick color for link, hovered link and Hovered Background Color. These will be applied for Mobile/Pan content items only.
Sticky Header Color
You can do all the above setting for Sticky Header too. For setting up Sticky Header color, Go to Appearance > Customize > Color & Background > Sticky Header.
Footer Color
For this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall Footer which includes “Footer Widget”, “Above & Below Footer”.
Above Footer –
Background Color & Image – Pick color for your Above Footer background or you can upload image there.
Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for Above Footer content items only.
Footer Widget –
Background Color & Image – Pick color for your Footer Widget background or you can upload image there. You can choose widgets from Appearance > Customize > Layout > Footer Widget.
Content Color – Pick color for Widget Title, text, link and hovered link. These will be applied for Footer Widget content items only.
Bottom Footer –
Background Color & Image – Pick color for your below Footer background or you can upload image there.
Bottom Footer Content Color – Pick color for Text, link and hovered link. These will be applied for below Footer content items only.
Sidebar Color
For this option Navigate to Appearance > Customize > Color & Background > Sidebar. From this option you can pick color for Sidebar elements of your site.
Widget Title Color – Pick color for title of widget, you’ll select for your sidebar.
Text Color – Pick color for the text of your sidebar text.
Link Color – Pick color of link in sidebar.
Link Hover Color – Pick color of hovered link in sidebar.
Content Color
For this option Navigate to Appearance > Customize > Color & Background > Sidebar. From this option you can pick color for Sidebar elements of your site.
WooCommerce Color
Product Color
For this option Navigate to Appearance > Customize > Color & Background > Products. From this option you can pick color for Product elements on Shop page.
Single Product Color
For this option Navigate to Appearance > Customize > Color & Background > Single Products color. From this option you can pick color for every single Product elements on Shop page.
Frontpage color
For this option Navigate to Appearance > Customize > Color & Background > frontpage color. From this option you can pick color for every single element present on Frontpage sections.
Innerpage Template
Faq Template –
For Faq template option, Create a page, Go to Dashboard > Pages > Create new page and select Faq template from Page Attributes. After that Navigate to Appearance > Customize > Innerpage Template > Faq Template
In Faq template, You can add elements like Title & Text by adding New Faq.
You can also pick color & background for each element.
Contact Us Template –
For Contact template option, First you need to Install & activate Lead form Builder plugin then create a Contact form.
Create a page, Go to Dashboard > Pages > Create new page and select Contact template from Page Attributes. After that Navigate to Appearance > Customize > Innerpage Template > Contact Us Template
In contact template, You can add elements like Big heading, small heading, Address, Mobile Number, Email and Working hours. Just add the shortcode of form which you have created using Lead form builder plugin.
You can also pick color & background for each element.
About us Template
For about us template option, Create a page, Go to Dashboard > Pages > Create new page and select About us template from Page Attributes. After that Navigate to Appearance > Customize > Innerpage Template > About Us Template
In about us template, You can add elements like Services content, Introduction content, testimonial content & counter content.
You can also pick color & background for each element.
Pre loader
For Pre loader, Go to Appearance > Customizer > Pre Loader.
For enabling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site.
You can upload a GIF or an image as a preloader or you can pick background color instead of image.
Social Icon
For adding social profile links, Go to Appearance > Customize > Social icon.
You can show these social icon in the header as well as at the footer. To show social icons just put the links in the text area.
By default it will follow the color scheme but You can also set the “original color” for each social icon.
WooCommerce Setting
For WooCommerce setting. Go to Appearance > Customize > WooCommerce First Setup your WooCommerce. Go to your WP dashboard, Install WooCommerce plugin from WordPress.org and activate it.
Product Style
Product Image Hover Style – You can choose the desired hover style and show your product in a unique way. You can display your product in “Zoom” or as “Swap” hover style.
Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.
Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.
Single Product
Up Sell Product – These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality. Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.
Related Product – Related product are the items which are similar to the product your customer is viewing. Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.
You can Disable the sidebar in product page by checking the box.
Cart Page
In cart page you’re free to show Cross sell product. You can also set the number of Cross Sell Product to show with columns.
Shop Page
Post Pagination – It will provide you better navigation for your blog page. You can choose an option between “Numbered”, “Load More” and “Infinite Scroll”.
Typography
You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.
Base Typography
Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography in your site. Using different fonts on your site make it a creative website.
For Typography, Go to Appearance > Customizer > Typography > Base Typography.
Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
You can choose the “Font Weight” for your text.
Title – Choose font of your title. This will set typography for overall site titles.
You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
You can choose the “Font Weight” for your text.
Content – This will set the overall typography of single page from heading H1 to H6.
Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.
Multiple Widgets
There are Six different Widgets which can be used in sidebar, footer and Homepage. Each widget has its own setting and functionality. All widgets are available in Customize Widget Panel. To add Widgets, Go to Appearance > Customize > Widgets.
Post Widget Slider – Using this widget you can show posts images with caption in a carousel/slider. You can Add Number of Post Show and also Select Specific Option To Display Post. Display Random, Recent and Popular post in your sidebar area.
About us Widget – Using About us widget you can showcase details about yourself or your company. You can add title, Member image, About Me Description, Read More button text and link. You can also add your social media links. This widget can be used in Sidebar as well on Footer area too.
Product List Slider Widget – In Product List Slider Widget you can showcase your Shop products in list slide way. Display your widget on Sidebar and Footer area.
Product Slider Widget – In Product List Slider Widget you can showcase your Shop products in slide way. Display your widget on Sidebar and Footer area.
Single Category Slider Widget – Using this widget you can showcase Single Category with slider. You can display widget in sidebar and Footer area.
Single Product Slider Widget – Using this widget you can showcase Single Product with slider. You can display widget in sidebar and Footer area.
Best 18 Must-Have and Top WooCommerce Plugins for 2020