Les mises en page en détail

Explorez le système de mise en page de Purity III

Mise en page Features Intro 1 avec Purity III

Structure de mise en page

features intro 1

Construire une page Features Intro 1

Important:

Toutes les étapes sur la manière de créer une page Features Intro 1 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 1"
Étape 2: Affecter la mise en page "Features Intro 1" au style «Features Intro 1»
Étape 3: Créer un lien de menu «Features Intro 1»
Étape 4: Assigner le style « Features Intro 1 » à l'élément de menu « Features Intro 1 »

réglage du menu Features Intro 1

Type de lien de menu : xLayout-Features Intro

Paramètres détaillés

features intro1 1

Configuration des articles

Les articles utilisés dans la mise en page peuvent être configurés pour avoir des styles différents. Vous pouvez définir l'alignement d'image ou ajouter une classe pour styler les articles.

Aligner l'image de l'article

Pour chaque article, vous pouvez définir l'alignement de l'image de l'article dans page liste en suivant ces étapes : Ouvrez le panneau d'édition de l'article, dans l'onglet Images et liens, définir l'alignement de l'image à droite ou à gauche.

features intro1 2

Classes prises en charge pour les articles

Les articles dans la page Features Intro 1 ont des styles différents. Vous pouvez utiliser les classes supportés par défaut ou ajouter de nouveaux styles.

features intro1 3

Classes prises en charge par défaut

row-feature-narrow row-feature-primary row-feature-alt

Pour ajouter de nouvelles classes, Ouvrez le panneau d'édition de l'article,, dans l'onglet Extra Fields ajouter vos classes dans la case Extra Class

features intro1 4

Configuration du Masthead

Masthead est traduit littéralement par tête de mât, il s'agit d'une position de mise en avant dans la mise en page.

Pour avoir le même masthead que notre démo, vous devrez créer un module Custom HTML et l'assigner à la position masthead.

features intro1 5

Position du module: masthead
Suffixe de module : row-feature-primary

code HTML :

<div class="jumbotron jumbotron-primary masthead btn-action">  <div class="col-md-6" align="left">    <h1>I'm Purity III</h1>    <p>The best free Joomla template that you ever need.</p>    <div class="btn-action" style="margin-bottom: 20px;"><p><a href="http://bit.ly/purity_iii" class="btn btn-success btn-lg">Download Now</a></p></div>  </div>   <div class="col-md-6">    <div class="video-wrapper">      <iframe width="560" height="315" seamless="seamless" src="//www.youtube.com/embed/KSK2OR9pEUY?modestbranding=1&amp;;showinfo=0&amp;;autohide=1&amp;;rel=0&amp;;hd=1" allowfullscreen=""></iframe>    </div>  </div></div>

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

Lire → Mise en page Features Intro 2

Mise en page Glossary dans Ja Purity III

Important:

La page Glossaire utilise la disposition par défaut donc vous n'avez pas besoin de créer le style de la page glossary. Vous devez attribuer le bon type de menu du menu "Glossary". Et veuillez vous assurer d'assigner "Glossary layout" dans l'onglet "Add-ons" du gestionnaire de templates.

Paramètre Assignation Mise en page Glossary

Aller à : Extensions > Template et ouvrez le style de template Purity III default, dans l'onglet "Add-ons" trouvez le champ "layout_glossary" et affecter la mise en page Glossary dans le champ, veuillez bien regarder la capture d'écran ci-dessous.

glossary1

Paramètre de menu Glossary

Tyoe de lien de menu: xLayout-Grossary

Paramètres détaillés

Apparence en Front-end

L'Article affiché en popup

Page 3 sur 4