skip to Main Content

Comment personnaliser le thème Twenty Seventeen

Divi : le meilleur thème WordPress de tous les temps

Comme je vous l’ai dit dans un précédent tutoriel, WordPress 4.7 propose un nouveau thème par défaut. Ce thème conçu pour les sites web affaires, marque un départ remarquable des thèmes par défaut dans le passé qui ont été conçu pour les blogs et reflète la transition la plus importante de WordPress d’une plateforme de blogging vers une plateforme polyvalente.

Si vous envisagez d’essayer Twenty Seventeen, vous comprendrez rapidement quelque chose : ce thème est différent de ces prédécesseurs. Les précédents thèmes par défaut imposaient une configuration minimale dont le résultat n’était qu’un blog fonctionnel. Et bien ce n’est pas le cas avec Twenty Seventeen.

Bien sûr, vous pouvez l’utiliser comme un thème pour blog, mais je rappelle que ce n’est pas spécialement pour cela qu’il a été conçu. Il a été réellement conçu pour créer des sites Web d’affaires en utilisant une page d’accueil avec des sections, que vous pouvez facilement distinguer en observant la démonstration du thème.

Le résultat de ce changement d’orientation est que la mise en place Twenty Seventeen prend un peu plus que les thèmes par défaut. Dans ce tutoriel, nous allons explorer Twenty Seventeen, voir ce qu’il a à offrir, et je vais vous guider à travers la configuration du thème de sorte que vous puissiez mettre en place une page d’accueil pour votre site d’affaire facilement.

Présentation de Twenty Seventeen

PEARL : un Thème WordPress dédié aux entreprises

L’utilisation d’une page d’atterrissage pour servir de page d’accueil pour les sites web d’affaires est devenue tendance. Avec Twenty Seventeen, il est facile de construire une page d’atterrissage pour un site web d’affaire.

Pour avoir une idée des possibilités, jetez un œil à la démo officielle du thème Twenty Seventeen. Dès le départ, vous remarquerez l’en-tête vidéo. Descendez un peu et la conception en coupe de la page apparaitra. Chaque section est séparée par une image de fond de parallaxe frappante qui occupe toute la largeur et la hauteur de la fenêtre.

La navigation est simple avec une barre de navigation supérieure collante. Et une seule police, « Libre Franklin », qui est utilisé à travers le thème, des valeurs de luminosité et de styles.

Une fois correctement mis en place, Twenty Seventeen affiche un look professionnel moderne, construit sur les sélections de polices lisibles et une forte utilisation des visuels saisissants équilibrés par l’utilisation d’espaces généreux.

Comment créer une page d’accueil avec Twenty Seventeen ?

Allant dans le même sens que Matt Mullenweg, lorsqu’il parlait de l’importance du Customizer, il n’est donc pas surprenant que la plupart des tâches effectuées sur « Twenty Seventeen » se font dans le Customizer.

Outre les fonctions standards telles que le menu et la configuration, avec le widget du Customizer vous pouvez définir une image ou une vidéo d’en-tête, utiliser un schéma de couleurs différentes, et affecter le contenu des sections de votre page.

WPML, le meilleur plugin pour traduire votre site Web

WordPress 4.7 introduit également une nouvelle fonctionnalité appelée « raccourci d’édition visible » : ils apparaissent sous forme d’icônes bleues comme dans l’image précédente. En cliquant sur l’un de ces raccourcis cela ouvrira le champ qui vous permettra de modifier la section dans le Customizer.

Cela rend assez facile la modification des fonctionnalités de Twenty Seventeen, comme l’image d’en-tête, le slogan et le titre et le contenu apparaissant dans chaque section d’une page. Il suffit de trouver le contenu que vous souhaitez modifier, ensuite vous cliquez sur le « raccourci d’édition visible » et de personnaliser le contenu en question.

WordPress 4.7 est également livré avec une nouvelle fonctionnalité Customizer qui se nomme « CSS additionnel ». Nous avons déjà parlé de cette fonctionnalité avant. C’est une fonctionnalité spécifique à WordPress et non à « Twenty Seventeen ».

