Dans l’article intitulé “SiteJet Builder : section Pages“, nous avons abordé les principales fonctionnalités permettant :
- d’ajouter de nouvelles pages ou d’en supprimer,
- de leur donner un nom ainsi que diverses informations SEO en rapport direct avec la thématique de chacune (description, mots-clés),
- de définir leur URL ainsi que leur place dans le menu de navigation,
- d’indiquer des métadonnées , etc.
L’objectif de SiteJet Builder est de vous aider à mettre en place rapidement un site Web soit à l’aide du module Intelligence Artificielle soit en utilisant la bibliothèque de modèles préconstruits de SiteJet Builder. Ensuite, libre à chacun de mettre en ligne directement ce que l’application aura généré ou d’utiliser ses fonctionnalités de personnalisation selon les besoins et les goûts. C’est ce que nous abordons dans cet article concernant la personnalisation du design et des styles :
- le texte (typographie),
- les couleurs et styles généraux,
- les boutons,
- la mise en page.
Personnaliser le texte (typographie) :
Lorsque vous modifiez la configuration par défaut de la typographie qui a été établie par SiteJet Builder, cela n’impacte pas une seule page de votre site mais l’ensemble de celui-ci. Si vous décidez que le texte principal de vos pages doit être en police Arial au lieu de Time New Roman, ce réglage s’appliquera sur toutes les pages une fois la modification validée. Idem pour ce qui concerne les titres des pages ou des zones de texte que vous installerez dans vos pages, etc.
Pour effectuer ces modifications, cliquez sur l’onglet “Design” situé en haut et à droite de l’écran. L’application ouvre d’office un encart avec l’option “Texte” préselectionnée :
L’option “Texte” se compose de 2 sections : “Texte” et “Titre“.
La section “Texte” permet de définir les caractéristiques du texte contenu dans le corps de chacune de vos pages, telle que la police de caractère choisie, sa couleur, l’épaisseur des caractères (standard, bold), le style (lettres droites ou italiques), l’alignement (gauche, centré, à droite, justifié ou sans alignement), l’espacement des lettres, la hauteur des lignes, etc. C’est également dans cette section que l’on détermine l’épaisseur des caractères (onglet “Bold“) et l’apparence des liens hypertextes (onglet “Links“) :
La section “Titre” fonctionne à peu près sur le même principe.
Personnaliser les couleurs et styles généraux :
Comme pour le texte, il est possible de configurer ces deux paramètres sur tout le site. Cette action s’effectue en passant par l’onglet “Design” puis en cliquant sur “Couleurs” :
Cet onglet permet de changer les couleurs prédéfinies pour certains éléments. Dans l’exemple ci-dessous, nous allons modifier la couleur de l’arrière-plan du site et remplacer la couleur blanche par une nuance de gris assez claire de manière à rester dans une certaine cohérence avec les autres couleurs. Pour cela, il suffit de cliquer sur le petit carré situé à côté du libellé “Couleur de l’arrière-plan” et de faire glisser le petit curseur sur la palette de couleurs jusqu’à obtenir la nuance souhaitée (voir les captures-images et l’animation vidéo ci-dessous) :
Personnaliser les boutons :
Les boutons sont configurés eux aussi via l’onglet “Design” puis en cliquant sur “Boutons” :
Un certain nombre d’options peuvent être paramétrées manuellement : le texte du bouton, l’existence d’une bordure et sa couleur, la marge interne entre le bouton et le texte de ce bouton, placer une ombre pour donner un petit relief, etc. Pour notre exemple, nous allons simplement modifier la couleur de l’arrière-plan (initialement noir) ainsi que la police de caractères.
Pour la première modification, il suffit de procéder comme expliqué dans l’étape précédente concernant le changement des couleurs et styles généraux du site et de cliquer sur “Appliquer” :
Avant modification, la police de caractères active pour les boutons est la police nommée “Podkova“. Pour la remplacer par exemple par la police “Arial“, vous pouvez soit saisir arbitrairement “Arial” dans le champ dédié ou encore faire une recherche et choisir parmi les polices Google.
Pour la première option, procédez ainsi :
Si votre choix se porte sur les polices fournies par Google, il faut cliquer sur la petite icône en forme de “loupe” pour que se développe une mini-liste déroulante et cliquer sur “Gérer les polices“. Ensuite, cliquer sur “Polices disponibles (Polices Google)“. Une liste déroulante des polices google s’affichera et vous pourrez sélectionner la nouvelle police associée aux boutons en cliquant sur le bouton “+” pour valider votre choix :
Personnaliser la mise en page :
Le dernier onglet disponible permet de définir de manière générale la présentation des pages de votre site. On y détermine la largeur du conteneur (la zone principale destinée à recevoir votre contenu), la hauteur des lignes, la marge intérieure (dans le cas où une bordure délimite votre conteneur) :
Les autres réglages sont secondaires et nous ne nous y attarderons pas.
Dès que toutes vos modifications sont terminées, il ne vous reste plus qu’à les valider en cliquant sur la petite icône en forme de “disquette” et à cliquer sur le bouton “Publier” :
