Adding Slideshows and Options

With Granite you can create and add slideshows to any page type (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.

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

Creating a Slideshow

The following section explains the process for creating 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

 

Step 3 – Select Options

Screen Shot 2016-05-23 at 10.43.49 PM

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

  1. Slideshow Effect – there are 2 options:
    Slide: slide left to right.
    Fade: fade from back to front.
  2. Enable Autoplay – if you want the slideshow to play by itself, turn this option on.
  3. Autoplay speed – this is the time in which a slideshow changes, set in ms. 1000ms is 1second.
  4. Enable Pause on Hover – this option when enabled will cause the slideshow to stop autoplaying when the user hovers over the slideshow.
  5. Mobile slideshow image width

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

Advanced Slideshow 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:

hover-over-image

  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

 

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 descripton if required.

2. 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:

Granite_–_Just_another_Flothemes_Demos_site

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

Adding Video to Slideshows

Adding Video to Slideshows is very simple.

Simply click the pencil icon when hovering over any image:

hover-over-image

In the Video URL section, copy and paste in your Vimeo or Youtube video link and then hit the x top right in this area to save the settings.

Edit_Slideshow_‹_Granite_—_WordPress_?

Adding a Slideshow to a page

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)

Step 3 – Custom Logo and Menu Colors

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):

Most users will want the option to set the menu colors over slideshow, user the items color option.

Edit_Page_‹_Granite_—_WordPress

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

Step 4 – Save and Publish

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

Setting Menu Items Color

Some users have been asking how to set the menu colors on the slideshow, the following section explains how to do so:

Step 1 – Turn Off Auto Color Change

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):

Step 2 – On Page Slideshow Settings

Most users will want the option to set the menu colors over slideshow, when adding the slideshow to the page, there will be slideshow options allowing you to set the items color option (that is menu items).

Edit_Page_‹_Granite_—_WordPress

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

Once these items are set, you should save the page.

Adding a Custom Logo to Slideshows

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)
  3. Set the max logo width, the option is further above

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.