Designs libres : Quelles sont les class responsives à appliquer

Si vous avez vous même créé votre design via la fonctionnalité "Design libre", vous devez appliquer certaines class responsives pour que celui-ci soit compatible mobile.

1. Activer la version mobile de votre site
2. Quelles sont les class disponibles ?
3. Où appliquer les class responsive pour mon design ?
4. Comment appliquer les class responsives sur mon design ?

Avant-tout, activez la version mobile de votre site.

Pour savoir comment faire, rendez-vous ici : http://www.wifeo.com/documentation-162.html

Le responsive de votre design est géré par 3 class principales :

•wr_zcorpsmax : elle va permettre d'agrandir le corps de votre page au maximum lorsque votre site sera visualisé sur mobile (pour laisser un maximum de place à votre contenu.

•wr_dispmenu : lorsque votre site sera visualisé sur mobile, elle va permettra de faire disparaître votre menu "normal" pour le remplacer par un menu mobile que sera masqué et qui s'ouvrira par la gauche lorsque le visiteur appuiera sur le bouton "menu".

•wr_dispzp : si vous avez retiré les publicités de vos pages, vous pouvez créer des zones communes qui seront présentes sur l'ensemble de vos pages. Cette class permet de masquer ces zones communes et de les placer dans une zone masqueée qui s'ouvrira de la même manière que le menu, mais par la droite.

Les trois class décrites dans le paragraphe précédent sont à appliquer dans votre template, sur les conteneurs de vos balises {corps}, {menu} et {zone_publicites} (wr_zcorpsmax sur le conteneur de {corps}, wr_dispmenu sur le conteneur de {menu}, et wr_dispzp sur le conteneur de {zone_publicites}).

Par exemple, si votre balise {menu} est dans un tableau, son conteneur sera probablement une cellule de tableau (<td>), la class wr_dispmenu sur cette cellule.

Si vous avez utilisé un tableau pour structurer votre template (et que vos balises sont placées dans des celules de tableaux), rendez-vous sur l'éditeur de votre template (Votre design > Gérer votre design > Modifier).
Cliquez sur la balise de votre choix ({corps}, {menu} ou {zone_publicites}) puis cliquez sur le bouton .
Dans l'onglet "Design général", cochez la class voulue.

Si vous n'avez pas utilisé de tableau (mais par exemple des <div>), vous devrez éditer votre template en mode sources et placer manuellement les class sur les éléments de votre structure. Exemple : <div class="wr_zcorpsmax">.
Si vous avez déjà des class définies, ajoutez les class en les séparant par un espace (exemple : <div class="maclass1 wr_zcorpsmax">).