La création d'une marque personnalisée à l'aide du CSS

La personnalisation de la marque est essentielle pour transmettre votre image de marque et votre message à votre public. Avec l'éditeur de Virtual Lobby d'InEvent, vous pouvez personnaliser votre Virtual Lobby pour qu'il représente votre image de marque unique.

L'éditeur de Virtual Lobby d'InEvent offre un large éventail de personnalisations visuelles que vous pouvez configurer pour répondre à vos besoins en matière d'image de marque.

Pour savoir comment utiliser l'éditeur de Virtual Lobby, consultez cet article si vous utilisez la disposition Neo. Si vous utilisez la disposition Classique, reportez-vous plutôt à cet article.

En plus de l'éditeur de Virtual Lobby, vous pouvez également personnaliser votre événement de manière plus avancée en utilisant l'outil d'édition CSS.

L'utilisation de codes CSS personnalisés nécessite des connaissances techniques spécifiques. Cette fonctionnalité est donc plus adaptée aux experts qui connaissent bien les CSS.

Cet article vous guidera dans l'utilisation de l'éditeur CSS.

Comment puis-je activer l'outil CSS ?

Avant de commencer à utiliser l'outil CSS, assurez-vous que la fonction Marque blanche est activée. Pour ce faire, suivez les instructions ci-dessous :

  1. Accédez à Réglages > Outils au niveau de l'événement.
  2. Recherchez Marque blanche sous la section Start.
  3. Cliquez sur Modifier dans le coin supérieur droit de la page.
  4. Cochez la case Marque blanche.
  5. Appuyez sur Fin pour enregistrer vos modifications.
marque blanche outils

Assurez-vous également que l'option Marque blanche est activée dans les outils de l'entreprise.

