Présentation #

Un thème pour créer une expérience d’apprentissage en ligne attrayante avec une large gamme de fonctionnalités additionnelles pour transformer votre site. #

Le thème Pimenko permet de créer une expérience d’apprentissage en ligne moderne et efficace en adaptant à vos besoins le fonctionnement classique de Moodle.

Avec ses fonctionnalités additionnelles, vous transformez votre site qui peut être utilisé sur tout type de projet : plateforme grand public, plateforme d’établissement supérieur, collège, lycées, plateforme dédiée à la formation pour adultes, etc. Son design adaptable et ses nombreuses fonctionnalités permettent de bénéficier d’une expérience unique pour vos cours en blended learning, en complément du présentiel ou 100% en ligne.

À propos du thème Pimenko

• Moodle 3.11 : branch MOODLE_311_STABLE
• Moodle 4.0 : branch MOODLE_400_STABLE
• Moodle 4.1 : branch MOODLE_401_STABLE
• Moodle 4.2 : branch MOODLE_402_STABLE

Des questions ou envie d’en savoir plus ?

Les principales fonctionnalités en un coup d’œil #

• Un design adaptable à votre image de marque (couleurs, polices, boutons, style .css)
• La possibilité de transformer l’index des cours en véritable catalogue avec des filtres et différentes possibilités mises en page
• La personnalisation des cours
• La modification de fonctionnalités de Moodle notamment sur l’achèvement d’activité, la navigation dans les cours, les liens visibles par les participants
• La personnalisation complète de la page d’accueil du site, de l’en-tête (header) et du pied de page
• Différentes mises en forme pour la page d’authentification
• D’autres fonctionnalités pour transformer votre site en plateforme grand public, portails, plateforme pour organisme de formation professionnelle, etc
  

Les fonctionnalités en détails #

Réglages généraux #

Cette option permet de choisir un des fichiers .SCSS de préréglage qui permette de changer globalement l’aspect du thème.

Cette option permet de charger un fichier .SCSS supplémentaire, de préréglage.
Glisser-déposer votre fichier .scss dans la zone de dépôt.

Cette option permet de charger un fichier de style .scss pour votre thème.
Glisser-déposer votre fichier .scss dans la zone de dépôt.

Cette option permet de définir la couleur principale de votre plateforme. Cette couleur sera appliqué à tous les liens de votre plateforme.
Souvent la couleur choisie correspond à la couleur principale de la charte graphique de votre entité.

Cette option permet de définir la couleur de fond des boutons ainsi que la couleur de fond des titres pour les blocs et les sections sur l’ensemble de votre plateforme.

Cette option permet de définir la couleur du texte des boutons sur votre plateforme.

Cette option permet de charger une image, en tant que favicon pour votre plateforme.
Les favicons sont les images (de la marque) affiché en petit dans les onglets du navigateur.

Cette option permet de définir une police d’écriture pour le site. Seules les polices d’écriture disponibles sur Google fonts, sont utilisables.
Si la police d’écriture que vous voulez n’est pas disponible sur google, vous pouvez toujours l’importer dans la zone de style additionnel.

Cette option permet d’ajouter une image de fond sur toutes les pages.
Nous recommandons d’ajouter de la transparence et d’utiliser une image épurée.
Voici des exemples de plateforme avec une image de fond :

Réglages avancés #

Vous trouverez deux zones de contenu dans lesquels vous pouvez ajouter du code en langage CSS, afin de personnaliser votre plateforme.
La première zone « SCSS initial brut », se chargera directement en arrivant sur votre site. On utilise cette zone principalement pour définir des variables ou des constantes, comme par exemple les codes couleurs de la marque, les polices d’écritures ou encore la hauteur de la barre de navigation principale.

Pour le reste de vos personnalisations en CSS, remplissez la deuxième zone, nommé « SCSS brut ».

Cette option permet de retirer certains blocs (utilisateurs connectés, badges, calendrier, …) de la liste des blocs disponibles après avoir cliqué sur le bouton « Ajouter un bloc ».
Par exemple, si vous souhaitez que les utilisateurs ne puissent pas ajouter un bloc permettant de voir la liste des cours, alors il vous pouvez renseigner l’identifiant du bloc (« course_list ») dans le champ blocs inutiles.
Si vous avez un doute sur l’identifiant d’un bloc, n’hésitez pas à nous contacter.

Cette option permet d’ajouter un fichier CSS dédié à la personnalisation des activités H5P de votre site.

