77 Rue Clemenceau, 54820 Marbache +33 03 83 56 65 20 +33 06 87 42 95 30

Le Constructeur de mise en page est un outil inclus dans le framework EF4 et qui permet de personnaliser la mise en page de votre template à l'aide d'une interface conviviale.

 builder1

La mise en page du template se compose de plusieurs blocs. Chaque bloc peut contenir une ou plusieurs positions de module. En utilisant le constructeur de mise en page, vous serez capable de :

  • modifier la largeur du template en pixels ou en pourcentage

  • modifier la taille de la gouttière

  • modifier l'ordre des blocs

  • activer ou désactiver le recalcul de pleine largeur

  • modifier l'ordre des colonnes principales

  • modifier la largeur des colonnes principales en se basant sur la taille de la grille bootstrap.

  • choisir le nombre de modules dans un bloc modulaire

  • assigner des positions de module

  • exclure les blocs inutilisés

  • 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

  • enregistrer vos paramètres et les affecter aux éléments de menu sélectionnés

La configuration de la mise en page n'a jamais été aussi facile.

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

builder2

Personnaliser la structure de mise en page

Modifier l'ordre des blocs :

 

builder3

Activer ou désactiver le recalcul de pleine largeur :
En savoir plus sur cette fonctionnalité !

 

builder4

Modifier l'ordre des colonnes principales :

 

builder5

 

Modifier la largeur des colonnes principales :

 

builder6

Choisir le nombre de modules dans un bloc modulaire :

builder7

Assigner des positions de module :

builder8

 

Exclure les blocs non utilisés :

builder9

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

 

builder10

 

Masquer un bloc ou un seul module selon la taille de l'écran :

builder11

 

 

Modifier la largeur des modules dans un bloc modulaire selon la taille de l'écran :

 

 

builder12

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 :

 

builder13

 

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 :

 

builder14

 

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.

 

Il y a une possibilité de créer autant de mises en page que vous le souhaitez. Cette fonctionnalité peut vous être utile si vous voulez affecter différents styles aux pages sélectionnées sur votre site.

Il existe 2 façons différentes d'ajouter une nouvelle mise en page : copier une mise en page dans Le constructeur de Mise en page ou ajouter un fichier manuellement.

 

Copier Mise en page dans le constructeur de Mise en page

Accédez à l'onglet constructeur de Mise en page dans les paramètres du template.Il vous suffit de cliquer sur " Copier Mise en page" et de suivre les instructions à l'écran :

Étape 1:

 

builder15

 

Étape 2:

 

builder16

 

La nouvelle mise en page sera disponible dans la liste mais elle apparaîtra également en tant que fichier dans le répertoire suivant:

/templates/[nom_du_template]/tpl/

 

Ajoutez un fichier manuellement

Allez dans le répertoire suivant sur votre serveur :

/templates/[nom_du_template]/tpl/

Copier le fichier default.php et enregistrez le sous un autre nom dans le même répertoire.

builder17

Une fois que vous avez créé une nouvelle mise en page, vous pouvez l'affecter aux liens de menu sélectionnés. Cette option est très utile si vous voulez utiliser différentes mises en page pour de nombreuses pages. C'est également très utile si vous avez désactivé le recalcul de pleine largeur et que vous souhaitez afficher un nombre différent de modules dans un bloc modulaire sur certaines pages.

Pour visualiser les liens de menu assignés à votre page, vous devez cliquer sur l'onglet suivant :

Voir les assignations de liens de menu

builder18

 

Pour modifier les assignations vous devez vous rendre dans l'onglet « Affecter à un menu » puis sélectionnez les liens de menu auxquels vous souhaitez affecter une mise en page :

 

builder19

 

 

 

Chaque mise en page contient des blocs et des modules. À l'aide du constructeur de Mise en page, vous pouvez changer l'ordre des blocs, vous pouvez assigner des positions de module et beaucoup plus encore. Toutefois, si vous souhaitez ajouter un nouveau bloc ou modifier la structure du bloc alors vous devez modifier un fichier de mise en page.

Une fois que vous avez créé un nouveau fichier de mise en page, vous pouvez le modifier et le personnaliser.
La structure du bloc est définie en utilisant le code suivant:

// define default blocks and their default order (can be changed in layout builder) $blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer');

Si vous souhaitez ajouter un nouveau bloc à une mise en page, vous pouvez le faire comme suit :

$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer,block-name'); //block-name ajouté

Le nom de bloc utilisé dans le code ci-dessus doit être le même que le nom de fichier du bloc. Pour plus d'infos sur la création d'un nouveau bloc, nous l'aborderons dans le prochain chapitre.

Si vous souhaitez exclure un bloc de mise en page, vous pouvez le faire comme suit :

