Mise en page Features Intro 2

Mise en page Features Intro 2 sur Purity III

position/structure de la mise en page

features intro 2

Construire une page Features Intro 2

Important:

Toutes les étapes sur la manière de créer une page Features Intro 2 sont les mêmes que pour la page magazine. Vous pouvez suivre les instructions détaillées ci dessus : Comment construire la page du magazine.

  • Étape 1: Créer style "Features Intro 2"

  • Étape 2: Affecter la mise en page "Features Intro 2" au style «Features Intro 2»

  • Étape 3: Créer un lien de menu «Features Intro 2»

  • Étape 4: Assigner le style « Features Intro 2 » à l'élément de menu « Features Intro 2 »

réglage du menu Features Intro 2

Type de lien de menu : xLayout-Features Intro

Paramètres détaillés

features intro2 1

Configuration de Module

Remarque:

La mise en page features-intro-2 n'a pas de contenu com_content, donc quel que soit le type de son menu, sa disposition ne changera pas. Sur le site de démonstration, le contenu principal de la page Features Intro 2 est issu des modules affectés à la position: features-intro-2.

Masthead

  • Type de module: Custom HTML
  • Position du module: masthead
  • Suffixe de module: row-feature-primary

Code HTML

<div class="jumbotron jumbotron-primary masthead btn-action">  <h1>Hello, I'm Purity III</h1>  <p>Now back and way cooler.</p>  <p><a href="http://bit.ly/purity_iii" class="btn btn-primary btn-lg"> Check me out</a></p></div>

Feature 1

  • Type de module: Custom HTML
  • Position du module: features-intro-2
  • Suffixe de module: NON UTILISÉ

Code HTML

<div class="text-center"><div class="item-image"><img class="img-responsive" pagespeed_url_hash="557298203" alt="T3 Framework" src="/images/joomlart/intro-page/fullresponsive.png"></div> <div class="col-md-4">  <h3>The Perfect Starting Point</h3>  <p>Purity III is a GREAT starter theme for any Joomla lovers. It allows YOU to get started in minutes, and highly versatile to fit in any type of projects</p> </div> <div class="col-md-4">  <h3>Joomla 3 Native</h3>  <p>Purity III supports Joomla 3 at core. The sleek look, clean code and flat design sets it stand out and guarantee to capture anyone's attention</p></div> <div class="col-md-4">  <h3>Easy to Customize</h3>  <p>Purity III is extremely flexible to customize. Thanks to the powerful T3 Framework, which makes all the impossibilities possible</p></div> </div>

Compatible Extensions

  • Type de module: Custom HTML
  • Position du module: features-intro-2
  • Suffixe de module: NON UTILISÉ

Code HTML

<header class="jumbotron">  <h2>Highly Compatible</h2>  <p>Purity III is highly compatible with most of the 3rd party Joomla extensions</p></header>    <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/compatible/easyblog">      <img src="/images/joomlart/compatible-extension/easyblog.png" alt="Easy Blog" />    </a>  </div>   <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/compatible/easysocial">      <img src="/images/joomlart/compatible-extension/easysocial.png" alt="easysocial" />    </a>  </div>   <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/compatible/discussions">      <img src="/images/joomlart/compatible-extension/easydiscuss.png" border="0" alt="easydiscuss" />    </a>  </div>    <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/forum/index">      <img src="/images/joomlart/compatible-extension/kunena.png" border="0" alt="Kunena" />    </a>  </div>   <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/compatible/jomsocial">      <img src="/images/joomlart/compatible-extension/jomsocial.png" border="0" alt="JomSocial" />    </a>  </div>   <div class="col-xs-6 col-md-4">    <a class="thumbnail" href="/index.php/compatible/mijoshop">      <img src="/images/joomlart/compatible-extension/mijoshop-logo.png" border="0" alt="mijoshop" />    </a>  </div> <div class="wrap btn-actions text-center">    <a class="btn btn-primary btn-lg" role="button" href="http://bit.ly/purity_iii">More detail?</a>  </div>

 

Supports multiple layouts

  • Type de module: Custom HTML
  • Position du module: features-intro-2
  • Suffixe de module: NON UTILISÉ

Code HTML

