Pro & Free Slider Revolution Tutorial for WordPress

Pro & Free Slider Revolution Tutorial for WordPress

Slider Revolution Tutorial

Slider Revolution Tutorial – At first download slider revolution plugin from wordpress.org website. Then install it form dashboard. Then setting the required configuration.

Slider Revolution Setting

  • General Setting

Example of Image Size

  • If Slider is placed inside a boxed container within your site, and the Slider’s width should not increases larger than 1200px
  • 1400 pixels in width by 480 pixels in height recommended for perfect size for the slider
  • 1200px width and 500-800px height is an optimal perfect size for a slider
  • 2650×1900 image or 1024×768 so you can easily manage your layers
  • For height set your sliders “Layers Grid Size” to equal the exact size of your images original size
  • Image Width = Slider Width Image Height = Grid Height * (Slider Width / Grid Width)

How to Customize Image

  • Fit slider image on full screen. Slider revolution image full size is 1920 x 1080 pixel
  • At first open Photoshop CS6 >> Click on File >> Click on New >> Set Width 1920 pixel >> Set Height 1080 pixel >> Set Resolution 300 >>Click on OK
  • Again Click on File >> Click on Open>> Select Image >> Click OK >> You can see 2 Tab on Screen. One is balnk 1920 x 1080 pixel and another one image just you have open >> Drag second tab to below >> Now click on Move tools icon from toolbar to drag image to blank box. >> Now image will fit into blank box without changing resolution >> To change resolution hit CTRL – button from keyboard >> Now hit CTRL + keyboard button at a time to view original images dot line box. >> Now stress the dot line outside of image to image edge >> Click Enter >> File this image as JPG / PNG format

How to Add Image on Slider

Login your wordpress site >> click on Slider Revolution >> Select Module and click on Editor icon >> Add slide by clicking on Slide icon >> Hit Ctrl – keyboard button to view full edge >> Add image by clicking on Add Layer icon >> A default image icon will inputted in box. >> Double click on image icon to upload a image >> Fit the image inside the slider box >> Save

How to Remove white space under revolution slider

Please add this code in custom.css file:

.page-heading-slider .wpb_revslider_element {
margin-bottom: -250px !important;
}

Module General Option Setting

Title Icon:

  • At first click Gear/setting icon. Then set title. E.g. Main Slider
  • Full Slider Image Size:
  • 9000 x 6600 Pixel

Layout Icon:

  • You change type here e.g. slider, scne, carousel .
  • You change sizing here e.g. auto, full-width, fullscreen.

Default Icon:

  • Change slider duration
  • General Setting
  • Stop on Hover : On
  • Spinner Icon
  • Set Spinner to 5/6/7/8 etc
  • Set Spinner color to red/white/blue etc
  • NAVIGATION OPTIONS
  • Progress Icon
  • Progress bar : on
  • Progress bar Position: top/bottom,
  • Height: 1
  • Arrow
  • Arrow Type : On
  • Arrow Style: Change Value to Uranus
  • Navigation Style – On and Change value
  • Height: 40
  • Font Size: 20
  • Width: 40
  • SLIDE OPTIONS
  • Background Icon
  • Source Image -> Media Library
  • Add Layer
  • Add Shap

General Icon:

  • On Scroll Icon
  • Spinner Icon
  • Addon Icon
  • Advance Icon
  • CSS/Query Icon
  • As Modal Icon
  • Skin Icon

Template Parameters

  • Fashion Header Slide Image Size: 1920×1280, 1920×1001, 1920×1280
  • Before After Slide Image Size: 1600×1000, 1600×986
  • Kyn Burn: 1920×900
  • Fitness Gym Website Slider Image: 1920×1080
  • 360 Degree Panorama Slider: 2560×1280
  • Fashion Website Slider Modal Slider: 989×1080, 989×1080, 989×1080, 989×1080, 267×150, 267×150

How to make responsive revolution slider

Select : You will get 3 option during creation of a slider, (1) Auto Option, (2) Full Width (3) Full Screen. Among them select (1) Auto Option

====================================================

Database Experiment 1

  • WordPress Database Size: 340 Mb
  • Microsoft word file size: 2.10Mb
  • Microsoft Word : 2,52170 Words
  • After Posting Database Size: 360Mb
  • So 10Mb Database Size = 126000 Words
  • So 10Mb Database Size = 1.05 Mb doc file size

===================================

Database and Folder Experiment 2

  • WordPress Database Size Before : 424.38 Mb
  • Microsoft Word : 3,32170 Words
  • After Posting Database Size: 476Mb
  • So 15Mb Database Size = 1,00,000 Words
  • Zip Folder Size Before =593.45 Mb
  • Zip Folder Size After=603 Mb
  • Database and Folder Experiment 3
  • WordPress Database Size Before : 507 Mb
  • Microsoft Word : 3,82170 Words
  • After Posting Database Size: 639 Mb
  • So 15Mb Database Size = 1,00,000 Words
  • Zip Folder Size Before =593.45 Mb
  • Zip Folder Size After= 596 Mb

