• Paru le 21 mars 2017

Habillez votre site avec Twenty Seventeen et les extensions Bold Themes

1376 mots - 6mn

Habillez votre site avec Twenty Seventeen et les extensions Bold Themes

1024 341 Pascal CESCATO

Une version majeure, mais pas de nouveau thème…WordPress dans sa version 4.8 est lui aussi habillé avec Twenty Seventeen. Léger, mobile ready, et (un peu) person­na­li­sable. L’équipe de Bold Themes a fait le reste : deux exten­sions gratuites pour person­na­li­ser le thème et créer des pages sur mesure.

Créer un site qui en jette sans thème premium, sans mettre la main au porte­feuille… mieux, en utili­sant Twenty Seventeen, le thème par défaut de WordPress 4.7 – non, vous ne rêvez pas.

Bon d’accord, il y a un truc. Mais on reste dans le 100% gratuit et on ne surcharge pas le thème. Pas une ligne de code. Tout passe par l’outil de person­na­li­sa­tion inté­gré à WordPress, et par un construc­teur de page dédié.

Tout çà grâce à Bold Themes qui propose deux exten­sions gratuites pour person­na­li­ser Twenty Seventeen.

Vous n’y croyez pas ? Je vois… et vous aussi, vous allez voir. Prêts ? C’est parti !

En tout premier lieu, il faut acti­ver le thème Twenty Seventeen. Vous ne devriez pas avoir à l’installer, vu qu’il s’agit du thème par défaut de WordPress (actuel­le­ment, pour la version 4.8). Il suffira donc de se rendre dans l’interface d’administration (menu Apparence > Thèmes) pour l’activer en un clic.

Si par hasard vous l’aviez supprimé, rendez-vous dans Apparence > Thèmes et cliquez sur le bouton Ajouter (en haut à gauche), c’est le premier thème que vous propose WordPress.

Le thème est inté­res­sant mais somme toute basique. La person­na­li­sa­tion se limite aux options de base prévues par WordPress, à une page d’accueil où l’on peut insé­rer le contenu de une à quatre pages et à deux modèles pour les pages (une ou deux colonnes).

C’est le moment d’installer la première extension…

Customize Twenty Seventeen

Si vous n’avez jamais installé d’extension, c’est le moment de lire l’article Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress.

Pas de para­mé­trage, mais de nouvelles options pour un thème plus abouti via l’outil de person­na­li­sa­tion de WordPress.

La dernière entrée du menu, BoldThemes Settings, permet de confi­gu­rer la police de carac­tère en utili­sant les Google Fonts pour le docu­ment, les titres et les menus, mais aussi de person­na­li­ser le modèle de page : affi­cher (ou pas) le titre des pages, l’image plein écran de la page d’accueil ou encore la posi­tion du menu.

Trois modèles de pages font aussi leur appa­ri­tion (boxed, fulls­creen et wide).

Voilà déjà de quoi person­na­li­ser le thème, mais pour créer une page d’accueil ou une landing page digne de ce nom, c’est encore un peu light ?

Il est grand temps de nous inté­res­ser à la deuxième extension…

Bold Page Builder

Ce construc­teur de page gratuit fonc­tionne comme la plupart de ses homo­logues, avec un éditeur de blocs drag and drop bien conçu et effi­cace. Ce n’est pas du WYSIWYG avec édition et visua­li­sa­tion en direct (l’icone en haut à gauche de chaque section permet quand même de prévi­sua­li­ser la section dans une popup), mais son utili­sa­tion n’en est pas moins intui­tive et agréable.

Après l’avoir instal­lée et acti­vée, l’extension est elle aussi prête à l’emploi – même si vous pouvez effec­tuer quelques réglages, nul besoin de s’en préoccuper.

Vous pour­rez l’utiliser pour les articles, les pages et tous les Custom Post Types.

Un bouton (sous le titre et le perma­lien) permet de passer de l’éditeur par défaut au construc­teur de page :

Bold Page Builder

Bold Page Builder

Le menu en bas de la fenêtre d’édition donne accès à des actions géné­riques (annu­ler / refaire, prévi­sua­li­sa­tion et enregistrement).

Les sections, rangées et colonnes

