WordPress : personnalise le thème Twenty Seventeen

/

article twenty seventeen

T Twenty Seventeen n’est plus le thème par défaut de WordPress. Il conserve cependant toute sa popularité : plus d’un million de sites l’utilisent aujourd’hui.

Ce thème entièrement gratuit est idéal pour les débutants qui souhaitent un site pour promouvoir leur activité.

C’est le seul des thèmes développés par les équipes de WordPress qui soit orienté entreprise contrairement aux autres plus axés sur le blogging.

Nous allons voir ensemble comment le personnaliser dans ce tutoriel pas à pas.

exemple de site réalisé avec twenty seventeen

Tu vas commencer par modifier l’aspect de ton site avec l’éditeur du thème puis tu pourras approfondir avec trois extensions voire quelques CSS pour les plus audacieux.

Cet article prend environ 10 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

twenty seventeen

Si tu souhaites pousser la personnalisation dans les moindres détails, je t’encourage à te reporter sur OceanWP.
La version gratuite offre des possibilités incroyables. Il sera cependant complexe à aborder pour un débutant.

Pourquoi utiliser Twenty Seventeen ?

avantages
  • Responsive : Fonctionne parfaitement sur tous les supports : ordinateur, mobile et tablette
  • Mis à jour régulièrement
  • Simplicité de prise en main
  • Entièrement gratuit
inconvénients
  • Fortement utilisé : nécessite un travail de différentiation
  • Rapidité correcte mais pas dans les meilleurs
  • Peu d’options natives de personnalisation

Présentation du thème

Je te propose de regarder l’exemple de présentation réalisé par les équipes de WordPress. Il offre une bonne idée du rendu que tu pourras obtenir.

exemple de présentation du thème Twenty Seventeen

Le résultat est efficace, aéré et très lisible.

Twenty Seventeen se caractérise par une page d’accueil rythmée en paragraphes séparés par des images qui défilent en fond (effet parallaxe). Il est possible d’ajouter une vidéo en entête de page.

Ce qui est géré par le thème

Le thème va permettre de gérer l’aspect global de ton site :

  • image d’entête
  • polices : taille, couleurs…
  • couleur de fond, de la barre latérale, des boutons…
quels sont les éléments gérés par le thème

La partie contenu et organisation des pages sera gérée par Gutenberg l’éditeur de WordPress. Tu peux également utiliser un constructeur de page comme Elementor pour les mises en pages plus complexes.

Tu débutes par la mise en place du thème.

Installe le thème

Dans le menu de gauche : Apparence > Thème

menu thèmes

Twenty Seventeen est un thème par défaut de WordPress. Il est normalement déjà présent dans le répertoire.

thèmes par défaut

Tu survoles le visuel et cliques sur Activer.

activer

Si ce thème n’est pas présent, tu cliques sur Ajouter un thème.

ajouter un thème

Tu le recherches

recherche de thème

et l’installes.

installer un thème

Nous allons débuter par la personnalisation à l’aide de l’éditeur d’origine de Twenty Seventeen.

Personnalise le thème dans l’éditeur (logo, image de fond et menu)

Pour l’instant, ton thème ressemble à cela.

visuel du thème par défaut

Tu vas rendre ton site unique.

Avant de te lancer, voici un petit point sur les éléments dont tu auras éventuellement besoin.

éléments de personnalisation du thème
  • Ton logo avec un maximum de 250 pixels en largeur et hauteur. Il est également possible de saisir en texte le nom de ton entreprise.
  • Le symbole de ton site (favicon) au format carré (512 X 512 px) qui sera affiché dans les barres de recherches
  • Une entête (image ou vidéo) pour la page d’accueil en 2000 X 1200 px
  • De grands visuels pour illustrer ta page d’accueil en 2000 X 1200 px
  • Les références couleurs de ta marque, par exemple
    • gris : #CDCED3
    • marron clair : #D1B6A1
  • Les polices des titres et textes (option), par exemple
    • Titres : Sanchez
    • Texte : Open Sans

Passons aux travaux pratiques.

L’éditeur du thème

Dans le menu de gauche, Apparence > Personnaliser

menu personnaliser

Tu découvres les options de personnalisation du thème. Nous allons les voir ensemble une par une.

