Le constructeur de mise en page est situé dans le backend de votre template:
Extensions -> Gérer
-> [nom_du_template]
Cliquez sur l'onglet constructeur de mise en page :
image
En haut du constructeur de mise en page, vous trouverez deux paramètres qui vous permettent de contrôler la largeur du template et la taille de gouttière:
Largeur de tempalte – Entrez la largeur du template en pourcentage ou en pixels, par exemple 100% ou 1170px.
Taille de gouttière – Entrez la taille de gouttière en pourcentage ou en pixels.
La gouttière est l'espace entre les blocs, les modules et d'autres éléments sur le site.
Il y a 2 sections que vous pouvez personnaliser : structure de mise en page et la mise en page responsive
Personnaliser la structure de mise en page
Modifier l'ordre des blocs :
Activer ou désactiver le recalcul de pleine largeur :
En savoir plus sur cette fonctionnalité !
Modifier l'ordre des colonnes principales :
Modifier la largeur des colonnes principales :
Choisir le nombre de modules dans un bloc modulaire :
Assigner des positions de module :
Exclure les blocs non utilisés :
Personnaliser la la mise en page responsive
Au dessus, vous pouvez choisir quelle mise en page vous souhaitez personnaliser.
Mises en page disponibles:
-
Grand écran - 1200px et au-dessus - Généralement ordinateurs de bureau
-
Écran normal - 980px à 1199px - Généralement tablettes au format paysage jusqu'aux écrans de bureau
-
Écran moyen - 768px à 979px - Généralement tablettes
-
Petit écran- 481px à 767px - Généralement téléphones au format paysage aux tablettes format portrait
-
Très petit écran - 480px Et en-dessous - Généralement les téléphones
Masquer un bloc ou un seul module selon la taille de l'écran :
Modifier la largeur des modules dans un bloc modulaire selon la taille de l'écran :
Que signifie le recalcul de pleine largeur ?
Il y a deux façons d'afficher les modules dans un bloc modulaire.
Option 1: Recalcul de pleine largeur activée (par défaut)
Dans un bloc modulaire, si un quelconque module est publié, alors la largeur des modules restant sera automatiquement recalculée pour s'adapter à la largeur.
Nous allons voir des exemples :
a) Les modules sont également répartis dans l'onglet Mise en page responsive :
En se basant sur la taille de Bootstrap grid, chaque module a la largeur span3:
span3 | span3 | span3 | span3
Si l'un d'eux est absent, alors chaque module aura la largeur span4:
span4 | span4 | span4
Si deux sont manquants, alors chaque module aura la largeur span6:
span6 | span6
Si un seul module est affichée, alors il aura la largeur span12.
b) Les modules ne sont pas également répartis dans l'onglet Mise en page responsive :
En se basant sur la taille de Bootstrap grid, supposons que le premier module a la Largeur span6, tous les autres modules ayantt la largeur span2:
span6 | span2 | span2 | span2
Si nous dépublions le second module, sa largeur sera répartie en commençant à partir du module suivant celui manquant. (span1 par module):
span6 | span3 | span3
Option 2: Recalcul de pleine largeur désactivé
Si vous souhaitez avoir plus de contrôle sur la largeur des modules dans un bloc modulaire, vous pouvez désactiver le recalcul de pleine largeur. Tous les modules auront exactement la même taille que vous aurez défini dans l'onglet mise en page responsive.
NOTE Si l'un des modules n'est pas publié dans un bloc modulaire alors il y aura un espace vide sur votre site.
INFO Si vous souhaitez afficher un nombre différent de modules dans un bloc modulaire sur certaines pages, vous pouvez simplement copier la mise en page, modifier le nombre de modules et l'assigner à des liens de menus selon vos besoins.
