Exemple de design d’un site web avec le thème WordPress Acoustic
Attention, cette section a maintenant quelques années, je la considère comme obsolète.
Je vous conseille plutôt de choisir un thème plus récent équipé d’un outil de création complètement visuel.
Voyez ma sélection de thèmes premium.
Partagez cette page si vous la trouvez utile !
Comment installer le thème WordPress Acoustic
Attention! Le thème Acoustic est livré avec de nombreux fichiers de documentation, ainsi que les fichiers au format photoshop (pour ceux qui voudraient toucher au design de base). Ces fichiers ne sont pas destinés à être installé sur le site! De fait, il faut d’abord décompresser le fichier .zip téléchargé sur Theme Forest, et trouver dans le dossier résultant le fichier nommé acoustic_v102.zip (le nombre peut changer si la version est plus récente).
Voici à quoi ressemblera votre site alors :
(si vous voyez un post « Hello World » et non la page « Sample Page », la réponse se trouve ci-dessous, dans la section « Choix du type de page d’Accueil » !)
Maintenant que le thème est activé, nous allons pouvoir enfin nous attaquer au design à proprement parler! A ce sujet, il me parait important de préciser que l’idéal est de savoir à peu près ce que l’on veut obtenir avant de voir comment le faire.
Un Thème Premium ?
Il existe des myriades de thèmes pour WordPress. Certains sont gratuits, d’autres sont payants. Ces derniers sont souvent appelés « Thèmes Premium », à contrario des thèmes « Lite » offerts par les mêmes designers.
Vous vous doutez bien que, comme toujours, lorsque c’est gratuit, cela finit par se voir! En effet, les thèmes « Lite », s’ils peuvent être très jolis aussi, sont généralement limités en fonctionnalités. Vous pourrez la plupart du temps choisir entre quelques « skins » de couleurs, ou bien changer la couleur de fond (voire y mettre une image de votre choix), parfois la police de caractère principale, et bien entendu choisir les widgets que vous voudrez voir dans la sidebar. Mais vous ne pourrez la plupart du temps pas faire grand chose de plus.
Un des thèmes gratuits permettant plus de choses s’appelle « Platform » (essayez de rechercher ce mot dans l’onglet « Install Themes »). Il est versatile, mais son interface de configuration est fort complexe, je pense qu’il manque d’ergonomie pour qui n’est pas très aguerri en webdesign.
Je recommande le thème premium nommé Acoustic. Il ne coûte que 45$ (soit à peine plus de 35€), il est vraiment à la pointe de ce que l’on peut faire aujourd’hui tout en étant sobre et beau, permet largement assez de modifications, et le tout simplement! Suivez le lien et essayez la démo (Live Preview) ! C’est pour toutes ces raisons et d’autres encore que j’ai choisi de le prendre pour l’exemple de design.
Partagez cette page si vous la trouvez utile !
Choix du type de Page d’Accueil
Pour notre exemple, je vais choisir une page statique. Cela n’empêchera pas de tenir un blog par ailleurs sur le site, mais je préfère fixer l’essentiel de la page d’accueil pour éviter que les visiteurs n’aient l’impression d’être tombés sur un simple blog. Rendons-nous, dans le back office, sur la page Reading de la section Settings.
Vous pourrez y cocher la case A static page si vous souhaitez afficher une page statique comme page d’accueil. Vous devrez ensuite choisir quelle page sera cette page d’accueil. Si vous en êtes au même stade que moi à l’instant ou je tape ces mots (les pauvres ne m’ont pourtant rien fait!), vous n’aurez pas d’autre choix que la Sample Page présente par défaut sur toute nouvelle installation de WordPress.
Vous pouvez très bien choisir cette dernière, puisqu’il sera possible de la modifier intégralement (titre compris) ensuite.
Le Pexeto Panel, pour configurer Acoustic
Le thème Acoustic est paramétré via un panneau de configuration nommé Pexeto Panel.
Ce dernier permet d’ajuster de nombreux paramètres très utiles: couleurs, logo, image de fond, polices de caractère, sliders (pour faire défiler des images), …
Vous le trouverez en bas de la barre verticale de menu du back-office, en cliquant sur le bouton « Acoustic« .
Nous allons commencer par nous intéresser aux couleurs principales du thème (celle de la barre du header et des liens), au fond de la page et au footer.
Couleurs des en-tête (Header), fond de page (Background) et pied de page (Footer)
Changer la couleur du Header
Allons donc dans la section « Style Settings » du Pexeto Panel.
En face de « Predefined Theme Colors » la petite mosaïque de couleurs du haut de la section vous propose un choix de couleurs sélectionnées par le designer. Cette couleur principale sera celle du header (la barre horizontale en haut de page, qui comportera le logo et les liens vers les pages du site), mais aussi celle des liens cliquables dans les contenus textuels des pages.
Essayez de changer cette couleur pour une autre, sauvez les changements en bas de page, puis allez rafraichir votre site.
Vous pouvez également, si vous ne trouvez pas votre bonheur dans cette sélection, choisir n’importe quelle couleur dans la zone « Custom Theme Color« , en cliquant sur le bouton carré de droite.
Pour mon exemple, j’ai choisi un vert sombre, qui devrait contraster avec le motif que je veux utiliser en fond de page.
Changer la couleur de fond
A propos de fond de page, vous pouvez ici aussi gérer la couleur de fond (« Background Color« ), en choisissant comme précédemment. Mais il est également possible d’ajouter une texture transparente (« Background Pattern« ) par dessus cette couleur, ce qui donnera des effets de relief intéressants. La encore, essayez des combinaisons et regardez le résultat sur le site.
Mais peut-être préférez-vous mettre une image ou un motif différent en fond de page de votre site ? C’est aussi possible! C’est d’ailleurs ce que j’ai choisi pour l’exemple.
Utilisation d’une image en fond de page
Acoustic nous permet d’uploader une image en fond de page. Mais encore faut-il avoir une image!
Ce site parlant de billard, j’ai choisi d’essayer une thématique art-déco. J’ai donc cherché sur internet des motifs utilisables, et j’ai trouvé mon bonheur sur un site fort utile : Pattern Cooler. S’y trouvent une banque de motifs qui peuvent être répétés, et la possibilité d’en changer les couleurs, puis de sauvegarder le résultat dans un ficher d’image .png.
J’ai uploadé ensuite dans Acoustic l’image .png sauvegardée (bouton « Upload » en face de « Background Image« ), et j’ai coché (+) les options Repeat, Center et Fixed (répéter l’image pour remplir le fond si elle est trop petite, centrer l’image, et fixer le fond pour que l’image ne bouge pas quand on descend/monte dans la page).
Changer les couleurs des zones content, des lignes, du footer,…
Nous allons pouvoir aller plus loin dans la gestion des couleurs, grâce à l’onglet « Backgrounds » de la section « Style Settings« .
Ici nous pouvons choisir la couleur de fond de la zone content (« Content Background Color« ), les couleurs des lignes et contours (« Lines and borders color« , mais attention, cela peut rapidement devenir laid! ).
Nous pouvons aussi modifier la couleur de fond du footer (la zone de bas de page, « Footer background color« ) et de la zone entourant le footer (« Footer wrapper background color« ). J’ai choisi pour l’instant de reprendre le même vert sombre dans ces deux zones que celui utilisé pour le header (j’ai simplement sélectionné puis copié (clic droit), puis (clic droit) collé le numéro de la couleur).
Voici ce que cela donne sur mon site d’exemple :
Passons maintenant à l’étape de création du logo !
Partagez cette page si vous la trouvez utile !
Création du logo
Logo simple sans effet ne contenant que du texte
Si comme moi vous ne voulez pas plus que le nom de votre site comme logo, je vous recommande un petit outil en ligne nommé Font Meme.
Avec lui il est possible de pré-visualiser un grand nombre de polices de caractères (« fonts » en anglais) classées par thème, de choisir la couleur et la taille du texte, puis d’exporter le résultat dans un fichier .png à fond transparent. Mais vous ne pourrez pas créer de dégradé ni ajouter d’image avec lui.
J’ai donc cherché dans la catégorie « Art Deco Fonts », et ai essayé les polices proposées. J’ai finalement arrêté mon choix sur celle nommée « RaconteurNF », avec une taille de police de 24 pixels. Comme je voulais que mon logo soit blanc au bout du compte, j’ai pré-visualisé en gris (le fond de Font Meme étant blanc, il fallait bien y voir! ), mais j’ai changé la couleur pour du blanc juste avant de sauvegarder l’image.
Logo avec image et/ou texte avec effets
Si vous préférez créer un logo plus complexe, avec une image par exemple, ou bien des effets sur le texte, Font Meme ne sera pas suffisant.
Si vous voulez seulement du texte avec effet (dégradé par exemple), essayez Supalogo, c’est gratuit et facile à utiliser. Voir la capture d’écran avec explications à droite.
Si vous souhaitez inclure une image dans votre logo, vous pouvez utiliser soit un logiciel de dessin classique (n’oubliez pas d’exporter en .png avec fond transparent!), soit un outil en ligne, comme par exemple OnlineLogoMaker.
Il permet d’ajouter des images à partir d’une banque de symboles en ligne, mais aussi d’importer vos propres images, puis de les mettre à l’échelle, de les tourner, …
Il est moins simple à utiliser que les deux précédents, mais permet de faire plus de choses…
Importer son logo dans le header
Une fois le fichier .png sauvé, il n’y a plus qu’à retourner dans le pexeto panel, section « Style Settings« , onglet « Logo« , puis cliquer sur « Upload« , et pointer vers ledit ficher!
Remarquez que, mon logo étant plus grand que celui d’Acoustic, j’ai du saisir sa largeur (300 pixels) dans le champ « Logo Image Width« . Pour connaître les dimensions de votre logo, vous pouvez faire un clic droit sur le fichier (dans l’explorateur windows ou le finder mac), et choisir « Propriétés » ou « Lire les informations« . Sinon, vous pouvez aussi essayer des valeurs approximatives, puis regarder le résultat sur le site et ajuster.
Pour info, le logo « Acoustic » fait 116 px de large par 36 px de haut.
Voici le résultat pour l’exemple :
Partagez cette page si vous la trouvez utile !
Création du menu de navigation principal
l se trouve dans l’onglet »Menus » de la section « Appearance« . Pour créer votre menu, entrez simplement un nom dans le champs « Menu Name« , puis cliquez sur « Create Menu« . Vous avez maintenant accès aux possibilités de l’outil.
La colonne de gauche (custom links, page, portfolios, …) vous permet de sélectionner des éléments à ajouter au menu. Toutes les pages que vous créerez seront disponibles ici, ce sera à vous de choisir si et où vous voulez qu’elles apparaissent dans le menu. Vous pouvez par exemple cocher la page « Sample Page » et cliquer sur le bouton « Add to Menu« , vous la verrez alors apparaître à droite dans l’onglet du menu.
Mais vous pouvez aussi ajouter au menu n’importe quelle catégorie (de posts, si vous vous en servez), ou encore des liens de votre choix (vers un autre site par exemple) via la section « Custom Links« . Vous pouvez même mettre plusieurs fois une page si cela vous chante!
Et ce n’est pas tout! Le nom, l’ordre et la hiérarchie des liens sera totalement à votre discrétion!
Autrement dit, ce qui apparaîtra dans le menu sera indépendant du nom, de l’ordre de création ou de la hiérarchie de vos pages, ce qui permet d’envisager un nombre infini de possibilités!
Si vous suivez la méthode depuis le début, il y a fort à parier que vous n’avez pas encore créé les pages et/ou les posts de votre site. Il vous faudra de toutes façons revenir à cette section au fur et à mesure que vous ferez évoluer votre site.
Si vous préférez, vous pouvez d’ailleurs cocher la case « Automatically add new top-level pages » pour que les nouvelles pages (mais pas les sous-pages) soient automatiquement ajoutées à ce menu.
Enfin, il faut ne pas oublier de signaler à Acoustic d’utiliser ce nouveau menu dans le header! Pour cela, sélectionnez le simplement dans le menu déroulant nommé « Theme Locations » et cliquez sur « Save« . Vous verrez sur le site les liens apparaître dans le header.