Pour vous montrer comment mettre en place « Twenty Seventeen » Je vais installer le thème comme si je devais l’utiliser pour mon site personnel.

Première Etape : Créez une page pour chaque section

La première chose que vous devez faire est de créer quelques pages:

  • Créer une page qui sera votre page d’accueil statique.
  • Créer une page qui affichera les articles du blog.

Créez jusqu’à quatre pages supplémentaires pour contenir le contenu qui sera affiché dans vos sections de la page d’accueil. Créez trois nouvelles pages supplémentaires si vous prévoyez d’utiliser votre blog ou comme l’une des sections de la page d’accueil.

55.000 thèmes, plugins & photos en téléchargement illimité

Dans le cas de mon exemple, je créé une page d’accueil, une page de blog, une page à propos, une page des services, et la page de contact.

Étape 2: Ajouter une image à la une sur chaque page

Afin d’obtenir l’effet parallaxe sur les images, vous devez ajouter une grande image à la une pour chaque page, qui fera partie des sections de la première page. Vous ne souhaiterez probablement pas ajouter une image sélectionnée à la page d’accueil que vous avez créé sur l’étape précédente, mais vous pourrez ajouter une image à la une à toutes les autres pages.

La démo de « Twenty Seventeen » utilise des images dont les dimensions sont 2000 pixels de largeur par 1200 pixels de hauteur. Les images qui s’approchent de ces tailles sont conseillées. Vous comprenez que vous ne devez donc pas utiliser de petites images.

Vous trouverez beaucoup d’images gratuites dans « StockSnap » et la plupart ont de bonnes dimensions.

Étape 3: Attribuez les pages d’accueil et page du blog

Maintenant , il est temps de commencer à personnaliser. Lancez le Customizer, ensuite accédez à «  Apparence> Personnaliser » sur le tableau de bord.

Sélectionnez l’option « page d’accueil statique » et effectuer les ajustements suivants :

Elementor : Créez facilement votre site Web

  • Définir ce que la page d’accueil affiche, sélectionnez le bouton radio pour une page statique.
  • Dans le menu page d’accueil, sélectionnez votre page d’accueil du site.
  • Dans le menu page des articles, sélectionnez la page qui affichera les articles.

N’oubliez pas d’enregistrer vos modifications.

Étape 4: Affectez les autres pages aux sections de la page d’accueil

Vous pouvez maintenant affecter les différentes pages que vous avez créées précédemment aux sections dans la section « Options du thème ». Utilisez donc les menus déroulants pour attribuer chaque page à la chaque section selon la pertinence que vous attribuez à chaque section.

Étape 5: Créer votre menu de navigation principal

Vous pouvez créer votre menu de navigation directement depuis l’interface du Customizer ou depuis votre tableau de bord. Dans les deux cas, la création des menus sur WordPress n’a pas changé avec WordPress 4.7.

Etape 6: Ajouter un en-tête vidéo

Ensuite, nous allons remplacer l’image d’en-tête avec une vidéo. Allez à la section correspondante sur Customizer en cliquant sur le « raccourci d’édition visible » approprié ou localisez « En-tête du média ».

Convertissez les visiteurs de votre blog en clients

Téléchargez ou sélectionnez la vidéo que vous souhaitez utiliser. Alternativement, vous pouvez également fournir l’URL d’une vidéo YouTube à afficher dans l’en-tête si vous le souhaitez.

Encore une fois, assurez-vous, pour des besoins de qualité, de choisir une vidéo avec de grandes dimensions.

A ce stade, tout devrait fonctionner normalement. Nous allons vous proposer ultérieurement d’autres tutoriels sur la personnalisation de ce nouveau thème WordPress.

