Les colonnes sont l'un des éléments structurels clés de l'application Blocs, avec les ligneset les conteneurs Bloc, ils forment la base sur laquelle la mise en page de votre site est construite. Les colonnes ont diverses options qui vous permettent de personnaliser leur taille, leur décalage, l'ordreet l' alignement du contenu. Toutes les options peuvent être ajustées par point de rupture, ce qui signifie que vous pouvez personnaliser les dispositions des colonnes en fonction de la taille d'écran sur laquelle elles sont affichées, pour une expérience utilisateur mobile optimale.
Une ligne parent de colonnes ne peut pas exister sans contenir au moins une colonne, cela signifie qu'il est impossible de supprimer la dernière colonne d'une ligne. Lorsque la dernière colonne d'une ligne est supprimée, une autre colonne vide est automatiquement ajoutée.
Sélection d'une colonne
Étant donné que le contenu imbriqué dans une colonne peut occuper tout l'espace d'une colonne, il peut être difficile de les sélectionner directement via le canevas de conception. Le moyen le plus simple de sélectionner une colonne consiste à utiliser l'arborescence des couches.
Largeur de colonne
Les colonnes ont divers paramètres de largeur qui peuvent être appliqués à l'aide des commandes de canevas ou via les commandes de l'inspecteur de la barre latérale. La façon la plus simple de redimensionner une colonne est de la sélectionner sur le canevas de conception et de faire simplement glisser la poignée de redimensionnement située sur le côté droit du marqueur de sélection de colonne.
Taille fixe
La grille de mise en page dans Blocs est divisé en 12 Colonnesqui sont de taille égale pour remplir l'espace disponible du conteneur du site principal. Une colonne peut avoir une taille fixe de 1 à 12, lorsqu'une colonne a une taille fixe, elle n'occupera que suffisamment d'espace pour remplir le pourcentage correct d'espace autorisé lorsque cet espace est divisé en 12 colonnes. Par exemple, si une colonne a une largeur de 6, il occupera la moitié de 12, ce qui signifie qu'il prendra 50%de l'espace d'écran.
Taille héritée
Si une colonne a sa taille définie sur hériter ∞sur tous les points d'arrêt, il ne sera plus corrigé et définira automatiquement sa taille en fonction du nombre de colonnes dans la ligne parente, pour créer une couverture uniforme de l'espace disponible. Par exemple, si vous avez 2 Colonnes ajustés sur hériter, chaque colonne occupera 50%de l'espace disponible.
Lorsque vous utilisez l'option d'hériter de la taille, il est important de se rappeler que la colonne ne doit avoir aucune autre valeur de largeur définie aux points d'arrêt inférieurs, sinon la largeur de la colonne héritera de la valeur de largeur de point d'arrêt inférieure la plus proche à la place.
Décalage de colonne
Le décalage de colonne vous permet de définir l'espace de décalage situé à gauche de la colonne, il peut être utilisé pour centrer les colonnes horizontalement ou pour créer un espace entre les colonnes. Le moyen le plus simple de définir le décalage d'une colonne est de la sélectionner sur le canevas de conception et de faire glisser la poignée de décalage située sur le côté gauchedu marqueur de sélection de colonne.
Lorsque vous modifiez le décalage d'une colonne, cela va également pousser ou tirer les colonnes à droite de celle-ci et dans certains cas (s'il n'y a pas assez d'espace horizontal disponible) les déplacer vers une nouvelle ligne.
Ordre des colonnes
Les commandes d'ordre des colonnes peuvent être un peu déroutantes lors de leur première utilisation. En effet, il peut sembler que les paramètres n'ont aucun effet s'ils ne sont pas configurés correctement. Les contrôles d'ordre des colonnes vous permettent de définir l'ordre d'une colonne dans la ligne parent, par défaut, les colonnes sont triées de gauche à droite dans l'ordre dans lequel elles existent physiquement (dans l'arborescence DOM).
Comprendre l'ordre des colonnes
Lorsqu'une colonne a sa valeur d'ordre personnalisée, elle sera toujours affichée après toutes les colonnes qui n'ont pas d'ordre personnalisé appliqué. Donc si vous avez 2 Colonnes et définissez la première colonne sur ordre 1 il se déplacera derrière la deuxième colonne plutôt que de rester dans la même 1ère position. En effet, bien que la colonne soit définie pour être positionnée en premier, les autres colonnes de la ligne parente n'ont pas de paramètre d'ordre personnalisé, elles sont donc affichées avant celles avec des valeurs personnalisées. Si vous appliquez ensuite un ordre personnalisé à ce qui était la deuxième colonne, mais qui est maintenant la première et que vous définissez sa position de commande sur 2, vous verrez qu'elle se déplace maintenant à la fin des colonnes et se trouve derrière la colonne avec l'ordre personnalisé 1.
Vous pouvez en savoir plus sur l'ordre des colonnes et son fonctionnement dans Bootstrap 4 ici.
Alignement des colonnes
Les contrôles d'alignement des colonnes vous permettent d'aligner rapidement et facilement une colonne sur le haut, milieu ou bas de la ligne parent. Ces contrôles vous permettent également de forcer tous les éléments d'une colonne à s'étirer sur toute la hauteur de la colonne parente, cela peut être utile lorsque vous voulez des cartes Brics toutes uniformément dimensionnées en hauteur.
Alignement du contenu
Les commandes d'alignement du contenu des colonnes vous permettent d'aligner rapidement et facilement le contenu d'une colonne sur à gauche, centre or bon.
Les commandes de colonne segmentées trouvées dans l'inspecteur de la barre latérale peuvent être ajustées rapidement en passant simplement la souris sur la section de chiffres située entre les flèches gauche et droite et en glissant vers la gauche ou la droite sur votre souris magique (1 doigt) ou trackpad (2 doigts).
Boucle WordPress
Lorsqu'un projet a son Option CMS défini sur WordPress, un ensemble supplémentaire de contrôles sera disponible dans l'inspecteur de la barre latérale qui permet la configuration des boucles de contenu WordPress.
Type
Cette option permet de définir la variable de type de la boucle:
Post
Cette colonne deviendra le modèle de l'élément de boucle de publication, tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence.
Nos Pages
Cette colonne deviendra le modèle de l'élément de boucle de page, tous les éléments à l'intérieur des flux de données de page WordPress seront remplis en conséquence.
Contenu
Cette colonne deviendra le modèle de l'élément de boucle de contenu (les éléments de boucle de contenu se trouvent généralement sur les modèles de page d'archive, d'auteur, de catégorie, de balise et de résultats de recherche), tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence.
Tous
Cette colonne deviendra le modèle pour la publication standard, la page et tous les éléments de boucle de type de publication personnalisé, tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence. Cela affichera tous les types de publication et le type de page standard.
Tous les types de messages
Cette colonne deviendra le modèle pour la publication standard et tous les éléments de boucle de type de publication personnalisé, tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence. Cela affichera tous les types de publication pris en charge par le thème.
Tous les types de messages personnalisés
Cette colonne deviendra le modèle pour tous les éléments de boucle de type de publication personnalisé, tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence. Cela affichera tous les types de publication personnalisés pris en charge par le thème.
Types de publication personnalisés
Cette colonne deviendra le modèle de l'élément de boucle de type de publication personnalisé pertinent, tous les éléments à l'intérieur des flux de données de publication WordPress seront remplis en conséquence.
Types de publications personnalisés supplémentaires ajoutés via le Gestionnaire de données personnalisées WordPress sera ajouté aux options de type.
Auteur
Cette option est utilisée pour définir la variable auteur de la boucle:
Tous
La boucle renverra les messages de tous les auteurs.
Auteur de poste
La boucle renverra les messages de l'auteur de l'article actuel.
Utilisateur actuel
La boucle ne renverra que les messages de l'utilisateur actuellement connecté.
Messages par page
Le nombre entré dans ce champ sera utilisé comme limite maximale de boucle. Si vous entrez 6, les résultats de la boucle de publication seront paginés en groupes de 6 éléments par page.
Identifiants de catégorie
La boucle sera filtrée pour inclure les publications avec ces ID de catégorie (séparez plusieurs valeurs par des virgules).
Tags de catégorie
La boucle sera filtrée pour inclure les publications avec ces balises de catégorie (séparez plusieurs valeurs par des virgules).
Exclure les identifiants de publication
La boucle sera filtrée pour exclure les publications avec ces identifiants (séparez plusieurs valeurs par des virgules).