Slideshow and Settings

With Porto adding a slideshow to your pages is simple. We have added our own slideshow post type that can be added to the top of any page.

Video Tutorial

Adding a Slideshow

Step 1 – Add New

To create a slideshow you have to go to the ‘Slideshow’ menu and click ‘Add New’.

fiji slideshow add new

Step 2 – Add Content

Add the slideshow title and then proceed to add the slides:

Screen Shot 2015-06-23 at 10.57.09 AM

As you can see in the image above, you can create slides by adding images, or you can create ‘clean’ slides (an example of a slide without image with just text can be seen here:

You can upload new images, or add existing images from the media library.

For full screen slideshows we recommend images of 1920x1200px and the images should be optimized for web.  After the images are added to the slideshow when you hover over the images you’ll notice 2 images that will allow you to delete or edit the slide you are interested in. And also you can drag and drop the available images to sort them.


Step 3 – Advanced Edits

When the ‘Edit’ icon is clicked, a modal box will open up and will allow to edit the options available for the current slide. This includes adding links to pages, adding videos per image and adding logos over image.

For this theme the available options can be viewed in the image below:

Screen Shot 2015-06-23 at 11.01.10 AM

You can edit the settings for all the slides as you are interested in, then close the modal box and publish/update the Slideshow post and all the images and options will be published.

Slideshow Settings

Beside the settings for each Slideshow, there are global settings that will affect all the Slideshows, they can be accessed in Flothemes > Slideshow menu under theme options:


Options include:

  • Full Screen slideshow on mobile (yes or no) when enabled the image will be cropped to be full screen
  • When option is set to no, you can set a slideshow height, 300px should show image in normal orientation
  • Slideshow Autoplay
  • Enable automatic text color change (allowing the menu colors to change based on darkness of images)
  • Gutter for Visible nearby slider
  • Slideshow title and description typography.

Adding Slideshow to Pages

Step 1 – Go to Page

Then once the Slideshow is created it can be assigned to any page. On any page scroll down to the slideshow settings meta box below the main page content:


Step 2 – Select Slider View and Menu

Select the options from the items above. There are 2 slider options:

  • Full Screen which is the first option shown.

With this option selected you can select 3 menu positions:

  1. Menu Above (Full Screen Slider)
  2. Menu Below (Full Screen Slider)
  3. Menu with white bar at top (this is a fixed height slider and the height option is available)
  • Visible Nearby – this is with images each side of the current image.

With this option you can only select the slider height.

Step 3 – Logo Position

Finally select the logo position. No logo, left and right, center, and the option outside menu will display a logo over the image.