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%); 
 }
}

About Engr. Kh. Mashiur Rahman

He is Top Class Digital Marketing Expert in bd based on Google Yahoo Alexa Moz analytics reports. He is open source ERP Implementation Expert for RMG Industry. He is certified IT Professional from Aptech, NCC, New Horizons & Post Graduated from London Metropolitan University (External) in ICT . To Hire his service and Him Email- [email protected], Cell# +880 1792525354

Similar Post

Theme.json Customize and Development for Guttenberg Editor

Theme.json Customize and Development for Guttenberg Editor Theme.json Customize and Development for Guttenberg Editor Creating …

Leave a Reply

Your email address will not be published.