Uncategorised

Video

I include this module in the package. It's very simple and work only with the video from Vimeo or Youtube.

Thank you very much to peterambertravel to share this amazing video.

Note : I recommend you to choose a video with the format 16/9 to obtain a perfect result.

Note : I recommend you to choose Vimeo because there isn't any publicity.

How to configure the Video module ?

- Install the module "mod_video.zip"

- Go to the Vimeo page (or Youtube) of your video and click on the button "share"

- Copy the ID of your video (only the number between the character / and ? ).

- Edit the module "video" on your admin and choose the position "video". Paste the video ID in the parameters and publish your module.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Columns layout

In each article, you can divided your content in several columns. See the examples below and don't forget the CSS class "last" in your last container. Under 980 pixels, the fifth parts are displayed in single line. Under 768 pixels, all the parts are displayed in single line.

one-half

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

one-half last



<div class="one-half"> ... title, image, text ..... </div>

<div class="one-half last"> ... title, image, text ..... </div>

one-third

one-third last



<div class="one-third"> ... title, image, text ..... </div>

<div class="one-third"> ... title, image, text ..... </div>

<div class="one-third last"> ... title, image, text ..... </div>

one-third

two-third last



<div class="one-third"> ... title, image, text ..... </div>

<div class="two-third last"> ... title, image, text ..... </div>

one-fourth

one-fourth last



<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

one-fourth

two-fourth

one-fourth last



<div class="one-fourth"> ... title, image, text ..... </div>

<div class="two-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

three-fourth

one-fourth last



<div class="three-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

one-fifth

one-fifth last



<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

two-fifth

one-fifth last



<div class="two-fifth"> ... title, image, text ..... </div>

<div class="two-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

one-fifth

three-fifth last



<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="three-fifth last"> ... title, image, text ..... </div>

four-fifth

one-fifth last



<div class="four-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



<div class="testimonial-box">
<div class="testimonial-header">
<div class="testimonial-content">
 ... TEXT OF YOUR TESTIMONIAL ..... 
</div>
</div>
<div class="testimonial-footer">
<span>John Doe</span>, Google Inc.
</div>
</div>

Example with the column layouts

I use the CSS class "one-third" to divided the page in 3 parts. See more details here.

Animations

You can animate 16 parts of your design : almost module positions are available. The animation start when the part is visible.

I use only a few lines of javascript to when the part is visible. Except this, only use CSS3 animations. This is important because the CSS3 animations load faster than the same with JavaScript.
Of course, these animations work only on modern browsers (not with IE9-).

Is it possible to active an effect only on a specific page(s) ?

Yes it's possible. In Template manager, you must duplicate the template. Then, you can set an unique animation and assign this copy to your specific page with the option "Menu assignement".

Module position "Top"

Video

How to configure the Video module ?

Example No mask

Columns layout

one-half

Example of Title

one-half last

Example of Title

one-third

one-third

one-third last

one-third

two-third last

one-fourth

one-fourth

one-fourth

one-fourth last

one-fourth

two-fourth

one-fourth last

three-fourth

one-fourth last

one-fifth

one-fifth

one-fifth

one-fifth

one-fifth last

two-fifth

two-fifth

one-fifth last

one-fifth

one-fifth

three-fifth last

four-fifth

one-fifth last

Testimonials

Example with the column layouts

Animations

Is it possible to active an effect only on a specific page(s) ?

Screenhot of the first animations in Template manager