Composer la page d'accueil

L'affichage de la page d'accueil du site

La page d'accueil (landing page) du site événement se compose de 4 zones (Drop zone, en BO) dans lesquels vous pouvez insérer et organiser des éléments de contenus. Chaque élément peut être glisser dans la zone souhaitée ; les éléments peuvent aussi être déplacés d'une zone à l'autre, par un glisser-déposer.

Zone 1 : dimensionnée sur la largeur de l'écran, elle contient par défaut un bloc de type "Hero" contenant une image bandeau et les indications de lieu et de date de l'événement.
Des j(un ou deux) peuvent être affichés et personnalisés en bout de ligne pour inciter à l'action. En dessous une courte zone texte permet d'afficher un bref message.

Zone 2 : la colonne gauche (environ 60%) de la page contient par défaut un élément de type "Edito" et sous lequel il est possible d'ajouter d'autres éléments proposés dans un encart comme une vidéo, une collection d'articles, des portraits ou forfaits...

Zone 3 : la colonne droite (environ 40%) de la page contient par défaut un élément de type "A retenir" et sous lequel il est possible d'ajouter d'autres éléments proposés dans un encart comme une vidéo, une collection d'articles, des portraits ou forfaits... dont la taille sera ajustée à la largeur de la colonne

Zone 4 : dimensionnée sur la largeur des deux colonnes du dessus, cette zone est vide par défaut. Elle peut contenir toutes sortes d'éléments proposés pour afficher une galerie d'images, de portraits ou forfaits (content list), une video, une image avec un lien (banner), une zone texte...

Le mode "Constructeur de page"

 

Vue générale

Barre de boutons d'actions du mode constructeur de page

La barre de boutons située en haut du constructeur de page permet les actions suivantes :

Bouton 'Champs'

Cette fonction permet de modifier le titre de la page (Title) ainsi que la description de la page (Description).

Le Titre doit être plutôt court et s'affiche en FO dans les onglets des navigateurs et dans le fil d'ariane sur le site et en BO dans l'arborescence de contenu (page racine du contenu).

La description doit comporter une description complète du site, en utilisant des mots clés qui permettront une meilleur indexation par les moteurs de recherche.

 

Changer la disposition

 

Cette fonction permet de changer le modèle de page : 4 zones d'affichage (par défaut sur sites INRAE) ou 1 zone unique.

Il est néanmoins à noter qu'en conservant l'affichage en 4 zones mais en utilisant uniquement la zone supérieure, on obtient le même résultat qu'avec la zone unique (affichage pleine page).

 

Visibilité

Cette fonction n'est pas active sur les sites web INRAE.

Planifier

Cette fonction de voir s'il existe des futures versions de la page d'accueil programmées.

Informations sur le site

La case gauche indique le nom de la page et l'URL du site. La case de droite indique l'identifiant du site.

Modes d'affichage

Ces 3 boutons permettent de visualiser la page en mode : 'Desktop' (pc de bureau), 'Tablette' et enfin 'Téléphone mobile'.

Undo/Redo

Le bouton de gauche "Undo" permet d'annuler les dernières actions, alors que le bouton de droite "Redo" permet de rétablir les actions annulées.

Mode 'Structure view'

L'activation de ce bouton permet d'afficher une vue de la structure de la page d'accueil. Il est ainsi possible de voir le contenu des 4 zones d'affichage de la page d'accueil. Le détail du contenu de chaque zone est résumé : type et titre des éléments positionnés et organisation des éléments dans chaque zone. Au survol d'un élément dans cette arborescence, l'icone de la souris se transforme, il est alors possible de glisser un élément dans n'importe quelle zone afin de le repositionner dans la page d'accueil. Il est ainsi très facile de réorganiser les éléments de votre page. 
Il n'est par contre pas possible d'ajouter des éléments sur la page d'accueil avec cette vue.

 

 

Mode 'Elements'

L'activation de ce bouton permet d'afficher une vue des différents éléments disponibles pour enrichir la page d'accueil.
Cette vue permet de positionner un élément dans une zone de la page d'accueil. Pour ce faire, il suffit de cliquer sur l'élément souhaité puis de le glisser sur la zone de la page d'accueil où vous voulez l'insérer.
Une fois l'élément déposé dans la zone, il reste à le paramétrer. Selon l'option activée dans la section 'Automatically open block settings in builders' de vos paramètres de compte, la fenêtre de paramétrage s'ouvre automatiquement ; si ce n'est pas le cas, il faut clique sur la roue crantée du bandeau de l'élément.

 

Les éléments de la page d'accueil

En mode d'affichage 'Vue éléments', une fenêtre présente les éléments. Cette fenêtre contient une barre de recherche permettant de saisir le début du nom d'un élément et peut se positionner à droite (par défaut) ou à gauche de la page d'accueil, en cliquant sur la flèche en haut de la fenêtre.

Les 11 éléments disponibles pour organiser la page d'accueil sont les suivants : 

