Créer des mises en page

Dans easyCMS Studio, vous partez d’un modèle. Pour des mises en page libres, l’éditeur avancé vous permet de placer des éléments sur un canevas, d’utiliser des playlists et des calques, de définir la résolution et de publier en toute sécurité.

Dans easyCMS Studio, chaque design part de l’un de plus de 200 modèles ; votre premier design montre comment. Ce guide concerne le reste : une mise en page libre construite dans l’éditeur avancé, le concepteur de mises en page d’easyCMS classique.

Quand vous avez besoin de l’éditeur avancé

Design Studio Mise en page de l’éditeur avancé
Part d’un modèle Part d’un canevas vierge
Modifiez les textes, photos, polices et couleurs Placez autant d’éléments, de widgets et de zones que vous voulez, où vous voulez
L’enregistrement le publie Doit être publiée avant d’être diffusée

Modifiez les designs Studio dans Studio : les changements faits dans l’éditeur avancé sont remplacés la prochaine fois qu’ils sont modifiés dans Studio.

Ouvrir l’éditeur avancé

  1. Dans le menu du compte de Studio, choisissez Passer à easyCMS classique, puis Ouvrir easyCMS classique.
  2. Ouvrez Création > Mises en page et ajoutez une mise en page, ou ouvrez-en une existante.

Un écran qui affiche déjà une mise en page classique a aussi un bouton Éditeur avancé dans Mes écrans de Studio.

Le canevas et la boîte à outils

Faites glisser des éléments de la boîte à outils sur le canevas, puis déplacez-les, redimensionnez-les et faites-les pivoter librement. Les éléments peuvent se chevaucher.

  • Médias de la bibliothèque : images et vidéos de votre bibliothèque de médias.
  • Widgets : horloges, météo, bandeaux défilants, pages web, tableaux DataSet.
  • Éléments : texte, formes et similaires.

Sélectionnez un élément et le panneau Propriétés affiche ses paramètres ; son onglet Avancé règle combien de temps il reste à l’écran.

  1. Sans rien de sélectionné, définissez la Résolution et un arrière-plan dans le panneau Propriétés.
  2. Faites glisser votre image ou vidéo principale et étirez-la sur la zone supérieure. Les boutons Aligner sur, en bas à droite, l’alignent.
  3. Faites glisser un bandeau défilant ou un widget texte sur la bande inférieure, sur toute la largeur.
  4. Déposez le logo en dernier, pour qu’il soit au-dessus.

Pour faire tourner plusieurs éléments dans une zone, placez-y une playlist et ajoutez les éléments à l’intérieur. Une playlist est simplement un élément de plus que vous placez, pas une zone à définir d’abord.

Calques et groupes

  • Le gestionnaire de calques, en bas à gauche, liste chaque élément avec son calque ; faites glisser pour changer l’ordre.
  • Tracez un cadre sur le canevas pour sélectionner plusieurs éléments à la fois.
  • Maintenez Maj, cliquez sur chaque élément, faites un clic droit et choisissez Grouper les éléments pour les garder ensemble.

Résolution et orientation

Utilisez 1920×1080 pour le paysage et 1080×1920 pour le portrait. Une mise en page d’un autre format reçoit des bandes noires : créez donc des versions séparées de tout ce qui est important. Voir résolution et orientation de l’écran.

Prévisualiser, puis publier

Le bouton lecture, en bas à gauche, lance la mise en page dans votre navigateur.

Seule une mise en page publiée est diffusée. Publiez depuis le menu à trois lignes, en haut à droite. Modifier une mise en page publiée crée un brouillon et laisse la version en ligne tourner jusqu’à ce que vous publiiez à nouveau.

Attention Un changement que personne ne voit à l’écran est très souvent une mise en page modifiée mais jamais republiée.

Pour mettre une mise en page sur des écrans, utilisez la planification classique : voir planifier du contenu. Vous préférez un design Studio ? Demandez-nous et nous reconstruisons gratuitement une mise en page classique dans Studio.

Astuce Le texte se lit à plusieurs mètres : faites bien plus grand que ce qui semble juste sur votre moniteur, gardez un contraste élevé, et un seul message par mise en page.

Articles liés : Votre premier design, Playlists et la bibliothèque de médias, Planifier le contenu, Résolution d'écran, orientation et dimensionnement de la mise en page