12 rue de Blénod, 54700 Maidières +33 6 87 42 95 30 Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. Lun-Ven: 8h/12h 14h/17h

Typographie

Typos pour construire votre contenu

Affichage de la typo

Obtenir l'affichage de la typographie dans votre site

Purity III fournit une variété de typo qui vous permettra d'économiser votre temps pour construire votre contenu et de lui donner fière allure. Nous avons mis toutes les typos utilisées pour construire le Contenu Purity III dans une page typo dans le site exemple (Tous les éléments de menu sous l'élément de menu typographie).

typo 1

Voir les exemples de TYPO

Remarque :

Purity III intègre Bootstrap 3 donc il prend en charge toutes les typos Bootstrap 3.

Etape 1: obtenir le balisage de typo

Il y a plusieurs façons d'obtenir le balisage de typo.

#1: en utilisant Firebug

typo 2

 

#2: en utilisant Webdevelopper pour firefox

typo 3

 

#3: en utilisant le package quickstart

Joomlart fournit un package quickstart qui inclut des exemples de données de telle sorte que lors de l'installation, votre site sera identique à la démo de Purity III. Lorsque vous avez le site installé, ouvrez juste une session back-end et allez chercher les balises de typo d'articles, ou de module personnalisé HTML.

 

Étape 2: ajouter des balises de typo à votre contenu

Vous pouvez ajouter du balisage de typo au champ de contenu de l'article ou au module HTML personnalisé.

typo 4

 

Désactiver l'éditeur :

Lorsque vous ajoutez le code HTML au contenu - article, veuillez vous assurer que vous désactivez l'éditeur. Allez dans Sytème >> configuration, choisir Editeur – non WYSIWYG dans le champs Éditeur par défaut.

typo 5

 

Ou directement depuis l'éditeur HTML, basculer en mode HTML.

typo 6

 

Étape 3: obtenir la typo affichée en première page

Créer un lien de menu, affecter l'article auquel nous avons ajouté le balisage de typo HTML.

 

Pages de typographie prises en charge

Pages de typographie prises en charge dans le tempalte purity III

La typo pré-fabriquée vous permettra d'économiser du temps lorsque vous générez votre contenu de site.

Page Our Team

Code HTML

    <div class="our-team">
      
     <div class="page-header">
       <h1 class="text-center">Welcome to our team</h1>
     </div>
      
     <p class="lead text-center">
     Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum.
     </p>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-1.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Sean Thomas</h3>
           <p>Senior Designer</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-2.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Bennie Moran</h3>
           <p>Developer</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-3.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Nicholas Mitchell</h3>
           <p>Developer</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-4.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Nicholas Mitchell</h3>
           <p>Designer.</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-5.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Sean Thomas</h3>
           <p>Tester</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-6.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Bennie Moran</h3>
           <p>Senior Project Manager</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-7.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Nicholas Mitchell</h3>
           <p>Project manager</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
     <div class="col-sm-6 col-md-3">
       <div class="thumbnail">
         <img src="/images/joomlart/corporate/staff-8.jpg" alt="Sample image" class="img-circle" />
         <div class="caption">
           <h3>Nicholas Mitchell</h3>
           <p>Community manager.</p>
           <p>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
             <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
           </p>
         </div>
       </div>
     </div>
      
      
     </div>

 

typo 7

page Pricing table (table de prix)

Joomlart fournit 3 styles pré-fabriquées pour la table de prix, sélectionnez le style souhaité.

1. Style 1

Code HTML

    <div class="page-header text-center">
       <h1>Pricing table - style 1</h1>
     </div>
      
     <div class="pricing-table style1 row">
       <div class="col col-md-4 no-padding">
         <div class="col-header text-center">
           <h2>Personal</h2>
           <p>Perfect for your blog</p>
         </div>
         <div class="col-body">
         <ul>
           <li class="row0 yes">Unlimited bandwidth</li>
           <li class="row1 yes">Unlimited products</li>
           <li class="row0 yes">1 GB File storage</li>
           <li class="row1 yes">2.0% Transaction fee</li>
           <li class="row0 yes">Discount code engine</li>
           <li class="row1 yes">24x7 Phone support</li>
           <li class="row0 no">Gift cards</li>
           <li class="row1 no">Abandoned cart recovery</li>
           <li class="row0 no">Professional reports</li>
           <li class="row1 no">Advanced report builder</li>
           <li class="row0"><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></li>
         </ul>
         </div>
         <div class="col-footer text-center">
           <a class="btn btn-lg btn-default">Sign up</a>
         </div>
       </div>
      
       <div class="col col-md-4 col-feature shadow no-padding">
         <div class="col-header text-center">
           <h2>Portfolio</h2>
           <p>Everything you need</p>
         </div>
         <div class="col-body">
         <ul>
           <li class="row0 yes">Unlimited bandwidth</li>
           <li class="row1 yes">Unlimited products</li>
           <li class="row0 yes">1 GB File storage</li>
           <li class="row1 yes">2.0% Transaction fee</li>
           <li class="row0 yes">Discount code engine</li>
           <li class="row1 yes">24x7 Phone support</li>
           <li class="row0 yes">Gift cards</li>
           <li class="row1 yes">Abandoned cart recovery</li>
           <li class="row0 yes">Professional reports</li>
           <li class="row1 yes">Advanced report builder</li>
           <li class="row0 yes">Real-time carrier shipping</li>
           <li class="row0"><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></li>
         </ul>
         </div>
         <div class="col col-footer text-center">
           <a class="btn btn-lg btn-primary">Sign up</a>
         </div>
       </div>
      
       <div class="col col-md-4 no-padding">
         <div class="col-header text-center">
           <h2>Performance</h2>
           <p>Awesome capacity</p>
         </div>
         <div class="col-body">
         <ul>
           <li class="row0 yes">Unlimited bandwidth</li>
           <li class="row1 yes">Unlimited products</li>
           <li class="row0 yes">1 GB File storage</li>
           <li class="row1 yes">2.0% Transaction fee</li>
           <li class="row0 no">Discount code engine</li>
           <li class="row1 yes">24x7 Phone support</li>
           <li class="row0 yes">Gift cards</li>
           <li class="row1 no">Abandoned cart recovery</li>
           <li class="row0 no">Professional reports</li>
           <li class="row1 no">Advanced report builder</li>
           <li class="row0"><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></li>
         </ul>
         </div>
         <div class="col-footer text-center">
           <a class="btn btn-lg btn-default">Sign up</a>
         </div>
       </div>
     </div>

 

typo 8

 

2. Style 2

Code HTML

    <div class="page-header text-center">
       <h1>Pricing table - style 2</h1>
     </div>
      
     <div class="pricing-table style2 row">
       <div class="col col-md-4 no-padding">
         <div class="col-header...

Lire → Pages de typographie prises en charge