category blog

Example No mask

Détails: Catégorie : Uncategorised; Publication : 27 janvier 2017; Affichages : 468

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.

Testimonials

Détails: Catégorie : Uncategorised; Publication : 18 janvier 2017; Affichages : 1043

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

Détails: Catégorie : Uncategorised; Publication : 18 janvier 2017; Affichages : 754

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

Screenhot of the first animations in Template manager

Columns layout

Détails: Catégorie : Uncategorised; Publication : 18 janvier 2017; Affichages : 1322

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>

Example with Slideshow

Détails: Catégorie : Uncategorised; Publication : 18 janvier 2017; Affichages : 613

You can display a slideshow easily. Install my free module "JoomSpirit Slider".

Choose the module position "image" to display the slideshow on the top of the Content box (inside the box) or the module position "full_image" to display the slideshow above the Content box.

Page 2 sur 7

Example No mask

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

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

Example with Slideshow