La mise en forme des Blocs

Documentation du CMS Knowledge Place

Le panneau de configuration

Tous les Blocs de type Section, Ligne et Module disposent d’un panneau de configuration pour réaliser la mise en forme du Bloc correspondant.

Pour ouvrir ce panneau de configuration, cliquez sur le menu « Hamburger » du Bloc dans l’Editeur par Bloc, ou sur l’icône « Engrenage » du Bloc dans l’Editeur Visuel.

Le panneau de configuration est toujours organisé selon 3 onglets : Contenu, Design et Avancé.

Dans l’Editeur Visuel, vous disposez d’une fonction de recherche qui vous permet de localiser facilement la propriété que vous souhaitez modifier.

Profitez de toutes les possibilités créatives du CMS Knowledge Place pour offrir à vos utilisateurs des contenus élégants et variés, consultables sur tous les équipements fixes et mobiles.

Onglet Contenu

Dans cet onglet, vous définissez le Contenu d’un Bloc de type Section, Ligne, Colonne ou Module du CMS Knowledge Place.

 

Fond

Le CMS Knowledge Place vous propose de nombreuses options pour doter chaque Bloc d’un fond caractéristique.

Vous pouvez définir :

  • Une couleur de fond
  • Un dégradé de couleurs de fond, avec un paramétrage complet des caractéristiques de ce dégradé
  • Une image d’arrière-plan, avec un paramétrage complet de la mise en forme de cette image
  • Une vidéo d’arrière-plan, avec un paramétrage complet des caractéristiques d’affichage de cette vidéo

Lorsque vous ajoutez une image d’arrière-plan, vous pouvez basculer entre différents modes de fusion qui modifieront la façon dont votre image se mélange avec la couleur ou le dégradé d’arrière-plan.

La combinaison de modes de fusion avec des dégradés de fond peut créer des résultats assez impressionnants. Vous allez vous amuser à jouer avec toutes ces options

Etiquette admin

L’Etiquette Admin est un texte libre que vous pouvez définir pour chaque Bloc de vos Pages.

Les Etiquettes Admin sont affichées lorsque vous êtes dans l’Editeur par Bloc ou dans le mode « Grid Mode » de l’Editeur Visuel.

Elles vous permettent d’identifier facilement chaque Bloc de votre Page.

Onglet Style

Dans cet onglet, vous définissez le style d’un Bloc de type Section, Ligne ou Module du CMS Knowledge Place.

Pour un Bloc de type Ligne, vous pouvez définir certaines de ces caractéristiques de façon spécifique pour chaque Colonne de la Ligne.

 

Alignement

Ce volet vous permet de définir l’alignement horizontal :

  • d’une Ligne dans une Section
  • d’un Module dans une Ligne

Pour centrer verticalement un  Bloc dans son Bloc parent, par exemple un Module dans une Colonne d’une Ligne :

  • Ouvrez le panneau de configuration du Bloc parent
  • Cliquez sur l’onglet « Avancé »
  • Dans le champ « Classe CSS », entrez la classe « kpcms-vertical-align »

Les Blocs enfants de ce Bloc parent sont maintenant centrés verticalement.

 

Dimensionnement

Ce volet vous permet de définir une largeur personnalisée pour le Bloc.

 

Dividers

Ce volet est uniquement disponible pour les Blocs de type Section et permet d’afficher un effet visuel entre deux Sections consécutives.

Avec les Dividers, vous ajoutez des formes et des effets personnalisés à vos Pages, vous créez des transitions dynamiques entre les Sections et vous ajoutez une touche personnelle au design de vos formations.

Les Dividers peuvent être placés au-dessus et au-dessous de chaque Section de votre Page, ce qui vous permet de créer facilement des effets de transition époustouflants entre les différentes parties de votre page.

Vous pouvez choisir entre 26 formes différentes, dont chacune peut être retournée, redimensionnée, répétée, combinée et personnalisée pour créer une vaste gamme de modèles.

Ces formes sont construites en utilisant SVG, ce qui signifie qu’elles vont évoluer sans perte de qualité, elles seront parfaites sur les appareils Retina et elles sont très légères et ne nuiront pas à la vitesse de chargement de vos Pages.

Chaque forme peut être entièrement personnalisée. Vous pouvez redimensionner les formes à n’importe quelle hauteur en utilisant à la fois les pixels et les unités en pourcentage. Les formes peuvent également être répétées pour créer des motifs uniques. Chaque forme prend une identité entièrement différente lorsqu’elle est répétée plusieurs fois.

Les formes peuvent être placées au-dessus et au-dessous de chaque Section de votre Page. Elles peuvent également être placées au-dessus du contenu de votre Section ou sous le contenu de votre Section. Cela vous permet de créer des effets uniques en superposant du texte et des images de manière créative.

Les Dividers sont très faciles à utiliser grâce à l’héritage automatique des couleurs. Quand un nouveau Divider est ajouté, il prend automatiquement la couleur de votre Section actuelle et de la Section adjacente, créant une transition transparente entre les deux sans vous obliger à personnaliser les couleurs. Lorsque vous déplacez la Section ou ajustez les couleurs d’arrière-plan de votre Section, la couleur du Divider est automatiquement mise à jour.

Espacement

Ce volet vous permet de définir les caractéristiques d’espacement pour le Bloc :

  • La marge correspond à l’espacement entre ce Bloc et les Blocs adjacents
  • La marge interne correspond à l’espacement entre les bords du Bloc et le contenu du Bloc

Vous pouvez définir des valeurs différentes pour les marges « Sommet », « Droite », « Bas » et « Gauche ».

 

Bordure

Ce volet vous permet de mettre en place une bordure pour une Section, une Ligne ou un Module.

Vous pouvez personnaliser la couleur, la taille et le style de votre bordure et ajuster chaque bord individuellement.

Les options de bordure viennent également avec la possibilité de créer des coins arrondis et d’ajuster individuellement le rayon de la bordure de chacun des quatre coins.

 

Box Shadow

Ce volet vous permet d’appliquer une ombre au Bloc et de définir ses caractéristiques.

Vous pouvez contrôler la couleur de l’ombre, sa position, le flou, son intensité, et définir une ombre intérieure ou extérieure.

En plus de créer vos propres styles d’ombre, vous pouvez choisir parmi plusieurs préréglages que nous avons conçus pour vous.

Ces sept styles vous permettent d’appliquer rapidement tous les effets d’ombre les plus courants en un seul clic. Une fois appliquée, l’ombre peut être encore personnalisée en utilisant l’ensemble des réglages disponibles.

Il y a tellement de façons amusantes d’utiliser les ombres pour donner vie à vos créations. Ajoutez des ombres aux Modules Boutons pour les faire ressortir, ajoutez des ombres aux images pour aider à donner de la profondeur à votre conception, ou même ajouter des ombres à des Sections entières pour ajouter un petit plus à la séparation.

 

Filtres

Ce volet vous permet d’appliquer des filtres aux Blocs de type Section, Ligne ou Module du CMS Knowledge Place.

Vous pouvez modifier la teinte, la saturation, la luminosité, le contraste, l’inversion de couleurs, ajouter un effet sepia et rendre le contenu plus ou moins opaque ou plus ou moins flou.

Ces réglages sont en particulier très utiles pour les Modules Images, pour lesquels vous pouvez appliquer des effets qui donnent à vos images un design compatible avec celui de chaque formation.

 

Animation

Ce volet vous permet d’appliquer une animation au Bloc et de définir ses caractéristiques.

Onglet Avancé

Dans cet onglet, vous  pouvez définir des caractéristiques avancées de mise en forme d’un Bloc de type Section, Ligne ou Module du CMS Knowledge Place.

Pour un Bloc de type Ligne, vous pouvez définir certaines de ces caractéristiques de façon spécifique pour chaque Colonne de la Ligne.

Ces caractéristiques sont définies en utilisant le langage CSS normalisé par le W3C.

Si vous ne connaissez pas le langage CSS, n’ayez aucune crainte ! Il est très simple et de nombreux tutoriels sont disponibles sur Internet.

 

ID CSS

Dans une Page, chaque Bloc peut être associé à un ID qui permet de l‘identifier de manière unique dans la Page.

Vous pouvez appliquer un style CSS spécifique à un Bloc en définissant un ID pour ce Bloc et en définissant les propriétés CSS associées à cet ID.

Pour définir un ID pour un Bloc :

  • Cliquer sur le volet « ID et Classes CSS »
  • Entrer l’ID à utiliser dans le champ « ID CSS »
  • Enregistrer votre Page

Pour définir le style à appliquer pour cet ID :

  • Cliquer sur le menu « Design → Couleurs et styles »
  • Dans l’onglet « Général », champ « Personnaliser CSS », entrer les propriétés du style à appliquer pour cet ID uniquement

La syntaxe à utiliser est la suivante :

#id-du-bloc {
propriété CSS à appliquer au Bloc;
}

Par exemple :

#bio-formateur {
background-color: #201556;
font-size: 15px;
}

La propriété ID CSS est à utiliser si vous avez besoin d’appliquer un style spécifique à un Bloc et que vous utilisez ce Bloc dans différentes Pages.

Si vous avez besoin d’appliquer un style spécifique à un Bloc et que ce Bloc n’est présent que sur une seule Page, nous vous recommandons d’utiliser le volet Personnaliser CSS décrit plus loin

 

Classes CSS

Dans une Page, chaque Bloc peut être associé à une ou plusieurs Classes CSS.

Vous pouvez appliquer un même style CSS spécifique à tous les Blocs utilisant la même classe CSS en définissant la même Classe CSS pour tous ces Blocs et en définissant les propriétés CSS associées à cette Classe.

Pour définir une ou plusieurs Classes CSS pour un Bloc :

  • Cliquer sur le volet « ID et Classes CSS »
  • Entrer la Classe à utiliser dans le champ « Classes CSS »
  • Vous pouvez entrer plusieurs Classes en les séparant par des espaces
  • Enregistrer votre Page

Pour définir le style à appliquer pour chaque Classe :

  • Cliquer sur le menu « Design → Couleurs et styles »
  • Dans l’onglet « Général », champ « Personnaliser CSS », entrer les propriétés du style à appliquer pour chaque Classe

La syntaxe à utiliser est la suivante :

#classe-de-bloc {
propriété CSS à appliquer aux Blocs utilsant cette Classe;
}

Par exemple :

#fond-vert {
background-color: green;
}

 

Personnaliser CSS

Dans une Page, chaque Bloc peut bénéficier d’un style CSS personnalisé.

Pour définir le style CSS personnalisé à appliquer à un Bloc :

  • Cliquer sur le volet « Personnaliser CSS »
  • Entrer les propriétés du style CSS à appliquer dans les champs correspondants

Par exemple, dans le champ « Elément principal », entrer :

background-color: #201556;
font-size: 15px;

 

Visibilité

Dans ce volet, vous pouvez choisir les types d’équipement pour lesquels le Bloc doit être actif, c’est à dire visible.

Cette caractéristique vous permet par exemple de remplacer un Bloc par un autre Bloc lorque la Page est affichée sur un smartphone.

  • Le Bloc Ligne « introduction » sera actif sur « Bureau » et « Tablette » uniquement
  • Le Bloc Ligne « introduction smartphone », à placer juste en dessous du précédent, sera actif sur « Téléphone » uniquement

 

Documentation CMS

Consultez la documentation du CMS Knowledge Place pour concevoir vos formations Responsive Learning en mode collaboratif.

Exemples CMS

Découvrez les possibilités du CMS Knowledge Place à travers ces exemples consultables sur équipement fixe ou mobile.

Documentation metaLMS

Consultez la documentation du metaLMS Knowledge Place pour concevoir des Knowledge Places utilisables en toutes occasions, en ligne comme en présentiel, sur poste fixe, tablette ou smartphone.

knowledgeplaces.com

Retrouvez toute notre actualité sur notre site Web.