Database and Folder Experiment 4

  • After Muatta Malik Database size= 685mb
  • Database and Folder Experiment 5
  • After Miskat Sharif Database Size 710Mb

Role Management

By default Slider Revolution enabled only for Admin Role. To add permission Editor and Author you need to go Dashboard >> Global Setting >> Permission >> To Editor Admin. So Shop Manger can also work now

How to Add Class for Text Slider

/*slide*/


.scroll-slow {
 height: 50px;	
 overflow: hidden;
  position: relative;
 /*background: yellow;*/
 color: orange;
 /*border: 1px solid orange;*/
}
.scroll-slow p {
 position: absolute;
	animation-duration: 1s;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-slow 15s linear infinite;
 -webkit-animation: scroll-slow 15s linear infinite;
 animation: scroll-slow 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-slow {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-slow {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-slow {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
Storefront Kuteshop Woodmart  Woocommerce Theme

Storefront Kuteshop Woodmart Woocommerce Theme

Kuteshop Theme Setting

In this article we will discuss about Storefront Kuteshop and Woodmart Theme setting

1. Kuteshop Theme Setting

  • Header and Footer Logo default dimension 255 x 64
  • Products Image default dimension : 850/1038
  • Single Image default dimension : 235/450

1.1. Revolution Slider Image Dimension (Kuteshop)

  • According to W3School : 1024×768 pixels
  • Commonly used widths are: 1920px  / 1600px  / 1400px  / 1366px  / 1280px  / 1024px
  • For full screen can set: 1700 x 700 pixels

2. Storefront Theme

Store front is very good theme. You can know more from below link

  1. Header Customization
  2. Menu Customization
  3. Sidebar Customization

2.1. Header Customization

Some Major Header customization is described below

/* CSS Code for Header Image Setting */

 .site-header .site-branding img {
     height: auto;
     max-width: 167px;
     max-height: 100px;
     margin-left: 12px;

/* CSS Code for Header Image Margin Setting */
 }
.hentry .entry-header {
     margin-bottom: .617924em;
 }
/* CSS Code for Header Image Margin Setting */

 .site-branding {
 margin-bottom: 10px;
 }

To change the header font color in your Storefront theme, you can add custom CSS code to your WordPress site. Here's an example of the CSS code you can use:


/* Change the header font color */

.site-header .site-title a, 
.site-header .site-description {
    color: #000000; /* Change this to your desired color */
}

2.2. Menu Customization

/* Change the menu font color */

.primary-navigation ul li a {
    color: #000000; /* Change this to your desired color */
}
/*CSS Code for Primary Menu Margin Setting*/
 @media (min-width: 768px) {
 .primary-navigation li a {     font-size: 16px;           padding-left: .6em !important;     padding-right: .6em !important; }
 }
/* CSS Code for Primary Menu Color Setting */
 .storefront-primary-navigation,
  .main-navigation ul.menu ul.sub-menu{
  background-color:#1E73BE;
  }

/* CSS Code for Primary Menu Color Setting */
.storefront-primary-navigation {
clear: both;
background-color: #75BA21;
}

2.1. How to Remove Sidebar (Any Theme)

Go to dashboard -> Then go to Appearance -> Then click on Customize -> Click on Additional CSS -> Finally Add code in text box -> Finally click on Publish button. Codes given bellow

.content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}.content-area .site {
margin:0px;
}

2.2. How to Remove Add to Cart (Storefront)

Go to theme dashboard -> Appearance -> Customize -> Additional CSS -> The you will get a large text box. Here you write below code

.site-header-cart .cart-contents {display:none;}

2.3. How to Reduce Header Space (Storefront)

.site-header {
line-height: .1;
padding-top: .617924em;}

2.4. How to Reduce Logo Image (Storefront)

.site-header .site-branding img {
max-width: 130px; }

2.5. How to Reduce H1 Linehight (Storefront)

h1, .alpha {
line-height: .14;}

2.6. How to Remove Post Meta, Leave Comment (Storefront)

.hentry .entry-header .posted-on, .hentry .entry-header .post-author, .hentry .entry-header .post-comments, .hentry .entry-header .byline {
font-size: 0.875em;
display: none;}

2.7. How to Remove Footer Information (Storefront)

.site-footer a:not(.button) {
color: #333333;
display: none;}
.site-footer {
color: #6d6d6d;
display: none;}

For only footer credential

.site-footer a:not(.button) {
color: #333333;
display: none;}

Footer WordPress Color : #23282d

2.8. How to Edit Footer Information (Storefront)

If You want to modify credential text the go to this patch. In the file: themes>storefront>inc>storefront-template-functions.php

Copy the line 118-142

if ( ! function_exists( 'storefront_credit' ) ) {
	/**
	 * Display the theme credit
	 *
	 * @since  1.0.0
	 * @return void
	 */
	function storefront_credit() {
		?>
		<div class="site-info">
			<?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = '© ' . get_bloginfo( 'name' ) . ' ' . date( 'Y' ) ) ); ?>
			<?php if ( apply_filters( 'storefront_credit_link', true ) ) { ?>
			<br />
			<?php
				if ( apply_filters( 'storefront_privacy_policy_link', true ) && function_exists( 'the_privacy_policy_link' ) ) {
					the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
				}
			?>
			<?php echo '<a href="https://woocommerce.com" target="_blank" title="' . esc_attr__( 'WooCommerce - The Best eCommerce Platform for WordPress', 'storefront' ) . '" rel="author">' . esc_html__( 'Built with Storefront & WooCommerce', 'storefront' ) . '</a>.' ?>
			<?php } ?>
		</div><!-- .site-info -->
		<?php
	}
}

2.9. How to Setup Storefront Pro Version

2.9.1. At first create an account on woocommerce.com/storefront

2.9.2. Then add to cart and purchase. After purchase you will get below instructions through registrant mail

Storefront Extensions Bundle1
Storefront Parallax Hero1
Storefront Powerpack1
Storefront Mega Menus1
Storefront Product Hero1
Storefront Blog Customizer1
Storefront Homepage Contact Section1
Storefront Product Sharing1
Storefront Footer Bar1
Storefront Hamburger Menu1
Storefront Reviews1
Storefront Pricing Tables1
Storefront1

2.9.3. To make the most of these products, login to WP Admin and go to WooCommerce > Extensions > WooCommerce.com Subscriptions and connect your WooCommerce.com account.

2.9.4. Then click on Approve for authorization. This will allow WooCommerce.com to view your subscription information, available extensions, and serve updates to your WordPress site.

2.9.5. Below is a list of extensions available on your WooCommerce.com account. To receive extension updates please make sure the extension is installed, and its subscription activated and connected to your WooCommerce.com account. Extensions can be activated from the Plugins screen.

2.9: Color Change:

Change Header Menu Color: #75BA21

Change Footer Header Menu Color: #00438B

Change Footer Header Menu Color: #006FB9

Change Footer Header Menu Color: #004573

Pootlepress Menu Color: #FF7575

WordPress Menu Color Deep: #23282D

WordPress Menu Color Light: #32373C

3. WoodMart Theme Setting

Brand attribute: If you like to show brand image in your product page select desired attribute here

Compare page: Select (Select a page of compare table. It should have the shortcode shortcode: [woodmart_compare]) By default it is not exist

Wishlist page : Select (Select a page of wishlist table. It should have shortcode shortcode: [woodmart_wishlist]) , By default it is not exist

Enable promo popup : ON

Promo popup text: Place here some promo text or use HTML block and place here it’s shortcode. Insert shortcode into texbox = [html_block id=”212″]

Product Page: It has some configuration

Additional tab content : Shortcode

Woodmart Image Size

Home Menu Front Default Image Size: 300×250

Category Menu Image Size : 118×118

How Subscriber/Author/Editor can get access in woocomerce products to entry a product ?

How to show Header option in Woodmart theme

How to change logo in Woodmart theme

How to display multiple size set of a product?

Woocommerce Shortcode

  • [featured_products] : Show all featured products
  • [products limit=”9″ columns=”3″ visibility=”featured” ] : Show 9 featured products in 3 column
  • [products limit=”4″ columns=”4″ visibility=”featured” paginate=”true” ] : Show 4 featured products in 4 column with paginaiton

Video Tutorial

SubjectVideo Link
Storefront – Ecommerceyoutube.com/watch?v=f5Jcd6fI7v4
Storefront- tipspootlepress.com/2020/05/21-tips-tricks-and-css-tweaks-for-woothemes-storefront
Storefrontnjengah.com/customize-storefront-theme/
Storefront Extensionyoutube.com/watch?v=cLy-x4DCyko
Variation Productyoutube.com/watch?v=ERKXg9rUAdg
Variation Productyoutube.com/watch?v=Mk-vxwcPf3o
Variation Productyoutube.com/watch?v=-o6HC2ISdZ4
Storefront Proyoutube.com/watch?v=Sk-1DIlh2UE
Woocommerce Shortcodeyoutube.com/watch?v=QlMYxIgc0Oc
Woocommerce Shortcodedocs.woocommerce.com/document/woocommerce-shortcodes
Storefront Mega Menudocs.woocommerce.com/document/storefront-mega-menus
Storefront Powerpack Demo (Woocommerce)youtube.com/watch?v=cLy-x4DCyko&t=98s
Custom Iconwordpress.com/support/widgets/social-media-icons-widget/#available-icons