options de personnalisation

Tu charges ton logo et complètes le nom du site (nom de ta marque ou de ton blog) et un slogan (ton activité par exemple).

chargement du logo

Tu remplis le texte alternatif pour Google. Ce sera ici : logo et nom de ton site.

compléter le texte alternatif

Si ton logo n’est pas au format carré, tu devras éventuellement le recadrer.

recadrer le logo

Le résultat :

logo accompagné de textes

Si tu souhaites un logo plus gros et sans texte,

logo seul

tu décoches Afficher le titre et le slogan du site.

masquer le titre d'un site WordPress

Même si tu ne souhaites pas qu’ils apparaissent, c’est important de conserver le nom de ton site et le slogan. Ils sont utiles pour la compréhension des moteurs de recherche.

Tu sélectionnes l’icône du site (ou favicon).

favicon

Il s’agit du minuscule visuel qui illustre les onglets des navigateurs.

favicon barre ppur

Tu publieras systématiquement à chaque étape pour que tes modifications soient prises en compte.

publier les modifications

Couleur

C’est clairement le point faible de l’éditeur.

Tu disposes de trois options :

Clair (Light) : fond blanc et textes en noir et blanc

version light

Noir (Dark) : fond foncé et polices blanches

version sombre

Personnalisé (Custom) : une couleur personnalisée à l’aide d’un curseur pour le thème clair.

version personnalisée

Le fait de ne pas pouvoir intégrer la référence précise d’une couleur est un défaut à mon sens. Tu pourras le réaliser avec des outils complémentaires que tu découvriras ensuite.

Tu vas essayer de te rapprocher au mieux de la couleur souhaitée.

couleur personnalisée

Je te recommande d’utiliser ta couleur d’accompagnement. Elle sera appliquée à différents éléments du site : icônes, certains titres, boutons.

exemple de couleurs réseaux sociaux

Média de l’en-tête

Ce visuel illustra ta page d’accueil en grand format

image d'en-tête de la page d'accueil

et tes autres pages en version réduite.

image d'en-tête réduite des autres pages

Tu peux intégrer une vidéo courte et légère en en-tête

installer une en-tête vidéo sur Twenty Seventeen

ou un visuel.

en-tête visuel

Si tu as choisis une vidéo pour ta page d’accueil, tu ajoutes un visuel similaire qui sera présent sur les autres pages.

Menus

Deux sous-menus sont présents : les options pour gérer tes menus et les boutons des réseaux sociaux.

Menu supérieur

Tu disposes de 4 pages dans le site de présentation : Accueil, À propos de, Blog et Contact.

éléments du menu

Tu peux les déplacer pour modifier l’ordre,

déplacer

créer des sous menus en déplaçant sur un autre intitulé,

sous-menu

les supprimer en déployant

retirer

ou en ajouter.

ajouter

Tu intègres facilement une page ou un article en le sélectionnant.

sélectionner une nouvelle page de menu

Tu modifies le nom que tu souhaites voir apparaître dans le menu.

renommer les pages du menu

Twenty Seventeen donne l’option d’imbriquer plusieurs pages à l’intérieur de la page d’accueil. Nous verrons ce point un peu plus tard.

Tu peux diriger vers un site externe à l’aide des liens personnalisés.

liens personnalisés

Menu des liens sociaux

4 réseaux sociaux sont déjà présents ainsi que l’e-mail.

menus reseaux sociaux

Tu peux retirer un réseau en dépliant,

retirer un réseau

indiquer l’adresse de ton compte sur chacun de tes réseaux sociaux,

indiquer ses réseaux

compléter ton e-mail après le mailto:,

indiquer son e-mail

ajouter de nouveaux réseaux.

ajouter un réseau social

WordPress intègre automatiquement l’icône des principaux réseaux sociaux.

nouvel icône de réseau social

Widgets

Les widgets représentent les blocs de la barre latérale et du pied de page. La barre latérale est présente uniquement sur les articles.

emplacements des widgets

Tu ouvres tous les emplacements et ajoutes, supprimes et déplaces les blocs.

ajouter un widget

Je te recommande les widgets suivants :

  • Rechercher pour faciliter la navigation
  • Articles récents pour améliorer la découvertes d’autres contenus
  • Image pour intégrer une bannière de promotion de tes services et produits

Le titre des widgets ajoute une ligne de texte au-dessus de celui-ci.

titre widget

Ajoute tes mentions légales

Les mentions légales (et les CGV si tu réalises des ventes en ligne) sont obligatoires et doivent être accessibles sur l’intégralité des pages de ton site.

Le plus simple est d’ajouter un lien dans ton pied de page, par exemple en bas de ton pied de page 1.

Tu crées une page spécifique avec tes mentions légales.

Dans cet article de Service Public, tu retrouveras toutes les mentions légales à indiquer en fonction des différentes catégories d’entreprises.

Tu sélectionnes HTML personnalisé et tu colles le code suivant en personnalisant l’url de ta page.

<p><a href="https://www.tonsite.fr/tapage/">Mentions légales</a></p>
Ajouter un lien mentions légales

Tu vas pouvoir t’attaquer à une page stratégique de ton site.

Met en forme ta page d’accueil

La page d’accueil est gérée par 2 sous-menus.

Réglages de la page d’accueil

Ils restent inchangés pour un site d’entreprise. Tu bascules vers Les derniers articles pour un blog qui présente les dernières parutions en home.

réglages page d'accueil

Options du thème

Tu peux modifier l’affichage de ton texte

options de mise en page

de 2 colonnes

affichage sur 2 colonnes

à 1 colonne

affichage sur 1 colonne

Je te conseille de conserver l’option en 2 colonnes car les lignes de textes en plein écran sont difficiles à lire.

Les sections de la page d’accueil

Tu indiques les pages présentes sur la page d’accueil. L’image principale de chaque page s’intercalera automatiquement entre les sections avec l’effet parallaxe.

composantes page d'accueil

Tu peux ajouter jusqu’à 3 pages.

Pour pousser plus loin la personnalisation, tu utilises trois extensions qui facilitent grandement la tâche.

Modifie les polices et la position du logo avec Customize Twenty Seventeen

Tu vas dans le répertoire d’extensions de WordPress.

menu ajouter extension

Tu cherches Customize Twenty Seventeen,

cherche extension

la charges,

extension wordpress customize twenty seventeen - pour pas un rond

et l’actives.

active extension

Tu disposes désormais de nouvelles options dans le menu personnalisation > BoldThemes Settings.

menu boldthemes

Tu utilises les polices Google Fonts de ton choix pour :

  • le texte
  • le titre de la page
  • les titres intermédiaires
  • le menu
changer polices

Tu choisis si tu souhaites centrer ou aligner à droite ton logo et ton menu.

position logo menu

Les réglages seront plus fin sur ce point avec l’extension suivante.

Personnalise les couleurs, polices et pied de page avec Options for Twenty Seventeen

Tu installes l’extension Options for Twenty Seventeen.

options twenty seventeen

Elle ajoute 5 nouveaux menus de personnalisation.

menu Options

Header Options (titre du site)

Ce menu ne sera intéressant que si tu as conservé du texte pour ton logo.

Les options suivantes sont disponibles pour le titre du site et la description :

  • alignement (gauche, centré et droite)
  • la capitalisation (aucune, majuscule pour chaque mot, entièrement en majuscules et minuscules)
  • enlever l’espacement supplémentaire entre les lettres
  • taille du titre
  • accentuer la graisse
  • couleur
options titre

Tu peux modifier facilement l’apparence de ton site.

exemple apparence titre

Nav Options (menu)

Les options pour la police du menu :

  • la capitalisation
  • taille
  • graisse
police menu

Les couleurs du menu :

  • les éléments
  • la page actuellement consultée d’une autre couleur
  • le texte au survol de la souris
  • le fond au survol
  • le fond de la zone de menu
  • le fond des sous-menus
options couleurs menu

Content options (polices des titres)

Les articles et les pages disposent de réglages identiques des titres mais indépendants.

  • alignement
  • capitalisation
  • taille
  • graisse
  • couleur
  • marge en dessous (seulement pour les pages)
couleurs titres des articles

Les liens :

  • couleur du lien
  • couleur au survol
couleurs liens

