✓ Cet article vous aidera à comprendre ce qu'est le système de grille, en quoi est-il fondamental et comment l’utiliser pour créer plusieurs colonnes de contenu dans vos blocs.
ℹ️ Vous pouvez lire l’article ou visionner cette vidéo explicative pour comprendre comment créer vos sections avec différentes colonnes.
Cette vidéo couvrira les points suivants :
Comment réaliser une section sur 2 colonnes sur ordinateur et sur une colonne sur mobile ?
Comment réaliser une section sur 3, 4, 5 et 6 colonnes sur ordinateur ?
Comment créer des blocs de 3 et 4 colonnes sur ordinateur et mobile ?
Introduction
Habituellement, sur Shopify, lorsque vous créez une section ou un bloc depuis l’éditeur de thème, ils sont déjà paramétrés avec un système de grille prédéfini. Par exemple, vous pouvez ajouter des sections avec un titre, un texte et un bouton sur la gauche et une image sur la droite. Cependant, avec Kehio Editor et son système de grille, nous vous laissons le soin de composer vos propres sections. Ceci vous permet d'être plus flexible dans la gestion de l'espace que chaque colonne occupera dans la section, offrant ainsi une personnalisation plus poussée selon vos besoins spécifiques.
Comprendre le système de Grille dans Kehio Editor
Définition du système de grille
Dans le webdesign, un système de grille est un cadre structuré composé de lignes horizontales et verticales qui aident à organiser le contenu sur une page. Ces grilles servent de guide pour placer les éléments de manière cohérente et équilibrée à travers différentes pages d'un site. Utilisé correctement, un système de grille améliore non seulement l'esthétique d'une page mais aussi sa fonctionnalité, en rendant l'information plus accessible et plus facile à naviguer pour l'utilisateur.
Le système de grille (Grid system) est une composante fondamentale de Kehio Editor. Il structure l'architecture de vos créations en définissant comment le contenu se positionne dans chaque bloc. Voici un guide pour vous aider à mieux comprendre et utiliser ce système efficacement.
Fonctionnement du Système de grille
1 - Structure de Base
Le système de grille standard est souvent basé sur 12 colonnes pour les écrans d'ordinateur, permettant de diviser l'espace de manière flexible pour créer différentes architectures de contenu, tels que des blocs côte à côte.
Pour créer deux colonnes, par exemple, vous diviseriez l'espace par 2, attribuant 6 colonnes à chaque bloc de contenu.
2- Adaptabilité sur Différents Appareils
Ordinateurs : Sur les écrans d'ordinateur, vous avez la possibilité de configurer vos blocs sur une grille de 12 colonnes. Cela offre une grande flexibilité pour la création de diverses dispositions. Pour les situations nécessitant un nombre impair de colonnes, comme cinq, Kehio Editor propose une grille alternative de 10 colonnes, permettant une division équitable de l'espace.
Mobiles : Pour les appareils mobiles, la grille est généralement réduite à 4 colonnes en raison des contraintes de taille d'écran, ce qui est suffisant pour la majorité des designs mobiles. Une grille de 3 colonnes est également disponible pour des dispositions nécessitant trois éléments par ligne, utile pour des éléments comme des icônes.
3- Paramètres par Défaut :
Par défaut, un contenu ajouté à un bloc occupe toute la largeur de la page (1/1 de la grille), ce qui vous permet de commencer avec une toile vierge et d'ajuster la disposition comme nécessaire.
Cas Pratiques et Utilisations
Création de Colonnes Multiples : Utilisez la grille pour diviser votre page en plusieurs colonnes, permettant des agencements créatifs tels que des galeries d'images ou des listes de fonctionnalités.
Utilisation Stratégique des Grilles sur Mobile : Adaptez vos contenus pour les écrans mobiles en utilisant les grilles de 3 ou 4 colonnes, optimisant ainsi l'affichage sans surcharger l'espace visuel.
Disposition Harmonieuse : L'ajustement des colonnes peut aider à créer une symétrie ou à mettre en évidence certains éléments en les plaçant stratégiquement dans des colonnes plus larges ou plus étroites.
Ce système de grille dans Kehio Editor est essentiel pour créer des designs web qui sont, non seulement visuellement attrayants mais aussi fonctionnels et adaptés à tous les types d'appareils. En maîtrisant ce système, vous pouvez exploiter pleinement la flexibilité et la puissance de Kehio Editor pour réaliser des créations optimisées.
Création d'une section sur 2 colonnes sur ordinateur et sur 1 colonne sur mobile
Pour Ordinateur
Étape 1 : Configurer le Système de Grille
Accéder au Bloc : Dans l'onglet de création, cliquez sur votre Bloc. Le volet de droite s'ouvrira.
Sélectionner la Grille : Dans ce volet, dans la section "Système de Grille", configurez la grille pour utiliser 12 colonnes sur ordinateur.
Étape 2 : Diviser le Contenu
Ajouter du Contenu : Cliquez sur Contenu pour ouvrir le volet de configuration correspondant.
Configurer le Grid : Placez le curseur du système de grille sur 6 pour l'ordinateur afin que votre contenu principal occupe la moitié de l'écran (12/2 = 6). Pour le mobile, laissez-le sur 4 pour que le contenu s'affiche sur toute la largeur disponible.
Étape 3 : Dupliquer le Contenu
Duplication : Pour dupliquer le contenu, placez votre souris sur le contenu et, au survol, cliquez sur l'option "Dupliquer". Cette action permet de conserver les paramètres de grille du contenu original.
Étape 4 : Gestion des Espaces entre les Colonnes
Ajuster le Gap : Dans le bloc principal qui contient vos contenus, rendez-vous dans la section "Gap" pour gérer l'espace entre les deux colonnes.
Pour Mobile
Par défaut, en suivant les étapes ci-dessus, votre contenu apparaîtra sur une seule colonne sur mobile. Cependant, vous pouvez optimiser l'organisation de vos blocs et l'espacement entre eux.
Étape 1 : Espacement entre les Lignes
Ajuster le Gap Mobile : Dans le bloc principal, ajustez le "Gap" dans la partie mobile pour gérer l'espace entre les lignes.
Étape 2 : Inverser l'Ordre du Contenu
Inversion sur Mobile : Dans le bloc, utilisez l'option "Inverser l'ordre sur mobile" pour changer l'ordre d'affichage de votre contenu, ce qui peut être utile pour améliorer la navigation et la présentation sur les appareils mobiles.
Ces étapes vous permettront de créer une section responsive qui s'adapte à la fois pour les écrans d'ordinateur et les appareils mobiles, optimisant l'affichage et l'interaction de l'utilisateur avec votre contenu.
Créer une Section sur 3, 4 ou 6 Colonnes sur Ordinateur
Pour configurer des sections avec 3, 4, ou 6 colonnes dans Kehio Editor, suivez les étapes de base pour la création de sections en ajustant simplement la répartition des colonnes selon le nombre souhaité. Voici comment procéder étape par étape pour chaque configuration sur un système de grille de 12 colonnes.
Pour créer 3 Colonnes:
Configuration du Contenu : Dans la section "Contenu", placez le curseur du système de grille sur 4 pour chaque bloc de contenu. Avec une grille de 12 colonnes pré-configurée, diviser par 3 (12 / 3 = 4) signifie que chaque contenu occupera 4 colonnes.
Pour créer 4 Colonnes:
Configuration du Contenu : Dans la section "Contenu", ajustez le curseur du système de grille sur 3 pour chaque bloc de contenu. Comme vous travaillez toujours avec une grille de 12 colonnes, diviser par 4 (12 / 4 = 3) assigne 3 colonnes à chaque contenu.
Pour créer 6 Colonnes:
Configuration du Contenu : Pour cette disposition, placez le curseur du système de grille sur 2 pour chaque bloc de contenu. En divisant 12 par 6 (12 / 6 = 2), chaque contenu prendra 2 colonnes.
Étapes Communes pour Toutes Configurations:
Ouvrir le Volet de Contenu : Commencez par accéder à l'onglet de création et cliquez sur votre Bloc pour ouvrir le volet de configuration à droite.
Sélectionner le Système de Grille : Assurez-vous que le système de grille est configuré sur 12 pour les configurations sur ordinateur.
Dupliquer le Contenu : Pour faciliter la création de sections multiples, dupliquez le contenu initial en cliquant sur l'option "Dupliquer" lors du survol du contenu. Ceci permet de conserver les paramètres de grille du contenu original.
Gestion des Espaces (Gap) : Ajustez l'espace entre les colonnes (Gap) pour assurer une séparation visuelle appropriée entre les contenus.
Création d'une Section de 5 Colonnes sur Ordinateur
Pour créer une section de 5 colonnes sur ordinateur dans Kehio Editor, il est nécessaire de modifier le système de grille standard pour l'adapter à une division qui permet une distribution équitable du contenu. Voici comment configurer et gérer une section de 5 colonnes.
Étape 1 : Configurer le Système de Grille
Accès au Bloc : Ouvrez l'onglet de création et sélectionnez votre bloc. Cela ouvrira le volet de configuration sur le côté droit.
Sélection de la Grille : Dans ce volet, sous la section "Système de Grille", ajustez la grille pour qu'elle utilise 10 colonnes sur ordinateur. Ce paramétrage est nécessaire car la division par 5 dans un système de 12 colonnes ne permet pas d'obtenir un nombre entier de colonnes.
Étape 2 : Diviser le Contenu
Ajout de Contenu : Cliquez sur Contenu pour accéder aux options de configuration de contenu.
Réglage de la Grille : Positionnez le curseur du système de grille sur 2 pour chaque contenu sur ordinateur, ce qui signifie que chaque bloc de contenu occupera 2 des 10 colonnes disponibles. Sur mobile, conservez le paramètre sur 4 pour utiliser toute la largeur disponible.
Étape 3 : Dupliquer le Contenu
Duplication : Placez votre souris sur le contenu à dupliquer, et au survol, cliquez sur "Dupliquer". Cette fonction permet de conserver les paramètres de grille et facilite la multiplication des contenus tout en conservant la même structure de grille.
Étape 4 : Gestion de l'Espace entre les Colonnes
Ajuster l'Espacement (Gap) : Gérez l'espacement entre les colonnes en ajustant le paramètre "Gap" dans le bloc principal qui contient vos contenus. Ceci est crucial pour assurer une séparation visuelle appropriée entre les éléments.
En suivant ces étapes, vous pouvez créer efficacement une section de 5 colonnes sur un ordinateur en utilisant Kehio Editor.
Comment Créer 2, 3, 4 Colonnes sur Mobile
Lors de la création de sections adaptatives pour mobile avec Kehio Editor, la gestion des colonnes suit le même principe à celui des configurations sur ordinateur. Voici comment configurer des sections de 2, 3 et 4 colonnes sur mobile.
Configuration de 2 et 4 colonnes :
Sur mobile, la grille standard est généralement divisée en 4 colonnes, permettant plusieurs configurations.
Étape 1 : Accéder au Bloc
Cliquez sur votre bloc. Le volet de configuration s'ouvrira sur le côté droit. Depuis votre bloc, dans le volet de configuration sous la section "Système de Grille", ajustez la grille pour qu'elle utilise 4 colonnes sur mobile. Cette étape est cruciale pour diviser correctement l'espace disponible.
Pour 2 colonnes :
Configuration : Placez le curseur du système de grille sur 2 sur mobile pour chaque contenu. Avec une grille de 4, cela signifie que chaque contenu occupera deux des quatre colonnes disponibles (4/2 = 2), permettant d'afficher deux éléments côte à côte.
Pour 4 colonnes :
Configuration : Placez le curseur du système de grille sur 1 sur mobile pour chaque contenu. Avec une grille de 4, placer le curseur sur 1 signifie que chaque contenu occupera une des quatre colonnes disponibles (4/4 = 1), parfait pour aligner quatre éléments distincts en une seule ligne.
Pour Créer 3 Colonnes
Étape 1 : Accéder au Bloc
Cliquez sur votre bloc. Le volet de configuration s'ouvrira sur le côté droit.
Étape 2 : Configurer le Système de Grille
Dans le volet de configuration, sous la section "Système de Grille", ajustez la grille pour qu'elle utilise 3 colonnes sur mobile. Cette étape est cruciale pour diviser correctement l'espace disponible.
Étape 3 : Ajuster le Contenu
Cliquez sur Contenu pour ouvrir les options de configuration.
Placez le curseur du système de grille sur 1 sur mobile dans chaque contenu. Avec une grille de 3, placer le curseur sur 1 signifie que chaque contenu occupera une des trois colonnes disponibles (3/3 = 1).
Étape 4 : Dupliquer le Contenu si Nécessaire
Si vous avez besoin de plus d'un contenu, dupliquez le contenu initial pour conserver les paramètres de grille. Pour dupliquer, placez votre souris sur le contenu, et au survol, sélectionnez l'option "Dupliquer".
Étape 5 : Gestion des Espaces entre les Colonnes
Ajustez l'espacement entre les colonnes (Gap) dans le bloc principal qui contient vos contenus pour s'assurer d'une séparation visuelle appropriée.
Si vous avez besoin d’aide pour comprendre et gérer votre système de grille, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .