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. 

Animation

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

Sélectionnez l'animation souhaitée parmis celles proposées

1. Sélectionnez les options d'effet à appliquer à l'animation.
2. Ajustement de la durée, du délai...
3. Cliquez sur « Aucun » pour supprimer une animation.

Boîte d’ombre

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

1. Sélectionnez la boîte d’ombre souhaitée.
2. 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.

Dimensionnement

Ce volet vous permet de définir une largeur personnalisée pour le Bloc, de maniière globlale ou en personnalisant individuellement selon les devices : ordinateur, smartphone ou tablette.

Cela permet d’optimiser l’affichage pour mobile et tablette, et le rendre plus responsive.

1. Personnalisez de manière globale.
2. Personnalisez selon le device.

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 ».

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.

Séparateur

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 Séparateurs, 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 Séparateurs 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 Séparateurs sont très faciles à utiliser grâce à l’héritage automatique des couleurs. Quand un nouveau Séparateur 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 Séparateur est automatiquement mise à jour.

Texte

Ce volet vous permet de modifier l’apparence des textes rapidement pour garantir une bonne lisibilité. 

Transformer

À l'aide des commandes de transformation, vous pouvez effectuer des réglages visuels en fonction de la performance de tout élément à l'aide d'une combinaison de paramètres. Cela vous permet de créer des effets de conception avancés sans recourir à un programme de conception graphique.

Échelle de transformation

La mise à l'échelle permet d'augmenter ou de diminuer la taille d'un objet.

1. Sélectionnez Échelle de transformation.
2. Redimensionnez la taille du bloc à l'aide de l'un des curseurs situé en bas ou à droite.
3. Modifiez la taille du bloc sans garder les proportions, pour cela :
      - cliquez sur l’icône située en bas à droite afin de désactiver Conserver les proportions (icône lien).
      - utilisez les flèches pour augmenter ou diminuer la taille du bloc.

Translation

La translation permet de déplacer un objet sur un axe.

1. Sélectionnez Translation.
2. Glisser le bloc à l'aide des curseurs situés en bas ou à droite.

Rotation

La rotation permet de faire tourner un objet.

1. Sélectionnez Rotation.
2. Faites pivoter le bloc avec les curseurs.

Inclinaison

L'inclinaison permet d'incliner un objet sur un axe.

1. Sélectionnez Inclinaison.
2. Inclinez le bloc à l'aide des différents curseurs.

Point d'origine

Le d'origine permet de sélectionner le point à partir duquel la transformation s'appliquera à l'objet.

1. Sélectionnez Point d'origine.
2. Modifiez le point d'origine à l'aide des curseurs.

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

Utiliser les pinceaux pour gérer les styles

Les styles sont personnalisables depuis l’onglet Style en mettant à jour les différentes propriétés.

Il est également possible de modifier les styles de manière plus rapide.

En survolant un Bloc, des pinceaux apparaissent sur chacune des parties du Module.

En cliquant sur l’un des pinceaux, vous accédez directement aux propriétés de la partie sélectionnée (volet image, volet titre texte, volet corps de texte… ) Pour cela :

1. Cliquez sur l’icône engrenage pour afficher les Paramètres du module.
2. Survolez le Bloc, puis cliquez sur le pinceau correspondant à la partie que vous souhaitez modifier.

Étendre les styles

Il est possible d’appliquer un style à plusieurs éléments dans une page, une section, une ligne ou une colonne.

Étendre les styles depuis la fenêtre des Paramètres

Depuis la fenêtre des paramètres du module concerné, ici nous avons pris l’exemple d’un bouton, il est possible d’appliquer tous les styles personnalisés à tous les boutons, de la page, la section, la ligne, ou la colonne.

1. Cliquez sur l’icône Engrenage du bloc pour afficher les Paramètres du module Bouton.
2. Cliquez sur l’onglet Style.
3. Dans le volet Bouton, faites un clic droit sur le mot Bouton.
4. Sélectionnez Étendre les styles de Bouton.
5. Depuis la fenêtre Étendre les styles, dans Étendre les styles de Bouton, sélectionnez  À… Tous Boutons.
6. Dans Tout au long de… sélectionnez À cette page.
7. Enfin cliquez sur le bouton Étendre.

Étendre les styles depuis le Module

Il est possible d’appliquer rapidement un style à plusieurs éléments, dans une page, une section, une ligne ou une colonne.

1. Cliquez sur les trois points situés à droite du module ou faites un clic droit sur le module bouton.
2. Dans la liste qui s’affiche sélectionnez Étendre les styles de Bouton.
3. Dans la fenêtre qui s’affiche sélectionnez l’option souhaitée.
4. Cliquez sur le bouton Étendre.

Le style du bouton a été étendu à tous les boutons de la page.

Copier-coller un style

Il est possible de copier-coller un style, sur tous les styles d’une Section, d’une Ligne, d’un Module, sur toutes les propriétés de style d’un volet en particulier ou sur une propriété de style individuelle.

Copier-coller le style d’un module

Dans cet exemple, nous voulons copier-coller le style du Module Bouton 1 vers le Module Bouton 2. Pour cela :

1. Cliquez sur les trois points situés à droite du module ou faites un clic droit sur le module.
2. Depuis le Bouton 1, sélectionnez Copie Modules Styles.
3. Depuis le Bouton 2, sélectionnez Coller Module Styles.

Le style du bouton 1 a été copié puis collé vers le bouton 2.

Bouton 2 modifié

Copier-coller une propriété de style

Il est possible de copier-coller une propriété de style individuelle.

Dans cet exemple, nous voulons copier-coller la propriété style police du Module Bouton 1 vers le Module Bouton 2. Pour cela :

1. Cliquez sur l’icône Engrenage du bloc pour afficher les Paramètres du module Bouton 1.
2. Cliquez sur l’onglet Style.
3. Sélectionnez le volet Bouton.
4. Faites un clic droit sur la propriété que vous voulez copier, ici Police Bouton.
5. Cliquez sur Copie Police Bouton.
6. Faites un clic droit sur le module Bouton 2 et sélectionnez Coller Police Bouton ou depuis la fenêtre des Paramètres du Bouton 2, faites un clic droit sur Police. Bouton et sélectionnez Coller Police Bouton.

Le style Police Bouton 1 a été copié puis collé vers le bouton 2.

Bouton 2 modifié

Réinitialiser les styles à leurs valeurs par défaut

Il est possible de réinitialiser les styles d’un Module, de toutes les propriétés d’un volet style ou d’une propriété de style individuelle.

Réinitialiser les styles d’un module

1. Cliquez sur les trois points situés à droite du module.
2. Sélectionnez Réinitialiser Module styles.

Réinitialiser un volet style

Depuis l’onglet Style des paramètres d’un module.

1. Faites un clic droit sur le volet dont vous voulez réinitialiser les styles.
2. Sélectionnez (dans cet exemple) Réinitialiser Les Rôles Espacement Styles.

Réinitialiser le style d’une propriété

Depuis l’onglet Style des paramètres d’un module.

1. Faites un clic droit sur le volet dont vous voulez réinitialiser la propriété d’un style.
2. Faites un clic droit sur la propriété de style à modifier.
3. Sélectionnez (dans cet exemple) Réinitialiser Les Rôles Texte Taille du Texte.