<header class="jumbotron"><h2>Supports Multiple Layouts</h2><p>8 layouts with dynamic and flexible grids</p></header> <div class="gallery">   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="magazine layout" href="/index.php/layout/new-layouts/magazine">        <img pagespeed_url_hash="2579736203" alt="" src="/images/joomlart/supported-layout/magazine.png" class="img-responsive">      </a>      <h4 class="text-center">Magazine Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="Coperate layout" href="/index.php/layout/new-layouts//corporate">          <img pagespeed_url_hash="2874236124" alt="" src="/images/joomlart/supported-layout/corporate.png" class="img-responsive">      </a>      <h4 class="text-center">Corporate Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="blog layout" href="/index.php/layout/new-layouts/blog">        <img pagespeed_url_hash="3168736045" target="_blank" alt="" src="/images/joomlart/supported-layout/blog.png" class="img-responsive">      </a>      <h4 class="text-center">Blog Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="features intro 1" href="/index.php/layout/new-layouts/features-intro">        <img pagespeed_url_hash="3757735887" alt="" src="/images/joomlart/supported-layout/features_1.png" class="img-responsive">      </a>      <h4 class="text-center">Features Intro 1 Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="features intro 2" href="http://joomla-templates.joomlart.com/purity_iii/">        <img pagespeed_url_hash="4052235808" alt="" src="/images/joomlart/supported-layout/features_2.png" class="img-responsive">      </a>      <h4 class="text-center">Features Intro 2 Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="portfolio layout" href="/index.php/layout/new-layouts/portfolio">        <img pagespeed_url_hash="3463235966" alt="" src="/images/joomlart/supported-layout/portfolio.png" class="img-responsive">      </a>      <h4 class="text-center">Portfolio Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="" href="/index.php/layout/new-layouts/glossary">        <img alt="" src="/images/joomlart/supported-layout/glossary.png" class="img-responsive">      </a>      <h4 class="text-center">Glossary Layout</h4>    </div>  </div>   <div class="col-xs-6 col-md-3">    <div class="thumbnail">      <a target="_blank" title="" href="/index.php/layout/new-layouts/home-classic/3-columns">        <img alt="" src="/images/joomlart/supported-layout/classic_layout.png" class="img-responsive">      </a>      <h4 class="text-center">Classic Layout</h4>    </div>  </div> </div>

 

Why Purity III?

  • Type de module: Custom HTML
  • Position du module: features-intro-2
  • Suffixe de module: NON UTILISÉ

Code HTML

<header class="jumbotron"><h2>Why Purity III?</h2><p>A Free Responsive Joomla 3 Template that no one can resist</p></header> <div class="text-center"> <div class="col-md-3">  <p><img pagespeed_url_hash="932791188" alt="Responsive" src="/images/joomlart/banners/responsive-icon.png" /></p>  <h3>Responsive</h3>  <p>Purity III is a fully responsive Joomla template. It looks amazingly beautiful in all screen sizes: from a wide screen desktop to tablet & mobile devices</p></div> <div class="col-md-3">  <p><img pagespeed_url_hash="2048194936" alt="Compatibilities" src="/images/joomlart/banners/html5-icon.png"></p>  <h3>Compatibilities</h3>  <p>Purity III is compatible with most of the popular 3rd party Joomla extensions, such as: EasySocial, Kunena, JomSocial, Mijoshop, etc</p></div> <div class="col-md-3">  <p><img pagespeed_url_hash="1985577692" alt="Bootstrap 3" src="/images/joomlart/banners/bootstrap-icon.png"></p>  <h3>Bootstrap 3</h3>  <p>Purity III embraces Bootstrap 3 at core, meaning it also supports Font Awesome 4, as well as all the cool features in Bootstrap 3 Framework</p></div> <div class="col-md-3">  <p><img pagespeed_url_hash="1616445301" alt="SEO" src="/images/joomlart/banners/seo-icon.png"></p>  <h3>SEO</h3>  <p>Great design impresses your visitors, but SEO friendly codes bring visitors, drive more <a target="_blank" href="http://www.google.com">Googlers</a> to yours while you're sleeping</p></div> </div>

Want to be the first to try our Purity III

  • Type de module: Custom HTML
  • Position du module: features-intro-2
  • Suffixe de module: row-feature-primary

Code HTML

<div class="container jumbotron masthead" style="margin:0;">  <span class="section-arrow-alt"></span>  <p>Want to be the first to try our Purity III...</p><div class="btn-actions">    <a class="btn btn-success btn-lg" role="button" href="http://bit.ly/purity_iii">Download <span class="hidden-phone">Purity III</span></a>  </div></div>

Prise en charge de plusieurs mises en page