Zoo Item Wall

+++++++++++++++++

The ultimate Zoo Content Module

Slideshow Examples


Slideshow example with transition features.

The demos below are based on our simple tag system. Simply add the tag calls for the content in your own custom html to get the following design!


<a href="{link}">
<div class="npslideshow1">
<img src="{teaserimageurl}">
<div class="npslideshow1_txt">
<h2>{title}</h2>
<p>{text_1}</p>
</div>
</div>
</a>


Featured Slideshow Example : Fade Effect

The JoomlaXTC Zoo Item Wall can create mutli-effect slideshows.






Featured Slideshow No Text Example : Slide Effect

Create multi-page slides with CSS styled control with the {pages} tag.



 1  2  3  4 




Slide Demos 2


Content Slideshows with multiple effects




Slideshows with Buttons

Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. Zoo Item Wall offers over 50 different button styles.


Slide Demos 3


Featured Slideshow 2 Example : Slide Effect

Content slideshows for full width sites or large areas


Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more



Static Text Slideshow Example

Create slideshows with static text overlays.



STATIC TEXT

Slideshow Example

Bacon ipsum dolor amet leberkas drumstick kielbasa chicken cupim.

Frankfurter capicola pork loin, biltong drumstick strip steak swine turducken kielbasa.


MORE INFO



Slider Demos


Scrolling content sliders


Slider One Example: Auto Scroll

Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. Zoo Item Wall offers over 50 different button styles.



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Bibendum wisi neque

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dis due monec diam

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dui dis donec diam

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Elit maecenas rhoncus

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Etiam vel sed potenti

Etiam vel sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Maecenas elit rhoncus

Maecenas elit rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Vel etiam sed potenti

Vel etiam sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...




Slider Two Example: Click for Scroll



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Bibendum wisi neque

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dis due monec diam

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dui dis donec diam

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Elit maecenas rhoncus

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Etiam vel sed potenti

Etiam vel sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Maecenas elit rhoncus

Maecenas elit rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Vel etiam sed potenti

Vel etiam sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...




Slider Three Example

Add CSS3 effects to the slides for a friendly interactive design.



  • Etiam vel sed potenti

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Etiam vel sed potenti
  • Maecenas elit rhoncus

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Maecenas elit rhoncus
  • Vel etiam sed potenti

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Vel etiam sed potenti
  • Aenean ut tem libero

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Aenean ut tem libero
  • Aptent ahet aptent

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Aptent ahet aptent
  • Bibendum sisi teque

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Bibendum sisi teque
  • Dis due monec siam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Dis due monec siam
  • Sui dis sonec diam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Sui dis sonec diam
  • Dlit maecenas

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mih...


    Read more
    Dlit maecenas



Slider Four Example

Add styled pages with a little css and the {pages} tag.



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Bibendum wisi neque

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dis due monec diam

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Dui dis donec diam

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Elit maecenas rhoncus

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Etiam vel sed potenti

Etiam vel sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Maecenas elit rhoncus

Maecenas elit rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Vel etiam sed potenti

Vel etiam sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aenean ut sem libero  (2)

Aenean ut sem libero (2)

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aenean ut sem libero  (3)

Aenean ut sem libero (3)

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

Aptent amet aptent (2)

Aptent amet aptent (2)

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing...

 1  2  3 




Grid Examples


Zoo Item Wall gives you control over columns and rows to create stylish article grids.

Grid One Example






Grid Two Example



Etiam vel sed potenti

2011-11-10
Read more

Maecenas elit rhoncus

2011-11-10
Read more

Vel etiam sed potenti

2011-11-10
Read more

Aenean ut tem libero

2011-11-10
Read more

Aptent ahet aptent

2011-11-10
Read more

Bibendum sisi teque

2011-11-10
Read more



Grid Three Example



Our Services

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Our Services

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Our Services

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Our Services

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Our Services

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Our Services

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...




Grid Four Example



Etiam vel sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete.

Read more
Maecenas elit rhoncus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

Read more
Vel etiam sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

Read more
Aenean ut tem libero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

Read more

Blog Examples


Content layouts perfect for Blogs

Blog One Example

Single column blog with CSS styled text overlays and date badge



10 Nov

Etiam vel sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi ill...

Read more
10 Nov

