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

Helix possède par défaut 4 préréglages

Vous y accédez par l'onglet préréglages / preset (en anglais)

Choisir un préréglage Helix

Dans l'onglet préréglages, vous avez par défaut 4 préréglages.

Si vous cliquez sur un des presets, vos options de styles changent et vos css seront gérées par le fichier : templates/votre template_helix3/css/presets/presetX.css

Les trois valeurs que vous pouvez changer sont

la couleur de fond de votre contenu lorsque celui ci est en mode encadré.
La couleur de texte
La couleur principale qui modifie plusieurs éléments: les boutons, le footer, les liens , certains titres …

Le choix du preset va également modifier votre logo qui se trouve dans le dossier templates/votre_template_helix3/images/presets/presetX

preset1

Modifier la couleur d'une option des préréglages

Une fois choisi un préreglage, vous aurez peut être envie de modifier une des options, changer la couleur de fond de votre template par exemple.

Deux possibilités s'offrent à vous :

Avec l'éditeur de couleur :

preset2

Cliquez sur la couleur
une popup s'ouvre
Choisissez votre palette
Choisissez votre couleur dans la palette

Directement en hexadécimal

Sur le web, la même couleur peut être codée soit en nuances de rouge vert et bleu (rvb ou rgb), soit en hexadécimal, soit directement par leur nom anglais (red, white)

Les couleurs sur Helix sont en hexadécimal.

Nous pouvons saisir le code de 6 chiffres qui commence toujours par un # dans l'espace dédié.

Pour bien choisir le code hexadécimal vous avez des outils qui peuvent vous aider.

En ligne : http://www.toutimages.com/generateur_nr_2.htm
En téléchargement : colorpic : http://www.iconico.com/colorpic/ outil qui vous permets de sauvegarder des palettes. (utile pour gérer plusieurs sites)
En addon pour votre navigateur : colorzilla https://addons.mozilla.org/fr/firefox/addon/colorzilla/

N'oubliez pas de sauvegarder et de vider vos caches avant d'aller vérifier vos changements sur le site.

Pour un client, pour créer un template destiné à la vente, ou tout simplement pour vous même, vous aurez peut-être besoin d'ajouter un ou plusieurs preset dans helix, en supplément de vos 4 presets de base.

Suivez les étapes pour...

Lire → Ajouter un preset dans Helix.

Les options de couleurs sont limitées dans Helix au nombre de trois.

Pour différentes raisons vous pourriez avoir envie d'ajouter un selecteur permettant à n'importe quel utilisateur de modifier la couleur d'un ou plusieurs éléments.

Le sélecteur couleur de fond...

Lire → Ajouter une option de couleur à un des préréglages helix

Helix mets à votre disposition un outil vous permettant de modifier certaines polices (ou fontes, selon vos habitudes de langage), basé intégralement sur Google fonts.

Au moment de la création de votre site internet, vous choisirez ainsi en quelques clics...

Lire → Typographie de base Helix

Pour vos clients, dans le cadre de la création de template destinés à la vente ou au partage, ou tout simplement pour vous même, vous pouvez considérer que les sélecteurs installés par défaut ne suffisent pas.

Nous allons voir comment...

Lire → Ajouter des sélecteurs de polices dans votre onglet.

Plus d'articles...

Page 14 sur 25

Tutoriels sur Joomla et la création de site