Section 3 du cours pour débutants
Bienvenue dans la section 3 du cours de formation en ligne de niveau débutant.
Après avoir terminé cette section, vous serez capable de :
- modifier les polices de caractères affichées sur votre site web
- modifier les polices de caractères sur une page spécifique de votre site web
- modifier les couleurs générales affichées sur votre site web
- modifier les couleurs d'une page spécifique de votre site web
Modifier le type et la taille de votre police
Vous pouvez modifier le type et la taille de votre police via l'option « Design » du menu (pour l'ensemble du site web) ou sur chaque page (pour les pages individuelles). Nous allons d'abord nous concentrer sur la police pour l'ensemble du site web. Dans le menu « Design », sélectionnez « Couleurs et polices ».
Faites défiler la page vers le bas jusqu'à trouver les options de la section Polices. Vous pourrez alors modifier : la police générale, la police des titres, la taille de la police et l'interligne.
Pour sélectionner une nouvelle police, cliquez sur le bouton bleu « Choisir une police ». Dans cet exemple, nous modifierons la police principale (générale) et la taille de la police, en choisissant Arial, Helvetica, URW Gothic L, sans-serif et une taille de 16 px.
Vous verrez également une case intitulée Polices personnalisées (Méta-inclusions). C'est ici que vous pouvez coller le code spécifique de Google Fonts, comme nous le ferons pour le titre. Pour ce faire, ouvrez un nouvel onglet dans votre navigateur et rendez-vous sur… Polices Google Sur le site web, recherchez la police Merriweather, sélectionnez-la et le site web Google Fonts vous affichera quelque chose comme ceci :
Le code situé sous Standard @ Import doit être copié puis collé dans la zone Polices personnalisées. Cliquez sur Modifier dans la zone Polices personnalisées, puis collez le code sous le code existant, comme ceci :
Cliquez sur le bouton « Enregistrer les modifications », puis fermez l’éditeur. Copiez ensuite le texte de la famille de polices et collez-le dans la zone « Police (Titres) », comme sur l’image ci-dessous, puis cliquez sur « Publier » pour enregistrer votre travail.
Modifier la police d'une page Web spécifique
Ouvrez votre page de conditions générales d'utilisation, car c'est sur cette page uniquement que nous modifierons le type et la taille de la police.
Commencez par sélectionner le sous-titre « Politique de retour », puis cliquez sur la flèche déroulante à côté du champ « Famille de polices » dans la barre d'outils d'édition. Notez que l'interface peut différer si vous utilisez un autre éditeur que TinyMCE3510 (le nom de l'éditeur actuel s'affiche en haut à droite ; vous pouvez ainsi changer de mode d'édition).
Sélectionnez la police Comic Sans MS ; seul le texte sélectionné adoptera cette police, tandis que le reste de la page restera inchangé. Sélectionnez à nouveau le texte « Politique de retour », puis cliquez sur la flèche déroulante à côté de « Taille de police » et sélectionnez l’option 24 pt. Vous remarquerez également que ce titre était par défaut de niveau H3 (Titre 3), ce qui convient parfaitement à cette page. Votre page « Conditions générales » ressemble désormais à ceci (voir la flèche rouge : le sous-titre est plus grand et utilise une police différente) :
Modifier les couleurs générales de votre site Web
Pour modifier les couleurs générales de votre site web, rendez-vous dans l'onglet « Design », puis sélectionnez l'option « Couleurs et polices ». Sur la page « Options de design », vous pourrez ensuite modifier les couleurs de différents éléments de votre site.
Les couleurs sont identifiées par un code hexadécimal ou un numéro de couleur, ce qui les rend plus précises que par exemple « bleu foncé ». Vous pouvez saisir votre code hexadécimal dans la case située à côté de l'élément dont vous souhaitez modifier la couleur, puis cocher une autre case pour enregistrer. Vous pouvez également cliquer sur le bouton « Choisir une couleur », sélectionner manuellement une couleur dans l'assistant de couleurs, puis cliquer sur le bouton « Utiliser la couleur ».
IMPORTANT – Notez le code hexadécimal de chaque couleur choisie dans un endroit sûr, comme un agenda ou un fichier sur votre appareil. Cela vous sera utile si vous devez modifier la conception de votre site web. (comme dans la section 1 du cours de niveau intermédiaire).
Voici les couleurs que nous avons choisi d'utiliser :
Enregistrez votre travail en cliquant sur les boutons « Enregistrer les modifications » puis « Publier ».
Modifier la couleur du texte sur des pages Web individuelles
Ouvrez à nouveau votre page CGU. Vous constaterez que la couleur du titre a été modifiée conformément à la couleur que vous avez choisie dans les options de conception. Cette modification s'applique à l'ensemble du site.
Il est possible de modifier la couleur du texte sur une page spécifique, et c'est ce que nous allons faire. Sélectionnez le titre « Politique de retour », puis cliquez sur le menu déroulant situé à côté de l'icône « Couleur du texte ». Vous verrez alors une sélection de couleurs prédéfinies, et vous pourrez également choisir d'autres couleurs en cliquant sur « Plus de couleurs ».
Pour cet exemple, nous sélectionnerons l'option « Plus de couleurs », puis nous saisirons le code hexadécimal #0628f8 dans le champ de couleur, et enfin nous cliquerons sur le bouton « Appliquer ». L'en-tête changera de couleur comme ceci :
Cliquez sur les boutons « Enregistrer les modifications » puis « Publier » pour sauvegarder votre travail.
Félicitations ! Vous venez de terminer la section 3 du cours de niveau débutant. Vous devez maintenant passer une évaluation, intitulée « Évaluation 1 », qui met en pratique les compétences acquises dans les sections 1, 2 et 3 de ce cours. La réussite de cette évaluation est indispensable pour obtenir votre certification. Elle sera corrigée par un membre de notre équipe d’assistance Website World.
