Design réactif
Vos visiteurs utilisent différents appareils pour naviguer sur votre site web. Quelqu'un peut découvrir votre page sur son téléphone, la consulter à nouveau sur une tablette et l'explorer en détail sur un ordinateur. Le design responsif signifie que votre contenu s'adapte automatiquement pour être parfait sur chaque taille d'écran, sans que vous ayez à créer des versions distinctes de chaque page. Le constructeur visuel de Giant Context vous donne un contrôle total sur l'apparence de vos pages sur tous les appareils.
Modes de prévisualisation par appareil
Largeurs de colonnes et réactivité
Les sections du constructeur visuel utilisent un système de grille flexible de 12 colonnes pour structurer votre mise en page. Cela signifie qu'une colonne réglée sur une largeur de 6 occupe exactement la moitié de l'écran, tandis qu'une largeur de 4 en occupe un tiers. Comme ces largeurs de colonnes sont entièrement responsives, vous pouvez définir des valeurs différentes pour chaque appareil. Par exemple, une grille de fonctionnalités peut utiliser trois colonnes sur un ordinateur, passer à deux colonnes sur une tablette et s'empiler en une seule colonne sur les appareils mobiles.
Pour ajuster la largeur des colonnes, sélectionnez une colonne dans l'éditeur. La largeur prend en charge les valeurs responsives, vous permettant d'adapter la mise en page à n'importe quelle taille d'écran. Cliquez sur l'icône d'appareil à côté du champ de largeur pour basculer entre les points de rupture.
Peaufinez les mises en page pour chaque écran
Ajustez les largeurs de colonnes, les marges et le remplissage indépendamment pour l'ordinateur, la tablette et le mobile. Cliquez simplement sur l'icône de l'appareil à côté de n'importe quel champ réactif pour définir une valeur spécifique au point de rupture. Vos réglages se répercutent automatiquement vers le bas, assurant un ajustement parfait sur n'importe quel appareil.
Masquer des blocs par appareil
Parfois, la stratégie responsive la plus efficace consiste simplement à masquer un élément sur les écrans plus petits. Par exemple, vous pourriez vouloir masquer une grande image décorative sur les appareils mobiles pour économiser de l'espace précieux à l'écran et rester concentré sur votre message principal. Chaque bloc comprend des contrôles de visibilité responsifs pour gérer cela. Vous pouvez trouver ces paramètres dans le Styles avancéssous la section Responsive, vous permettant d'activer ou de désactiver la visibilité pour l'ordinateur, la tablette ou le mobile indépendamment.
Contrôlez la visibilité sur tous les appareils
Chaque bloc n'a pas sa place sur chaque écran. Utilisez le panneau de Styles Avancés pour masquer sélectivement du contenu sur ordinateur, tablette ou mobile. Cela permet de garder vos mises en page propres et ciblées, garantissant que les visiteurs ne voient que ce qui compte le plus sur leur appareil actuel.
Tester vos pages sur tous les appareils
Modèles responsifs courants
Conseils pour une approche "mobile-first"
FAQ
Vérifiez le panneau Styles avancés pour le bloc spécifique. Vous pouvez contrôler la visibilité sur différents appareils, il est donc possible que le bloc ait été masqué sur le point de rupture mobile.
Passez en mode tablette ou mobile dans la barre d'outils. De là, vous pouvez ajuster les valeurs responsives telles que la marge externe, la marge interne et la largeur dans le panneau Styles avancés. Comme les valeurs se transmettent en cascade vers le bas, les modifications apportées sur les points de rupture plus petits n'affecteront pas votre mise en page pour ordinateur.
Le nombre de colonnes est défini par appareil. Passez en mode de prévisualisation mobile et ajustez les paramètres de colonne pour vous assurer qu'elles s'empilent verticalement — par exemple en affichant une seule colonne sur mobile — plutôt que de les forcer côte à côte.