Le sous-menu global se décompose en 8 options (et ce n’est qu’un des 11 sous-menus !). Courage !

• Typographie, comme son nom l’indique, va permettre de choisir les polices de présentation de votre blog.

A noter qu’il est possible de prérégler les typographies des niveaux de headers, ce qui est un plus !

• Couleurs permet de définir une palette.

En cliquant sur le “style guide” (à côté de la croix”, vous obtenez un aperçu plus détaillé des différents objets que vous pouvez utiliser afin d’avoir un aperçu de l’effet de vos modifications

Il faudra procéder à de nombreux essais dans vos choix avant d’obtenir laborieusement à un résultat qui soit convenable.

• Conteneurs vous permet de modifier le cadre global de la zone large de votre site, selon que vous destinez votre site à des écrans de Desktop ou des mobiles.

Vous disposez aussi de curseurs pour un réglage au pixel près.

L’intérêt est discutable pour un CMS comme WordPress qui est déjà responsive.

• Boutons permet de régler l’apparence (texte, fond, bordure) de vos boutons

Vous avez deux niveaux de boutons (sans rapport avec l’état Repos- Pointé – Cliqué) et il est conseillé d’activer l’affichage “style guide” pour observer les résultats de vos tests.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

• Retour en haut est une option très utile qu’il faut activer. Elle permet au visiteur de revenir en haut de page (et d’y retrouver votre menu).

C’est le cas sur ce site (voyez en bas à droite). Ce bouton de retour vous suit au fur et à mesure que vous descendez dans l’article.

• Accessibilité est une personnalisation de la surbrillance et des encadrements disponibles quand les options d’accessibilité de votre OS sont activées (personnes handicapées visuelles).

• Editeur de blocs permet de modifier le réglage de la proximité entre les éléments de votre blog.

Ce peut être pratique quand vous voulez compacter vos contenus (les paragraphes, notamment) mais un réglage trop serré peut nuire à l’affichage correct sur certains navigateurs.

• Divers permet d’activer “le défilement doux vers les ID”

Les ID sont des balises comme des tags ou des signets. Le scroll peut alors être “ralenti” pour ne pas provoquer un glissé trop brut. Bon, c’est un peu gadget, en fait, d’autant que cela ne sera pas du gout des processeurs graphiques des ordis de vos visiteurs.

Bon, la bonne nouvelle, c’est que les autres sous-options de personnalisation ne comportent pas elles-mêmes de sous-rubriques, comme Global.

Il faut soigner au mieux cette section car le Header de votre Blog est le premier élément que vont voir vos visiteurs.

• Entête > Eléments > titre du site & logo

Observez à droite les éléments prédisposés sur le header, que vous pouvez déplacer ou supprimer, voire remplacer par d’autres.

Pour la création de votre logo, utilisez votre logiciel de création graphique préféré ou, si vous êtes en panne d’inspiration, je vous conseille un créateur en ligne comme Free Logo Design qui fera l’opération pour vous en quelques instants.

• Tapez le nom de votre enseigne
• Cliquez sur “Get Started“
• Choisissez une catégorie qui correspond à votre activité
• Explorez les propositions de logos de Free Logo Design

• Cliquez sur celui qui vous correspond le mieux et costumisez-le.

• terminez par un Imprim écran pour sauvegarder votre œuvre (ce qui vous évitera de laisser votre mail pour vous inscrire).

Il vous faudra un format .jpg ou .png et une image de moins de 2 Mo si vous voulez qu’elle soit acceptée par votre blog (ce sont les paramètres par défaut de la plupart des plateformes).

• changer le logo > téléverser > parcourir les fichiers de votre ordinateur pour sélectionner votre création
• Recadrez votre logo et validez
• De retour dans l’interface de personnalisation, agissez sur le sélecteur de taille “largeur de logo” pour obtenir les dimensions que vous souhaitez

Pour ma part, je vais modifier légèrement la couleur du thème (dans Design) pour la faire correspondre à celle de mon logo

J’obtiens ce résultat :

• Ajoutez aussi le titre de votre site ainsi que son slogan
• Design > modifiez éventuellement la taille et la couleur des éléments

Vous pouvez aussi définir un favicon (mini logo qui apparaitra sur l’onglet du navigateur

Pour que cela fonctionne, il faut que votre image soit petite et carrée. Idéalement 150 X 150 pixels.

Je ne reprends pas le titre “Mediast9ph” dans ce favicon (il serait de toute manière illisible). C’est pour la même raison que je déconseille de placer le slogan dans votre logo.

Le favicon permet de repérer facilement vos onglets et constitue un plus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Le fil d’Ariane, inspiré de celui du labyrinthe de la mythologie (voir l’article sur Wikipédia) est, sur un site web, un développement du plan en ligne afin que le visiteur puisse comprendre à quel niveau il se situe et puisse remonter facilement l’arborescence de votre blog.

Ci dessus, un fil d’Ariane inséré dans cet article avec le bloc “fil d’Ariane Yoast“. Il permet au lecteur de visualiser à quel niveau il se situe sur le blog St9ph et de revenir facilement à l’accueil. Il concourt aussi au maillage interne, important pour votre bon référencement.

• Thème > Astra > personnaliser >Fil d’Ariane
• Définir si vous le voulez en entête (en choisissant “à l’intérieur“

C’est le plus simple. Ainsi, le fil d’Ariane est toujours visible au même endroit sans que vous ayez besoin de l’insérer dans vous différentes articles et pages comme je l’ai fait pour cet article quelques lignes plus haut

• Définissez le type de séparateur de niveau

Le 4ème [/] vous permet de personnaliser avec le symbole de votre choix

• Choisissez avec les boutons radions à quels endroits de votre blog le fil d’ariane doit apparaitre automatiquement.

C’est quoi une page 404 ?

C’est une page de remplacement quand le lien de rebond d’une page de votre site conduit vers une page qui n’existe plus ou qui ne fonctionne pas. En général, elle indique que la page demandée est introuvable, propose des excuses et donne un lien pour revenir à l’accueil du site. Son nom vient du code erreur informatique correspondant à cette situation.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Vous paramétrez ici l’apparence générale du site, surtout en termes de gabarit. Parcourez les onglets pour les détails

• Archive
• Publication seule

Il faut comprendre par archive la vue globale avant que le visiteur ait choisi un de vos articles

• Définissez les différentes options d’apparence du conteneur (cadre de vos éléments affichés) en observant les effets sur l’aperçu à droite. Vous pouvez régler :
  • la mise en page du conteneur (attention : “étroit” et “pleine largeur” suppriment l’affichage de la colonne latérale
  • les styles (la différence entre “ouvert” et “encadré” n’est pas flagrante si vous n’avez pas un Design très contrasté)
  • la mise en page de la colonne latérale (à maitriser pour l’examen)

C’est en effet ici que vous devrez sans doute choisir de l’afficher ou de la basculer de l’autre coté. Rappelez-vous que si vous avez un conteneur réglé sur “étroit” ou “pleine largeur”, ce réglage sera inopérant !

• la mise en page du blog (comment seront vignettés vos listes d’articles quand un visiteur les aura choisi dans une catégorie depuis votre menu)
• Les éléments de publication (ce qui apparait dans vos contenus) comme, par exemple, d’afficher l’extrait ou le contenu intégral d’un article dans la page qui les liste tous.
• Les métas, c’est-à-dire les éléments complémentaires qui renseignement sur vos contenus (date, auteur, mots clés associés …)
• Réglez également les éléments de Design si besoin

Ce sont les réglages de disposition une fois que le visiteur a choisi un article ou une page.

A observer principalement :

• publications similaires qui propose d’autres articles ressemblant en rebond en fin de lecture (basé sur les mots clés communs)
• L4affichage ou non des commentaires
• les options de conteneur comme dans l’onglet précédent, mais, cette fois, pour la page ou l’article lui-même

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Comme pour la section Blog , il s’agit de réglages de conteneur et de design, cette fois pour vos pages (et plus pour vos articles) ainsi que la page de résultats de recherche.

Idem, que pour le blog et les pages, se sont des options d’apparence.

A noter tout de même la possibilité d’épingler la colonne latérale pour qu’elle s’affiche tout le temps (comme le header et le footer).

C’est ici que vous pourrez insérer vos éléments de footer. (à maitriser)

Il ne s’agit pas d’une règle mais plutôt d’une coutume : On place souvent en footer des informations légales (cgu, politique de confidentialité, auteur et moyens de le contacter, ainsi que la barre de réseaux sociaux)

Sur ce blog, le footer propose tous ces éléments.

.

En cliquant sur le + d’une des zones du footer, vous pouvez insérer des blocs ou des liens à votre convenance

Astra vous facilite les choses en vous proposant de rappeler un menu secondaire que vous auriez préparé à cet effet ou les icones de vos réseaux sociaux

Vous pouvez même personnaliser le message mais pensez bien alors à afficher le libellé.

Il faut avoir au préalable construit vos catégories.

Ce sont vos catégories qui contiennent vos articles. En insérant vos catégories dans vos menus vous permettez ainsi à vos lecteurs de choisir les contenus qu’ils préfèrent parmi vos créations. Il s’agit en fait d’un filtre !

• Cliquez sur “créer un nouveau menu“
• Donnez lui un nom
• Cochez “menu principal“
• Cliquez sur Suivant
• Cliquez sur “Ajouter des éléments“, un bandeau se développe
• Développez “Catégories“
• Cochez toutes vos catégories et cliquez sur “Ajouter“
• Cliquez sur “organiser“
• Mettez vos rubriques dans l’ordre souhaité avec les flèches verticales (la plus à gauche du menu en haut de la liste)
• Décalez à droite les sous catégories avec la flèche droite afin d’indiquer que ce sont des sous-menus.

Rappel : N’oubliez pas de publier à la fin de vos manipulations afin de les appliquer réellement.

Vous serez surement obligé(e) de relooker l’apparence de ce menu. Par défaut le thème est gris claire sur fond blanc pour les sous rubriques :

• Cliquez sur le petit crayon au dessus du menu (visible si vous pointez dessus).

• Cliquez sur l’onglet Design de Personnalisation > menu principal
• Modifiez la palette des éléments de texte Normal – au Survol – actif jusqu’à obtenir quelque chose de lisible.

Vous pouvez aussi vous aider à rendre le texte plus lisible en jouant avec l’arrière plan.