responsive demo page builder

Vous pouvez gérer la manière d'afficher vos éléments (ligne, colonne, élément) dans 4 résolutions responsives que vous pouvez définir en px.

  1. Activer l'édition responsive
  2. Résolutions responsives personnalisées
  3. Paramètres de mise en page responsive
    1. Paramètres de rangée - alignés / empilés / masqués
    2. Paramètres de colonne et d'élément - Afficher / Masquer
  4. Édition de styles responsive
    1. Paramètres du bureau/ordi
    2. Aperçu du bureau/ordi
    3. Paramètres du téléphone mobile
    4. Mobile phone preview

Activer l'édition responsive

Pour activer les options responsive, cliquez sur le bouton Paramètres responsive dans le panneau de gauche.

responsive options 2

Il vous montrera les 4 résolutions disponibles que vous pouvez utiliser pour gérer votre mise en page responsive. Notez que vous pouvez modifier ces valeurs dans les options du composant (voir les explications ci-dessous).

responsive toolbar 2

Et il basculera automatiquement l'espace de travail en un aperçu réactif en fonction de la résolution que vous avez sélectionnée

responsive toolbar 3

Résolutions responsives personnalisées

Pour chaque résolution, vous pouvez donner une valeur personnalisée en px. Cette valeur sera utilisée pour toutes les pages du site web. Allez dans l'administration menu >> Page Builder CK et cliquez sur le bouton Options.

responsive options

Allez dans l'onglet Responsive, vous verrez les 4 résolutions où vous pourrez écrire vos propres valeurs. Toutes les valeurs sont données en px.

responsive options details 2

Pour l'option Type de plage, vous pouvez choisir entre 2 comportements :

  • Palier : cela rendra votre réglage applicable uniquement entre 2 résolutions, par exemple entre 640px et 480px. Toutes les autres résolutions ne seront pas affectées par les paramètres
  • Réduction : cela s'appliquera à la résolution et à toutes les résolutions qui sont en dessous. Par exemple, il s'appliquera pour maxi 640px, de 0 à 640px. De cette façon, à 480px et 320px, vous en obtiendrez l'héritage

 

Paramètres de mise en page responsive

Paramètres de rangée - alignés / empilés / masqués

En mode responsive, pour chaque résolution, vous pouvez sélectionner la manière dont vous souhaitez afficher les éléments de la ligne.

  • Aligné: ils seront alignés horizontalement (comportement par défaut)
  • Empilé: ils seront alignés verticalement
  • Caché: toute la ligne et tous les éléments à l'intérieur seront cachés

Notez qu'il existe une certaine relation entre les résolutions, par exemple si vous définissez l'empilement de la tablette / du portrait, toutes les résolutions inférieures (téléphone) seront également empilées automatiquement.

De la même manière, par exemple, si vous définissez la ligne sur aligné sur mobile / paysage, toutes les résolutions supérieures (tablette) seront automatiquement alignées.

 

Paramètres de colonne et d'élément - Afficher / Masquer

Pour chaque colonne et élément, vous pouvez choisir si vous souhaitez qu'il soit affiché ou masqué pour la résolution sélectionnée. Cliquez simplement sur le bouton Afficher / Masquer pour choisir.

responsive example

Notez qu'il existe une certaine relation entre les résolutions, par exemple si vous masquez un élément sur Téléphone / paysage, il sera automatiquement masqué pour toutes les résolutions inférieures (téléphone / portrait).

 

Édition de styles responsive

En utilisant l'édition responsive, vous pouvez personnaliser vos éléments comme vous le souhaitez pour chaque résolution. Par exemple, vous pouvez imaginer ce scénario pour le bloc de texte :

  • sur le bureau: couleur blanche, texte aligné à gauche, taille de la police 14px
  • sur téléphone mobile: texte aligné au centre, taille de police 20px

Il n'y a pas de limite, vous pouvez utiliser n'importe quelle option de style et la modifier dans n'importe quelle résolution, cela peut être la couleur, l'image d'arrière-plan, les marges, n'importe quoi!

Vous pouvez faire la même chose sur le titre, ainsi que sur le bouton.

Notez que vous pouvez également utiliser l'option CSS personnalisé pour chaque élément, et pour chaque résolution utiliser un CSS personnalisé différent.

Paramètres du bureau/ordi

Couleur blanche, taille de la police 14px

responsive demo desktop setting

Aperçu du bureau/ordi

responsive demo desktop preview

 

Paramètres du téléphone mobile

Texte aligné au centre, taille de police 20px. On peut aussi imaginer changer la couleur de la police, les marges ...etc

responsive demo mobile phone setting

Mobile phone preview

responsive demo mobile phone preview

 

Télécharger Page Builder CK

 

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