tutoriels frameworks / templates

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

Sous-catégories

Tutoriels Gantry5

Gantry5 remplace avantageusement Gantry4 !

Retrouvez-ici toutes les procédures pour prendre en main cet outil !

Tutoriels Helix

Retrouvez les tutoriels et toute la documentation Du framework Helix de Joomshaper traduite en français. (http://www.joomshaper.com/documentation/helix/)

Tutoriel Astroïd

Tutoriel ASTROÏD

Documentation en français sur le framework astroïd Pour Joomla

https://astroidframe.work/

par

Astroid c’est quoi ?

Astroid est un puissant framework moderne conçu pour les designers et les développeurs ou simplement pour vous aider à créer votre premier site web. Son interface intuitive vous aidera à créer des sites web et des templates basés sur Joomla cc réactifs, rapides et robustes. Astroid utilise les dernières technologies web et intègre et améliore les capacités de base de Joomla.

Caractéristiques

Construit pour Joomla 4, Joomla 5 & au delà!
Crée des sites web à chargement rapide
Structure 100 % réactive avec des contrôles utilisateur avancés par appareil
Compatible Bootstrap 5, Sass Ready, Custom CSS & SCSS si necessaire
Constructeur de mise en page ergonomique par glisser-déposer avec une flexibilité totale en matière de conception
Options flexibles pour le logo et l'en-tête (logo Retina, menu « collant », contrôles de la mise en page...)
Font Awesome 6 (Chargement externe ou locale)
Icônes sociales, téléphone et partage
Conception accessible et instructions textuelles Prêt pour le RTL/LTR
Animations des sections et des éléments et contrôles étendus de l'arrière-plan
Options avancées des menus (bannières de pages, icônes, sous-titres, badges...)
Sections off-canevas et options puissantes de " Mega Menu "
Contrôles typographiques avancés pour les polices externes (Google, etc.) ou auto-hébergées
Options avancées de blog (Informations sur l'auteur, Articles connexes, Temps de lecture, Partage social, Commentaires...)
Options de type d'article personnalisé (vidéos, galerie, audio, commentaires, citations et badges d'articles...)
Intégration illimitée de codes et de fichiers personnalisés (Javascript, CSS, code de suivi...)
Profils et thèmes personnalisés avec paramètres d'importation/exportation
Lazy Loading et optimisation du code JS et CSS
Open Graph
Possibilité d'intégration totale des modèles enfants de Joomla
Administration Ajax et thèmes de couleurs claires et foncées avec commutateur pour les visiteurs
Expérience utilisateur améliorée. Créez facilement le design que vous avez en tête.
Code de base remanié, amélioration de toutes les versions
Disponible dans plusieurs langues
Système puissant de widgets
Et plus encore ...
N'activez que ce dont vous avez besoin et demandez-nous de nouvelles fonctionnalités !

Pour démarrer :

Vous avez 2 minutes ?

Découvrez un aperçu vidéo du framework Astroid

Le Framework de Template YJSG est fourni avec un méga menu intégré. Cette fonctionnalité vous aidera à créer des groupes d'éléments de menu ou à publier des modules Joomla! dans vos éléments de menu. Après l'installation du plugin du système YJSG, il vous faut aller dans Menus->MENU_DE_VOTRE_CHOIX

megamenu 1

Sélectionnez un élément de menu et cliquez sur l'onglet Paramètres Yjsg Mega Menu.

megamenu 2

Paramètres expliqués

Le Mega MenuYjsg dispose de 9 paramètres simples qui vous aideront à configurer votre mise en page de mega menu. Veuillez lire les descriptions des paramètres pour comprendre le processus de création des groupes.

Nom du paramètre	Description du paramètre
Sous titre	Ajoute un sous-titre sous le titre de l'élément de menu
Agir comme que titulaire du groupe?	Définissez si cet élément de menu doit être le titulaire du groupe pour ses éléments enfants
Largeur du groupe	Définissez la largeur de support du titulaire du groupe. Cela devrait être la largeur totale de la largeur des sous-groupes réunis. Si vous avez 3 sous-groupes et chacun est de 200px de large, votre largeur de groupe devrait être large de 600px. Notez : n'entrez pas de px, définissez la largeur comme 600.
Nombre de sous-groupes	Il s'agit du nombre de sous-groupes au sein du groupe. Maximum 5, mais la plupart du temps on se sert de 3.
Largeur des sous groupes	Ici vous pouvez définir la largeur de vos sous-groupes. Si elle est laissée vide et que vous avez 3 sous-groupes, la largeur du groupe supérieur sera divisée par 3 et chaque sous-groupe aura cette largeur. Exemple: 600 / 3 chaque sous-groupe devrait être 200. Remarque: Ajoutez seulement une déclaration de largeur par ligne. N'incluez pas px.
Type d'élément de menu	Vous pouvez sélectionner quel type d'élément cela doit être . Module, position de module, lien normal. Si cet élément est un titulaire de groupe, veuillez laisser la valeur par défaut en lien normal.
Afficher le titre du lien, l'image et le sous-titre si le type de lien est module?	Si défini sur NON, le titre du lien, l'image du lien et la description du lien ne seront pas affichés. Cette option est fonctionnelle UNIQUEMENT si le type de lien est position de module ou module. C'est utile si vous aimez montrer seulement le module avec son contenu. Par exemple, un formulaire de connexion
Sélectionnez un ou plusieurs modules	Ici vous pouvez sélectionner un ou plusieurs modules à afficher à la place du lien de menu. Si plus d'un module ils seront affichés les uns sous les autres en commençant par le premier sélectionné.
Sélectionnez une ou plusieurs positions	Ici, vous pouvez sélectionner une ou plusieurs positions de modules à afficher à la place du lien de menu. Si plus d'une position de module, ils seront affichés les uns sous les autres en commençant par le premier sélectionné. Note: tout module doit être publié dans la position que vous recherchez afin d'être visible dans cette liste.

Activation / désactivation des paramètres

Pour votre commodité et pour ne pas vous confondre entre les noms de paramètres, nous avons ajouté un simple commutateur qui masquera les paramètres qui ne sont pas utilisés selon le type de lien que vous souhaitez utiliser

Vue par défaut

megamenu 3

« Agir en tant que titulaire du groupe » défini sur Oui

megamenu 4

Type de lien de menu = module

megamenu 5

Type de lien de menu = position de module

megamenu 6

Exemple de paramètrage

Suivez ces instructions pour configurer votre premier mega menu . Le titulaire contiendra 2 groupes de 300px de largeur chacun et 1 élément de menu dans chaque groupe.

Étape 1

Allez à votre lien de menu ( nous allons utiliser l'élément de menu Accueil ) et ajoutez ces paramètres dans l'onglet Paramètres Yjsg Mega Menu:

Réglez le sous-titre comme vous voulez. Nous avons utilisé C’est l’accueil.
Définir Agir en tant que titulaire du groupe? sur OUI
Définir la largeur du titulaire de groupe à 600
Définir le nombre de sous-groupes à 2
Définir les largeurs des sous-groupes à 300 un par ligne.
Laissez le type d'élément de menu à Lien normal

Vous devriez avoir quelque chose comme ça

megamenu 7

Étape 2

Créer 2 nouveaux éléments de menu ( tout sauf un séparateur )et donnez-leur des noms comme Groupe 1 et Groupe 2.
Définissez votre titulaire de groupe ( Accueil dans notre cas ) comme leurs parents
Créer 2 autres éléments de menu, cela peut être n'importe quel type d'élément de menu et définir Groupe 1 comme parent pour le premier et Groupe 2 comme parent pour...

Lire → Instructions pour le Mega Menu YJSG

YJSG est livré avec plus de 400 icônes de polices fournies par FontAwesome que vous pouvez placer avant ou après le titre du module.

Pour configurer ceci, allez dans le gestionnaire de module, cliquez sur l'onglet Options du module Yjsg...

Lire → Icônes de titre de module YJSG

Faites-moi glisser ce contenu !

Tous les modèles basés sur YJSG sont fournis avec 3 panneaux coulissants que vous pouvez utiliser pour publier votre contenu. Les panneaux coulissants sont complètement responsives et sont visibles sur tous les appareils. Leurs emplacements...

Lire → Activer les panneaux coulissants

Pour affiner le balisage et rendre les coins arrondis plus rapides et plus faciles à comprendre, nous avons utilisé de simples classes CSS .addround
avec par défaut 5px border radius.

exemple:

.addround 
 {
 -webkit-border-radius:5px;
 -khtml-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 border:1px solid...

Lire → Coins arrondis simples

Il existe plusieurs façons d'inclure votre code Javascript personnalisé dans Joomla. Dans ce tutoriel, nous allons vous expliquer comment les utiliser et quel est le meilleur en fonction du code que vous souhaitez inclure.

Par le gestionnaire de Template

L'administration...

Lire → Ajouter du Javascript personnalisé dans YJSG

Plus d'articles...

Page 23 sur 25

Tutoriels sur Joomla et la création de site