Création de mises en page

La mise en page correspond à ce qu'affiche un écran : un fond et tout ce qui est disposé par-dessus. Si vous n'avez besoin que d'une seule image ou vidéo en plein écran, votre première mise en page Ce sujet est traité en quelques minutes. Cet article aborde l'étape suivante : la conception d'un design affichant plusieurs éléments simultanément à l'écran, et l'utilisation fluide de l'éditeur.

L'éditeur est une toile, pas une grille.

Les anciens outils d'affichage vous obligeaient à découper l'écran en cases fixes au préalable. easyCMS non. Vous obtenez un toile la taille de votre mise en page, et vous y faites glisser des éléments depuis boîte à outils Vous pouvez ensuite les déplacer, les redimensionner et les faire pivoter librement. Les éléments peuvent être placés côte à côte ou se chevaucher volontairement ; un logo superposé à une vidéo est simplement constitué de deux éléments empilés.

Trois types de choses sortent de la boîte à outils :

• médias de bibliothèque , les images, vidéos et fichiers audio déjà présents dans votre médiathèque .
• Widgets , contenu qui récupère ou génère quelque chose : horloges, météo, flux RSS, pages web, Tables pilotées par DataSet .
• Éléments , les éléments de design que vous utilisez pour créer : textes, formes et autres.

Sélectionnez n'importe quoi et le Propriétés Le panneau affiche ses paramètres. Avancé C'est dans cet onglet que vous pouvez modifier la durée d'affichage de cet élément.

Conception d'un modèle comportant plusieurs parties

Un exemple concret : un visuel principal avec une bande défilante en bas et un logo dans un coin :

1. Définir la mise en page Résolution Dans le panneau Propriétés, sans rien sélectionner, définissez une couleur ou une image d'arrière-plan.
2. Faites glisser votre image ou vidéo principale, puis étendez ses poignées pour remplir la zone supérieure. Utilisez le Snap to boutons, en bas à droite, pour l'aligner avec les bords de la toile.
3. Faites glisser un bandeau défilant ou un widget de texte sur la bande inférieure et dimensionnez-le à toute la largeur.
4. Déposez le logo en dernier pour qu'il soit au-dessus.

Pour faire pivoter plusieurs objets dans une même zone, placez un Liste de lecture Là, en revanche, positionnez-la et redimensionnez-la comme n'importe quel autre élément, puis ajoutez les éléments qui doivent défiler à l'intérieur. C'est là que beaucoup oublient qu'une playlist n'est pas une zone d'écran distincte que vous définissez au préalable, c'est simplement un autre élément que vous placez.

Calques, groupement et sélection

Les éléments qui se chevauchent doivent être classés. Gestionnaire de couches En bas à gauche, la liste affiche tous les éléments présents sur le canevas, avec leur calque et leur durée. Vous pouvez les réorganiser en les faisant glisser. Un clic droit sur un élément du canevas donne accès aux mêmes options.

Deux habitudes qui permettent de gagner du temps lors d'une conception complexe :

• Tracez un rectangle sur la zone de travail pour sélectionner plusieurs éléments à la fois et les déplacer ensemble sans perdre leur alignement.
• Prise changement , cliquez sur chaque élément, puis cliquez avec le bouton droit et choisissez Éléments du groupe maintenir un groupe uni de façon permanente.

Résolution et orientation

Adaptez la résolution de la mise en page à l'écran. 1920×1080 pour la plupart des écrans paysage, 1080×1920 pour un écran vertical, auquel cas la zone de travail devient verticale et vous dessinez directement dans cette forme.

Une mise en page affichée sur un écran de format différent est redimensionnée pour s'y adapter, ce qui entraîne l'apparition de bandes noires. Créez des versions distinctes en mode portrait et paysage pour tout élément important. Résolution et orientation de l'écran couvre les cas délicats.

Aperçu avant l'affichage à l'écran

Le jouer Le bouton en bas à gauche permet de prévisualiser la mise en page dans votre navigateur. Il repère les problèmes visibles à l'écran mais invisibles lors de la conception : un texte trop petit pour être lu à distance, un élément qui en chevauche un autre, une vidéo au format incorrect. C'est beaucoup plus économique que de s'en apercevoir sur le terrain.

Publier et modifier un contenu déjà en ligne

Une configuration comporte deux états, et un seul d'entre eux est joué.

UN brouillon Il peut être modifié librement et n'apparaît sur aucun écran. publié La mise en page est celle qui affiche le jeu. L'option « Publication » se trouve dans le menu à trois lignes, en haut à droite.

Lorsque vous modifiez une mise en page déjà publiée, easyCMS crée un brouillon et laisse la version en ligne inchangée. Vos modifications ne s'affichent à l'écran que lors de la nouvelle publication ; vous pouvez donc retravailler une mise en page en cours de journée sans risque.

Attention Un changement invisible à l'écran est très souvent une mise en page modifiée mais jamais republiée.

Rendre le texte lisible

• Le texte est lisible à plusieurs mètres de distance. Utilisez une taille d'image nettement supérieure à celle affichée sur votre écran.
• Un contraste élevé est préférable, surtout dans un magasin lumineux ou près d'une fenêtre.
• Un message par mise en page. Alternez plusieurs mises en page plutôt que de surcharger une seule.

Articles connexes : Votre première mise en page , Listes de lecture et médiathèque , Planification du contenu , Résolution d'écran, orientation et dimensionnement de la mise en page