Créer une page web avec des lignes et des colonnes

Voici une présentation de l'outil de création de page web. Ensemble, voyons comment créer une page web, en ajoutant des lignes et des colonnes pour ajouter du contenu dynamique et réaliser une belle présentation facilement.

Découvrez ci-dessous une vidéo présentant la mise en page par blocs et tous les avantages de ce système.

 

 

Le principe des lignes et des colonnes

Pour créer une nouvelle page, rendez-vous dans votre manager dans Modules > Pages et cliquez sur Ajouter une page.

Voici ci-dessous  l'exemple d'une ligne, composée de 4 colonnes. Imaginez que votre page peut être réalisée comme un tableau de 30 lignes divisées chacune en 6 colonnes.

Dans chaque bloc, vous pourrez y insérer du texte, des images, des vidéos ou tout autre type de contenu web dynamique.

Ajouter une ligne

Une ligne est un niveau supplémentaire de contenu dans une page.

  • Vous pouvez donner un titre à chaque ligne. Dans la page, cela correspondra à un titre de paragraphe 2 (titre de niveau 2 ou H2).
  • Vous pouvez superposer jusqu'à 30 lignes dans une page en cliquant sur Ajouter une ligne
  • Il est possible de déplacer une ligne (verticalement).
  • Une ligne peut être supprimée.
  • Vous pouvez affecter des class et des ID à chaque ligne (option avancée).

Ajouter une colonne

Une colonne est un bloc supplémentaire sur une ligne. Vous pouvez activer jusqu'à 6 colonnes par ligne en cliquant sur Ajouter une colonne.

  • Chaque colonne peut être redimensionnée (vous pouvez par exemple avoir une colonne à 50% et deux colonnes à 25%).
  • La largeur minimum d'une colonne est de 15%.
  • Une colonne peut être déplacée sur la ligne (horizontalement en utilisant les flèches) ou dans une autre ligne.
  • Une colonne peut être supprimée. Quand une colonne est supprimée, la largeur de celle ci est ajoutée au bloc qui se trouve à sa gauche.
  • Enfin, une colonne peut être réinitialisée (choisir un nouveau widget sans avoir à supprimer puis ajouter une nouvelle colonne).

Vous savez maintenant comment réaliser une page avec des lignes et des colonnes. Voyons maintenant comment ajouter du contenu web dynamique dans chaque bloc de la page, via les widgets.