• Content list : pour afficher des portraits (défilement automatique)
• Bandeau / Hero : pour afficher un bandeau
• Bloc à retenir : pour afficher les informations essentielles de votre événement
• Edito : pour présenter votre événement
• Gallery (galerie d'images) : pour afficher le contenu d'un dossier contenant plusieurs images
• Video : pour insérer une video
• Banner pour insérer une image et faire un lien vers une URL
• Forfaits : pour afficher des forfaits ou groupes de forfaits (défilement automatique)
• Collection : pour afficher des images, des articles et des dossiers
• Embed : pour mettre en avant un élément de contenu interne du site
• Text : pour insérer une zone texte riche

 

 

Pour, selon le cas, ajouter, supprimer ou modifier le bandeau de la page d’accueil du site. Il s’affiche avec un texte défini par défaut (Nom, date et lieu saisis dans le formulaire de paramétrage de l’événement), vous pouvez personnaliser ce texte. Vous pouvez aussi personnaliser le contenu et l’affichage de 2 boutons ainsi qu’un texte positionnée au bas du bandeau.

Les paramètres de base

Un clic sur la roue crantée du bloc, ouvre la fenêtre de paramétrage. Elle st composée de 3 onglets : Propriétés, Esthétique et Planificateur.

 

• Nom : titre du bloc ; il ne s'affiche pas en FO
• Image : pour  la modifier, cliquer sur "Changer", ou la supprimer en cliquant sur la corbeille puis sélectionner un nouveau contenu de la médiathèque, de type '- Image'
• Position de l'image : aligner l'image du bandeau à gauche, au centre ou à droite
• Hauteur du hero : définir la hauteur du bandeau en px (entre 300 et 500 px)
• Couleur du texte : sélectionner la couleur du texte ci-dessous qui apparaitra en FO sur le bandeau
• Texte libre : possibilité de personnaliser le texte du bandeau : toute saisie de texte (même un espace) annule l’affichage du texte par défaut
• Cacher le texte du hero : masque le texte ci-dessus
• Cacher le bouton de gauche : possibilité d’afficher ou de masquer le bouton situé le plus à gauche du bandeau et de personnaliser son texte et son URL de destination
• Texte du bouton de gauche : libellé du bouton de gauche
• URL du bouton de gauche : url de la page cible ; pour un lien interne, indiquer uniquement la partie de l'url située après '.fr/' (par exemple, pour la page programme, indiquer "/programme").
• Cacher le bouton de droite : Possibilité d’afficher ou de masquer le bouton situé, par défaut, à gauche du bouton le plus à droite du bandeau et de personnaliser son texte et son URL de destination
• Texte du bouton de droite : libellé du bouton de droite
• URL du bouton de droite : url de la page cible ; pour un lien interne, indiquer uniquement la partie de l'url située après '.fr/' (par exemple, pour la page programme, indiquer "/programme").
• Texte du bas : facultatif ; personnaliser le texte situé au bas du bandeau

 

 

Esthétique

Pas de choix de mise en page pour le bloc hero ; seul le mode par défaut est proposé dans le menu déroulant.

Planificateur

Cet écran est commun à tous les blocs et vous permet de planifier ou pas l’affichage de votre bloc.

 

 

 

 

 

Ce bloc permet l'affichage de la partie "Texte accueil" de l'édito du site ; la partie texte, si elle n'est pas vide' est affichée au clic sur le bouton 'Lire la suite'. Pour modifier le texte de l'édito, il faut modifier le contenu de l'édito avant de le placer en page d'accueil. 

 

Ce bloc est présent à la livraison de votre site : il reprend les différentes informations saisies dans le formulaire de paramétrage de l'événement et propose le partage de l’événement via les réseaux sociaux.

• Date : Valeurs saisies dans le champ « dates du colloque – partage agenda » pour import dans le calendrier
• Lieu : Valeurs saisies dans le champ « coordonnées du lieu » pour affichage sur carte
• Inscription : Valeurs saisies dans la champ "Dates d'inscription"
• Soumission : Valeurs saisies dans la champ "Dates de soumission des articles"
• Contact : lien vers le formulaire de contact du site
• Partager cet événement : partage sur les réseaux sociaux des internautes

 

Pour afficher une sélection d’éléments contenus dans un même dossier. Ce bloc est utilisé pour afficher les objets de type 'Personnes' contenus dans les objets de type 'Portraits' . 

 

• Nom : titre du bloc ; il s'affiche en FO
   
• Dossier parent : sélectionner l'objet
  'Portrait' contenant les 'Personnes' à afficher
   
• Limite : indiquer le nombre maximum de 'Personnes' à afficher dans ce bloc
   
• Profondeur : n'est plus utile pour les 'Portraits' (mettre 1 par défaut)
• Type de contenu : obsolète
   
• Ordre : afficher dans l'ordre de tri du 'Portrait' sélectionné ou dans un ordre aléatoire (change à chaque nouvelle visite du FO)

Le nombre d’éléments affichés par défaut dépend de la largeur du bloc dans lequel vous avez positionné votre 'content list'. À noter : les flèches permettent de faire défiler les éléments

Pleine page : 4 éléments affichés par défaut

Bloc de gauche  : 2 éléments affichés par défaut

Bloc de droite  : 1 élément affiché par défaut

Pour afficher une sélection de dossiers ou d’articles et les afficher selon 2 modes : Liste ou carte. Attention : les autres types d’éléments (forfait, personne…) ne peuvent pas être ajoutés  dans le bloc Collection .

Paramètres de base

• Nom : titre du bloc ; il s'affiche en FO
• Location list : cliquer sur "Sélectionner un contenu" et choisir les articles ou dossiers à afficher dans le bloc
  La liste des éléments choisis apparait alors. Il est possible d'organiser les éléments entre eux, en les déplaçant avec la souris mais aussi de les supprimer en cliquant sur la corbeille de l'élément

Mise en page

3  modes d’affichage proposés pour le bloc Collection :

• Default : pas de mise en forme : titre affiché dans un bloc
• Cards : Image réduite (retaillée) affichée au dessus du titre long et du texte du chapeau de l’élément >> au-delà d’un certains nombre de caractères, les textes sont tronqués

 

• List : Image réduite (retaillée) affichée à gauche du titre long et du texte du chapeau de l’élément >> au-delà d’un certains nombre de caractères, les textes sont tronqués. En l’absence d’image, le texte remplit l’espace alloué.

Pour afficher des objets de type 'Forfait' sur la page d'accueil.

• Nom : titre du bloc ; il s'affiche en FO
• Liste des forfaits : cliquer sur 'Sélectionner des produits' et cocher les forfaits à afficher
• Limite : définir le nombre de forfaits limite à afficher dans le bloc
• Ordre : afficher dans l'ordre de tri du 'Portrait' sélectionné ou dans un ordre aléatoire (change à chaque nouvelle visite du FO)

Le nombre d’éléments affichés par défaut dépend de la largeur du bloc dans lequel vous avez positionné votre bloc 'Forfaits'.
Le rendu en FO est identique à celui obtenu pour le bloc 'Content list' pour les personnes.

À noter : les flèches permettent de faire défiler les éléments

 

 

Pour afficher un texte enrichi sur la page d'accueil.

• Nom : titre du bloc ; il s'affiche en FO
• Content : texte enrichi avec les mêmes fonctionnalités que tout bloc texte inséré dans les autres objets. Pour les fonctionnalités, se référer au manuel de l'éditeur de texte.

 

 

Pour insérer une image ou un lot d’images issus d’un même dossier de la médiathèque (ces images s’affichent en FO sous forme de carrousel). Les images sont retaillées en fonction du bloc de réception de l’élément Galerie.

A noter : la sélection d'un dossier contenant des éléments de contenu autres que des images entraîne l'affichage d'un lien vers le dossier dans lequel ils sont stockés.

• Nom : titre du bloc ; il ne s'affiche pas en FO
• Dossier : cliquer sur "Sélectionner un élément de contenu" pour choisir le folder contenant les images à afficher dans le diaporama. Après validation, le nom de l’élément sélectionné s’affiche et une corbeille vous permet de supprimer cet élément.
• Ordre d'affichage des éléments : afficher dans l'ordre de tri du 'folder' sélectionné ou dans un ordre aléatoire (change à chaque nouvelle visite du FO)
• Défilement automatique : active un défilement automatique ou manuel (avec les flèches latérales)
• Délai du défilement : choisir en secondes, le temps d'affichage de chaque image

Les flèches latérales permettent de faire défiler manuellement les images ; un second défilement est permis grâce aux "traits" présents sous l'image.

Taille d'affichage des images en pixels (px) selon la zone d'affichage de la galerie :

• pleine page : 1683 x 500
• zone 100% : 1357 x 500
• zone 2/3 : 903 x 500
• zone 1/3 ; 378 x 500

Les images en médiathèque qui ne seront pas de ces dimensions seront automatiquement redimensionnées pour remplir la zone d'affichage de la galerie.

Pour insérer une vidéo hébergée sur un serveur externe (Médiathèque INRAE, Youtube, Dailymotion ou Viméo).

 

• Nom : titre du bloc ; il ne s'affiche pas en FO
• Lien de la vidéo : insérer le lien vers la vidéo fourni par la plateforme de streaming utilisée

La taille du bloc vidéo s'adapte à la taille de la zone dans laquelle le bloc est inséré.

Pour afficher un image cliquable qui redirige vers une URL s’ouvrant dans un nouvel onglet.
Après validation, le nom de l’élément sélectionné s’affiche et une corbeille vous permet de supprimer cet élément.

• Nom : titre du bloc ; il ne s'affiche pas en FO
• Image : cliquer sur "Sélectionner un élément de contenu" pour choisir l'image à afficher
• URL : indiquer l'url du lien à appliquer sur l'image

A noter : la légende et le copyright de l'image s'affichent en FO

Pour afficher un élément de contenu.

• Nom : titre du bloc ; il ne s'affiche pas en FO
• Image : cliquer sur "Sélectionner un élément de contenu" pour choisir l'image à afficher

En FO

• Une image s’affichera avec sa légende
• Un lien vers un article ou un dossier : le lien affiché est le titre court de l’élément

Attention : bloc non adapté pour les éléments de type formulaire, portrait ou forfait