Flo Slider

With Flo Slider, you can now add slideshows to any page or post, allowing you maximum flexibility when creating your website. The following documentation will explain how to download and install the Flo Slider plugin, and then details on how to create a slideshow and insert it into a page or post.

Installing Flo Slider

Download and install plugin

You can download the Flo slideshow plugin here. Once you download it, you should get a .zip file named Flo-slider.zip:

flo-slider-download

Uploading the plugin

To upload the plugin, go to your WordPress admin panel, go to plugins, and “add new”, then “upload plugin”:

flo-slider-1

flo-slider-1

From here you can select your plugin, or drag and drop it into the choose file section, and then hit install now:

flo-slider-2
Once its uploaded activate the plugin:

flo-slider-2

Now the plugin is activated, you will have a 1 new setting area in the WordPress back end area, FloSlider, this will be the main area you will need when setting up your slideshow:

flo-slider-settings

The next section will explain how you can create and edit a slideshow.

Creating a Slideshow

Now that the plugin is activated, its time to create a new slideshow.

Add New

Go to the FloSlider area in your WordPress backend, and click “Add New”:

flo-slider-add-new

You will then be presented with a blank slideshow, with all the settings and a publish button:

flo-slider-new-slider

Please add a name to the slideshow (we would suggest the name to be associated with the page the slideshow will be visible on, as when you will have many slideshows you will know which one is on which page)

flo-slider-3

Adding and editing slides

Now that you’ve named your slideshow, its time to add images, and edit them as required.

Below the slider options, you shall see a “Add Slideshow Images” button:

flo-slider-6

Click on it and a default WordPress media library will popup, select or upload the images/slides you want to have in your slider and click select in the bottom right corner of the popup:

flo-slider-7

Now you can see all the sliders appeared in our slideshow:

flo-slider-8

To edit a image/slide just simply click on it and an options page will pop up, with current slide attributes:

flo-slider-single-option

Current Slide Image Settings

The pop up has the following settings:

  • Slide title – Creates a title which will be visible on your slide
  • Title color/Size – You can change the title color and size specifically to one slide. The same principle is applied to the Subtitle.
  • Custom url – You can add an url to your slider, thus upon clicking on it the visitor will be sent to it.
  • Text label for custom URL – The link text that the user will have to click in order to be sent to a different page.
  • Video URL or embed code – You can add a video url or embed code into your slideshow thus adding a play button on the slideshow. If the user clicks on the play button, the slide image will hide and the video will play.
  • Custom CSS Classes – you can add a custom class to the slide so you can apply custom CSS styles to it.

When you are done editing press Esc and the options should save.

On the right side of the slideshow options you will see many templates under the “Current Slider Type” you can play with them and choose the one that best suits your website:

flo-slider-10

After you are done playing with the settings, adding images and choosing a template click on the “Publish this slider” button at the bottom of the page:

flo-slider-11

Adding A Slider to Page or Post

After you publish the slider, you will see that the plugin generated a shortcode at the top of the settings:

flo-slider-12

Add Shortcode to Page or Post

Copy this shortcode and paste it wherever you want in a page or post and hit update button:

flo-slider-13

Now when visiting this page you shall see the slideshow you just created:

flo-slider-14
After you’ve published your slideshow and watched it live, you can go back and edit it until you are satisfied with it.

Re-order Slides

To move the slides around simply just drag and re-order them, and press save changes:

flo-slider-move-images

You have to click on Publish the slider just once when you create it, after that you must click on “Save all changes” button.

Slider Settings

The following section explains the Slider settings options available with your Flo Slider.

Below the title you will see a section with settings “ Flo Slider Settings” and below we will go through each of them.

Height

  • Slider desktop height (default value 500px) – represents the height of the slider for desktop computers and laptops.
  • Slider mobile height (default value 66vw) – represents the height of the slider for mobile devices. We recommend to use vw value over the px. The vw value means that the slider will be (in our case) 66% of the width of the mobile phone screen thus making the slider responsive regardless of the scree resolution.

flo-slider-4

Custom CSS

  • Custom CSS Class – in this field you can add a custom css class so you can append to the slideshow some custom CSS styles.

Misc Options

  • Controls color – this will be the main control color for your slider, this could be the arrows, buttons, or dots.
  • Controls secondary color – this will control the hover effect and background of the controls.
  • Auto change content color – if enabled, the content color will change depending on the color of your images. The colors will be black or white.
  • Autoplay – if enabled, the slides in the slider will automatically change. The speed with which the slides move between themselves is set up below in the Autoplay speed (default 3000 milliseconds, which equates to 3 seconds)

flo-slider-5

Default Options

  • Title color / Size: Applies the size and color to the title in all the slides in the slider (h1 being the biggest size and h6 the smallest).
  • Subtitle Color / Size – The same principle is applied for the subtitle too, change the sizing options as per your requirements.

Using the slider in the header (using a widget)

Some times you may need to use the slider in a different location than the page content. For example in the header. In this case a solution would be to use the slider shortcode in a text widget.

For that it is necessary the theme to provide a widget area in the place you need and support running shortcodes in the text widget. If these conditions are met, then you can add a slider in the header as shown in the image below using a text widget:

screen-shot-2017-01-07-at-12-13-28-pm

 

And  if you need the slider to appear only on certain pages, then you can use the Widget visibility plugin.