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

Tutoriels détaillés Gantry5

Gantry 5 prend en charge la librairie de polices d’icônes Font Awesome’s intégrée directement à sa base. Cela signifie que toute personne utilisant un modèle propulsé par gantry aura la possibilité d'utiliser l'une de ces polices vectorielles incroyables partout sur sa page.

selecteur icone1

Celles-ci servent comme des alternatives légères à des fichiers d'image, peuvent ajouter un élément visuel à une option de menu ou donner un accent accrocheur à un bloc de texte. Vous pouvez les ajouter à particules, ainsi qu’à des champs dans le panneau d'administration de votre thème Styles pour ajouter un élément configuré facilement à votre site.

Utilisation du sélecteur d’icône

selecteur icone2
  1. Search : Fonction de recherche
  2. Fixed width : donne une largeur fixe à l’icône
  3. Spinning : fait tourner certaines icônes en permanence (icônes d’attentes par exemple)
  4. Size : régle la taille de l’icône (large, 2x, 3x, 4x, 5x)
  5. Rotation : oriente l’icône : (vertical flip, horizontal flip, rotate 90°, rotate 180°, rotate 270° )
  6. Select : vous permets d’affecter licône choisi au champ de votre outline)

Ajouter le sélecteur d’icône à votre Site

 

Le sélecteur d’icones 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.icon dans le fichier YAML associé.

Voici un exemple du code YAML nécessaire pour ajouter un champ sélecteur icône aux paramètres d’une particule qui pourrait ensuite être mis à votre disposition dans la particule.

icon:
  type: input.icon
  label: Icon
  description: Select the icon you would like to use.
  default: fa fa-rocket

 

Un parfait exemple de ce champ en action est dans la particule to top, qui fait partie de l’ensemble de particules de base de gantry 5.

Vous pouvez trouver les fichiers totop.html.twig et totop.yaml dans ROOT/media/gantry5/engines/nucleus/particles/.

Ici, vous pouvez voir exactement comment le champ input.icon est ajouté et utilisé dans la particule.

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

Gantry 5 comprend un nouveau Sélecteur de polices qui vous donne la possibilité de sélectionner des polices pour une variété de situations, y compris les templates, les particules et plus encore.

Le sélecteur de police facilite le choix rapide des polices dans les particules.Le sélecteur apparaît lorsque vous cliquez sur un champ spécial dans le backend qui vous donne la possibilité de définir une police pour une particule, ou même pour le thème lui-même.

Basé sur Google Fonts, le sélecteur de polices vous donne un accès immédiat à plus de 600 polices libres.

Vous pouvez trouver plus d’informations sur l’ajout d’une police dans le sélecteur de polices (ainsi qu’à votre thème en général) dans notre guide des polices.

Parcourir les polices de caractères

1
  1. champ de texte de test: Entrez le texte que vous souhaitez voir dans différentes polices ici.

  2. recherche: Utilisez ce champ pour rechercher une police par son nom. Le numéro dans le coin en haut à droite du champ indique combien de résultats correspondent à votre chaîne en cours.

  3. Navigateur de polices: Les polices disponibles sont répertoriées dans cette zone du sélecteur de police. Vous pouvez faire défiler vers le bas pour voir toutes les différentes options, chacune affichant votre texte de test dans la police associée. Pour sélectionner une police, cliquez sur la case à cocher située à gauche de la police que vous souhaitez utiliser.

  4. Catégories: Ce paramètre permet de filtrer les polices par catégorie. Il s’agit d’un outil utile pour affiner votre recherche par type de police, plutôt que de faire défiler l’intégralité de votre bibliothèque.

  5. Subsets (sous-ensembles): Ce paramètre vous donne la possibilité de filtrer les résultats par sous-ensemble. Par exemple, vous pourriez rechercher une police précise en caractères latins.

  6. Select: Utilisez le bouton de sélection vert pour valider votre choix de police (énumérés dans le texte directement à gauche). Pour choisir une police, il suffit de sélectionner la case à cocher dans la liste des polices dans le navigateur de la police.

 

Lorsque vous cliquez sur l’icône polices à droite du champ sélecteur de polices, une fenêtre apparaît qui vous permet de taper une phrase et de la voir présentée dans plus de 670 différentes polices de caractères de la librairie Google Font.

2

Pour vous faciliter la vie, vous pouvez filtrer ces résultats par catégorie et sous-ensemble, ainsi que rechercher une police spécifique à l’aide de l’outil de recherche dans le coin supérieur droit du popup.

3

Il s’agit d’une manière très simple et rapide d’obtenir non seulement un aperçu de ce à quoi ressemblerait un bloc de texte avec une police différente, mais aussi d’appliquer cette police sur votre page la choisissant en simplement et en appuyant sur Select.

Sélection des graisses de police et ensemble de caractères

4

Vous avez la possibilité de sélectionner rapidement et facilement des graisses (weight) de police et des jeux de caractères dans le Sélecteur de police. La sélection de ceux-ici va les rendre disponibles dans votre thème.

La graisse de police (thin, light, normal, etc.) détermine la façon dont la police apparaît en frontend. Cela peut être un excellent moyen de différencier les titres et les sous-titres de votre contenu, d'améliorer la typographie générale de votre site, et plus encore.

Les jeux de caractères sont particulièrement utiles pour les sites multi-langues parce qu’ils vous permettent d'utiliser le latin, grec, cyrillique, etc. caractères. Vous pouvez sélectionner un ou

plusieurs jeux de caractères, mais toutes les polices ne prennent pas en charge les jeux de caractères supplémentaires.

Voici les étapes à suivre pour accéder à ces contrôles:

  • Ouvrez le sélecteur de police dans le backend de Gantry.

  • Recherchez une police spécifique que vous souhaitez utiliser dans le champ de recherche. (Par exemple: Roboto)

  • Activez la case à cocher en regard de la graisse (s) de police que vous souhaitez utiliser.

  • Sélectionnez le nombre d’ensembles de caractères sélectionnés en haut de la liste des polices.

  • Sélectionnez l’ensemble de caractère, que vous souhaitez utiliser.

Utilisation de la Graisse de police dans votre site

Maintenant que les graisses de police sont disponibles dans le thème, elles peuvent être ajoutées au CSS du site.

Exemple

La police sélectionnée dans cet exemple est Exo:800

.your-element{   font-weight:800; }

Remplacez .your-element parl’id(#) ou la classe(.) de l'élément Remplacez 800 avec la variation choisie.

Les polices Roboto et Ubuntu sont deux des ensembles de polices les plus complètes dans la librairie Google Font.

 

Toutes les polices dans la Google Font Library n’ont pas obligatoirement des variations.

Ajouter le sélecteur de polices dans votre Site

5

Le sélecteur de polices 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.fonts dans le fichier YAML de la particule .

Voici un exemple de la façon dont cela se présente dans le fichier YAML.

 

target:
      type: input.fonts
      label: Font
      description: Select the font you would like to have used for content in the Particle.
      default: family=Inconsolata:700,400&subset=latin,latin-ext

 

 

 

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

Contact
Parlons social
Recevoir des nouvelles du site