Adding Slideshows and Options

With Como 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

Cursor_and_Edit_Slideshow_‹_Como_—_WordPress

Next you will then want to select the regular options for the slideshow. There are 4 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.

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:

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

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:

blog-text-over-slide-como

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

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)

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

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.