{"id":3983,"date":"2021-01-19T17:01:18","date_gmt":"2021-01-19T16:01:18","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=3983"},"modified":"2025-10-05T21:05:38","modified_gmt":"2025-10-05T19:05:38","slug":"personnaliser-theme-bludit-massively","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/","title":{"rendered":"Personnaliser le th\u00e8me Massively"},"content":{"rendered":"\n<p><strong>L&rsquo;un des th\u00e8mes de Bludit les plus impactants visuellement, se nomme \u201cMassively\u201d<\/strong>. Il s&rsquo;agit d&rsquo;un th\u00e8me adapt\u00e9 pour le CMS Bludit mais qui, initialement, a \u00e9t\u00e9 cr\u00e9\u00e9 par <a rel=\"noreferrer noopener\" href=\"https:\/\/html5up.net\/massively\" target=\"_blank\">HTML5UP<\/a> sous la forme d&rsquo;un site statique HTML-CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/html5up.net\/massively\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"566\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15-1024x566.jpg\" alt=\"\" class=\"wp-image-1816\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15-1024x566.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15-600x331.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15-768x424.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15-1200x663.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-15.jpg 1383w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><meta charset=\"utf-8\">\u279c Pour ce cours, je vous invite \u00e0 activer Massively sur votre site Bludit. Vous allez ensuite apprendre \u00e0 le personnaliser pour <strong>cr\u00e9er soit votre portfolio, soit une maquette de site pour le client pour lequel vous avez d\u00e9j\u00e0 travaill\u00e9 lors du TP2<\/strong>.<\/p>\n\n\n\n<p class=\"has-background-background-color has-background has-small-font-size\"><strong>Vous pourrez mentionner ce site dans votre portfolio<\/strong>, preuve de votre ma\u00eetrise de la publication en ligne \u00e0 l&rsquo;aide d&rsquo;un syst\u00e8me de gestion de contenus (CCP-3 du Titre Pro IMeP).<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Analyser_le_theme_Massively\" >Analyser le th\u00e8me Massively<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Identifier_les_qualites_de_Massively\" >Identifier les qualit\u00e9s de Massively<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Identifier_les_defauts_du_theme\" >Identifier les d\u00e9fauts du th\u00e8me<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Personnaliser_limage_de_fond\" >Personnaliser l&rsquo;image de fond<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Choisir_une_image_fonctionnelle\" >Choisir une image fonctionnelle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Comment_remplacer_limage_de_fond\" >Comment remplacer l&rsquo;image de fond<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Positionner_une_image_daccroche\" >Positionner une image d&rsquo;accroche<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Optimiser_leffet_produit_par_la_premiere_image_daccroche\" >Optimiser l&rsquo;effet produit par la premi\u00e8re image d&rsquo;accroche<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Epingler_un_article_et_modifier_sa_description\" >\u00c9pingler un article et modifier sa description<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Copier_et_coller_du_texte\" >Copier et coller du texte<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Identifier_le_probleme_des_textes_colles\" >Identifier le probl\u00e8me des textes coll\u00e9s<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Convertir_le_texte_copie_en_texte_brut\" >Convertir le texte copi\u00e9 en texte brut<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Utiliser_du_texte_brut\" >Utiliser du texte brut<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Modifier_la_couleur_de_survol_des_titres\" >Modifier la couleur de survol des titres<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Choisir_une_couleur_de_valeur_moyenne\" >Choisir une couleur de valeur moyenne<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Modifier_le_fichier_CSS_du_theme\" >Modifier le fichier CSS du th\u00e8me<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Recharger_les_CSS_de_la_page_active\" >Recharger les CSS de la page active<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Veiller_aux_intitules_de_pages_statiques\" >Veiller aux intitul\u00e9s de pages statiques<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Utiliser_des_titres_courts\" >Utiliser des titres courts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Modifier_lintitule_%E2%80%9CPage_daccueil%E2%80%9D\" >Modifier l&rsquo;intitul\u00e9 \u201cPage d&rsquo;accueil\u201d<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Personnaliser_le_theme_Massively_niveau_avance\" >Personnaliser le th\u00e8me Massively (niveau avanc\u00e9)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Consulter_les_pages_de_demonstration\" >Consulter les pages de d\u00e9monstration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Examiner_le_code_source_des_pages_de_demo\" >Examiner le code source des pages de d\u00e9mo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Resoudre_le_probleme_daffichage_%E2%80%9Cresponsive%E2%80%9D_des_images\" >R\u00e9soudre le probl\u00e8me d&rsquo;affichage \u201cresponsive\u201d des images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Changer_lordre_des_onglets_du_menu\" >Changer l&rsquo;ordre des onglets du menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Modifier_les_icones_des_reseaux_sociaux_dans_le_menu_du_site\" >Modifier les ic\u00f4nes des r\u00e9seaux sociaux dans le menu du site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Transformer_des_liens_en_boutons\" >Transformer des liens en boutons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Personnaliser_la_page_derreur_404\" >Personnaliser la page d&rsquo;erreur 404<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Personnaliser_davantage_le_theme_Massively_niveau_expert\" >Personnaliser davantage le th\u00e8me Massively (niveau expert)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Utiliser_les_classes_incluses_dans_les_CSS_du_theme_pour_afficher_une_grille\" >Utiliser les classes incluses dans les CSS du th\u00e8me pour afficher une grille<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Integrer_la_feuille_de_style_imagehovercss_niveau_expert\" >Int\u00e9grer la feuille de style imagehover.css (niveau expert)<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Analyser_le_theme_Massively\"><\/span>Analyser le th\u00e8me Massively<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Identifier_les_qualites_de_Massively\"><\/span>Identifier les qualit\u00e9s de Massively<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>L&rsquo;ambiance g\u00e9n\u00e9rale de votre site reposera essentiellement sur l&rsquo;image de fond et sur la qualit\u00e9 des images d&rsquo;accroche que vous associerez \u00e0 chacun de vos articles.<\/strong><\/p>\n\n\n\n<p><strong>L&rsquo;image de fond<\/strong>, dispos\u00e9e en arri\u00e8re plan, permet de plonger d&#8217;embl\u00e9e le lecteur dans une atmosph\u00e8re pr\u00e9gnante. En la choisissant avec soin, il est possible de cr\u00e9er un site extr\u00eamement s\u00e9duisant&nbsp;!<\/p>\n\n\n\n<p><meta charset=\"utf-8\">Le th\u00e8me Massively affiche les pages dynamiques en mettant en avant <strong>l&rsquo;image d&rsquo;accroche de chaque article<\/strong>. Cette image s&rsquo;accroche est associ\u00e9e \u00e0 un lien vers l&rsquo;article concern\u00e9<strong>.<\/strong> Le lien vers le dernier article publi\u00e9 occupe toute la largeur de la page d&rsquo;accueil, avec son image d&rsquo;accroche bien visible, sous le menu. Les liens vers les autres articles se r\u00e9partissent sur une grille de 2 colonnes, sous le dernier article publi\u00e9 (ou l&rsquo;article \u00e9pingl\u00e9&#8230;).<\/p>\n\n\n\n<p><meta charset=\"utf-8\">Une <strong>couleur de focus<\/strong> est visible au survol des boutons et des titres d&rsquo;article. Cette couleur de focus doit permettre la lisibilit\u00e9 des textes sur fond sombre (l&rsquo;image de fond) et sur blanc (contenant des articles). <strong>Cette couleur et l&rsquo;image de fond fondent le style visuel<\/strong> d&rsquo;un site utilisant le th\u00e8me Massively.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>La couleur affich\u00e9e au survol des titres (bleu #18bfef par d\u00e9faut) pourra \u00eatre modifi\u00e9e<\/strong> en fonction de la charte graphique (ou planche de marque) du client.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Une des qualit\u00e9s cach\u00e9es de Massively est le potentiel de sa feuille de style. Il est en effet possible d&rsquo;ins\u00e9rer dans les pages <strong>des \u00e9l\u00e9ments typographiques et iconographiques stylis\u00e9s nativement <\/strong>en plein accord avec le look du th\u00e8me.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Il sera n\u00e9cessaire d&rsquo;explorer le potentiel de cette feuille de style native pour appliquer ces styles sur les sites construits avec Bludit. <strong>Le sujet sera d\u00e9velopp\u00e9 <a href=\"https:\/\/graphizm.fr\/greta\/fcs\/personnaliser-theme-bludit-massively\/#Utiliser_les_classes_incluses_dans_les_CSS_du_theme_pour_afficher_une_grille\">plus bas<\/a>.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Identifier_les_defauts_du_theme\"><\/span>Identifier les d\u00e9fauts du th\u00e8me<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Massively pr\u00e9sente toutefois des d\u00e9faut, notamment concernant <strong>les r\u00e9glages adaptatifs<\/strong> (<em>responsives<\/em>, en anglais&#8230;). En effet, ces r\u00e9glages ne permettent pas, par d\u00e9faut, de voir enti\u00e8rement les images ins\u00e9r\u00e9es dans les pages statiques ou dans les articles quand on navigue sur petit \u00e9cran. Une solution a cependant \u00e9t\u00e9 trouv\u00e9e. Il en sera question dans le cours.<\/p>\n\n\n\n<p><strong>L&rsquo;intitul\u00e9 du premier onglet<\/strong>, \u201cPage d&rsquo;accueil\u201d, ne semble pas modifiable dans les r\u00e9glages du tableau de bord de Bludit. C&rsquo;est en effet une caract\u00e9ristique du th\u00e8me qu&rsquo;il faut modifier dans le fichier de traduction. Cet intitul\u00e9 peut ne pas vous satisfaire pleinement. Sans doute le simple mot \u201cAccueil\u201d serait-il pr\u00e9f\u00e9rable.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Vous allez apprendre \u00e0 corriger ces d\u00e9faut<\/strong> et \u00e0 personnaliser le th\u00e8me en profondeur tout au long de ce cours.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_limage_de_fond\"><\/span>Personnaliser l&rsquo;image de fond<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Comme nous venons de le voir, l&rsquo;impact visuel de ce th\u00e8me repose sur l&rsquo;image utilis\u00e9e en fond de page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choisir_une_image_fonctionnelle\"><\/span>Choisir une image fonctionnelle<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Elle devra \u00eatre choisie avec soin et recadr\u00e9e de mani\u00e8re \u00e0 laisser voir en haut de l&rsquo;image ce qui servira d&rsquo;arri\u00e8re-plan au titre du site.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Si vous choisissez une image tr\u00e8s claire, il sera n\u00e9cessaire de modifier la couleur d&rsquo;affichage du titre<\/strong> (en blanc par d\u00e9faut). Sur un fond photographique, seules deux couleurs sont utilisables&nbsp;: le blanc (sur photos claires) ou le noir (sur photos sombre).<\/p>\n\n\n\n<p><strong>L&rsquo;image d&rsquo;arri\u00e8re plan du th\u00e8me Massively se nomme \u201cbg.jpg\u201d. Elle fait 1680 x 2000 pixels<\/strong>. Pour en faciliter l&rsquo;affichage, il est imp\u00e9ratif de la compresser de mani\u00e8re \u00e0 ce qu&rsquo;elle soit la plus l\u00e9g\u00e8re possible. Un enregistrement pour le Web, \u00e0 partir de Photoshop, avec une compression JPEG moyenne, devrait \u00eatre optimale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comment_remplacer_limage_de_fond\"><\/span>Comment remplacer l&rsquo;image de fond<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Veillez \u00e0 donner \u00e0 votre nouvelle image le m\u00eame nom que celui de l&rsquo;image<\/strong> <strong>d&rsquo;origine<\/strong>. Remplacez<strong> <\/strong>l&rsquo;image originale nomm\u00e9e <code>bg.jpeg<\/code>  par celle que vous souhaitez utiliser.<\/p>\n\n\n\n<p>Voici dans quel dossier il faut remplacer l&rsquo;image d&rsquo;origine par celle de votre choix&nbsp;: `dossier-du-site\/bl-themes\/massively\/images\/`<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/chemin-acces-bg-jpeg-1024x360.jpg\" alt=\"\" class=\"wp-image-4067\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/chemin-acces-bg-jpeg-1024x360.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/chemin-acces-bg-jpeg-600x211.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/chemin-acces-bg-jpeg-768x270.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/chemin-acces-bg-jpeg.jpg 1120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour visualiser le changement d&rsquo;image de fond, il est souvent n\u00e9cessaire d&rsquo;effacer les images plac\u00e9es en cache (m\u00e9moire temporaire) dans votre navigateur. <strong>Avec Chrome, cochez juste \u201cImages et fichiers en cache\u201d dans \u201cEffacer les donn\u00e9es de navigation\u201d.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"720\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-19.jpg\" alt=\"\" class=\"wp-image-1834\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-19.jpg 772w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-19-600x560.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-19-768x716.jpg 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Notez \u00e0 quel point le changement d&rsquo;image de fond modifie totalement la perception de la page \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18-1024x570.jpg\" alt=\"\" class=\"wp-image-1832\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18-1024x570.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18-600x334.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18-768x427.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18-1200x667.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-18.jpg 1379w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Positionner_une_image_daccroche\"><\/span>Positionner une image d&rsquo;accroche<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optimiser_leffet_produit_par_la_premiere_image_daccroche\"><\/span>Optimiser l&rsquo;effet produit par la premi\u00e8re image d&rsquo;accroche<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour accentuer cet effet d&rsquo;immersion, je vous propose d&rsquo;illustrer la page \u201c\u00c0 propos\u201d en choisissant comme image d&rsquo;accroche une partie de l&rsquo;image de fond.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20-1024x513.jpg\" alt=\"\" class=\"wp-image-1837\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20-1024x513.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20-600x300.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20-768x385.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20-1200x601.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-20.jpg 1390w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-21.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"961\" height=\"591\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-21.jpg\" alt=\"\" class=\"wp-image-1839\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-21.jpg 961w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-21-600x369.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-21-768x472.jpg 768w\" sizes=\"auto, (max-width: 961px) 100vw, 961px\" \/><\/a><figcaption class=\"wp-element-caption\">Source de l&rsquo;image utilis\u00e9e&nbsp;: <a href=\"https:\/\/littlevisuals.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/littlevisuals.co\/<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background has-small-font-size\">Vous pouvez envisager de superposer le logo de votre client \u00e0 cette image d&rsquo;accroche pour indiquer clairement le lien entre la marque et le contexte visuel de sa pr\u00e9sentation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Epingler_un_article_et_modifier_sa_description\"><\/span>\u00c9pingler un article et modifier sa description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bludit vous offre la possibilit\u00e9 d&rsquo;<strong>\u00e9pingler un article en t\u00eate de la liste des articles publi\u00e9s<\/strong>. Sur la page d&rsquo;accueil, celui-ci est alors pr\u00e9sent\u00e9 en premier, m\u00eame si d&rsquo;autres articles sont publi\u00e9s apr\u00e8s. Cela vous permet de mettre en avant un contenu cl\u00e9, que les lecteurs verront d&#8217;embl\u00e9e en arrivant sur la page d&rsquo;accueil.<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">Dans notre cas, je vous propose d&rsquo;\u00e9pingler l&rsquo;article dont l&rsquo;image d&rsquo;accroche est une reprise de l&rsquo;image de fond (avec ou sans logo superpos\u00e9).<\/p>\n\n\n\n<p>\u279c Profitez-en pour <strong>compl\u00e9ter la description <\/strong>de cet article. Dans Massively, celle-ci s&rsquo;affiche sous le titre de l&rsquo;article (en italique et en gris clair). Cette description sert d&rsquo;accroche ou de ch\u00e2po pour inciter le lecteur \u00e0 lire l&rsquo;article. Elle est utilis\u00e9e comme extrait par les moteurs de recherche, il est donc recommand\u00e9 de placer le mot cl\u00e9 de la page au d\u00e9but de la description.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"530\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31-1024x530.jpg\" alt=\"\" class=\"wp-image-1877\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31-1024x530.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31-600x310.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31-768x397.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31-1200x621.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-31.jpg 1382w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33-1024x513.jpg\" alt=\"\" class=\"wp-image-1879\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33-1024x513.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33-600x301.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33-768x385.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33-1200x602.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-33.jpg 1386w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32-1024x536.jpg\" alt=\"\" class=\"wp-image-1880\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32-1024x536.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32-768x402.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32-1200x629.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-32.jpg 1380w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Copier_et_coller_du_texte\"><\/span>Copier et coller du texte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Identifier_le_probleme_des_textes_colles\"><\/span>Identifier le probl\u00e8me des textes coll\u00e9s<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Quand on r\u00e9alise un site \u00e0 l&rsquo;aide d&rsquo;un CMS, il arrive qu&rsquo;au lieu de saisir le texte directement dans l&rsquo;\u00e9diteur de texte du CMS, on aille r\u00e9cup\u00e9rer du texte sur un document existant. Se pose alors un probl\u00e8me aga\u00e7ant&nbsp;: en collant le texte copi\u00e9, on s&rsquo;aper\u00e7oit que ce texte ne s&rsquo;affiche pas sur le site comme les autres textes saisis directement.<\/p>\n\n\n\n<p>Cela vient du fait qu&rsquo;en copiant le texte dans le presse-papier, vous avez copi\u00e9 aussi les styles CSS associ\u00e9s au texte. Vous pouvez vous en rendre compte en activant la fen\u00eatre d&rsquo;\u00e9dition HTML de l&rsquo;\u00e9diteur de Bludit (cliquez sur le bouton <code>&lt;&gt;<\/code>, \u00e0 droite de la barre d&rsquo;outils). Vous verrez alors les styles CSS associ\u00e9s au texte coll\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"365\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1-1024x365.jpg\" alt=\"\" class=\"wp-image-4046\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1-1024x365.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1-600x214.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1-768x273.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1-1200x427.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-1.jpg 1393w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Convertir_le_texte_copie_en_texte_brut\"><\/span>Convertir le texte copi\u00e9 en texte brut<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La solution au probl\u00e8me pos\u00e9 consiste \u00e0 convertir le texte copi\u00e9 en texte brut en utilisant un \u00e9diteur de texte comme TextEdit (sur mac) ou Notepad (sur PC). Collez le texte dans un nouveau document et convertissez-le au format Texte (.txt).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-2.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"892\" height=\"384\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-2.jpg\" alt=\"\" class=\"wp-image-4048\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-2.jpg 892w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-2-600x258.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/copier-coller-texte-2-768x331.jpg 768w\" sizes=\"auto, (max-width: 892px) 100vw, 892px\" \/><\/a><figcaption class=\"wp-element-caption\">Conversion d&rsquo;un texte avec TextEdit, sur macOs (le texte surlign\u00e9 n&rsquo;est pas converti)<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_du_texte_brut\"><\/span>Utiliser du texte brut<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour rectifier les probl\u00e8mes rencontr\u00e9s dans Bludit, il faut effacer le code comprenant les styles, revenir en mode d&rsquo;\u00e9dition visuelle et coller dans le champ de saisie le texte converti pr\u00e9alablement au format Texte.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour \u00e9viter ces manipulations, les d\u00e9veloppeurs saississent directement leurs articles en texte brut, directement dans leur \u00e9diteur de code favori.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_la_couleur_de_survol_des_titres\"><\/span>Modifier la couleur de survol des titres<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Si la couleur de survol \u00e0 utiliser n&rsquo;est pas d\u00e9j\u00e0 identifi\u00e9e dans une charte graphique, vous devez la d\u00e9terminer en fonction de la symbolique du th\u00e8me trait\u00e9. Vous devez surtout veiller \u00e0 ce que cette couleur autorise la lecture des textes sur fond sombre ou sur fond clair.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choisir_une_couleur_de_valeur_moyenne\"><\/span>Choisir une couleur de valeur moyenne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Le moyen le plus simple pour s\u00e9lectionner une couleur de valeur moyenne est d&rsquo;utiliser le site <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\/\" target=\"_blank\">hsluv.org<\/a>.<\/strong> En effet, le s\u00e9lecteur de couleur s&rsquo;ouvre par d\u00e9faut sur un rouge avec une luminosit\u00e9 de 50%. Il suffit donc de d\u00e9placer le petit cercle blanc situ\u00e9 sur le c\u00f4t\u00e9 droit du trap\u00e8ze des couleurs pour modifier la teinte et la saturation de la couleur recherch\u00e9e.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/wp-content\/uploads\/2022\/01\/HSLuv-01-scaled.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/wp-content\/uploads\/2022\/01\/HSLuv-01-1024x549.jpg\" alt=\"\" class=\"wp-image-6115\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/wp-content\/uploads\/2022\/01\/HSLuv-02-scaled.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/comvi.plurimedia.greta-clermont-auvergne.fr\/wp-content\/uploads\/2022\/01\/HSLuv-02-1024x559.jpg\" alt=\"\" class=\"wp-image-6116\"\/><\/a><\/figure>\n\n\n\n<p>D&rsquo;autres priorit\u00e9s que l&rsquo;optimisation du contraste de luminosit\u00e9 peuvent vous amener \u00e0 choisir des couleurs plus claires ou plus fonc\u00e9es. Veillez toutefois \u00e0 ce que le ratio de contraste sur le blanc ou le noir soit au moins sup\u00e9rieur \u00e0 3 (norme d&rsquo;accessibilit\u00e9 AA-Large).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_le_fichier_CSS_du_theme\"><\/span>Modifier le fichier CSS du th\u00e8me <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour appliquer cette couleur aux liens du site il est n\u00e9cessaire de modifier le fichier <code>main.css<\/code> (la principale feuille de style du th\u00e8me) qui se trouve dans <code>dossier-du-site\/bl-themes\/massively\/assets\/css<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-24.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"388\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-24.jpg\" alt=\"\" class=\"wp-image-1861\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-24.jpg 1020w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-24-600x228.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-24-768x292.jpg 768w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c <strong>Modifiez le fichier \u201cmain.css\u201d avec un \u00e9diteur de code (Bracket)<\/strong>, apr\u00e8s l&rsquo;avoir t\u00e9l\u00e9charg\u00e9 sur votre poste de travail. Apr\u00e8s modification il sera n\u00e9cessaire de remplacer le fichier \u201cmain.css\u201d situ\u00e9 sur le serveur. Vous utiliserez pour cela un client FTP (Filezilla).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-30-1024x609.jpg\" alt=\"\" class=\"wp-image-1875\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-30-1024x609.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-30-600x357.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-30-768x457.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-30.jpg 1126w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29-1024x516.jpg\" alt=\"\" class=\"wp-image-1874\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29-1024x516.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29-600x302.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29-768x387.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29-1200x605.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-29.jpg 1393w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recharger_les_CSS_de_la_page_active\"><\/span>Recharger les CSS de la page active<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour que votre modification s&rsquo;affiche sur la page de votre site <strong>il sera sans doute n\u00e9cessaire de recharger les feuilles de style de la page active, dans votre navigateur. <\/strong>L&rsquo;extension de Chrome \u201cWeb developer\u201d permet cette manipulation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"420\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27-1024x420.jpg\" alt=\"\" class=\"wp-image-1866\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27-1024x420.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27-600x246.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27-768x315.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27-1200x493.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/07\/how-to-bludit-27.jpg 1398w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Cette op\u00e9ration est \u00e0 renouveller, dans un premier temps, chaque fois que vous allez sur une nouvelle page. Pensez-y car sinon vous douterez d&rsquo;avoir effectu\u00e9 correctement les changements indiqu\u00e9s&nbsp;! On peut aussi v\u00e9rifier que nos modifications sont op\u00e9rantes en changeant provisoirement de navigateur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Veiller_aux_intitules_de_pages_statiques\"><\/span>Veiller aux intitul\u00e9s de pages statiques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_des_titres_courts\"><\/span>Utiliser des titres courts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le param\u00e9trage d&rsquo;une page en page statique sort la page en question du flux des pages dynamiques. Cette page n&rsquo;est plus consid\u00e9r\u00e9e par le CMS comme faisant partie du blog. <strong>Bludit utilise le titre des pages statiques pour l&rsquo;ins\u00e9rer dans le menu principal<\/strong> (afin que l&rsquo;utilisateur acc\u00e8de \u00e0 cette page).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long-1024x473.jpg\" alt=\"\" class=\"wp-image-3874\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long-1024x473.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long-600x277.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long-768x355.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long-1200x554.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/titre-long.jpg 1384w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Si vous utiliser un titre long, l&rsquo;onglet du menu affichera le titre en entier et cela posera vite un probl\u00e8me d&rsquo;ergonomie si vous avez plusieurs pages statiques. Bludit, et le th\u00e8me massively montrent ici leurs limites. <strong>\u00c0 moins de trouver une astuce pour modifier les intitul\u00e9s des onglets, il vaut mieux donner \u00e0 ses pages statiques des titres courts<\/strong> \ud83d\ude09<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Notez qu&rsquo;il est possible de r\u00e9\u00e9crire les URL d&rsquo;une page dans les options de la page. Cela ne modifie pas pour autant le nom des pages du menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_lintitule_%E2%80%9CPage_daccueil%E2%80%9D\"><\/span>Modifier l&rsquo;intitul\u00e9 \u201cPage d&rsquo;accueil\u201d<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Comme nous l&rsquo;avons mentionn\u00e9 plus haut, l&rsquo;impossibilit\u00e9 de changer l&rsquo;intitul\u00e9 de la page des articles en utilisant le tableau de bord de Bludit peut \u00eatre per\u00e7u comme un d\u00e9faut du th\u00e8me&#8230; ou du CMS.<\/p>\n\n\n\n<p>\u279c Cette modification est cependant possible en modifiant le fichier de traduction du CMS. Ce fichier est nomm\u00e9 <code>fr_FR.json<\/code> et il est plac\u00e9 dans<code> dossier-du-site\/langages<\/code>. Vous pouvez le modifier en utilisant Brakets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"366\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2-1024x366.jpg\" alt=\"\" class=\"wp-image-4040\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2-1024x366.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2-600x215.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2-768x275.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-2.jpg 1068w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3-1024x547.jpg\" alt=\"\" class=\"wp-image-4043\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3-1024x547.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3-600x321.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3-768x411.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3-1200x641.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/modification-page-accueil-Massively-3.jpg 1390w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_le_theme_Massively_niveau_avance\"><\/span>Personnaliser le th\u00e8me Massively (niveau avanc\u00e9)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La feuille de style de Massively, non minifi\u00e9e, fait <strong>4653 lignes<\/strong> ! Il y a dans cette feuille de style des instructions nombreuses pour styliser toutes sortes de contenus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/css-massively-1-1024x517.jpg\" alt=\"\" class=\"wp-image-4057\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/css-massively-1-1024x517.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/css-massively-1-600x303.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/css-massively-1-768x388.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/css-massively-1.jpg 1059w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Consulter_les_pages_de_demonstration\"><\/span>Consulter les pages de d\u00e9monstration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u279c La premi\u00e8re chose \u00e0 faire pour se rendre compte de ce qu&rsquo;il est possible de faire est de consulter la page intitul\u00e9e <a rel=\"noreferrer noopener\" href=\"https:\/\/html5up.net\/massively\" target=\"_blank\">Elements reference<\/a> sur la d\u00e9mo du th\u00e8me Massively propos\u00e9e par HTML5-up.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/html5up.net\/massively\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"603\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-1024x603.jpg\" alt=\"\" class=\"wp-image-4059\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-1024x603.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-600x353.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-768x452.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-1200x706.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference.jpg 1363w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">J&rsquo;en propose une <a rel=\"noreferrer noopener\" href=\"http:\/\/comptetestfpw.alwaysdata.net\/bludit-massively\/elements#main\" target=\"_blank\">adaptation provisoire en fran\u00e7ais<\/a> r\u00e9alis\u00e9e rapidement dans Bludit, sur mon compte de d\u00e9mo Alwaysdata.<\/p>\n\n\n\n<p>Vous allez d\u00e9couvrir que Massively permet l&rsquo;usage d&rsquo;une <strong>grille adaptative<\/strong>, qu&rsquo;il propose une classe pour <strong>am\u00e9liorer le comportement des images<\/strong> sur petits \u00e9crans, qu&rsquo;il met \u00e0 notre disposition <strong>des boutons de toutes sortes<\/strong>, qu&rsquo;il autorise l&rsquo;usage des ic\u00f4nes de <strong>FontAwesome<\/strong>, &#8230; et plein d&rsquo;autres choses&nbsp;!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2-1024x590.jpg\" alt=\"\" class=\"wp-image-4058\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2-1024x590.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2-600x346.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2-768x443.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2-1200x692.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/massively_HTML5_UP-elements-reference-2.jpg 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Images en grille avec goutti\u00e8res et habillage avec marges confortables<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Examiner_le_code_source_des_pages_de_demo\"><\/span>Examiner le code source des pages de d\u00e9mo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La prise en main d&rsquo;un th\u00e8me passe in\u00e9vitablement par l&rsquo;examen du code source des pages de d\u00e9monstration. Il s&rsquo;agit de rep\u00e9rer quelles sont les classes utilis\u00e9es et \u00e0 quelles balises elles ont \u00e9t\u00e9 attribu\u00e9es.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">L&rsquo;application des classes ne peut se faire, avec Bludit, qu&rsquo;en modifiant le code source dans la fen\u00eatre d&rsquo;\u00e9dition du code HTML.<\/p>\n\n\n\n<p>Pour y voir plus clair et profiter de la colorisation du code dans Brakets, je vous propose de copier le code source de <a rel=\"noreferrer noopener\" href=\"http:\/\/comptetestfpw.alwaysdata.net\/bludit-massively\/elements#main\" target=\"_blank\">ma page de d\u00e9monstration<\/a> et de le coller dans une nouvelle page cr\u00e9\u00e9e avec Brackets.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"713\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo-1024x713.jpg\" alt=\"\" class=\"wp-image-4063\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo-1024x713.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo-600x418.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo-768x535.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/code-source-page-demo.jpg 1077w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Code source de ma page de d\u00e9monstration<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Vous pouvez aussi demander \u00e0 votre navigateur d&rsquo;afficher le code source de la page&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resoudre_le_probleme_daffichage_%E2%80%9Cresponsive%E2%80%9D_des_images\"><\/span>R\u00e9soudre le probl\u00e8me d&rsquo;affichage \u201cresponsive\u201d des images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Massively dispose de 2 classes qui, utilis\u00e9es simultan\u00e9ment, permettent l&rsquo;affichage correcte des images sur tous les \u00e9crans. Il s&rsquo;agit des classes \u00ab\u00a0image\u00a0\u00bb et \u00ab\u00a0fit\u00a0\u00bb.<\/p>\n\n\n\n<p>Pour qu&rsquo;une image devienne \u201cresponsive\u201d, il est donc n\u00e9cessaire de lui attribuer, directement dans le code source (via l&rsquo;\u00e9diteur de page de Bludit) les classes \u00ab\u00a0image\u00a0\u00bb et \u00ab\u00a0fit\u00a0\u00bb. <\/p>\n\n\n\n<p>Le code \u00e0 ins\u00e9rer dans chaque balise <code>&lt;img&gt;<\/code>, entre \u201cimg\u201d et \u201csrc\u201d,  est le suivant&nbsp;: <code>class=\"image fit\"<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changer_lordre_des_onglets_du_menu\"><\/span>Changer l&rsquo;ordre des onglets du menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le titre des pages statiques est automatiquement utilis\u00e9 en tant qu&rsquo;intitul\u00e9 d&rsquo;onglet dans le menu du site. L&rsquo;ordre des pages peut \u00eatre modifi\u00e9 en attribuant une position \u00e0 chacune d&rsquo;entre elles. Pour cela, il suffit de param\u00e9trer le champ \u201cPosition\u201d dans les options de la page (onglet \u201cavanc\u00e9\u201d).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"510\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/position-page-onglet.jpg\" alt=\"\" class=\"wp-image-5300\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/position-page-onglet.jpg 608w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/position-page-onglet-600x503.jpg 600w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifier_les_icones_des_reseaux_sociaux_dans_le_menu_du_site\"><\/span>Modifier les ic\u00f4nes des r\u00e9seaux sociaux dans le menu du site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour modifier les ic\u00f4nes de lien vers les r\u00e9seaux sociaux, il est n\u00e9cessaire de se rendre dans les r\u00e9glages g\u00e9n\u00e9raux du site. Personnalisez les adresses des diff\u00e9rents r\u00e9seaux propos\u00e9s. L&rsquo;ic\u00f4ne du r\u00e9seau disposant d&rsquo;une adresse valide s&rsquo;affichera automatiquement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit-1024x523.jpg\" alt=\"\" class=\"wp-image-5302\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit-1024x523.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit-600x306.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit-768x392.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit-1200x613.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/06\/reseaux-sociaux-bludit.jpg 1226w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Il manque la plateforme Pinterest dans la liste des r\u00e9seaux propos\u00e9 par Bludit et Massively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Transformer_des_liens_en_boutons\"><\/span>Transformer des liens en boutons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Comme cela est sugg\u00e9r\u00e9 sur la capture d&rsquo;\u00e9cran ci-dessus, l&rsquo;attribution d&rsquo;une classe \u00ab\u00a0button\u00a0\u00bb transforme un lien en bouton. En ajoutant d&rsquo;autres classes il est possible de personnaliser l&rsquo;apparence des boutons. Les classes disponibles pour cela sont&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00ab\u00a0primary\u00a0\u00bb<\/li>\n\n\n\n<li>\u00ab\u00a0fit\u00a0\u00bb<\/li>\n\n\n\n<li>\u00ab\u00a0small\u00a0\u00bb<\/li>\n\n\n\n<li>\u00ab\u00a0large\u00a0\u00bb<\/li>\n<\/ul>\n\n\n\n<p>En rajoutant les classes \u00ab\u00a0icon\u00a0\u00bb et \u00ab\u00a0fa-icon-name\u00a0\u00bb (remplacer \u00ab\u00a0icon-name\u00a0\u00bb par le nom de l&rsquo;icone \u00e0 afficher), il est possible d&rsquo;int\u00e9grer une ic\u00f4ne <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/v4.7.0\/\" target=\"_blank\">Font<\/a><a href=\"https:\/\/fontawesome.com\/v4.7.0\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/v4.7.0\/\" target=\"_blank\">Awesome<\/a> dans le bouton.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_la_page_derreur_404\"><\/span>Personnaliser la page d&rsquo;erreur 404<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans Bludit, pour modifier la page d&rsquo;erreur 404 (<em>page not found<\/em>), il est n\u00e9cessaire de cr\u00e9er une nouvelle page statique puis, dans les r\u00e9glages g\u00e9n\u00e9raux, de la param\u00e9trer pour qu&rsquo;elle devienne la page d&rsquo;erreur de navigation du site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-1024x522.png\" alt=\"\" class=\"wp-image-5315\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-1024x522.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-600x306.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-768x392.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-1536x783.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-2048x1044.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-1200x612.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/page-non-trouvee-1980x1010.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Un probl\u00e8me surgit cependant dans la version 3 du CMS&nbsp;: <strong>cette nouvelle page statique appara\u00eet dans le menu et Bludit 3 ne permet pas de masquer une page dans le menu via le tableau de bord<\/strong>.<\/p>\n\n\n\n<p>Une astuce consiste \u00e0 param\u00e9trer cette page en tant que brouillon. Pour cela il suffit de cliquer sur \u201cPUBLICATION\u201d, \u00e0 droite du bouton \u201cAper\u00e7u\u201d, en t\u00eate de la page d&rsquo;\u00e9dition. Le mot \u201cBROUILLON\u201d s&rsquo;affiche alors (voir ci-dessous). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"254\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-1024x254.png\" alt=\"\" class=\"wp-image-5317\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-1024x254.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-600x149.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-768x190.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-1536x381.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-2048x508.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-1200x298.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/07\/brouillon-404-1980x491.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_davantage_le_theme_Massively_niveau_expert\"><\/span>Personnaliser davantage le th\u00e8me Massively (niveau expert)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_les_classes_incluses_dans_les_CSS_du_theme_pour_afficher_une_grille\"><\/span>Utiliser les classes incluses dans les CSS du th\u00e8me pour afficher une grille<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le th\u00e8me Massively pr\u00e9voit l&rsquo;utilisation d&rsquo;une grille Flexbox bas\u00e9e sur 12 colonnes. Plusieurs largeurs de fen\u00eatre de navigation (avec points de ruptures correspondants) sont envisag\u00e9es&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>xlarge (entre 1141 px et 1680 px)<\/li>\n\n\n\n<li>large (entre 981 et 1140 px)<\/li>\n\n\n\n<li>medium (entre 737 et 980 px)<\/li>\n\n\n\n<li>small (entre 481 et 736 px)<\/li>\n\n\n\n<li>xsmall (entre 321 et 480 px)<\/li>\n\n\n\n<li>xxsmall (entre 0 et 320 px)<\/li>\n<\/ul>\n\n\n\n<p>Chaque rang\u00e9e apparente (<code>row<\/code>) est constitu\u00e9e de 12 colonnes. Les colonnes de la grille sont param\u00e9tr\u00e9es pour occuper autant de colonne que n\u00e9cessaire (<code>col-1<\/code> \u00e0 <code>col-12<\/code>).<\/p>\n\n\n\n<p>Les concepteurs du th\u00e8me proposent de cr\u00e9er des grille en param\u00e9trant une seule rang\u00e9e globale puis de cr\u00e9er des rang\u00e9es apparentes en utilisant le code suivant&nbsp;: <code>&lt;!-- break --&gt;<\/code>.<\/p>\n\n\n\n<p>Voici un exemple de code pour mettre en place <strong>une grille de 2 rang\u00e9es apparentes de 2 et 3 colonnes<\/strong>. Ce dimensionnement est valable sur tous les \u00e9crans sauf sur les petits \u00e9crans o\u00f9 chaque colonne est param\u00e9tr\u00e9e pour occuper toute la place disponible (<code>col-12-small<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row gtr-150 gtr-uniform\" style=\"line-height: 1.4; min-height: 100px;\"&gt;\n&lt;div class=\"col-6 col-12-small\"&gt;&lt;img class=\"image fit\" src=\"https:\/\/via.placeholder.com\/300\" alt=\"\"&gt;\n&lt;p style=\"text-align: center;\"&gt;1re rang\u00e9e \u2022 1re colonne 50% (100% sur petits \u00e9crans)&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"col-6 col-12-small\"&gt;&lt;img class=\"image fit\" src=\"https:\/\/via.placeholder.com\/300\" alt=\"\"&gt;\n&lt;p style=\"text-align: center;\"&gt;1re rang\u00e9e \u2022 2e colonne 50% (100% sur petits \u00e9crans)&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;!-- break --&gt;\n&lt;div class=\"col-4 col-12-small\"&gt;&lt;img class=\"image fit\" src=\"https:\/\/via.placeholder.com\/300\" alt=\"\"&gt;\n&lt;p style=\"text-align: center;\"&gt;2e rang\u00e9e \u2022 1re colonne 33,33% (100% sur petits \u00e9crans)&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"col-4 col-12-small\"&gt;&lt;img class=\"image fit\" src=\"https:\/\/via.placeholder.com\/300\" alt=\"\"&gt;\n&lt;p style=\"text-align: center;\"&gt;2e rang\u00e9e \u2022 2e colonne 33,33% (100% sur petits \u00e9crans)&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"col-4 col-12-small\"&gt;&lt;img class=\"image fit\" src=\"https:\/\/via.placeholder.com\/300\" alt=\"\"&gt;\n&lt;p style=\"text-align: center;\"&gt;2e rang\u00e9e \u2022 3e colonne 33,33% (100% sur petits \u00e9crans)&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><meta charset=\"utf-8\">\u279c Vous pouvez visualisez cette grille \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/comptetestfpw.alwaysdata.net\/bludit-massively\/grilles-responsives#main\" target=\"_blank\">http:\/\/comptetestfpw.alwaysdata.net\/bludit-massively\/grilles-responsives#main<\/a><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Les classes contenant l&rsquo;expression <code>gtr<\/code> concernent le param\u00e9trage des goutti\u00e8res (<em>gutters<\/em>, en anglais). Les largeurs de goutti\u00e8res disponibles s&rsquo;\u00e9tagent ainsi&nbsp;: <code>gtr-0<\/code>, <code>gtr-25<\/code>, <code>gtr-50<\/code>, <code>gtr-150<\/code> et <code>gtr-200<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrer_la_feuille_de_style_imagehovercss_niveau_expert\"><\/span>Int\u00e9grer la feuille de style imagehover.css (niveau expert)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Pour cr\u00e9er des effets de transition au survol des images <\/strong>afin de permettre la lecture de textes sur fond color\u00e9, il est n\u00e9cessaire d&rsquo;int\u00e9grer la feuille de style <a rel=\"noreferrer noopener\" href=\"https:\/\/imagehover.io\/\" target=\"_blank\">imagehover.css<\/a> dans les css du th\u00e8me.<\/p>\n\n\n\n<p>Pour cela, <strong>il faut placer la feuille de style \u201cimagehover.css\u201d dans le dossier \u201ccss\u201d de Massively<\/strong> (\u00e0 l&rsquo;int\u00e9rieur du dossier \u201cassets\u201d). Il faut ensuite modifier le fichier \u201cindex.php\u201d du th\u00e8me pour qu&rsquo;il prenne en compte la nouvelle feuille de style.<\/p>\n\n\n\n<p><strong>D&rsquo;autres modifications sont n\u00e9cessaires pour \u00e9viter l&rsquo;affichage d&rsquo;un bandeau gris clair sous les images anim\u00e9es.<\/strong> Il faut supprimer dans \u201cmain.css\u201d les instructions li\u00e9es aux classes \u201cimage\u201d et \u201cfit\u201d demandant une marge sup\u00e9rieure et inf\u00e9rieure en grande et moyenne largeur. Il est ensuite n\u00e9cessaire de modifier (toujours dans \u201cmain.css\u201d&#8230;) le param\u00e9trage des marges sur les paragraphes en choisissant <code>margin: 1rem 0;<\/code> plut\u00f4t que <code>margin: 0 0 2rem 0;<\/code> (ligne 270).<\/p>","protected":false},"excerpt":{"rendered":"<p>L&rsquo;un des th\u00e8mes de Bludit les plus impactants visuellement, se nomme \u201cMassively\u201d. Il s&rsquo;agit d&rsquo;un th\u00e8me adapt\u00e9 pour le CMS Bludit mais qui, initialement, a \u00e9t\u00e9 cr\u00e9\u00e9 par HTML5UP sous la forme d&rsquo;un site statique HTML-CSS. \u279c Pour ce cours, je vous invite \u00e0 activer Massively sur votre site Bludit. Vous allez ensuite apprendre \u00e0 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,31],"tags":[],"class_list":["post-3983","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs3-exos"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>L&rsquo;un des th\u00e8mes de Bludit les plus impactants visuellement, se nomme \u201cMassively\u201d. Il s&rsquo;agit d&rsquo;un th\u00e8me adapt\u00e9 pour le CMS Bludit mais qui, initialement, a \u00e9t\u00e9 cr\u00e9\u00e9 par HTML5UP sous la forme d&rsquo;un site statique HTML-CSS. \u279c Pour ce cours, je vous invite \u00e0 activer Massively sur votre site Bludit. Vous allez ensuite apprendre \u00e0 le personnaliser pour cr\u00e9er soit votre portfolio, soit une maquette de site pour le client pour lequel vous avez d\u00e9j\u00e0 travaill\u00e9 lors du TP2. Vous pourrez mentionner ce site dans votre portfolio, preuve de votre ma\u00eetrise de la publication en ligne \u00e0 l&rsquo;aide d&rsquo;un syst\u00e8me\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs3-exos\/\" rel=\"category tag\">FCS3-exos<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=3983"}],"version-history":[{"count":115,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3983\/revisions"}],"predecessor-version":[{"id":7266,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3983\/revisions\/7266"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=3983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=3983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=3983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}