Fonctionnalités Pimenko : catalogue, vignettes de cours et autres modifications du fonctionnement Moodle #

Cette option transforme l’affichage par défaut de la page avec la liste complète des cours (Tous les cours).
Ils apparaitront sous la forme d’une vignette avec le titre du cours et la description si elle est renseignée. Si vous avez ajoutez une image de cours, elle apparaitra en haut de la vignette.

Cette option modifie le titre de la page avec la liste des cours disponibles sur la page course/index.php.

Cette option permet d’afficher automatiquement le nombre d’inscrits sur les vignettes de cours. Cela est souvent utilise pour les plateformes grand public ou de type MOOC.

Si la visibilité du cours est sur « cacher », cette option permet quand même aux participants de voir la vignette du cours dans le catalogue. Attention : cette option fonctionne uniquement avec la méthode d’inscription « enrol synopsis » développée par Pimenko.
Lorsqu’un participant clique sur le cours, il accède à la page la description et peut s’inscrire en attendant son ouverture.

Cette option masque le résumé de cours dans les vignettes, et le remplace par un bouton d’information.
En cliquant sur l’icône « i », le résumé apparait dans une fenêtre surgissante

Si cette option est activée, l’image sera affichée à la fois sur la page d’accueil de cours mais aussi dans les ressources, les activités et les pages d’administration du cours.

Si cette option est activée, l’image sera affichée sous la forme d’une vignette de maximum 400px de largeur à droite de l’en-tête du cours. Si cette option n’est pas activée, l’image sera affichée sous la forme d’une bannière qui occupe l’ensemble de la largeur de l’en-tête du cours.

Cette option permet d’afficher un fond de couleur au premier plan, c’est-à-dire par-dessus l’image. Une transparence est automatiquement appliquée pour apporter un effet de filtre.
Dans les exemples ci-dessus un filtre rouge a été appliqué.

Cette option permet de modifier la couleur du titre sur la page d’accueil des cours.

Par défaut, le thème Pimenko affiche les conditions d’achèvement d’activité sous la forme d’une pastille en bas de chaque ressource ou activité. Cette option permet de reprendre le fonctionnement par défaut de Moodle : les conditions d’achèvement d’activités s’affichent en haut de la page sous la forme d’une étiquette.

Depuis Moodle 4.0, la navigation entre les activités et les ressources n’est plus disponible en bas de page. Cette option permet d’afficher un lien vers l’activité ou la ressource précédente et suivante.
Elle affiche également un menu déroulant pour accéder à n’importe quel contenu du cours.

Paramètres de la page d’accueil #

Le thème Pimenko permet d’ajouter un diaporama/carrousel sur votre page d’accueil.
Cocher l’option pour l’activer.

Affichez jusqu’à onze images dans votre diaporama.
Choisissez le nombre de slide/d’images du carrousel. Puis cliquez sur Enregistrer en bas de page, pour afficher les zones de contenu de chaque image.

Choisissez les images que vous souhaité affiché sur votre carrousel, ainsi que les légendes associées.
Pour une apparence visuellement harmonieuse, les images doivent suivre un ratio de 3:1 entre la longueur et la largeur (2100×700 par exemple).
Vous pouvez styliser le contenu de la légende ou encore ajouter un bouton ou un lien, par exemple.

Vous pouvez composer vous-même votre page d’accueil : elle peut être divisée en 8 lignes pour vous permettre d’ajouter votre contenu.
Pour chaque ligne, des options permettent de choisir les couleurs (texte, arrière-plan, liens …) et le nombre de colonnes.
Le thème Pimenko est paramétré sur une grille de 12 colonnes (comme le thème officiel Boost de Moodle). Cela permet de découper la page afin que le redimensionnement des zones de contenu s’adapte sur smartphone, tablette, et ordinateur.
Pour ajouter du contenu dans les zones, vous devez activer le mode édition sur la page d’accueil. Vous pourrez ensuite glisser/déposer des blocs de votre choix dans les zones créées.
Pour ajouter du contenu HTML ou des médias, utilisez les blocs « Texte ».

Si vous affichez les cours sur la page d’accueil du site, ils apparaissent sous la forme de vignettes. Ces options permettent de déterminer les informations à afficher.

Paramètres de la page d’authentification #

Cette option permet d’utiliser la page d’authentification classique du thème officiel de Moodle « Boost ».
Si cette option n’est pas activé, alors le modèle utilisé pour la page d’authentification sera celui de Pimenko.

Sélectionnez une image à afficher en arrière-plan de la page de connexion.

Choisissez ici parmi l’un des deux styles d’affichage : cover ou stretch.
Cover: Ce mode rogne automatiquement l’image mais permet d’obtenir une résolution optimale quel que soit la taille de la fenêtre de navigation.
Stretch: Ce mode garde toujours l’intégralité de l’image et adapte sa taille à la dimension de la fenêtre de navigation, ce qui peut fausser la résolution de l’image et lui donné un aspect étiré.

Barre de navigation #

Cette option permet d’ajouter une image, comme votre logo, dans la barre de navigation principale, à gauche.

Cette option permet d’ajouter une image en arrière-plan dans la barre de navigation.
Il est généralement nécessaire d’adapter le style (par exemple la hauteur de la barre de navigation).

Cette option vous permet de ne pas afficher le nom de votre marque.
Si le nom de votre marque figure déjà dans le logo, il est conseillé de cacher le nom du site.

Cette option permet de modifier la couleur de fond de la barre de navigation principale.

Cette option permet de modifier la couleur du texte dans barre de navigation principale.

Cette option permet de modifier la couleur des liens dans la barre de navigation principale.

Cette option permet d’afficher un menu « Mes catégories » dans la barre de navigation. Ce menu contient la liste des catégories de votre site sous forme de lien.
Vous pouvez décider d’inclure ou d’exclure les catégories cachées.

Cette option permet de supprimer certains des liens de votre barre de navigation.
Indiquer les identifiants des liens à supprimer de la barre de navigation.
Les identifiants doivent être séparés par une virgule « , ».
Par exemple pour supprimer la page d’accueil et la page mes cours, utilisez : home,mycourses

Cette option permet d’ajouter un lien ou un menu personnalisé à la barre de navigation.
Par exemple vous pouvez ajouter un lien ou un menu comprenant plusieurs liens vers des informations importantes ou vers une FAQ.

Saisissez chaque élément de menu sur une nouvelle ligne, dans le format :
– texte du menu, URL (optionnelle, pas pour un menu avec des sous-menus)
– texte à afficher dans une infobulle (optionnel)
– code de langue ou d’une liste de tels codes séparés par des virgules (optionnel, pour permettre l’affichage d’éléments en fonction de la langue).
Ces éléments doivent être séparés par des caractères « trait vertical » (|). Les lignes commençant par un tiret apparaîtront comme des sous-menus du menu précédent. Enfin ### désigne une ligne de séparation.
Exemple :

Cours
-Tous les cours|/course/
-Recherche de cours|/course/search.php
-###
-FAQ|https://une-url.xyz/faq
-Preguntas más frecuentes|https://une-url.xyz/pmf||es
Mobile app|https://une-url.xyz/app|Télécharger notre app

Cette option fonctionne comme la précédente, la seule différence étant que vos éléments personnalisés n’apparaîtront aux utilisateurs, qu’après leur connexion.

Pied de page #

Cette option permet de définir la couleur de fond du pied de page.

Cette option permet de définir la couleur des textes du pied de page.

Cette option permet de définir la couleur des liens du pied de page lorsque vous passez votre souris dessus.

Personnaliser votre pied de page, avec une structure en plusieurs colonnes (max 4).
Une option est disponible pour chaque colonne, vous pouvez y ajouter du texte, des liens, ou des images.
Le contenu s’adaptera à la taille de l’écran, en fonction du nombre de colonnes que vous utilisez.

Le plus souvent, trois colonnes sont utilisées.
Par exemple la première colonne peut contenir des informations générales.
La deuxième, des liens vers les mentions légales ou la politique RGPD.
Enfin la dernière contient le plus souvent des liens, sous forme d’icônes qui pointent vers vos réseaux sociaux.

Attention, si vous n’utilisez pas toutes les colonnes, pensez bien à ne rien laisser dans la zone des colonnes inutilisées, afin d’optimiser l’affichage.

Voici plusieurs exemple de footer personnalisé avec notre thème :

Conclusion #

Le thème Pimenko offre une personnalisation et une expérience utilisateur unique et claire. Il est le fruit de plusieurs années d’expertise et de développement.
Combinez les différentes fonctionnalités de ce plugin selon vos besoins et profitez d’un accompagnement personnalisé, afin d’optimiser votre plateforme de formation.