Adding Slideshows and Options
Sections
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.
Step 2 – Add Content
First enter your slideshow title, this should be descriptive, for example, home page slideshow, for your home page.
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.
Now the images are added, you can drag and drop them into order.
Step 3 – Select Options
Next you will then want to select the regular options for the slideshow. There are 4 options, i’ll explain below:
- Slideshow Effect – there are 2 options:
– Slide: slide left to right.
– Fade: fade from back to front. - Enable Autoplay – if you want the slideshow to play by itself, turn this option on.
- Autoplay speed – this is the time in which a slideshow changes, set in ms. 1000ms is 1second.
- 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.
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:
- The bin will delete the image
- The pencil icon will allow you to add content over the slideshow, including videos, blog posts, titles and links:
1. Clean Slide
The clean Slide option will give you the following options:
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:
It will show the text and image over the slide like so:
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:
Step 2 – Select Layout Options
Select which option you’d like for the slideshow width/height. The 3 options are:
- Full Width no border
- Full Screen (Unless height is set) with border and logo at the top
- Full Screen(Unless height is set) with border and logo center over image
You will then have some possible options depending on which slideshow option you select above:
- Enable Parallax Effect
- 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
- Set the logo width (this will override the standard width option)
- Set the image height (NOTE! Only set the height if you want to override the full screen option)
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):
- Set Items Color on the slideshow
- 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”
Step 2 – Go to the Page
Go to the page with your slideshow, and go to Slideshow settings:
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.
- Set Items Color on the slideshow
- 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.