Tutoriels sur Joomla et la création de site

Configuration des modules exemple de démo sur Purity III

La section comprend la configuration des modules utilisés dans la démo de PURITY III: modules Joomla par défaut et modules peronnalisés HTML.

(les titres de modules sont laissés volontairement en anglais afin de les retrouver aisément dans la démo)

1. Sample Banner 1 (bannière exemple)

• Module type: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<a href="#" title="Sample banner"><img class="img-responsive" src="/images/joomlart/banners/sb-1.jpg" alt="Sample banner" /></a>

 

2. Custom tabs (onglets personnalisés)

Pour avoir mêmes onglets que dans notre démo, veuillez suivre les instructions.

Etape 1: créer un module «Most read »

• Type de module: Catégorie articles

• Position du module: tab-1

• Suffixe de module: NON UTILISÉ

Étape 2: Créer module "Popular post"

• Type de module: Catégorie articles

• Position du module: tab-2

• Suffixe de module: NON UTILISÉ

Étape 3: créer le module HTML personnalisé pour déclarer les modules "Most Read" et "Popular post" dans l'onglet.

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#popular" data-toggle="tab">Latest post</a></li>
<li><a href="#latest" data-toggle="tab">Most read</a></li></ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="popular"></div>
<div class="tab-pane" id="latest"></div>
</div>

Réglage du module HTML personnalisé

3. Login Module (Module de connexion)

• Type de module: login

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ
  

Aperçu du backend : 

4. Slideshow

• Type de module: HTML personnalisé

• Position du module: slideshow

• Suffixe de module: NON UTILISÉ

Code HTML

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
     <img src="/images/joomlart/slideshow/sl-1.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>Your perfect starting template, Purity III</h2>
      <p>Either it's your first time with Joomla or you are a developer already, Purity III won't let you down.</p>
     </div>
    </div>

    <div class="item">
      <img src="/images/joomlart/slideshow/sl-2.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>This is the best FREE Joomla 3 template!</h2>
      <p>We have drunken too much of the best… but this repsonsive Joomla template truly is, and IT'S FREE!</p>
     </div>
    </div>
    <div class="item">
      <img src="/images/joomlart/slideshow/sl-3.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>The next generation of Purity series</h2>
      <p>Sophisticated in Design, Brilliant in Features. That's how we define Purity Series.</p>
     </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

</div>

 

4. Team members (membres de l'équipe)

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<div class="media">
  <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-1.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a>
  <div class="media-body">
  <h4 class="media-heading">Scott Singleton</h4>
    <strong><small>CEO Director</small></strong><br />
    <small><a href="mailto:ceo@your-domain.com">

</a></small> </div> </div> <div class="media"> <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-2.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a> <div class="media-body"> <h4 class="media-heading">Marie Hall</h4> <strong><small>Managing Director</small></strong><br /> <small><a href="mailto:sale@your-domain.com"></a></small> </div> </div> <div class="media"> <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-3.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a> <div class="media-body"> <h4 class="media-heading">Mamie Ray</h4> <strong><small>Sales manager</small></strong><br /> <small><a href="mailto:ceo@your-domain.com"></a></small> </div> </div> <div class="media"> <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-4.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a> <div class="media-body"> <h4 class="media-heading">Johnny Payne</h4> <strong><small>Creative director</small></strong><br /> <small><a href="mailto:ceo@your-domain.com"></a></small> </div> </div>

 

5. Our partners (nos partenaires)

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<img src="/images/joomlart/corporate/partners.gif" alt="Sample image" class="image-reponsive" />

 

6. Blog Categories (blog de catégories)

• Type de module: Catégories d'Articles

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Aperçu dans le backend :

7. Archived Articles (articles archivés)

• Type de module: Articles archivés

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Aperçu dans le backend :

8. Blog Tags (tags populaires)

• Type de module: tags populaires

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

9. Masthead

image  Vous pouvez activer le masthead pour tout menu. Dans le paramètre de menu, accédez à l'onglet Affichage de la page pour ajouter un titre dans Masthead title et une description dans Masthead Slogan.