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