Maecenas elit rhoncus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi ill...

Read more
10 Nov

Vel etiam sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi ill...

Read more
10 Nov

Aenean ut tem libero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi ill...

Read more
10 Nov

Aptent ahet aptent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi ill...

Read more

Blog Two Example

The {language} tag uses the core Joomla read more for multi language sites.



Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more



Blog Three Example

Multiple columns and rows example with CSS styled date badges.






Blog Four Example

Create cutting edge blog posts with your own custom HTML and CSS or use these pre-packaged template designs



2011-11-10

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
2011-11-10

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
2011-11-10

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
2011-11-10

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more



Blog Five Example

Multiple columns and rows example.



Aenean ut sem libero

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

Aptent amet aptent

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

Bibendum wisi neque

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

Dis due monec diam

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more

News Examples


Content layouts perfect for News

News One Example

Use the {mainarea} and {morearea} to create two different layouts at once.



Aenean ut sem libero

Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Aptent amet aptent

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Bibendum wisi neque

Bibendum wisi neque

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Dis due monec diam

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Dui dis donec diam

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Elit maecenas rhoncus

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Etiam vel sed potenti

Etiam vel sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Maecenas elit rhoncus

Maecenas elit rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Vel etiam sed potenti

Vel etiam sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




News Two Example

Multiple columns and rows example.



Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...




News Three Example

Multiple columns and rows example with CSS article wraps.



Aenean ut sem libero

Aenean ut sem libero

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
Aptent amet aptent

Aptent amet aptent

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
Bibendum wisi neque

Bibendum wisi neque

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
Dis due monec diam

Dis due monec diam

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
Dui dis donec diam

Dui dis donec diam

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more
Elit maecenas rhoncus

Elit maecenas rhoncus

2011-11-10

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consect...

Read more



News Ticker Example

Use the mult-page slider in a single column and row to create newtickers and more.







Tooltip Examples


CSS3 tooltips in multiple directions

Tooltip One Example

Top tooltip using the {title} tag to display the article title in the tooltip.






Tooltip Two Example

Right tooltip using the {title} tag to display the article title in the tooltip.






Tooltip Three Example

Left tooltip using the {title} tag to display the article title in the tooltip.






Tooltip Four Example

Bottom tooltip using the {title} tag to display the article title in the tooltip.






PopUp One Example

Create Modal pop ups using the core Bootstrap modal to open the article intro in a modal.






Video PopUp Example

The video pop up is created by adding a video to the Zoo article.







List Examples







Hero Examples


Great call to action examples

Hero Example



Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida v...




Hero Example 2



Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida v...

Continue Reading More Like This




Creative Examples


Not your ordinary content layouts

Hexagon Example

Use CSS3 to create unique image styling and layouts.






Category Example

Use the {mainarea} and {morearea} to create featured layouts.






Category Example 2

A tabbed filtering layout. Simply add the category ID's for the categories in the mark up and CSS.



  • Dis due monec siam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Bibendum wisi neque

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Maecenas elit rhoncus

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Etiam vel sed potenti

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Aenean ut tem libero

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Aptent amet aptent

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Elit maecenas rhoncus

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Etiam vel sed potenti

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Bibendum sisi teque

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Aptent ahet aptent

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Dui dis donec diam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more
  • Sui dis sonec diam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Du...


    Read more



Testimonial Example

A stylish Testimonial slider with CSS3 page buttons.



Etiam vel sed potenti

Etiam vel sed potenti

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete."

Maecenas elit rhoncus

Maecenas elit rhoncus

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt."

Vel etiam sed potenti

Vel etiam sed potenti

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt."

 1  2  3 



Staff Example

CSS3 styled articles perfect for stylish layouts



Etiam vel sed potenti

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."

Etiam vel sed potenti

Maecenas elit rhoncus

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."

Maecenas elit rhoncus

Vel etiam sed potenti

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."

Vel etiam sed potenti

Aenean ut tem libero

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac..."

Aenean ut tem libero




Staff 2 Example

Use the {mainarea} and {morearea} to create featured layouts.






Timeline Example

A CSS3 styled timeline using content



2011-11-10

Etiam vel sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac...

2011-11-10

Maecenas elit rhoncus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac...

2011-11-10

Vel etiam sed potenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac...

2011-11-10

