logo wide 2000x350
A front page slide show is one of the easiest ways to turn your static website into a dynamic website. Ideally, your slideshow should combine text with images. Sadly, most Joomla slideshows lack an easy way to add foreground text over background images. In this section, we will show you how to add a free Joomla slideshow which not only allows you to combine text over images, but to control both the color and font size of the text to match your slides and your website.

The structure of a modern website includes a header at the top of the page with an image and a slogan which tells the viewer what your website is about. Think of the header as being like the cover of your book. Below the header is a horizontal main menu which acts as a Table of Contents for your website much like nearly all books begin with a Table of Contents.

01

Below the main menu is a slideshow which has two important functions. First, because it is constantly changing, it brings life to your Front Page. Second, it can draw the viewer in to your website by offering a visual summary of why the viewer should spend more time reading the pages on your website. The slide images and text are a listing of the features and benefits of your website.

Putting a slide show on your HOME page is one of the best ways to get viewers to spend more time on your website. A slide show with its rotating images changes your website from a static site to a dynamic site. A slide show uses a series of images to create a visual story which will tell viewers what your website is all about and why they should recommend your website to their friends.

A slideshow that combines pictures with text is even more powerful. Below the Slideshow, there are typically three feature boxes which go directly to the three most important or unique features on your website. These three boxes often include a link which allows the viewer to sign up for your free newsletter or post a question on your community forum. These feature boxes are then followed by the main content of the HOME page. The first article on the HOME page is typically the Welcome Article:

03

In this article, we will describe how to add the Front Page slide show. We will begin by adding a free extension called Unite Nivo Slider – a free extension which is simple and allows easy addition of text in front of images. To download the Unite Nivo Slideshow, go to the Joomla extension directory,
http://extensions.joomla.org/

Scroll down the page and click on Photos and Images:
http://extensions.joomla.org/extensions/photos-a-images

Then click on Slideshows. Then click on Image JQuery Slideshows. A leading option is the Unite Nivo Pro. This is a commercial extension. But it is very cheap at only $12. To use a free simple version of this slideshow, scroll down the page to the Unite Nivo Slider. Click on Unite Nivo Slider to go to the extension page:
http://extensions.joomla.org/extensions/photos-a-images/slideshow/image-jquery-slideshow/20330

A slideshow is a great introduction to your website. The problem with most free Joomla slide show extensions is the difficulty for adding text over images. This simple extension is one of the best at combining text over images in a simple format. The Unite Nivo Slideshow is a responsive slider meaning it displays well even in mobile devices. The slideshow also has the ability to display inside of an article. Click on the DEMO to see the slideshow. Then click on Download to download the free slideshow component and module.

Next transfer these two extensions from your download folder to your website extensions folder. Then log into your Joomla Control Panel and go to Extensions, Extension Manager to upload the component and then the module to your website. Then click on Components, Unite Nivo Slider.

04

Click New to create a new slider.

05

Give the slideshow a title. Then click Save and Close.

06

Create your Slideshow Background Images
Unite Nivo Slider is a responsive slideshow in that the images automatically get smaller as the browser window gets smaller. But you should create the slideshow for the maximum width of your template. We have set the Design Control template to have a maximum width of 980 pixels.. Subtracting 20 pixels of padding on the right and left sides of the screen, this means our slideshow images should be about 940 pixels wide. Leave room for a small border on the sides and top and a bigger black border on the bottom to display readable text.


The height of each slide should be about 250 to 300 pixels. All slides should have exactly the same height and width. After saving your images be sure to optimize all of them by reducing the file size to under 100 KB each. Here is the first image in our slideshow. It is 940 pixel wide and 250 pixels tall.

07

How many slides should you create?
Studies indicate that most viewers will decide within one minute whether to continue viewing your website. The front page slide show is like the introduction to a book. You have one minutes or less to convince the viewer that your website is worth their time. Think of this as 60 seconds. At 6 seconds per slide, you have about 10 slides to present your case. It is actually less than this since your first slide is a Welcome Slide. If you had 9 sentences with 9 images to convince a viewer to invest more of their time visiting your website, what would be the 9 subjects? What are the 9 most unique and important aspects of your website? Be sure to end the slideshow with a “call to action” slide. For our Create Your Own Interactive Website, the most important reasons you should consider reading our website are...


Connecting People… Our goal is to change the world by making it easier for everyone to form online communities – using free open source tools!

Start with a Solid Foundation… We build our Interactive Website on the Joomla framework - one of the world's most secure and well organized web building platforms.

Build your website using simple interfaces… no need to waste time trying to learn complex computer programming.

We use a Flexible Template... that allows you to place any content in any location on any web page and change font and background colors with just the click of a button.

Add your own custom header image and slogan in a matter of minutes.

Share Your Ideas… Learn how to build your own community blog and connect it to Facebook.

Add a free responsive slideshow….with images that adjust to display correctly on any computer screen, any tablet or mobile device.

Organize Interactions… With an automated Feedback System to encourage questions & suggestions – and insure all comments are answered in a timely fashion!

Let's Get Started! Whether your goal is to build a local community or start your own online business, we can help you create your own interactive website!

After deciding on the text message of our slideshow, we need to create an image to act as a background image for these 9 sentences.

08

Upload Your Slideshow Images to the Joomla Media Manager
Once you have made your slideshow images, go to Content Media Manager and create a folder for your slides called frontpage_slideshow. Then upload your images to this slideshow. It is useful to include the dimensions of the images in the image file name. But remember that image file names must be lower case with no spaces. Here our images after being loaded into the media manager.


09

Create Slides and Add Text
Go to Components, Unite Nivo Slider and click on Edit Slides.


10

Click New to add your first slide.

11

Click New to add your first slide.

Give your slide a title. Then click Select to select the first 940x250 image from the slideshow folder in your Media Manager. Then if you have not already included text in the image, give the slide some descriptive text. Then click Save and Close. Repeat this process for your remaining slides.

Enable the Module to Display your Slideshow

Next, go to Extensions, Module Manager and open the Unite Nivo Slider Module.

12

Hide the slideshow module title. Select the module position you want the slideshow to appear in. We have used the Design Control Top Row 2 for our slideshow. Then go to the Menu Assignment tab and select the pages you want your slideshow to appear on. Assign the module to just appear on the HOME page.

13

Then go to the General Settings tab and set the width and height of the slideshow. Raise the pause time to 6000 to 9000 to slow down the transition between slides to once every 6 to 9 seconds. For custom effects, select a transition effect such as Fade.

Resolving Javascript Jquery Problems
This is a common problem with many Joomla slideshows in that you may have multiple instances of Javascript programs that may conflict with each other. You may see a loading circle when your website loads and the slideshow images might not load. To solve this problem, go to the module under Advanced Options there are two settings you need to try turning on and off: Include jQuery 1.7 js and Include nivo_slider.js in. The reason you don't see your slider is because of a js collision meaning your site is trying to load jquery twice. These two settings do the work 90% of the time.

If the slideshow still does not show for you, in the modules advanced settings enable the option to Add JS to body. This will load the necessary javascript after jquery is loaded, and the problem should be resolved. If there are any additional problems, enable the jQuery No Conflict option.

Click on the Advanced Tab. Set Jquery for Yes. Nivo_slider.js for Body and No Conflict Mode to No.

If the first slide shows, but not the rest, on the Module Edit, Appearance Settings tab, set Control Nav to True and Direction Nav to False.

Recheck all of the module settings. Clear your browser cache and reload the page. Then view your new slideshow. We now have a slide show in a module on our Home page.

14

In the next article, we will review how to add a slide show to an article. Keep reading to find out how it is done!