Le bouton bleu central crée les sections. La section est l’élément de premier niveau dans la page, elle est compo­sée a minima d’une rangée (row en anglais), elle même compor­tant une ou plusieurs colonnes. Le contenu est lui posi­tionné à l’intérieur des colonnes.

section par défaut

section par défaut

Lorsque vous survo­lez un élément (section, rangée, colonne ou contenu), un menu s’affiche pour effec­tuer les opéra­tions possibles.

Le bouton de ce menu contex­tuel permet d’ajouter une rangée  aux sections, de modi­fier le modèle de rangée ou d’ajouter un élément aux colonnes.

modèles pour une rangée

modèles pour une rangée

Le bouton ouvre une fenêtre popup pour person­na­li­ser l’élément :

personnaliser une section

person­na­li­ser une section

Pour les sections par exemple, vous choi­sis­sez le modèle (boxed / wide), l’espacement entre les sections (top et bottom spacing), l’alignement verti­cal au sein de la section, l’image de fond avec ou sans paral­laxe (onglet Design) ou la vidéo en arrière plan (onglet Video).

Le dernier onglet (Custom) permet d’attribuer une id à la section (ou à tout élément que vous ajou­tez via le construc­teur de page), de défi­nir le style via des classes ou via l’attribut HTML style .

Les modules

Vous avez 17 modules à votre dispo­si­tion pour créer une page person­na­li­sée : vidéo, image, slider, gale­rie d’images, icone, bouton, texte, accor­déon, onglets, liste d’articles… tous personnalisables.

ajouter un élément dans les colonnes

ajou­ter un élément dans les colonnes

Chaque élément est éditable via une popup simi­laire à celle de la capture d’écran person­na­li­ser une section.

Copier / Coller un élément

Vous avez remar­qué les icones clonecopy et copy + dans le menu au survol. Le premier insère un élément iden­tique à celui que vous survo­lez, les deux autres boutons permettent de copier un élément (copy) ou plusieurs (copy +) dans la page active, mais aussi dans n’importe quelle autre page où l’éditeur Bold Page Builder est activé.

Vous copiez dans la page d’origine, vous collez dans la page de desti­na­tion – une alter­na­tive au système de modèles (templates en anglais) d’autres construc­teurs de page.

Et le résul­tat ? Bold Themes a pensé à tout et met à disposition…

Des démos fonctionnelles

Bold Themes four­nit trois exemples de sites créés avec cette confi­gu­ra­tion (le thème Twenty Seventeen et les deux exten­sions). Le résul­tat parle de lui-même :

  • Wedding, thème « One Page » pour l’événementiel (mariages ou fêtes)
  • Accomodation, autre thème « One Page » pour une landing page
  • Construction, thème complet qui peut servir de modèle pour un cabi­net d’architectes, un déco­ra­teur d’intérieur ou un créa­tif (desi­gner, photographe…)

Les trois démos et les instruc­tions pour les utili­ser sont dispo­nibles dans l’onglet Bold Page Builder / Installation (How to import demo content).

Personnaliser plus encore

En utili­sant les deux exten­sions propo­sées par BoldThemes, vous avez déjà la possi­bi­lité de rendre unique l’habillage de votre blog ou de votre site.

Si vous souhai­tez aller au-delà des options offertes par ces deux exten­sions, l’article Personnaliser Twenty Seventeen – astuces, bouts de code et exten­sions est tout indiqué.

En bonus, vous pour­rez télé­char­ger le thème enfant que j’ai utilisé pour tester les CSS et les fonc­tions présen­tées dans l’article.

Le mot de la fin

Voila de quoi mettre en ligne un site person­na­lisé, rapi­de­ment, gratui­te­ment… la qualité du thème est acquise, il ne manquait plus que ces deux exten­sions pour le rendre plus attrayant. Vous en avez rêvé, Bold Themes l’a fait 😉

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

3 commentaires
  • Mélanie Gilbert 19 mai 2017 à 11 h 42 min

    Merci ! 🙂

  • Mélanie Gilbert 19 mai 2017 à 10 h 52 min

    Merci beau­coup pour ce très utile article ! J’utilise Twenty Seventeen pour mon site pro – biogra­phies, réda­tion web et commu­nity mana­ge­ment – et je cher­chais le moyen de trou­ver une autre police d’écriture : génial !
    A bientôt !

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :