Mise en page Features Intro 1 avec Purity III

Structure de mise en page

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

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.

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.

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

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.

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

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

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

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.

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

Configuration de la mise en page

Une des caractéristiques de mise en évidence du framework T3 est la configuration de mise en page visuelle.Vous pouvez voir la structure de votre mise en page lors de la configuration. Il y a 2 parties dans la configuration de mise en page: Layout Structure et Responsive Layout

Ouvrez le style où vous souhaitez affecter la mise en page. Cette disposition sera appliquée uniquement au style actuel.

Structure de la mise en page

La structure de mise en page vous permet de modifier la structure de votre mise en page.

Étape 1: Attribuer la position du module

Étape 2 : Définir le nombre de blocs dans les potions qui le permettent.(Spotlight)

Configuration de la mise en page Responsive

Étape 1: Sélectionnez la mise en page responsive à configurer

Étape 2: Désactiver la position du module que vous ne voulez pas afficher dans une mise en page spécifique

Étape 3: Redimensionner les positions de module dans le bloc de type Spotlight Pour les positions de module dans un autre type de bloc, vous ne pouvez pas les redimensionner.

Paramètres enregistrés

Les paramètres de votre configuration de mise en page ne sont pas enregistrées dans la base de données, mais dans des fichiers .ini situés dans templates\purity_iii\etc\layout.

Vous pouvez également configurer votre mise en page dans ces fichiers .ini mais nous ne le recommandons pas.