Les couleurs du pied de page :

  • fond
  • titres
  • texte
  • liens
  • liens au survol
options de couleurs du pied de page du thème WordPress

Tu règles, si tu le souhaites, les tailles des différents textes de ton site.

Ajuste les tailles des polices avec Advanced Twenty Seventeen

Les mises à jour de cette extension commencent à dater. Je recommande de réaliser les personnalisations avancées des polices en CSS.

Tu ajoutes l’extension Advanced Twenty Seventeen du répertoire de WordPress.

extension WordPress advanced twenty seventeen

5 nouveaux sous-menus sont disponibles.

menu advanced

Certains réglages sont redondants avec les autres extensions. Je te présente uniquement ceux qui apportent une nouveauté.

Typographie des textes

Advanced Global > Typography

Les réglages des tailles de textes sont avancés mais les couleurs se déterminent au curseur. C’est pourquoi tu as utilisé la précédente extension sur ce point précis.

Les réglages :

  • famille de police
  • variante
  • taille de police
  • hauteur de ligne
  • espacement entre les lettres
  • capitalisation du texte
réglages des textes

Polices du titre du site

Tu poursuis le travail sur les polices dans Avanced Header > Site branding.

Les options pour le titre du site et la description :

  • famille de police
  • variante
  • taille de police
  • espace des lettres
  • capitalisation
personnaliser la police du titre du site

Tu disposes des mêmes options pour le menu avec le texte standard et survolé : Advanced Header > Menu et pour les textes, titres et liens des widgets du pied de page.

Je n’ai pas trouvé d’extensions qui permettent facilement de personnaliser tous les éléments du site. De nombreuses personnalisations sont accessibles à l’aide du code CSS qui défini l’aspect général du site.

picto articles intermediaires
Intermédiaire

Tu rentres dans le cœur du thème ici.

Affine l’apparence de ton thème avec les CSS

Tu réalises une sauvegarde du site. Il n’y a aucun risque si tu suis les instructions mais il faut toujours assurer ses arrières.

Tu ne vas pas intégrer ton code directement dans ton thème mais dans une extension. Tu pourras toujours désactiver l’extension et retrouver ton site comme à l’origine.

Tu installes SiteOrigin CSS.

extension siteorigin css

Tu ajoutes les fonctionnalités que tu souhaites dans Apparence > CSS personnalisé.

css personnalisé

Tu ajoutes ton code ici et enregistres. Tu laisses une ligne vide entre chaque ajout.

ajout de code css

2 points utiles à savoir :

  • Les lignes comprises entre /* */ sont du commentaire. Elles ne sont pas utilisées dans le code mais permettent de retrouver ses petits.
  • !important en fin de ligne sert à indiquer que s’il existe des instructions similaires, celles-ci prendront le pas.

Enlève la mention WordPress de ton pied de page

Tu supprimes la mention Fièrement propulsé par WordPress du pied de page de ton site.

/* suppression de Fièrement propulsé par WordPress */
.site-info {
display: none;
}

Tu indiques la couleur que tu souhaites en indiquant ta référence à la place du gris #eeeeee.

Modifie la couleur du pied de page

/* couleur de la barre latérale */
.widget-area {
background: #eeeeee;
}

Change la couleur de la barre latérale

/* couleur du pied de page */
.site-footer {
background: #eeeeee;
}

Personnalise la couleur des boutons

Tu as également la couleur du texte à changer ici : #f1e928 (à la suite de color) en plus du fond.

 /* personnalisation des boutons */
.colors-custom input[type="submit"] {
color: #f1e928!important;
background: #eeeeee!important;
}

Pour aller plus loin, tu trouveras les explications complètes pour une utilisation avancée de SiteOrigin CSS.

Conclusion

Ton site n’est pas figé. Il va grandir et évoluer avec ton entreprise.

Le plus simple est de réaliser, dans un premier temps, un site à tes couleurs qui détaille ton activité.

[tweetshare tweet= »Le tutoriel détaillé pour personnaliser le thème Twenty Seventeen de WordPress. » username= »pourpasunrond »]

Quand tu auras finalisé tes textes et écris trois articles de blog, tu peaufineras ton design. Le test sur mobile requière souvent des adaptations.

