Porto: How to Add More Content to Slideshows

Size: px

Start display at page:

Download "Porto: How to Add More Content to Slideshows"

Scott Davis
5 years ago
Views:

1 Porto: How to Add More Content to Slideshows This article covers how to add more content to slideshows in Magento stores that use the Porto theme. If your store is using a theme other than Porto, this may not work. Porto uses a jquery plugin called OWL Carousel in order to support slideshows, and other themes may not use OWL to make their slideshows. Before getting started with this article, it may help to be familiar with Porto: How to Create and/or Modify a Slideshow. Navigating to the Slideshow's Block Anatomy of the OWL Slideshow Buttons Images Navigating to the Slideshow's Block First log into the back-end and go to System->ConfigurationPorto ExtensionsHomepage Slider. Here Porto specifies which block is being used for the home slider. Now go to CMSStatic Blocks. Here you'll see a list of all the blocks that combine to make many of the pages in your store. Each block is a piece of html code that is combined with other blocks on several pages. Find the block that your site is using for the homepage slider. It has the name specified in the previous menu.

The purple <div> tags with 'class="item"' define that those sections are items in the slideshow.

2 Anatomy of the OWL Slideshow Here's a simple slide. It contains an image that is linked to another page in the store. The yellow <div> tag surrounds and marks the entire slideshow. There are currently two slides in it. The purple <div> tags with 'class="item"' define that those sections are items in the slideshow. In orange you can see the link and in red you can see the image that makes up the slide. The <a> tag turns everything inside of it into a link, including the picture. This creates a slideshow of two pictures where each slide has it's entire picture act as a link. This particular image is a simple color gradient with text already in the image.

3 Here's the code for an example slideshow, with 3 slides showing 3 different ways of linking content.

4 Simple Slideshow <div id="banner-slider-demo-5" class="owl-carousel owl-theme owl-bottom-narrow owl-banner-carousel"> url="wysiwyg/slideshowimages/testtext.png"}}) center center <a href="{{store url="technology.html"}}"> </a> url="wysiwyg/slideshowimages/testtext.png"}}) center center <a href="{{store url="web/unsecure/base_url"}}fashion.html"> </a> url="wysiwyg/slideshowimages/testtext.png"}}) center center <a href=" </a> That type of slide works for many purposes, however you may wish to customize your slides further. Here is an example of another slide with more content. The image used is only a color gradient, with all other content added by the website itself. This allows one to make a more interactive website. With more interactive content you can include countdown timers until your sale ends, support more languages with less image editing work, and far more.

In order to create this slideshow, there is more content inside of each slide. Again in yellow there is the <div> that defines the entire slideshow and the purple <div> tags that define each slide.

Extra content of this slide is defined in the blue area, with the link of the slide in orange.

5 In order to create this slideshow, there is more content inside of each slide. Again in yellow there is the <div> that defines the entire slideshow and the purple <div> tags that define each slide. Inside there are new green <div> tags that define our content. This example only uses one main group for content, but you can use as many as you want. Extra content of this slide is defined in the blue area, with the link of the slide in orange. You can add in-line CSS to modify your content, or you can use some of the tags that Porto already has defined such as the "btn btn-default" class on the links. Buttons You can specify that certain links should be buttons. By adding the "btn btn-default" class, this example uses the backend's prebuilt CSS rules to make buttons such as this one:

On slides like this example, the button will be the only linked content. Here in orange, the <a> tag creates a link.

Note that when doing so, the full address including "http://www." or "https://www." is required.

In this example, the following images are being used as a border around the main content of the slide.

6 On slides like this example, the button will be the only linked content. Here in orange, the <a> tag creates a link. Using curly braces you can define a path to a page on your website. You can also specify links to any content on the internet. Note that when doing so, the full address including " or " is required. Images You may insert other images into the slideshow. Generally speaking, it is preferable to use.png files with transparency. In this example, the following images are being used as a border around the main content of the slide. In this next example these images are placed in <span> tags inside of the innermost <div> tag that positions the content in the slide. The other slide in this example shows another way to place these tags, in a different <div> structure.

In this example, the bars are.png files in the Porto theme. You can upload your own images to use the same way you can import images for the slide itself.

7 In this example, the bars are.png files in the Porto theme. You can upload your own images to use the same way you can import images for the slide itself. This particular example uses behavior from the "border-top" and "border-bottom" classes, which will not always be required. Here's the final code for this slideshow. In order to adapt it to your own needs, you will need to link to your own uploaded images, change desinations of <a> links, change text to fit your promotions, and may need to reposition <div>s by changing the inline CSS.

8 Expanded Slideshow <div id="banner-slider-demo-5" class="owl-carousel owl-theme owl-bottom-narrow owl-banner-carousel"> url="wysiwyg/porto/homepage/slider/05/01n_bg.jpg"}}) center center <div class="container" style="position:relative"> <div class="content content-slide-1" style="position:absolute;z-index:1;top:36%;left:2.4%;text-align:center;"> <span class="border-top"><img src="{{media url="wysiwyg/porto/homepage/slider/05/border-top.png"}}"/></span> <div style="position:relative;z-index:4;"> <span style="color: #0e2f40;font-size:18px;">80% off for select items</span> <h2 style="color: #0e2f40;">fashion mega sale</h2> <a href="{{config path="web/unsecure/base_url"}}fashion.html" class="btn btn-default">shop now</a> <span class="border-bottom"><img src="{{media url="wysiwyg/porto/homepage/slider/05/border-bottom.png"}}"/> </span> url="wysiwyg/porto/homepage/slider/05/02n_bg.jpg"}}) center center <div class="container" style="position:relative"> <div class="content content-slide-2" style="position:absolute;z-index:1;top:33%;right:13%;text-align:center;"> <span class="border-top"><img src="{{media url="wysiwyg/porto/homepage/slider/05/border-top.png"}}"/></span> <span style="color: #0e2f40;font-size:23px;line-height:45px;">up to 70% off</span> <h2 style="color: #0e2f40;font-size:46px;">Women's Hats</h2> <a href="{{config path="web/unsecure/base_url"}}fashion.html" class="btn btn-default">shop now</a> <span class="border-bottom"><img src="{{media url="wysiwyg/porto/homepage/slider/05/border-bottom.png"}}"/></span>

Important installation note Back to Top. Homepage Overview Back to Top

Inspire: Important installation note Back to Top After installing and activating the theme, you need to navigate to Settings > Permalinks and click on the Save Changes button, even if you haven t made