Habillez votre site avec Twenty Seventeen et les extensions Bold Themes

3

Une version majeure, un nouveau thème…WordPress dans sa version 4.7 est habillé avec Twenty Seventeen. Léger, mobile ready, et (un peu) personnalisable. L’équipe de Bold Themes a fait le reste : deux extensions gratuites pour personnaliser le thème et créer des pages sur mesure.


Twenty Seventeen et Bold Themes
Twenty Seventeen et Bold Themes

Créer un site qui en jette sans thème premium, sans mettre la main au portefeuille… mieux, en utilisant 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 personnalisation intégré à WordPress, et par un constructeur de page dédié.

Tout çà grâce à Bold Themes qui propose deux extensions gratuites pour personnaliser 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 activer le thème Twenty Seventeen. Il est installé lors de l’installation (ou de la mise à jour) de WordPress, il suffira donc de se rendre dans l’interface d’administration (menu Apparence > Thèmes) pour l’activer en un clic.

Le thème est intéressant mais somme toute basique. La personnalisation 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, activer, mettre à jour et supprimer une extension WordPress.

Pas de paramétrage, mais de nouvelles options pour un thème plus abouti via l’outil de personnalisation de WordPress.

La dernière entrée du menu, BoldThemes Settings, permet de configurer la police de caractère en utilisant les Google Fonts pour le document, les titres et les menus, mais aussi de personnaliser le modèle de page : afficher (ou pas) le titre des pages, l’image plein écran de la page d’accueil ou encore la position du menu.

Trois modèles de pages font aussi leur apparition (boxed, fullscreen et wide).

Voilà déjà de quoi personnaliser 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éresser à la deuxième extension…

Bold Page Builder

Ce constructeur de page gratuit fonctionne comme la plupart de ses homologues, avec un éditeur de blocs drag and drop bien conçu et efficace. Ce n’est pas du WYSIWYG avec édition et visualisation en direct (l’icone en haut à gauche de chaque section permet quand même de prévisualiser la section dans une popup), mais son utilisation n’en est pas moins intuitive et agréable.

Après l’avoir installée et activée, elle est elle aussi prête à l’emploi – même si vous pouvez effectuer quelques réglages, nul besoin de s’en préoccuper.

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

Un bouton (sous le titre et le permalien) permet de passer de l’éditeur par défaut au constructeur 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 (annuler / refaire, prévisualisation 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 composée a minima d’une rangée (row en anglais), elle même comportant une ou plusieurs colonnes. Le contenu est lui positionné à l’intérieur des colonnes.

section par défaut
section par défaut

Lorsque vous survolez un élément (section, rangée, colonne ou contenu), un menu s’affiche pour effectuer les opérations possibles.

Le bouton de ce menu contextuel permet d’ajouter une rangée  aux sections, de modifier 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 personnaliser l’élément :

personnaliser une section
personnaliser une section

Pour les sections par exemple, vous choisissez le modèle (boxed / wide), l’espacement entre les sections (top et bottom spacing), l’alignement vertical au sein de la section, l’image de fond avec ou sans parallaxe (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 ajoutez via le constructeur de page), de définir le style via des classes ou via l’attribut HTML style .

Les modules

Vous avez 17 modules à votre disposition pour créer une page personnalisée : vidéo, image, slider, galerie d’images, icone, bouton, texte, accordéon, onglets, liste d’articles… tous personnalisables.

ajouter un élément dans les colonnes
ajouter un élément dans les colonnes

Chaque élément est éditable via une popup similaire à celle de la capture d’écran personnaliser une section.

Copier / Coller un élément

Vous avez remarqué les icones clonecopy et copy + dans le menu au survol. Le premier insère un élément identique à celui que vous survolez, 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 destination – une alternative au système de modèles (templates en anglais) d’autres constructeurs de page.

Et le résultat ? Bold Themes a pensé à tout et met à disposition…

Des démos fonctionnelles

Bold Themes fournit trois exemples de sites créés avec cette configuration (le thème Twenty Seventeen et les deux extensions). Le résultat 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 cabinet d’architectes, un décorateur d’intérieur ou un créatif (designer, photographe…)

Les trois démos et les instructions pour les utiliser sont disponibles dans l’onglet Bold Page Builder / Installation (How to import demo content).

Personnaliser plus encore

En utilisant les deux extensions proposées par BoldThemes, vous avez déjà la possibilité de rendre unique l’habillage de votre blog ou de votre site.

Si vous souhaitez aller au-delà des options offertes par ces deux extensions, je vous recommande d’utiliser un thème enfant. L’article Pour modifier un thème WordPress, apprenez à créer un thème enfant ! sur No Tuxedo vous explique comment faire.

Le mot de la fin

Voila de quoi mettre en ligne un site personnalisé, rapidement, gratuitement… la qualité du thème est acquise, il ne manquait plus que ces deux extensions 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électionner le texte en question et appuyer sur Ctrl + Entrée.

Partager…
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on Pinterest

3 commentaires

  1. Merci beaucoup pour ce très utile article ! J’utilise Twenty Seventeen pour mon site pro – biographies, rédation web et community management – et je cherchais le moyen de trouver une autre police d’écriture : génial !
    A bientôt !

Commenter

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