Twenty Seventeen laisse une belle part aux visuels. Ils seront un élément moteur de l’attractivité de ton site. Découvre 4 sites pour trouver des photos et vidéos gratuites.

Quand tu auras finalisé l’aspect graphique, je te recommande d’installer un thème enfant si tu utilises des CSS. Cela ne prend que quelques minutes.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


51 réponses à “WordPress : personnalise le thème Twenty Seventeen”

  1. Bonsoir Jean,
    Peux-tu me dire de quelle façon je pourrais modifier le disponible dans le thème, stp ?

    Je voulais le texte en justifié, j’ai mis du css dans gutenberg dans les classes additionnelles mais visiblement ça ne prends pas.
    Est-ce qu’il faut faire:
    .wp-block-preformatted{
    text-align: justiify;
    }

    ?
    Merci Jean pour ton aide éventuelle

  2. Hello Jean !
    Je découvre ton site et je le mets d’office en fav pour les astuces qu tu y prodigues.

    J’utilise twenty seventeen. Je voulais savoir si il y avait possibilité de supprimer la parallaxe sur l’image d’en-tête du header ?
    Le problème que je rencontre c’est que lorsque je clique sur n’importe quel lien sur la page principale de mon site cela me repositionne sur l’image et je suis obligé de redescendre dans le contenu de la page.

    As-tu une idée ?

    Gilles

    • Bonjour Jean-Pierre,

      Tu désactives « Autoriser les commentaires sur les nouvelles publications » dans Réglages > Commentaires. Ce réglages s’applique à tous les nouveaux articles.

      Pour les articles déjà publiés, tu décoches « Autoriser les commentaires » dans le menu Commentaires présent dans l’onglet article du menu de droite dans Gutenberg.

      Excellente journée,
      Jean

    • Merci pour ton article !!! J’ai commence mon site ce week end et je cherchais des modifications à faire, et je n’arrivais pas à trouver !!!

  3. Bonjour et merci pour toutes ces infos qui m’ont permis de faire un site top. En revanche j’ai ce thème mais la représentation final n’a rien à voir avec le modelé proposer. Je n’ai pas du tout en page d’accueil (qui est la page de mon blog pour l’instant parce que je n’arrive pas à faire autrement) je n’ai pas l’aspect de l’image fie au début puis dans le dérouler les autres images. Je ne sais pas ou j’ai commis une erreur.
    si quelqu’un pouvait m’aider car le thème j’adore mais pas la forme qu’il a actuellement et je n’arrive pas de ce fait à mettre le message que je veux faire passer correctement.
    Merci beaucoup pour l’aide

    • Bonjour Virginie,

      Tu peux effectivement spécifier une page fixe comme page d’accueil.
      Cela se trouve dans Apparence > Personnaliser > Personnalisation > Réglages de la page d’accueil.

      Tu définis la page que tu souhaites faire apparaître en indiquant « Une page statique » dans La page d’accueil affiche.

      Ce thème permet d’ajouter des sections à la page d’accueil qui sont séparées par des images avec un effet parallaxe. Tu crées une nouvelle page par section (avec une image mise en avant) puis tu les indiques dans les sections situées dans Options du thème.

      Excellente journée,
      Jean

  4. Bonjour et merci pour votre site. Savez vous s’il existe une extension pour ce thème qui permet de faire des animations d’entrée et de sortie pour des fenêtres ou des photos?

  5. Bonjour,

    J’aimerais pouvoir modifier les photos qui sont présentes de bases. J’ai réussi à modifier celle du début mais pas celles qui suivent (tasse de café, sandwich…)
    Pouvez vous m’aider ?

    merci par avance

    • Bonjour Maëlle,

      Twenty Seventeen fonctionne de manière spécifique sur la page d’accueil. Il empile d’autres pages.

      Tu modifies les sections suivantes en retrouvant chaque page. Pour le visuel, tu modifies l’image mise en avant dans la colonne de droite.

      Magnifique journée,
      Jean

  6. Bonjour Jean et bravo pour ton site .
    concernant les réseaux sociaux comment peut-on les faire ouvrir dans un nouvel onglet ou nouvelle fenêtre ?
    je trouve dommage d’ouvrir par dessus le site !
    merci de ton aide

    • Bonjour Dominique,

      Je te remercie de ton commentaire.

      Dès que tu indiques un lien dans WordPress, tu peux préciser si tu souhaites l’ouvrir dans un nouvel onglet

      Si c’est dans une extension, elle peut offrir cette option dans les réglages.

      Magnifique journée,
      Jean

  7. Bonjour,
    J’ai bien suivi votre tuto mais dans Apparence – Personnaliser je n’ai pas « Options du thème » et du coup je ne peux pas modifier mes pages. Dans l’une d’elles j’ai un tableau et dans les colonnes j’ai des retours à la ligne incongrus. J’ai wordpress 5.4
    Je n’ai pas trouvé non plus les options pour le pied de page
    Merci de votre aide

  8. Salut,
    On ne peut vraiment ajouter que 4 sections à la page d’accueil?

    Vraiment pas possible d’en ajouter d’autres?

  9. Bonjour Frantz,

    Twenty Seventeen reprend une partie de l’image d’accueil pour illustrer les autres pages et articles.

    Tu peux recadrer la photo pour modifier la section qui s’affiche. Tu centres ta photo sur tes yeux pour obtenir l’effet désiré. Tu cales ton image sur un très grand écran qui affichera la section visible la plus étroite.

    Tu ne peux pas disposer d’un aperçu sur l’ensemble de tes visiteurs car la hauteur s’adaptera en fonction des écrans. Le résultat avec un portrait n’est pas toujours heureux.

    A bientôt,
    Jean

  10. bonjour Jean,
    merci pour ce tuto très utile.
    J’ai une question et je vais essayer d’être clair :
    Je fais un site pour promouvoir mon travail (je suis comédien) donc pas un blog.
    la photo de ma page d’accueil est un portrait.
    Sauf que quand je clique sur une section par exemple contact ou biographie, j’ai en haut sur l’écran une partie de cette image avec le nom de mon site. Sauf que la partie visible de la photo c’est mon nez! et pas qu’il soit horrible, mais j’aurais préféré que ce soit mes yeux. ou bien carrément une autre image si il n’est pas possible de sélectionner la partie de la photo que l’on souhaite mettre en bannière quand on va sur une page.
    Y a t il un réglage à faire pour sélectionner la partie de la photo que l’on souhaite voir en bannière quand on va sur une page? Merci pour ta réponse.
    Mon site n’est pas encore publié je suis en construction

  11. Bonsoir Jean,
    Encore un souci ! je n’arrive plus à accéder aux sections définies pour ma page d’accueil fixe. Quelle est l’entrée par le tableau de bord ?
    Dan

    • Bonjour Dan,

      Je ne suis pas certain de comprendre ta question.

      Pour définir ta page d’accueil :
      Apparence > Personnaliser > Réglages de la page d’accueil

      Pour définir les sous sections de ta page d’accueil :
      Apparence > Personnaliser > Theme Options

      A bientôt,
      Jean

      • Encore une fois , merci !
        Il est curieux de constater que WP sépare en 2 endroits, avec un vocabulaire pas très immédiat, des choses qui concernent un sujet unique : la page d’accueil et ses options. Dans la logique, ce devrait être rassemblé. J’en prends note.
        Dan

  12. Bonjour,
    Très bon tuto ! Bravo grâce à PP1R, on progresse et on a envie de progresser. Pour autant, j’ai des questions concernant TwenSev:
    Quel code CSS ajouter pour :
    – avoir moins d’espace entre le titre d’une page et le début du texte ?
    – disposer de 3 colonnes pour le pied de page qui passeront en successif sur smartphone ?
    – faire en sorte que le média de l’en-tête de la page d’accueil se réduise en responsive design, ce qui n’est pas le cas d’emblée, alors que c’est le cas pour les grandes images des sections suivantes de cette même page d’accueil ?
    Merci par avance.

    • Bonjour Daniel,

      Je vais essayer de répondre à tes questions.

      Avoir moins d’espace entre le titre d’une page et le début du texte ?

      Si tu parles du titre principal de ta page (h1), tu peux jouer sur 2 plans dans le CSS de ton thème enfant :
      – réduire la hauteur de ta ligne (plus proche de la hauteur de ton texte)
      – diminuer la marge inférieure (qui peut être négative)

      h1,
      .page .panel-content .entry-title,
      body.page:not(.twentyseventeen-front-page) .entry-title {
      line-height: 40px!important;
      margin-bottom: 40px!important;
      }

      – disposer de 3 colonnes pour le pied de page qui passeront en successif sur smartphone ?

      Je te renvoie à l’article de Pascal Cescato : https://pascalcescato.gdn/blogging/themes/bible-twenty-seventeen/#Ajouter_des_zones_de_widgets_au_pied_de_page

      – faire en sorte que le média de l’en-tête de la page d’accueil se réduise en responsive design, ce qui n’est pas le cas d’emblée, alors que c’est le cas pour les grandes images des sections suivantes de cette même page d’accueil ?

      Je ne vois pas comment réaliser cette opération facilement mais ce n’est clairement pas mon domaine d’expertise.

      A bientôt,
      Jean

  13. Bonjour, je veux modifier la css de mon thème enfant mais quand je vais dans editeur de theme, que je selectionne mon theme enfant puis style.css et que je colle la css même en mettant !important; rien ne se modifie, que faire ?

  14. Bonjour,
    Merci pour ce guide TOP! J’ai un souci avec mon menu sur ce thème. il est en deux lignes. Comment je pourrais le réduire à une seule?
    Merci d’avance

    • Bonsoir,

      Je dois avouer qu’il va être compliqué de te répondre sans voir ton site. Tu pourras me communiquer ton site en message privé.

      A bientôt,
      Jean

  15. Bonjour Jean,

    Merci d’avoir vérifié. Je dois avoir un bug quelque part, mais j’ai trouvé un truc : dans le CSS, j’ai rajouté les lignes suivantes :
    .site-footer .widget-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    .site-footer .widget-column {
    float: none !important;
    width: auto !important;
    min-width: 200px;
    max-width: 350px;
    margin: 0 1.5em;
    }
    Maintenant, les colonnes se superposent pour les smartphones. Avec un min-width de 250px, les colonnes se superposent aussi pour les Amazon-Kindle et ce n’est pas joli.

    Merci et à bientôt

  16. Bonjour,

    mon site est un brouillon que je fais pour l’instant en local avant d’en faire un sur la toile. Je ne peux donc pas vous donner une url pour voir vous même ce que je dis.
    J’ai deux pieds de page dans lequel j’ai mis des widgets. Pas de problème en grand écran et même sur tablette ; en revanche les deux colonnes restent sur écran smartphone ; j’ai vérifié sur XRespond.com ; Jean me disait que sur Twenty-Seventeen, les deux zones de pied de page devaient se superposer, ce qui n’est pas le cas. Pourquoi ? Remède ?
    Merci de vos réponses

    • Bonjour François,

      Je te confirme que l’affiche des 2 zones de Widget en pied de page est gérée correctement par Twenty Seventeen en version mobile.

      J’ai vérifié à nouveau ce matin sur mon mobile. La zone 1 s’affiche bien au dessus de la zone 2.

      A bientôt,
      Jean

  17. Bonjour,
    Sur grand écran, il n’est pas forcément idiot d’avoir 2 pieds de page widgets ; mais lorsqu’on passe sur tablette ou mieux, sur smartphone, cela devient stupide. Ne serait-il pas possible de fusionner les deux pieds de page selon la taille de l’écran ?
    Merci de votre aide

    • Bonjour François,

      Tu peux ajouter plusieurs widgets dans un même pied de page.
      Twenty Seventeen est parfaitement responsive. Les 2 Zones de pied de page se superposent sur mobile.

      A bientôt,
      Jean

      • Bonjour Jean,

        merci pour cette réponse rapide. Toutefois, en allant dans « personnalisez » et en cliquant sur l’icone « portable », ce n’est pas ce que constate, mais peut-être n’est-ce pas le reflet exact de la réalité.

    • Bonjour Lycia. Je te remercie de ces encouragements. Effectivement, j’ai consacré de nombreuses heures à cet article. A bientôt

  18. Bonjour Jean,
    Merci pour tes réponses. Je comprends mieux pourquoi mon image d’en-tête est rognée sur la page d’accueil.
    En revanche, je me suis mal exprimé. Ce que je n’arrive pas à faire, c’est avoir une image d’en-tête correcte au dessus du menu sur toutes les pages de mon site.
    Sur le tien, tu as une grande image « Pour pas un rond » sur la page d’accueil. Sur les autres pages, y compris celle-ci, tu as la même image mais sous forme de bandeau (je parle de celle qui est au-dessus du menu). Elle est proportionnée autrement mais ton texte est plus petit et lisible. Sur le mien, j’ai un bandeau mais qui est comme un « crop » de l’image d’en-tête de la page d’accueil.
    Comment as-tu fait?
    Encore merci pour ton aide. Bonne journée.
    Mathieu

    • Bonjour Mathieu,

      Le bandeau d’entête dans les pages internes est effectivement une réduction du visuel de la page d’accueil.
      Le logo n’est pas intégré à l’image mais est chargé à part ce qui explique qu’il soit traité différemment de l’image de fond.
      Apparence > Personnaliser > identité du site > Sélectionner un logo

      J’espère avoir répondu à ta question. Sinon, n’hésite pas à revenir vers moi.

      A bientôt,
      Jean

  19. Bonjour Mathieu,

    Je vais essayer de répondre à tes questions une par une :

    Où doit-on indiquer et charger l’en-tête des pages et articles ?
    Quand tu rédiges un article, tu charges ton image d’en-tête des articles sur la barre latérale tout en bas dans Image mise en avant.

    Sur la page d’accueil, mon image est rognée. Je ne comprends pas car j’ai utilisé une image aux bonnes dimensions.
    Twenty Seventeen est un thème responsive. Il va adapter la taille de ton image d’accueil en fonction de la taille de l’écran : PC, mobile, tablette… Si tu consultes ton site sur grand écran, tu devrais avoir ton image en entier. Pour prendre en compte l’adaptation des images, il est préférable de laisser une marge de sécurité sur les bords de ton image où tu n’inscris pas de texte et ne places pas de visuel indispensable à la compréhension.

    Dernière question, est-il possible de supprimer le bandeau d’en-tête si on ne veut pas mettre d’image (quand je le fais, j’ai une bande grise)?
    Le thème est prévu pour comporter une image en en-tête. Tu ne peux pas y couper sans modifier le code HTML du thème.

    A bientôt,
    Jean

  20. Bonjour,
    Merci pour ce site très intéressant et plein de bons conseils.
    J’ai un problème avec l’en-tête de Twenty Seventeen. J’ai remarqué que tu avais des images de tailles différentes sur ta page d’accueil et sur les autres pages.
    J’ai vu dans l’article que tu parles d’une image principale en 2000×1200 et d’une en-tête des pages et articles en 1200×240. Où doit-on indiquer et charger l’en-tête des pages et articles?
    Comme je n’ai pas trouvé, pour le moment, j’ai un bandeau qui reprend une partie peu pertinente de mon image d’en-tête de l’accueil. Ce n’est vraiment pas esthétique…
    D’ailleurs, j’ai noté que sur la page d’accueil, mon image est rognée. Je ne comprends pas car j’ai utilisé une image aux bonnes dimensions.
    Dernière question, est-il possible de supprimer le bandeau d’en-tête si on ne veut pas mettre d’image (quand je le fais, j’ai une bande grise)?
    Merci beaucoup pour les réponses que tu pourras m’apporter.

    • Bonjour Bertrand,

      C’est un bon thème flexible qui offre de nombreuses possibilités.
      Je suis impatient de voir le résultat.

      A bientôt,
      Jean

    • Bonjour Loic,

      Je te remercie. J’encourage tous les lecteurs à consulter ton article qui présente bien les bases théoriques.
      Note au 15 septembre 2019 : le lien est supprimé car la page n’existe plus.

      A bientôt,

  21. Bonjour,

    Merci pour ses conseils. Mais je suis à la recherche d’une solution pour l’affichage des widgets sur une page !

    Car ils sont visible que sur un article ! ce qui est bien dommage pour ce thème. Comment faire ? quel code mettre ? …

    merci d’avance pour votre aide.
    Cha’

Répondre à Gilles Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *