Quantcast
Channel: WordPress.org Forums » All Topics
Viewing all articles
Browse latest Browse all 210725

How To – Full Screen Slider Revolution

$
0
0

Replies: 1

I just thought I would share what I have learned when trying to create a full-screen slider which I can use as a landing page. Keep in mind there will probably be a little CSS you’ll need to add. I happened to use the Virtue theme which has a landing page template. I reserve the right to be wrong here but this did work for me.

Procedure To Create A Full-Screen Slider Revolution Slider

Create Slider

1. Slider Revolution > New Slider
2. Slider Settings > Content Source > Default Slider
3. Slider Title & Shortcode > enter values
4. Select Slider Type > Standard Slider
5. Slide Layout > Full Screen
6. Set Custom Grid Size On for Notebook, Tablet, and Mobile. Do not enter any values.
7. Scroll down.
8. Save Settings
9. General Settings > Stop Slide After > turn on
10. Amount of Loops > 0
11. At Slide > 1
12. Layout & Visual > Spinner – off

Edit Slider

1. Add Slide > Add Bulk Sides
2. Delete first slide so only new slide appears
3. Main Background > Source Settings
4. Add Layers

Edit Slide Layout

The slide must be manually edited to fit in each device – Desktop, Laptop, Tablet, and Mobile.

1. One by one select the device at the top right of the window and move the layers around until you are satisfied. Remember to save after each device edit.
2. Verify device layout by going to the upper right and clicking on the magnifying glass.
3. Select each device one by one to verify layer placement.
During this process you an iteratively go to:
http://quirktools.com/screenfly/
and enter the url without the S after hppt
4. Select each device in the top left to verify layout. Be sure to also select the circular arrow to verify portrait and landscape views. But do not rely on just emulation. Test on as many real devices you can get your hands on whether yours or a friend’s or colleague’s.

Notes

1. To set the timing of a layer select the layer then click Animation. Then about the 5th column over there are two clocks. The first clock controls when the layer will appear and the second clock controls when the layer will disappear. Set as desired. Each 1,000 = 1 second. Probably do not want to use < 1,000.
2. When creating a button, do so with buttons, not linked text. Buttons are easier to create and edit. Be sure to enter the text in the area when creating the button. After you have created the button you can modify/edit the text by selecting the button and then clicking on the pencil. The text will appear in a black box. In this box you will see CSS that you can modify to further style the button.
You can edit the text in the button after creating it including special characters.
3. Create a WordPress test page and paste the slider shortcode in the page. Verify layout in the page after changes. This is iterative. BE SURE TO SELECT THE LANDING PAGE TEMPLATE.
4. It is CRITICAL to clear cache as much as practical when testing.
5. You will probably need further CSS to get exactly what you want. It might be needed to remove the toolbar, header, menu, footer, background and maybe other things depending upon your theme.

Hope it helps!

Jerry


Viewing all articles
Browse latest Browse all 210725

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>