https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized

Note de l'utilisateur: 5 / 5

Donnez une note !
5 sur 5 - 1 votes
Merci d'avoir noté cet article.

Il peut y avoir un moment où vous aimeriez avoir trois modules côte à côte dans une position de module unique comme dans l'image ci-dessous.

modules-cote-a-cote

Créer un Module distinct pour chacun des éléments. Assigner une classe de Module pour chacun des modules sous l'onglet Paramètres Avancé. Ils peuvent tous avoir le même nom de classe assignée, si vous le désirez.

trois-modules

Lors de l'attribution d'une classe à un module, vous pouvez taper le nom de la classe dans la zone de texte. Si vous ne laissez pas un espace avant le nom de la classe, la classe sera ajoutée à d'autres termes. Si vous placez un espace devant le nom de la classe dans la zone de texte, le nom de la classe sera laissé tel quel.

Par exemple, si vous tapez le nom de classe "trois-modules" dans la zone de texte sans espace, et vous avez assigné votre module à la position-2, le nom de classe est ajouté à la fin de custom de la manière ci-dessous :

<div class="customtrois-modules">
        ---Votre module va ici---
<div>

Notez que cela apparaîtra différemment selon les positions de module.

Si vous laissez un espace avant le nom de votre classe dans la zone de texte, vous obtiendrez du HTML comme ci-dessous :

<div class="custom trois-modules">
        ---Votre module va ici---
<div>

Vous pouvez maintenant cibler le nom de classe dans votre feuille de style personnalisée.

.trois-modules {width: 32%; float: left; }

Dans la section @media de votre feuille de style, vous pouvez modifier la largeur à 100 % pour les plus petites tailles d'écran afin qu'ils s'empilent plutôt que de se mettre côte à côte.

Vous pourriez vous demander "Pourquoi ne pas utiliser un tableau et les mettre tous dans un seul module?"

Le problème avec les tableaux, c'est qu'ils ne s'adaptent pas bien avec la conception responsive. Il n'y aurait pas moyen d'avoir les modules qui s'empilent les uns sur les autres pour les petits écrans.

Vous pourriez vous demander "Pourquoi ne pas simplement utiliser des <div> et mettre ces éléments en un seul module ?"

Vous pourriez, mais avec des modules distincts vous pourriez facilement en publier/dépublier certains ou annuler la publication à une date donnée. Il sera aussi simple de réorganiser l'ordre des modules. Vous pouvez également empiler deux ou plusieurs lignes en dessous de la première ligne si vous voulez un créer un ensemble de modules.