Lorsque vous aurez activé la fonction Marque blanche, vous pourrez personnaliser plusieurs aspects de votre événement en utilisant le bouton code source qui apparaît aux endroits suivants de la plate-forme :

  • Événement > Détails : Ici, vous pouvez personnaliser votre événement et ses pages connexes (Virtual Lobby, formulaire d'inscription, site web, etc.) au niveau de l'événement en utilisant des codes CSS personnalisés.
  • Événement > Virtual Lobby > Layout : Vous pouvez personnaliser ici la mise en page de votre lecteur vidéo au niveau de l'événement en utilisant des codes CSS personnalisés.
  • Entreprise > Détails : Vous pouvez personnaliser vos événements et les pages associées au niveau de l'entreprise à l'aide de codes CSS personnalisés. En plus des pages d'événements, vous pourrez également personnaliser vos formulaires de réservation à partir de cet emplacement.

Comment utiliser l'éditeur CSS au niveau de l'événement ?

Pour utiliser l'éditeur CSS à partir du niveau de l'événement, procédez comme suit :

  1. Accédez à Événement > Détails
  2. Trouvez le bouton Code source sous Custom CSS.
  3. Cliquez sur Modifier dans le coin supérieur droit de la page.
Utilisateur CSS button

  1. Cliquez sur le bouton Code source. Une fenêtre pop-up apparaîtra, qui contient :
  • Un tableau d'antisèches contenant une liste de pages auxquelles vous pouvez appliquer des codes CSS personnalisés et leurs balises racine respectives.
  • Une fenêtre de texte CSS personnalisée pour saisir vos codes CSS personnalisés.
  1. Saisissez vos codes CSS personnalisés dans la boîte de texte CSS personnalisé.
  2. Appuyez sur Terminé pour appliquer vos modifications.
Saisir vos codes CSS personnalisés

Les codes HTML et CSS sous-jacents peuvent être modifiés de temps à autre. Lorsque vous personnalisez et téléchargez des règles personnalisées, vous comprenez et acceptez ces conditions.

Quelles sont les pages web que je peux modifier au niveau de l'événement ??

Vous trouverez dans le tableau suivant une liste des pages qui peuvent être éditées ou modifiées à l'aide de codes CSS personnalisés, ainsi que leurs balises racine respectives :

Cette liste de pages et de balises racines est également disponible dans l'éditeur CSS.

Page

Root

Site web

#websiteContent

Mon Compte

#myAccountWrapper

Mon Agenda

#myAgendaWrapper

Networking

#networkingWrapper

Mes Billets

#ticketManagerWrapper

Formulaires

#myFormsWrapper

Mon Appli

#appContent

Virtual Lobby

#liveWrapper

Formulaire d'inscription

#formVue

Formulaire personnalisée

#customFormVue

Acheter

#purchaseVue

Lorsque vous modifiez un élément de page, les balises racine doivent précéder tous les composants du code.

Comment utiliser l'éditeur CSS au niveau de l'entreprise ?

Pour utiliser l'éditeur CSS au niveau de l'entreprise, procédez comme suit :

  1. Accédez à Entreprise > Détails.
  2. Recherchez le bouton Code source sous Custom CSS.
  3. Cliquez sur Modifier dans le coin supérieur droit de la page.
Recherchez code cource

  1. Cliquez sur le bouton Code source. Une boîte contextuelle apparaît, qui contient :
  • Un tableau d'antisèches contenant une liste de pages auxquelles vous pouvez appliquer des codes CSS personnalisés et leurs balises racine respectives.
  • Un champ de texte CSS personnalisée pour saisir vos codes CSS personnalisés.
  1. Saisissez vos codes CSS personnalisés dans le champ de texte CSS personnalisé.
  2. Appuyez sur Terminé pour appliquer vos modifications.
Code source sous Custom CSS

Quelles pages web puis-je modifier à l'aide de l'éditeur CSS au niveau de l'entreprise ?

En plus de toutes les pages que vous pouvez personnaliser au niveau de l'événement, vous pouvez également personnaliser les attributs de votre formulaire de réservation à partir de l'éditeur CSS au niveau de l'entreprise.

Toute modification effectuée à l'aide de l'éditeur CSS au niveau de l'entreprise affectera tous les événements créés au sein de l'entreprise.

Comment utiliser l'éditeur CSS du lecteur vidéo ?

En plus de personnaliser le Virtual Lobby et d'autres pages, vous pouvez également personnaliser l'apparence de votre lecteur vidéo en utilisant des codes CSS personnalisés. Vous trouverez ci-dessous les instructions sur la façon d'utiliser l'éditeur CSS du lecteur vidéo :

  1. Accédez à Evénement > Virtual Lobby à partir du niveau de l'événement.
  2. Naviguez jusqu'à Layout sous Design.
  3. Recherchez le bouton Source code sous lecteur vidéo CSS.
  4. Cliquez sur Modifier.
Recherchez le bouton Source code sous lecteur vidéo CSS

  1. Cliquez sur le bouton Code source. Une fenêtre contextuelle s'affiche, contenant le tableau des antisèches et le champ de texte CSS personnalisée.
  2. Entrez vos codes CSS personnalisés dans le champ de texte CSS personnalisé.
  3. Cliquez sur Terminé pour appliquer vos modifications.
CSS du lecteur

Quels éléments puis-je modifier à l'aide de l'éditeur CSS du lecteur vidéo ?

Dans cette section, vous trouverez une liste des éléments du lecteur vidéo qui peuvent être édités ou modifiés à l'aide de CSS personnalisés, ainsi que les balises racine.

Lecteur

Root

Flux en direct

#liveStreamPlayerWrapper

Simulation en direct

#simuliveStreamPlayerWrapper

A la demande (pré-enregistré)

#onDemandPlayer

Codes CSS les plus fréquemment demandés

Les codes CSS les plus fréquemment demandés pour personnaliser le Virtual Lobby se trouvent ici.

Personnalisation d'autres éléments de la page

Pour personnaliser d'autres articles ou éléments de la page, consultez les instructions suivantes :

  1. Accédez à la page souhaitée.
  2. Repérez l'élément ou la rubrique que vous souhaitez personnaliser.
  3. Cliquez avec le bouton droit de la souris sur l'élément que vous souhaitez personnaliser. Un menu contextuel s'affiche.
  4. Cliquez sur Inspecter. Les outils de développement de votre navigateur s'affichent.
  5. Recherchez les propriétés de l'élément que vous souhaitez personnaliser sous Styles.
Personnalisation d'autres éléments de la page

  1. Remplacez les propriétés de l'élément comme vous le souhaitez.
Codes CSS


Comment ça a été?