Créer des pages dynamiques facilement

Créer une page web avec l'éditeur visuel uniquement est contraignant car vous devez gérer la disposition du contenu. Comment mettre par exemple une image à coté d'un texte ? Comment ajouter deux vidéos côte à côte ? Comment disposer trois images sur une même ligne ?

L'outil de création de pages répond à ces problématiques et vous permet de créer des mises en pages com­plexes de façon simple et efficace à l'aide de lignes et de colonnes. C'est ce que nous allons voir ensemble dans ce tutoriel. A l'issue de cette présentation, vous pourrez non seulement créer des pages complexes mais vous pourrez aussi créer des pages plus dynamiques en insérant facilement des widgets dans votre contenu (internes ou externes à votre site)

Créer des pages par blocs

Créer des pages dynamiques, avec 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. Juste en dessous de la première ligne activée par défaut sont placés plusieurs boutons oranges.

  • Ajouter une ligne: une ligne est un niveau supplémentaire de contenu. C'est le moyen de composer une page bloc par bloc. Une page peut être décomposée en plusieurs lignes (en cliquant sur Ajouter une ligne). Vous pouvez ajouter jusqu'à 30 lignes par page.
  • Ajouter une colonne: une colonne est un bloc supplémentaire sur une ligne, vous pouvez afficher jusqu'à 6 colonnes par ligne (en cliquant sur Ajouter une colonne). Dans une colonne, vous pouvez activer un widget pour afficher du contenu. Sur une ligne, vous pouvez donc afficher jusqu'à 6 widgets côte à côte.
  • Ajouter une pagination: cette option vous permet de scinder une page trop longue en plusieurs parties. Plus d'informations dans le tutoriel : créer une pagination.

Pour un exemple plus concret, imaginez que votre page peut être réalisée comme un tableau de 30 lignes divisées chacune en 6 colonnes. Via les widgets, chaque cellule peut comporter soit :

  • du contenu libre, via l'éditeur visuel et html (comme des images, du texte ou du code par exemple)
  • du contenu lié à des modules (les 5 derniers billets de votre blog par exemple ou un diaporama composé d'images de votre module Album photos).
  • du contenu lié à un site externe (une carte de google map par exemple)

Ajouter une ligne

  • Vous pouvez donner un titre à chaque ligne (1). Dans la page, cela correspondra à un titre de paragraphe 2 (titre de niveau 2).
  • Vous pouvez superposer jusqu'à 30 lignes dans une page en cliquant sur Ajouter une ligne (2).
  • Il est possible de déplacer les lignes entre elles avec les flèches placées en haut à droite (3)
  • Une ligne peut être supprimée (4)
  • Vous pouvez affecter des class et des ID à chaque ligne. C'est une utilisation avancée de l'outil, nous l'aborderons à la fin et dans un tutoriel plus complet

Ajouter une colonne

  • Chaque colonne peut être redimensionnée (1). Il faut toujours que la somme des colonnes soit égale à 100%. Vous pouvez par exemple avoir une colonne à 50% et deux colonnes à 25%. Il y a une option pour égaliser la largeur de toutes les colonnes d'une même ligne (5).
  • Une colonne peut être déplacée sur la ligne (2) à l'aide de flèches placées en bas à gauche.
  • Une colonne peut être supprimée (3). 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 (4). Réinitialiser une colonne consiste à choisir un nouveau widget sans avoir à supprimer puis ajouter une nouvelle colonne.

Pour ajouter un paragraphe de texte à coté d'une image par exemple, il vous suffirait d'ajouter une ligne composée de deux colonnes, en activant sur la gauche un widget "editeur visuel" et sur la droite un widget "images" (voir les cas pratiques plus bas)

Les widgets : du contenu dynamique dans vos colonnes

Vous le savez, sur une page web il n’y a pas uniquement du texte. Il peut y avoir aussi des photos, des vidéos, des sondages, de la musique, des cartes google maps, des quizz, la météo, etc. Toutes ces fonctionnalités sont appelées des widgets. Lors de l’ajout d’une ligne avec une ou des colonnes vous allez choisir le contenu de ces colonnes. Vous aurez le choix d’ajouter très simplement :

Texte du texte en utilisant l’éditeur visuel (présentation de l'éditeur visuel)

Code Htmldu code html (le code html est réservé aux plus expérimentés qui maîtrisent ce language de création de page internet)

Image ou PhotoUne image ou une photo depuis l’espace de stockage ou depuis le disque dur de votre ordinateur

DiaporamaUn carrousel de photos (ou "slider") qui affichera les photos que vous souhaitez les unes après les autres de façon dynamique

VidéoUne vidéo, en choissant une vidéo présente sur Youtube ou Dailymotion

Télécharger un fichierProposer le téléchargement d’un fichier sur votre site (un pdf, un fichier zip, etc.), la lecture d'un MP3, d'une vidéo FLV...

Carte Google MapsUne carte de situation géographique grâce à Google Maps

Flux RssUn flux rss d'un site ou blog externe (là aussi il s’agit d’une option réservé aux expérimentés qui maitrisent la notion de flux rss)

Vendre via PaypalVendre un produit, un service, proposer une adhésion en utilisant la plateforme de paiement en ligne Paypal (version pro uniquement)

Les autres widgetsEnfin, les autres widgets que je vous laisse découvrir la liste est longue : météo, facebook, sondage, quiz, dernier message du forum, etc.

2- Pourquoi créer des pages avec des lignes et des colonnes ?

Il est plus intéressant de décomposer votre page en lignes et en colonnes plutôt que de mettre tout votre contenu dans un même bloc de texte.

  • Créer des pages web personnalisées et bien structurées. Vous pourrez également déplacer plus facilement votre contenu (verticalement sur une même ligne ou horizontalement entre chaque ligne).
  • Utiliser des lignes et des colonnes (blocs) pour créer une page vous permet d'aérer votre contenu. Par exemple, vous n'aurez à gérer manuellement les marges autour des images (ou pire encore, à mettre des espaces)
  • Nous l'avons déjà dit, mais vous pourrez faire des pages plus complexes de façon plus simple et plus rapide. La mise à jour du contenu sera plus facile.
  • Vous pourrez intégrer du contenu issu de vos modules en utilisant des widgets.
  • Et enfin, pour les utilisateurs avancés qui ont des connaissances de base en CSS, vous pourrez appliquer des class et IDs à chaque ligne de la page, pour affecter un style uniquement aux contenus de cette ligne, sans changer les styles des autres.

3- Un exemple de page créée avec cet outil

Saviez-vous que le portail d'e-monsite est réalisé de cette façon ? Voici ci dessous un autre exemple de page créée avec cet outil de création de page.

  • Coté site (ci dessous image à gauche). Il s'agit d'une page créée avec 4 lignes (une ligne avec un paragraphe de texte, une ligne avec trois images, une ligne avec un paragraphe de texte et un diaporama et enfin une ligne avec deux vidéos).
  • Coté manager (ci dessous image à droite). Nous retrouvons ces 4 lignes composées d'une ou de plusieurs colonnes.

 

pages-sites-1.png

 

page-manager.png

4- Cas pratique n°1: disposer une image à coté d'un texte

Voyons ensemble comment disposer une image à coté d'un paragraphe pour obtenir le résultat ci dessous: une image à gauche d'un paragraphe, dont la zone de texte est plus large que la zone de l'image). Lire le tutoriel

Une image à coté d'un texte

5- Cas pratique n°2 : afficher 3 images avec légende

Voyons maintenant comment créer une page composée de 3 images alignées avec 3 légendes en dessous. Lire le tutoriel

3 images et 3 légendes

Allez plus loin avec l'utilisation des class et des ID

Vous pouvez appliquer des class et ID pour affecter un style uniquement aux contenus d'une ligne donnée, sans changer les styles des autres. Plus d'explications dans le tutoriel: utiliser l'option CSS dans l'outil de création de pages.

css-1.png

E-monsite fête ses 10 ans