Aenean ut tem libero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, plac...




Tabbed Example

Use the {mainarea} and {morearea} to create multiple layouts per tab.



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more

Accordion Example

Use the {mainarea} and {morearea} to create multiple layouts per tab.



Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read More
Aptent amet aptent Aptent amet aptent
Bibendum wisi neque Bibendum wisi neque
Dis due monec diam Dis due monec diam
Dui dis donec diam Dui dis donec diam
Elit maecenas rhoncus Elit maecenas rhoncus

Bootstrap Examples


Examples using the core Bootstrap classes

Hero Example



Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more




Thumbnail Example



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more

Bibendum wisi neque

Bibendum wisi neque

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more

Dis due monec diam

Dis due monec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Dui dis donec diam

Dui dis donec diam

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Elit maecenas rhoncus

Elit maecenas rhoncus

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more

Etiam vel sed potenti

Etiam vel sed potenti

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Read more


Hover Examples


CSS3 hover style examples

Hover Example 1



Aenean ut sem libero

Aenean ut sem libero

2011-11-10

Aptent amet aptent

Aptent amet aptent

2011-11-10




Hover Example 2



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 3



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 4



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 5



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 6



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 7



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.




Hover Example 8



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.


Hover Examples 2


css3 hover style examples

Hover Example 9



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 10



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 11



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 12



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 13



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 14



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 15



Aenean ut sem libero

Read more

Aptent amet aptent

Read more

Bibendum wisi neque

Read more

Dis due monec diam

Read more




Hover Example 16



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more
Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more



Hover Example 17



Aenean ut sem libero

Aenean ut sem libero

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more
Aptent amet aptent

Aptent amet aptent

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...

Read more



Hover Example 18






Hover Example 19






Hover Example 20



Aenean ut sem libero

Aenean ut sem libero

Aptent amet aptent

Aptent amet aptent

Bibendum wisi neque

Bibendum wisi neque

Dis due monec diam

Dis due monec diam




Hover Example 21



Etiam vel sed potenti

Etiam vel sed potenti

Maecenas elit rhoncus

Maecenas elit rhoncus

Vel etiam sed potenti

Vel etiam sed potenti

Aenean ut tem libero

Aenean ut tem libero

Aptent ahet aptent

Aptent ahet aptent

Bibendum sisi teque

Bibendum sisi teque





ALL TAGS


All Tags available for use in your custom mark up
This template shows the different place holder tags you can use, to include in your own templates just surround them with {} characters:

Module template tags:

Tag Name Tag Content
mainarea Displays the selected elements using the corresponding element template tags for each one.
leftbutton
rightbutton
pages  1 


Element template tags (all tags work on "more" area as well):

Tag Name Tag Content
authorjxtcadmin
author_1
author_2
authorprofile
avatar
category_imagehttp://demo.joomlaxtc.com/extensions3/images/slide3.jpg
categoryid2
categorynameOur Services
categoryurl/extensions3/component/zoo/category/our-blog?Itemid=1385
comments0
date Y-m-d2011-11-10
date2011-11-10
hits2960
id22
imageAenean ut sem libero
imageurlhttp://demo.joomlaxtc.com/extensions3/images/1.jpg
tokenRead more
link/extensions3/component/zoo/item/aenean-ut-sem-libero-amet-aliquam?Itemid=1385
link_1
link_2
moddate Y-m-d2016-02-02
moddate2016-02-02
nameAenean ut sem libero
rawtext_1

Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam eu accumsan nam gravida vulputate sed. Dolor urna integer consectetuer. Quaesita enim virtus est non quae.

rawtext_2

This article was created with a wysiwyg editor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

This is another h3 title line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

  • List example line 1
  • Example 2 of a list item
  • 3rd list item
  • list item #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Duo Reges: constructio interrete. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Prioris generis est docilitas, memoria; Item de contrariis, a quibus ad genera formasque generum venerunt.

Photo Gallery

 

relateditem_1
relateditem_2
subtitle
teaserimageAenean ut sem libero
teaserimageurlhttp://demo.joomlaxtc.com/extensions3/images/1_th.jpg
text_1Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed...
text_2This article was created with a wysiwyg editor Lorem ipsum dolor sit amet, cons...
videourlhttps://www.youtube.com/watch?v=b-BrL7yX33c