03 March 2017

In the WebWave - responsive webdesign tool without coding - element "Slider" allows you to add the slide show to the website.

 

Adding a slider to the page

Slider settings

Editing slider

FAQ

 

Adding a slider to the page

 

Slider can be added from the toolbar on the left side of the editor. Just click the appropriate button or drag it onto the page.

 

 

When you add a slider to your page, a media library will appear automatically. Select the pictures you want to be displayed in your slideshow and confirm your selection by pressing the button "Add to slider" at the bottom of the library.

 

 

Now the “Edist slider” tab will appear. Here you can change the order of photos in a slider, remove them, change the title, description and the link. When finished, click the button "Finish" at the bottom. Your slider is added to the page.

 

Slider settings

 

After you select the slider, you can set a number of settings in the bottom panel:

 

Animation type

 

It determines how one picture passes in the second:

Move from right – Currently displayed image moves to the left, and in its place a new image slides from the right side of screen.

Fading – Current image will no longer be displayed, a new picture gradually appears in its place.

Reveal – Current image smoothly changes to a new photo.

 

Adjusting

 

How the image is fitted to the slider frames.

Scale – Picture is adjusted to be displayed entirely. Some areas of the slider may therefore remain empty.

Crop – Pictures will be adjusted so that the entire slider area was covered. This may mean that not the whole picture will be displayed.

 

Animation time

 

How long is the animation (time in seconds).

 

Photo display duration (transition delay)

 

How long will the photo be displayed, before it starts to be transitioned to the next one.

Time given in seconds.

 

Autoplay

 

Choose if the picture has to change to another automatically, or only when the user clicks.

 

Displayed items

 

After clicking on the button "Displayed items" a new window will appear, where you can set additional settings of sliders:

 

Title and description – Select if the title and description of the image should be displayed in the gallery.

Thumbnails – Select if the thumbnails of the image should be displayed, and if so where.

Arrows – Select if the navigation arrows should be displayed. In addition, by clicking the button next to the arrow you can select your own arrow icon from the media library. So if the defaulticons are not appropriate, there is a possibility of adding your own arrow icons.

 

 

Padding – Specifies the distance between navigation arrows and the edge of the gallery.

 

Edit slider

 

To edit a slider, open the "edit slider" window by clicking the icon in the upper right corner of the element:

 

 

Adding images to the slider

 

Go to "Media Library" by clicking the button in the upper left corner of the window:

 

 

Select the files that you want, or add a new ones and click "Add to sliders" at the bottom of the window.

 

Removing images from the slider

 

To delete photos from the slider, in the “Edit slider” window, select the image you want to remove and click the "Delete from the slider."

 

 

Setting the link in the photo, title and description

 

To change where the link on the image will lead to, select the slider.

Then in the bottom menu in the “Link” box, choose where will the link lead. To add a link to the next image, click on the slider arrow to go to the next photo and there add the appropriate link.

 

 

FAQ

 

How to display a slideshow in the background of a page?

 

To display a slideshow in the background of a page, first you have to add a new slider. Then, in the layers list place it low enough, so the other layers cover it.

 

 

Then you need to set the width of slider to 100%, by dragging both of its sides to the edges of the screen, or by selecting "width 100%" in the bottom panel.

 

 

All that remains is to set the height of our slideshow and it's done.

 

Adding title and description to a photo

1) Add a new slider to your website or select an existing one.

 

2) In the bottom panel, click "Displayed elements". You will see additional “Slider settings” window.

 

3) Select to display title and description in the slider

 

 

4) Double-click the text in the photo, or click on the “Edit the image title” icon:

 

 

5) Text in the image will be selected with a blue frame. You can enter here any text – you have at your disposal whole text editing panel, just like in a text element.

 

 

6) In the bottom panel, you can change the position of the text in the picture, text background color, transparency of the background or the whole item, and many other settings.

 

7) When you select text to edit, you can change the animation with which it shows up on the screen. Slider may thus have two different types of animation – image scrolling animation and animation of text. To change the animation with which the text appears in the image, select the text to edit and set the propper kind of animation in the bottom panel.

 

 

8) To change the image you want to edit just click the arrow in the slider and view another image:

 

GO BACK             

Slider

 

 

Copyright © 2011 — 2018

All Rights Reserved

PRODUCT

CONTACT 

contact@webwave.me 

YOU SHOULD USE WEBWAVE TOO!

Try - it's free

SIGN UP

SUCCESS STORIES

HELP & SUPPORT

LANGUAGE

SIGN UP

LOG IN

SIGN UP

LOG IN