JoomlaUX JoomlaUX
Register

[Tutorial] How to create a beautiful slideshow with JUX Visio Slider

25 Aug, 2014

In this tutorial, I will help you create a good slider with JUX Visio Slider. You'll find in this article the way to Style Caption, Insert Image In Caption, Embed Video into Slide. This is a basic and easy to follow tutorial.

How to style caption: 

Unless your put up a plain-image slideshow, captions play a major role in your slide’s general visualization. Therefore it’s essential to style your caption with different font styles, colors, spacing…

JUX Visio Slider’s caption is powered with HTML, meaning that almost all HTML elements can be put in caption, such as image, video, bulleted list, table… and they can all be styled with HTML tags.

Using Google Fonts for caption:

It would require a lot of skills to create a good slide using only defautl HTML fonts  But how to use other fonts that are not available? Good news is that you can embed as many of them to your template, better yet, it’s super easy! (Please note that Embedding fonts can slower your site’s loading speed though, so try to limit the number of fonts embedded.) 

Here is the simplest way to add Web fonts to your template:

For instance, I want to add the font Ubuntu Mono from Goolgle Fonts: 
Find Ubunto Mono font, then Select Quick-use button:

In the "Choose the styles you want” section, check the styles you want to be available:

Same with the "Choose the character sets you want" section: 

Then scroll down to the "Add this code to your website" section. Copy the code in the box

Next, find your template folder, locate the file index.php, open it.

Now paste the code above in the head section (between <head> and </head>). We recommend you paste it right above the </head> tag. It should look like this:

 

Save and close file. That's all.

Remember that you need to embed font to both backend template and frontend template for it to display properly on both backend and frontend. 

Changing font family:

To change the font of your text, use this tag:

<p style="font-family: 'font name'; ">your text here</p>

Example: 
<p style="font-family: 'exo 2', sans-serif;">JUX VISIO SLIDER</p>

Changing font style

To have your text in bold or italic style, use the tag below:

<p><strong> your text here </strong></p>
<p><em> your text here </em></p>

Example:

<p><strong> JUX VISIO SLIDER </strong></p>
<p><strong> JUX VISIO SLIDER </strong></p>

Changing text size: 

You can change the size of your text using this tag:

<p style="font-size: 0px; ">your text here</p>

Example: 

<p style="font-size: 30px;">JUX VISIO SLIDER</p>

Changing text color:

You can change the color of your text using this tag:

<p style="color: color code;">your text here</p>

Example 

<p style="color: ##959595; "> JUX VISIO SLIDER </p>
<p style="color: brown; "> JUX VISIO SLIDER </p>

Changing font weight:

You can make your text thinner or bolder using this tag:

<p style=" font-weight: 0px; ">your text here</p>

Example 

<p style=" font-weight: 100px; "> JUX VISIO SLIDER </p>
<p style=" font-weight: 400px; "> JUX VISIO SLIDER </p>
<p style=" font-weight: bold; "> JUX VISIO SLIDER </p>

Positioning text/image inside caption:

You can position text/imaget inside caption using <margin> tag:

<p style=" margin-top: 0px; "> your text here </p>
<p style=" margin-bottom: 0px; "> your text here </p>
<p style=" margin-left: 0px; "> your text here </p>
<p style=" margin-right: 0px; "> your text here </p>
Or <padding> tag: 
<p style=" padding-top: 0px; "> your text here </p>
<p style=" padding-bottom: 0px; "> your text here </p>
<p style=" padding-left: 0px; "> your text here </p>
<p style=" padding-right: 0px; "> your text here </p>
 
By combining tags flexibly, you can bring out great effect, here is an example:
 
 
<p style="color: #959595; font-size:72px ; font-family: 'exo 2', sans-serif; margin-top:13px; font-weight: 100px;"><strong>JUX VISIO SLIDER</strong></p>
 
You don’t have to be a HTML expert to be able to make good captions, believe me wink Find more useful tags at:

Changing caption style:

The number of caption style in JUX Visio Slider is limited, although it doesn't mean that's just it. Using "background color" HTML attribute, you can create caption of all colors! 

<p style="background-color: color code; margin: 0px; border-radius: 0px; opacity: 0-1; padding: 0px">Your text here</p>

For example:

<p style="background-color: #F8E0EC; margin: 10px; border-radius: 15px; opacity: 0.6; padding: 25px">JUX Visio Slider</p>

You can try Gradient too if you want!

Inserting image in caption:

Do you know that you can create a multiple-layer slideshow with JUX Visio Slider? By inserting image in caption, this is utterly possible.

Simply use this tag below 

<img src="the url of your image"> 

For example:

<img src="http://i325.photobucket.com/albums/k396/ngoctb1/1_zpsac1cb87e.png">

You can also resize your image:

<img src="the url of your image" style="witdth: 0px; height: 0px"> 

For example

<img src="http://i325.photobucket.com/albums/k396/ngoctb1/1_zpsac1cb87e.png" style="width: 450px; height: 450px">
Now your image serves as a caption, that means you can position it, choose effect, set delay… as you do with a caption. 
If you have many images overlapping, don’t forget to set z-index value for them. The one with higher z-index will be on top.

Embedding video into slide: 

There are 2 options: 
1.Embed a full-sized video 
2.Embed a frame-size video 

1. For the 1st option, JUX Visio Slider supports embedding video by URL from Youtube and Vimeo, just paste the URL of the video into the video box like this.

Copy Youtube link

Or Vimeo link

Paste it in the Video embedding box. Click Add button. Voilà!

2. As for the 2nd option, you can embed video into caption using <iframe> tag
 

Copy this code from Youtube

Or this from Vimeo 

Paste the entire code into caption box. Done!

Well, I think that is all the basics. In case that you have other useful tips, please feel free to let us know by commenting below. We would really appreciate your contribution. 
in Tips & Guide
by
Read 7824 times
Rate this item
(0 votes)

Latest from

Login to post comments
More in this category: « [Tips] Creating an effective slider: 3 things you need to know [Tutorial] How to display Facebook, Twitter and Instagram into Jux Social Stream »
back to top

Latest Posts

Categories