Ninzio slider is visible only in pages. Slider visibility can be managed from page extended options, found under editor in page edit screen. You can control slider visibilty on each page individually. Slider options can be configured from Theme settings >> Ninzio slider. Here you can set height of the slider, control effects, add/remove bullets arrows, change slider transition, give some
Important thing to remember: when you want your slider to be 100% page height (Autoheight option) first set the height of slider, style with given fixed height, after that turn on Autoheight option. Autoheight option works only for desktop devices, not mobile, so remember, first style your slider with given height, after that turn on autoheight.
To create slide go to Ninzio Slider (In the WordPress Sidebar) >> Add new. Here you can set background color/image/video of each slide one by one. Each slide has 7 layers with options to control positioning and effects of each layer. To easly position each layer use preview of that slide and you will see coords on slide, just hover the mouse over the slide area.
For layers we want to highlight some options, to make it easy to work with them.
If you want your layers animation with mouse hover (multilayer parallax effect), you need to configure 2 options of each layer: Parallax effect mouse movement and Parallax effect movement speed. The default parallax effect mouse movement causes the layer to move in the direction of movement of the mouse. The reverse option is opposite. Parallax effect movement speed controles the speed of layer movement. The higher the value the slower is the movement.
Other options are self-descriptive.
Ninzio slider supports html5 video formats (mp4/m4v, ogg/ogv, webm). But all these video formats are no supported among all devices and browsers. That is why, to make html5 video cross-browser and cross-device compatible you need to follow these topic
Center layer horizontally and vertically
Sometimes you need to center a layer horizontally or vertically. To achieve that goal you need to do some calculations.
For example you want to center an image with sizes 400X250. The only value you have to work with horizontal axis i X value. Well, to center image horizontally you need a formula: X = (1170 – layer width)/2. I.e. X = (1170 – 400)/ 2, that is 385. Set the 385 to X value and your image is centered horizontally. The same works for vertical alignment. Y = (slider height – layer heoght) / 2. Slider height you control from Apperiance >> Theme Settings >> Ninzio Slider. Layer height in our example is 250px. So image slider we set 700px, the Y = (700 – 250) / 2. Y = 225. If you set X = 385 and Y = 225, your layer will be centered.
The same works for text. Only if you want to center the text, you need to wrap it in colorbox element. Inset text into colorbox element, give that element width and use our formula above.
For example we want to center horizontally some text.
|nz_colorbox border_width="" border_color="" background_color="" color="" padding="" width="685"|
<h1 style="text-align: left;"><span style="font-weight: bold; line-height: 86px; font-size: 46px; color: #ffffff;">WE CREATE FUTURE BUILDINGS TODAY</span></h1>
Use formula X = (1170 – 685) / 2. X = 242.5, we will set X to 242. Height is responsive for text, it depends on text length and container width. With google developer tool you will be able to find the exact height of given textblock.
Add video background to slider
Ninzio Slider supports HTML5 Video. Make sure you configure HTML5 support
on your site and you can add video backgrounds to your slides. To make you video available on most devices and also provide feedback for devices that do not support HTML 5 video, follow these steps:
- Upload to media library your video in 3 format: mp4, ogv, webm.
- Copy absolute path of your uploaded videos and paste in appropriate slide settings for video url (In each slide edit screen find 3 textfields for video file url).
- Create a cover image for devices that do not support HTML 5 video and also upload that video background image in each slide, that has video backgrund.
- Save the slide