$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer', 'block-name'); //block-name exclus

 

Une fois que vous avez ajouté un nouveau bloc à une mise en page, vous devez créer un fichier de bloc.

Tous les blocs sont situés dans le répertoire suivant :

/templates/[nom_du_template]/tpl/blocks/

Le bloc créé devra avoir le même nom que le nom de bloc dans un fichier de mise en page.

builder20

 

Il existe deux façons d'inclure des positions de module dans un fichier bloc : module unique et bloc modulaire.

Module unique

Si vous avez besoin d'ajouter un module unique, alors le code ressemble à ce qui suit :

<jdoc:include type="modules" name="<?php echo $this->getPosition('position_name') ?>" style="jmmodule" />

Jetez un œil sur l'exemple :

<?php if($this->checkModules('header')) : ?> <section id="jm-header" class="<?php echo $this->getClass('block#header') ?>">     <div class="container-fluid">         <jdoc:include type="modules" name="<?php echo $this->getPosition('header') ?>" style="jmmodule" />     </div> </section> <?php endif; ?>

Bloc modulaire

À l'aide d'un bloc modulaire, vous pouvez afficher jusqu'à 6 modules dans une rangée. Un bloc modulaire vous donne les paramètres supplémentaires dans le constructeur de mise en page :

Dans l'onglet "personnaliser structure mise en page"

builder21

 

 

Dans l'onglet "personnaliser mise en page responsive"

 

builder22

 

Si vous avez besoin d'ajouter un bloc modulaire, alors le code ressemble à ce qui suit :

<?php echo $this->renderbloc modulaire('position_name','jmmodule'); ?>

Jetez un œil sur l'exemple :

<?php if($this->countbloc modulaire('top1')) : ?> <section id="jm-top1" class="<?php echo $this->getClass('block#top1') ?>">     <div class="container-fluid">         <?php echo $this->renderbloc modulaire('top1','jmmodule'); ?>     </div> </section> <?php endif; ?>

Définir une position du module

Une fois que vous avez créé une position de module, vous devez la définir dans le fichier suivant :

/templates/[nom_du_template]/templateDetails.xml

Vous pouvez le faire comme suit:

<positions>         <position>top-bar1</position>         <position>top-bar2</position>         <position>top-menu-nav</position>         <position>header</position>         <position>position_name</position> <!-- Votre nouvelle position du module --> </positions>

Pour chaque mise en page vous pouvez charger une feuille de style spécifique. Cette fonctionnalité peut vous être utile lorsque vous avez différents styles pour un template et que vous ne voulez pas les inclure à tous les styles de templates. Cela peut avoir un impact positif sur la vitesse de chargement de votre site.

Étape 1: Créer un fichier LESS

Tout d'abord, vous devez créer un fichier LESS. Le fichier doit se trouver dans le répertoire suivant :

/templates/[nom_du_template]/less/

Étape 2: Charger le fichier créé

Ensuite, éditer un fichier de mise en page à partir du répertoire suivant:

/templates/[nom_du_template]/tpl

Dans la section head, vous devez ajouter le code suivant :

<?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>

Jetez un œil sur l'exemple :

<head>     <?php $this->renderBlock('head'); ?>     <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>     </head>

Étape 3: Ajouter un fichier LESS à la map LESS

Une fois que vous avez ajouté un nouveau fichier LESS dans la section head, vous devez ajouter ce fichier dans la map LESS. De cette façon, le fichier sera recompilé en CSS quand n'importe quel autre fichier LESS en relation avec le nouveau (par exemple les variables inclus) sera modifié.

Pour ce faire, modifiez le fichier suivant :

/templates/[nom_du_template]/lib/jm_template.php

Ensuite, recherchez le code suivant :

$common_all = array( 'bootstrap_variables.less', 'template_variables.less', 'override/ltr/mixins.less', 'template_mixins.less' ); $this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all;

Au-dessus du code vous devez ajouter votre nouveau fichier LESS comme suit :

$this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all; $this->lessMap['new-layout.less'] = $common_all; //new-layout.less added

Cela signifie que quand l'un de ces fichiers sera modifié, alors le fichier new-layout.less sera compilé en CSS automatiquement :

bootstrap_variables.less, template_variables.less, override/ltr/mixins.less, template_mixins.less

Étape 4: Ajouter des styles

Maintenant, vous pouvez ajouter des styles LESS ou CSS au fichier LESS.
Vous devriez vous rappeler d'importer les variables et mixins si vous voulez profiter d'eux :

/* ====================    VARIABLES import    ==================== */     @import "template_variables.less"; @import "bootstrap_variables.less";    /* ====================    MIXINS import    ==================== */    @import "override/ltr/mixins.less"; @import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins @import "template_mixins.less";