Adding a Slideshow

The following article explains how you can create a slideshow for your pages in Flothemes, as well as details on how to add it to a page, and advanced slideshow settings including adding videos.

With Sydney you can create and add slideshows to any pages (You cannot add slideshows to posts as standard, however this can be done with the following plugin). Slideshows are great for displaying your best work, or adding large headers and sliders to your pages.

Creating a Slideshow

Follow these simple steps to create your new slideshows:

Step 1 – Add New Slideshow

Go to your WordPress dashboard, and on the left hand side towards the top, find Slideshow, and select add new.

Slideshow_‹_Mark_Allen_—_WordPress

Step 2 – Add Content

First enter your slideshow title, this should be descriptive, for example, home page slideshow, for your home page.

Add_New_Slideshow_‹_Mark_Allen_—_WordPress

Then you should click on “Add Slideshow Images” and you will be presented with your media library. If you have images present in your media library, go ahead and select them. If not, you can drag and drop images into here, and once uploaded, select add to gallery.

Add_New_Slideshow_‹_Mark_Allen_—_WordPress

Now the images are added, you can drag and drop them into order.

Add_New_Slideshow_‹_Mark_Allen_—_WordPress

You can also hover over the images, and there are 2 options:

  1. The bin will delete the image
  2. The pencil icon will allow you to add content over the slideshow, including videos, titles and links: Screen Shot 2016-06-17 at 8.21.10 PMScreen Shot 2016-06-17 at 8.21.42 PM

NOTE! To add video, just insert a URL from Vimeo or Youtube in the Video URL section.

Step 3 – Select Layout

Next you will then want to select the layout options for the slideshow. There are 8 options, i’ll explain below:

Add_New_Slideshow_Settings

  1. Slideshow Type – there are 2 options:
    Cropped Box – NOTE! The reason this slideshow is called a cropped box is due to screen sizes and image ratios. If your image is in a format 16:9 it will be cropped on screens that are not in the same ratio. The photos are to fill the full content of the box.
    Visible Nearby – This is where you have images each side of the active slide.
  2. Slideshow Effect – there are 2 options:
    Slide: slide left to right.
    Fade: fade from back to front.
  3. Slideshow Width – there are 4 options:
    Full Size – this will fill the fixed area width also covering the menu
    Page Width – this will be the width of the fixed area and allows a set height
    Padding Width – full width of fixed area with padding left and right
    Content Width – set to the width of the content, set in Flothemes > General > Site Width.
  4. Set the Menu Slideshow Bottom – this will put the slideshow to the bottom of the slideshow, this is only available for the Full Size slideshow.
  5. Hide Slideshow Bullets – select this option remove the bullets from the slideshow.
  6. Over Slideshow Content – this is the content position of content added when clicking the pencil icon on a specific image in the slideshow.
  7. Enable Autoplay – if you want the slideshow to play by itself, turn this option on.
  8. Autoplay speed – this is the time in which a slideshow changes, set in ms. 1000ms is 1second.

Step 4 – Publish

Once the options are all added and you’re happy with how it looks, publish the slideshow.

Add_New_Post_‹_FloThemes_Documentation___Beautiful_Sites_made_Easy_—_WordPress

Step 5 – Add to a page

Now that you’ve created a slideshow, head over to pages, and then navigate to the page you want to add your slideshow to. In the page scroll down to “Slideshow Settings” and select the slideshow:

Edit_Page_‹_Mark_Allen_—_WordPress

Publish your page.

HINT! Slideshows can be added to any page template type. Try using this with latest posts type to display blog post below your slideshow.

Advanced Slide Options

The following section explains the advanced slideshow options including how to add video and using blog posts on slides.

To use the advanced slideshow options can also hover over any of the images, and there are 2 options:

  1. The bin will delete the image
  2. The pencil icon will allow you to add content over the slideshow, including videos, blog posts, titles and links:

Edit_Slideshow_‹_Mark_Allen_—_WordPress

1. Clean Slide

The clean Slide option will give you the following options:

slideshow-clean-slide

2. Adding Video

To add video, copy and paste in a URL from Vimeo or Youtube. This will then add a video play button on the specific slide.

3. Adding Title Over and links

With the image title and description section, you can add a title and description for the image. You’re also able to add a link to any page, post, or external URL. Simply paste a URL in the Title URL section.

Image Title and Description Attributes allow you to add specific color options to the title and description if required.

4. Blog Post Slide

To Add a blog post link and description over the current slideshow image, select the second option, then enter the name of the post you wish to display, and if required set the title color:

Edit_Slideshow_‹_Como_—_WordPress

It will show the text and image over the slide like so (when hovered over):

image-text-hover

NOTE! Remember to hit the x top corner to save the option and then save the slideshow.

Adding Slideshow to Pages

The following section explains the process for adding slideshows to pages and the relevant on page options.

Step 1 – Go to a page

Now that you’ve created a slideshow, head over to pages, and then navigate to the page you want to add your slideshow to. In the page scroll down to “Slideshow Settings” and select the slideshow:

Cursor_and_Edit_Page_‹_Mark_Allen_—_WordPress

Step 2 – Select Layout Options

Cursor_and_Edit_Page_‹_Mark_Allen_—_WordPress

Select which option you’d like for the slideshow width/height. The 3 options are:

  1. Full Width no border
  2. Full Screen (Unless height is set) with border and logo at the top
  3. Full Screen(Unless height is set) with border and logo center over image

slideshow-options-como

You will then have some possible options depending on which slideshow option you select above:

  1. Enable Parallax Effect
  2. Enable menu and logo hiding effect, this will allow the menu etc to be hidden when hovering over the play button, shown in Como Dark
  3. Set the logo width (this will override the standard width option)
  4. Set the image height (NOTE! Only set the height if you want to override the full screen option)

Flothemes_Options_‹_Mark_Allen_—_WordPress

The following 2 items are available ONLY when you turn off the option for “ENABLE TEXT/LOGO COLOR CHANGE BASED ON THE SLIDESHOW IMAGE COLOR” in Flothemes > Header and Logo >  Logo (shown above):

  1. Set Items Color on the slideshow
  2. Upload Logo image for slideshow (Add the logo for over image)

Step 3 – Save and Publish

Finish adding content to your page and then save and publish, or add to drafts.

Adding Custom Logos Over Sliders

Adding a custom logo to your slideshow can be very useful when you want to have a large logo over your image, possibly a different logo than the rest of your site, or possibly a larger logo, especially on the home page.

Step 1 – Turn off auto color logo change

To do so you will firstly want to disable the logo automatic color change. Go to Flothemes > Header and Logo >  Logo, and turn off “ENABLE TEXT/LOGO COLOR CHANGE BASED ON THE SLIDESHOW IMAGE COLOR”

Flothemes_Options_‹_Mark_Allen_—_WordPress

Step 2 – Go to the Page

Go to the page with your slideshow, and go to Slideshow settings:

slideshow-options-como

Then the last 2 items, you should set the color for the items in the slideshow (Menu, arrows, social icons) and also upload the logo.

  1. Set Items Color on the slideshow
  2. Upload Logo image for slideshow (Add the logo for over image)

You may also want to set a max logo width if the logo you’re uploading is large.

Step 3 – Save and Publish

Finally save the page and check out your slideshow, then adjust the sizing if necessary.