Cet article comporte 27 commentaires
  1. […] Comment personnaliser le thème Twenty Seventeen. En quoi pouvons-nous vous aider aujourd’hui ? Cliquez sur l’un des liens ci-dessous pour en savoir plus… Comme je vous l’ai dit dans un précédent tutoriel, WordPress 4.7 propose un nouveau thème par défaut. Ce thème conçu pour les sites web affaires, marque un départ remarquable des thèmes par défaut dans le passé qui été conçu pour les blogs et reflète la transition la plus importante de WordPress d’une plateforme de blogging vers une plateforme polyvalente. Si vous envisagez d’essayer Twenty Seventeen, vous comprendrez rapidement quelque chose : ce thème est différent de ces prédécesseurs. […]

  2. Le nouveau thème TwentySeventeen parait effectivement élégant, novateur et attractif.
    Mais pour la couleur du background c’est uniquement blanc ou gris ??? J’ai essayé de changer y compris dans le fichier style.css mais c’est sans effet : ??

  3. Bonjour,

    J’ai utiliser le thème « Twenty Seventeen » pour mon site pro.
    Je voudrais faire une version identique avec les texte en français.
    Le plugin « Polylang » peux convenir ?
    Ou y a t’il des plugins plus adapter pour ce thème ?

    Merci

    1. Alors, le thème à ses chaines et votre blog en a les sciènes. Si vous envisagez de traduire le thème. Je vous invite à utiliser PoEdit. sinon pour traduire votre blog, PolyLang fera l’affaire.

  4. Merci pour la traduction du tuto. Moi je bloque sur l’étape 4, sans que je me l’explique je n’ai pas un menu avec option, donc impossible d’organiser les différents niveau de la page statique. Une idée ?

  5. Bonjour,

    Ma demande concerne le menu des liens de réseaux sociaux.
    Lors de la première personnalisation du thème 2017, n’ayant pas de compte Facebook, j’ai supprimé dans le menu la fonctionnalité FB, laissant uniquement le lien Email. J’ai désormais créé la page Facebook de la compagnie mais je ne parviens pas à réactiver ce lien. J’ai supprimé le menu des liens de réseaux sociaux en pensant que peut-être il serait reproposé en version d’origine. Mais rien à faire, je ne vois pas comment le créer.
    Pouvez-vous m’aider ?
    Merci

  6. Bonjour et merci pour votre tuto très bien expliqué.

    J’aimerais aller plus loin. Je m’explique.
    J’ai créé un thème enfant au Th2017. J’ai créé une nouvelle page contenant « TITRE » et « TEXTE » et une image mise en avant.
    Cette page liée par le menu apparait normalement lorsque que clic sur le menu. Puis ajouteé la page aux Options du thème.
    De plus, dans la page d’accueil, j’ai l’image puis le texte « TEXTE » dans le bandeau horizontal glissant.
    Jusque la pas de soucis.
    Je crée dans mon thème enfant, un modèle de page depuis page.php en page_modele.php. Je modifie ce fichier avec « Template Name: Page Modele » et ajoute echo « COUCOU »;.
    Je crée la page « TITRE2 » avec le modèle de page « Page Modele » avec image, puis je la relie au menu et je l’ajoute aux Options du thème.
    Cette page apparait normalement avec « COUCOU » lorsque que clic sur le menu.
    MAIS, DANS LA PAGE D’ACCUEIL, j’ai l’image MAIS PLUS LE TEXTE « COUCOU ».

    Pouvez-vous m’aider pour que COUCOU s’affiche dans le page d’accueil.
    Remarque : COUCOU sera une variable venant d’un plugin.

    Merci pour votre aide
    Bien cordialement

  7. Même question, comment éviter que les photos de l’effet parallaxe s’affichent aussi dans la page statique exemple page contact ?
    Merci.

  8. Bonjour et merci pour ce tutoriel qui permet de bien faire le tour de ce thème wp.
    Même demande que boobi, j’aimerais que les photos mises en avant pour l’effet parallaxe ne s’affichent pas dans les pages statiques, comme par exemple la page contact.
    Doit-on intervenir sur le thème ou est-ce déjà prévu ?
    Merci !

Laisser un commentaire

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

Back To Top