Créez des pages professionnelles en quelques clics

Avec ce template Joomla, transformez votre vision en réalité sans toucher une seule ligne de code. Fini les mises en page figées : vous avez désormais le contrôle total sur l'apparence de vos pages.

D'abord, structurez vos pages

Votre template vous offre 20 emplacements stratégiques pour organiser le contenu de vos pages. Ces emplacements (appelés positions) sont disposés autour de l’article principal, dans un ordre précis :

• gtm_hero : tout en haut de la page (en-tête)
• gtm_top1 à gtm_top8 : au-dessus de l’article, dans l’ordre vertical (gtm_top1 est au-dessus de gtm_top2, etc.)
• gtm_left et gtm_right : à gauche et à droite de l’article
• gtm_bottom1 à gtm_bottom8 : en dessous de l’article, dans l’ordre vertical (gtm_bottom1 est au-dessus de gtm_bottom2, etc.)
• gtm_footer : tout en bas de la page (pied de page)

L’ordre est important :

• Dans les blocs gtm_top, un chiffre plus petit signifie une position plus haute sur la page (gtm_top1 est au-dessus de gtm_top2)
• De même pour les blocs gtm_bottom (gtm_bottom1 est au-dessus de gtm_bottom2)
• Tous les blocs gtm_top sont placés au-dessus de l’article, donc ils seront toujours au-dessus des blocs gtm_bottom, même si leur chiffre est plus grand. Par exemple : gtm_top8 sera au-dessus de gtm_bottom1

Vous pouvez utiliser ces positions comme vous le souhaitez, et créer une mise en page unique pour chaque page de votre site.

Sur votre site, chaque ligne est basée sur une grille invisible de 12 colonnes. Cela signifie que vous pouvez placer plusieurs modules côte à côte, en leur attribuant une largeur exprimée en nombre de colonnes.

Exemple simple :

• Un module qui occupe 12 colonnes prendra toute la largeur de la ligne
• Un module de 6 colonnes prendra la moitié de la ligne
• Un module de 4 colonnes occupera un tiers de la ligne

Vous pouvez ainsi aligner plusieurs modules dans une même position et définir leur largeur.

Des modules qui s’adaptent à tous les écrans

L’affichage peut changer selon la taille de l’écran : mobile, tablette ou ordinateur. Pour cela, il suffit d’ajouter une ou plusieurs classes CSS au module.

Voici les classes disponibles :

Sur mobile : 

gtm-1 à gtm-12

Sur tablette : 

gtm-tablette-1 à gtm-tablette-12

Sur tablette plus grande : 

gtm-tablette-plus-1 à gtm-tablette-plus-12

Sur ordinateur : 

gtm-ordinateur-1 à gtm-ordinateur-12

Fonctionnement

• Ces classes s’ajoutent dans le champ « Classe du module », généralement situé dans l’onglet « Paramètres avancés » du module.
  Si vous appliquez ces classes à un article, cela se fait dans l’élément de menu correspondant, sous l’onglet « Affichage de la page », dans le champ « Classe de la page ».
  Important : pour les articles, ajoutez un espace avant la première classe CSS, sinon elle ne sera pas prise en compte.

• Vous pouvez en combiner plusieurs pour adapter l’affichage à chaque type d’écran.
• Le système ajuste automatiquement la mise en page selon la taille de l’écran de vos visiteurs.

Besoin d'aide ? N'hésitez pas à nous contacter pour un accompagnement personnalisé dans la prise en main de votre template.

819 460‑0503

Nous joindre

Les éléments disponibles

Votre template met à votre disposition une palette complète d'éléments pour composer vos modules :

Éléments de texte

• Titres : H1, H2, H3, h5, H5, H6 (du plus grand au plus petit)
• Paragraphes : pour vos textes courants
• Citations : pour mettre en valeur des témoignages ou extraits importants
• Textes d'introduction : Pour vos introductions de page
• Liens : pour rediriger vers d'autres pages ou sites
• Listes : à puces ou numérotées pour organiser vos informations

Titre h1

Titre h2

Titre h3

Titre h5

Titre h5

Titre h6

Paragraphe : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Citations : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Texte d'introduction : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Texte de petite taille : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Texte de très petite taille : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mon lien 
Mon lien secondaire

• Item 01
• item 02
• item 03

1. Item 04
2. item 05
3. item 06

Éléments d'action

• Boutons : pour vos appels à l'action (contact, achat, inscription...)

Mon bouton

Mon bouton secondaire

Mon bouton readmore

Exemple de mise en page