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.

Step 1 : Settings in Template manager

The video module must be above the Content box and use the same psotion as the Standard image. So go to the Template manager and "Duplicate" the template.
Edit the copy and choose the menu item of your video in the section "Menu assignment". Then, in the section "General" choose "Image --> Position of your image in large screen" : "On the Top". Like that, the position of your video will be correct (above the Content box).

Step 2 : 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 "image". Paste the video ID in the parameters and in Advanced options, add the Module class suffix "video".

Step 3 (Optionnal) : Is it possible to display the Video without the Content box ?

Yes it's possible. This is the procedure :

First you must create a link for your page. In "Article manager", create a new article and keep the content empty. Then, you create a new menu item with the type "article --> single article" and select your empty article.
Now you have your new menu item and your new page but you want hide the Content box. In Module manager, you create a new module with the type Custom HTML. Choose the position "no_content" and in menu assignment, choose "only your new menu item". It's very important because when this module position is published, the content box isn't loaded.
Its's all !!

Example No mask

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".

Video

Step 1 : Settings in Template manager

Step 2 : The Video module

Step 3 (Optionnal) : Is it possible to display the Video without the Content box ?

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