largeur de colonnes responsive

À l'aide de Page Builder CK vous pouvez créer vos propres colonnes, et leur donner la largeur souhaitée. Mais vous pouvez également gérer la largeur des colonnes exactement comme vous le souhaitez en mode responsif (sur tablette et téléphone).

Pour chaque résolution, vous pouvez configurer la largeur de vos colonnes et leur donner des valeurs personnalisées. Dans la même ligne, vous pouvez choisir d'avoir vos colonnes comme ceci : 25/75 + 70/30 réparties sur 2 lignes. Il n'y a pas de limites !

 

1. Configurez la largeur des colonnes pour ordinateur

Dans votre page, vous pouvez cliquer sur l'icône d'édition de ligne >> colonnes pour passer en mode d'édition de largeur de colonne.
 
desktop columns
Ensuite, vous obtiendrez le panneau de gauche avec les options d'édition. Vous pouvez choisir d'afficher vos colonnes automatiquement alignées, à l'aide d'une valeur de gouttière ... Il existe de nombreuses configurations possibles.
 
desktop columns edition
 

2. Activer l'édition en mode responsive

2.1 Options responsive par défaut

Vous pouvez faire la même chose que pour l'ordinateur, mais pour chaque résolution en mode mobile. Cliquez sur la grande icône du téléphone dans le panneau de gauche pour activer le mode mobile.

mobile mode

Dans cette interface vous pouvez

  • afficher / masquer vos articles, colonnes, lignes
  • modifier la taille de la police et les marges de chaque élément, pour chaque résolution
  • basculer entre les colonnes alignées horizontalement et verticalement empilées pour chaque ligne

2.2 Largeurs responsive

Maintenant, si vous voulez en faire plus et modifier la largeur de chaque colonne, pour chaque résolution, vous pouvez cliquer sur le bouton Édition de largeur responsive

responsive wdith edition

Vous obtiendrez l'option de largeur sur chaque colonne. Vous pouvez remplir vos propres valeurs ici. Basculez vers une autre résolution (tablette, téléphone, ...) et mettez à jour les valeurs de chacune.

Si vous donnez plus de 100% à vos colonnes, elles iront sur une nouvelle ligne (mais elles resteront dans la même ligne HTML !). Jouez avec et vous comprendrez rapidement comment cela fonctionne.

Notez qu'une fois que vous avez décidé d'empiler vos colonnes verticalement, l'option de largeur réactive disparaît. En effet, dans ce cas, lorsqu'ils sont empilés, ils représentent 100% du parent, chacun sur une ligne.

 

2.3 Gouttière personnalisée

Il n'y a pas d'option de gouttière dans l'édition responsive, toutes les colonnes prendront l'espace disponible. Vous pouvez créer une gouttière en donnant des valeurs inférieures à 100%.

Example : 1 colonne de 39% + 1 colonne de 59% = une gouttière de 2%

example gutter 2 pourcent

3. Démo de toutes les résolutions

3.1 Bureau / Ordi

 

demo desktop

3.2. Tablette paysage

demo tablet landscape

3.3. Tablette portrait

demo tablet portrait

3.4. Téléphone

demo phone

 

 

 

 

Newsletter

Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449