+33 03 83 56 65 20 +33 06 87 42 95 30

Tutoriels détaillés Gantry5

Gantry 5 inclut un nouveau Sélecteur de couleurs Qui vous donne la possibilité de définir des couleurs pour un élément particulier de votre thème, une particule, etc.

selecteur couleur 1

Le sélecteur de couleur comprend cinq outils intégrés dont teinte, saturation, luminosité, opacité, et une palette de couleurs. Ces paramètres facilitent la configuration rapide de votre sélection de couleurs pour répondre à vos besoins.

Utilisation du sélecteur de couleurs

selecteur couleur 2

Le Sélecteur de couleurs de Gantry 5's comprend quatre onglets principaux , chacun avec son propre outil puissant pour vous aider à trouver et affiner la couleur que vous choisissez. Ces onglets sont :

Onglet

Description

HUE Cet outil vous donne la possibilité de choisir une couleur en fonction de la teinte, à l'aide du curseur arc-en-ciel à droite pour sélectionner une couleur générale et la zone principale d'affiner la sélection.
BRI L'outil de luminosité, vous donnant la possibilité d'affiner votre sélection de couleur en ajustant sa luminosité à l'aide du curseur de couleur sur la droite. La zone principale sert ici à vous permettre de naviguer rapidement entre les couleurs.
SAT L'outil Saturation est un moyen rapide et facile d'ajuster la saturation de la couleur. Déplacez le curseur vers le bas pour enlever la couleur, et vers le haut pour ajouter à son niveau de saturation. Comme l'outil Luminosité, la zone principale est utilisée pour sélectionner rapidement entre les couleurs de l'arc en ciel.
WHEEL Cet outil est une roue des couleurs de base, une méthode préférée de sélection de couleur par beaucoup.

 

En plus de ces outils, vous avez également la possibilité de régler le paramètre d’opacité de la Couleur en utilisant le curseur Transparence située sur la partie droite du sélecteur de couleur. Le bouton Transparent au bas du sélecteur de couleurs vous donne la possibilité de définir instantanément 0% d’opacité tout en conservant la teinte originale si vous choisissez d’y revenir plus tard en faisant glisser le curseur transparence vers le haut.

Ajouter le sélecteur de couleurs à votre Site

Le sélecteur de couleurs est un input (saisie) Gantry 5. Si vous souhaitez l’ajouter à votre template ou particule, vous le ferez en assignant la saisie en tant que input.colorpicker dans le fichier YAML associé.

Voici un exemple de la façon dont cela se présente dans le fichier YAML d'une section d'un thème. Dans cet exemple, feature.yaml est situé dans theme/blueprints/styles/.

name: Feature Colors
description: Feature colors for the Hydrogen theme
type: section

form:
  fields:

    background:
      type: input.colorpicker
      label: Background
      default: "#ffffff"
    text-color:
      type: input.colorpicker
      label: Text
      default: "#666666"

 

Cet exemple accomplit deux choses. Tout d'abord, il crée la section Feature dans le panneau d'administration Gantry Styles , ainsi que les réglages de couleur de Background et Text pour que vous puissiez facilement configurer dans l'administrateur Gantry 5.

Deuxièmement, il fournit des champs auxquels le thème peut se référer, fournissant la variable de couleur utilisée lorsque la page est rendue.

Vous pouvez trouver plus d'informations sur la façon d'utiliser les fichiers YAML dans Gantry 5 dans notre guide.

Utilisation des paramètres de bloc

Un des grands avantages de Gantry 5 est d'avoir la possibilité d'accéder facilement à tout et d’ajuster les paramètres à plusieurs niveaux. Vous pouvez faire des choses comme ajouter une classe CSS à une section entière, un seul bloc, ou dans une particule spécifique, ou dans une position - le tout dans l'administrateur Gantry.

Dans ce guide, nous allons nous concentrer sur les paramètres de blocs, qui sont les paramètres applicables au niveau du bloc. Nous avons abordé ce sujet dans le guide du gestionnaire de mise en page lorsque nous avons discuté des différences entre les sections, les blocs et les grilles. Nous allons maintenant plonger un peu plus profondément dans les Paramètres du bloc qui sont accessibles au sein de chaque élément dans le gestionnaire de mise en page, ainsi que dans les modules et les particules injectées qui apparaissent dans l'éditeur de menu.

Pour accéder aux paramètres des blocs

block settings 1

block settings 3

 

L’Accès aux Paramètres de bloc Pour un bloc donné est assez simple. Il vous suffit de sélectionner l'icône représentant une roue crantée des Paramètres pour le bloc dont vous souhaitez ajuster les paramètres.

block settings 2

Une fenêtre contextuelle s'affiche avec deux onglets, Particle et Block. Pour régler les paramètres au niveau du bloc, vous voulez sélectionner l'onglet Block.Il y a peut-être des paramètres similaires à l'onglet Particle, par exemple un champ pour les classes CSS,et en ajustant les paramètres, cela appliquera une classe CSS à la div de la particule, ou un segment prédéfini de la particule.Lorsque vous effectuez des modifications dans l'onglet Block, elles sont appliquées au niveau du bloc et affecte la totalité du contenu à l’intérieur du bloc.

Champs de paramètres de bloc

Voici une présentation des différents paramètres disponibles pour chaque bloc.

CSS id

Le champ CSS id sera probablement rarement utilisé dans les particules. Il vous permet d'assigner un sélecteur id CSS ici pour le bloc afin qu'il affecte tout à l'intérieur. Pour en savoir plus sur les sélecteurs CSS id cliquez ICI.

CSS Classes

Si vous souhaitez appliquer une classe CSS au niveau du bloc, c'est ici que vous le ferez. Toute classe CSS assignée ici affectera entièrement la particule, instance de module, ou contenu de la position.

Variations

block settings 4

Les variations sont des variables axées sur le thème qui peuvent être réglées rapidement en sélectionnant le champ, puis en cliquant sur l’option souhaitée. Ces variations peuvent inclure des effets, variations de boîte qui fixe le schéma de couleur du bloc dans son ensemble, et des options utilitaires telles que Align Right et Full Width.

Pour les utilisateurs de Joomla, vous pouvez toujours utiliser le champ Suffixe de classe Module pour un module donné, mais nous ne recommandons pas le faire si vous utilisez également des variations au niveau du bloc. Cela peut donner des résultats indésirables.

Attributs de balises (Tag Attributes)

block settings 5

Le champ Tag Attributes vous donne la possibilité d'appliquer rapidement des attributs de balise HTML au bloc. Cela peut inclure une variété de choses d’un attribut de style (photo ci-dessus) à un marqueur utilisé pour appliquer des effets JavaScript au bloc.

Taille de bloc (Block Size)

Le champ Block Size est l'endroit où vous pouvez saisir manuellement la largeur que vous aimeriez que le bloc prenne dans la grille horizontale.Si c'est le seul bloc que vous avez dans la ligne précise, ce serait probablement fixé à 100. Toute modification effectuée en faisant glisser la barre de séparation entre les éléments dans le gestionnaire de layout serait répercutée dans ce champ.

Contact
Parlons social
Recevoir des nouvelles du site