Mise en page en grille

Utilisation de standards Web

WebAcappella utilise la derniere version du framework Bootstrap et le puissant standard CSS3 FlexBox, Une page WebAcappella comporte un système de grille simple et efficace pour mettre en ordre l’aspect visuel d’une page web. Comme avec un jeu de construction, il permet de concevoir un site web rapidement et avec peu de lignes de codes ajoutées.

Notion de grille

Une grille est tout simplement un découpage en cellules de mêmes dimensions

La grille de Bootstrap comporte 12 colonnes.

Une grille est découpée en ligne (appelées « row » dans Bootstrap) et colonnes (« col »), comme dans le figure suivante :

../../_images/grid_col_and_row.png

La grille de Bootstrap

Le découpage en colonnes divise la largeur d’écran en pourcentage. Pour les lignes en revanche la hauteur sera ajustée au contenu.

../../_images/grid_content.png

Organisation de la grille

  • Une grille est définie dans WebAcappella par le bouton « BOX » qui va contenir autant de lignes que désirées avec toujours une largeur de 12 colonnes au maximum par ligne.

  • Une ligne (row dans Bootstrap) va contenir des éléments (texte, image, etc.).

Les composants majeurs sont la « Boite » (BOX) , « la colonne » (COL) et la « ligne » (ROW).

Note

BOX : Il s’agit du composant primaire (donc indispensable)

Note

LIGNE : Composant qui permet d’inclure des images, des textes, une galerie, etc.

Une ligne est divisée en 12 colonnes (voir bootstrap), un composant comme une image peut avoir au minimum une largeur de 1 colonne et au maximum de 12 colonnes.

Editeur de WebAcappella Fusion

Vous pouvez faire glisser l’ensemble des composants dans l’interface de travail

../../_images/add_element.png

Redimensionnez vos colonnes en cochant cette case

../../_images/resize_columns.png

Ceci vous permet d’attraper les bordures de vos éléments afin de régler leur largeur

../../_images/resize_element.png