Plus de visiteurs, plus d'inscrits sur votre blog !!

Accédez à la bibliothèque de ressources gratuites pour blogueuse 

Avec le thème enfant que vous venez de créer, vous pourrez personnaliser à loisir le thème que vous avez choisi. Comme je le disais précédemment, essayez tout de même de prendre un thème parent qui soit assez proche du résultat que vous souhaitez obtenir, ce sera plus simple et moins long à customiser !

 

Sans vouloir non plus vous faire un cours de programmation informatique, je vais vous donner ici quelques astuces et codes css afin de vous permettre de faire quelques modifications minimes de mise en page.

Pour aller plus loin, vous devrez soit prendre des cours de langage en css et php, soit passer par un professionnel qui pourra créer pour vous le blog tel que vous l’imaginez. Je vous conseille par exemple l’agence web dédiée aux blogueuses et blogueurs, Blog Me Tender ^^.

 

trucs-de-blogueuse-comment-personnaliser-design-blog

Que peut-on personnaliser sur son blog ?

Avec les connaissances techniques adéquates, on peut tout faire sur son blog, au détail et au millimètre près. Il faut pour cela pouvoir accéder aux fichiers du site (ou code source) et c’est la raison pour laquelle je ne parle que de WordPress.org : on ne peut pas le faire si on n’a pas accès au serveur d’hébergement !

 

Comme on peut vraiment tout, tout faire dans la personnalisation de blog, un listing de ce qui est faisable est inutile et complètement non exhaustif car cela dépend de l’imagination que l’on peut avoir. Mais pour ceux qui n’arrivent pas à savoir l’étendue des possibilités, voilà quand même une petite liste (non exhaustive) de ce que l’on peut personnaliser sur son blog :

  • l’agencement des éléments du blog : logo, header, slider, contenu, colonnes, …
  • les couleurs : du texte, du fond de chaque élément, des bordures, des boutons, …
  • les typographies pour chaque type de texte,
  • l’épaisseur des traits (par exemple de séparation entre chaque bloc d’élément),
  • le type de trait : simple, double, pointillé, en relief, …
  • les dimensions : de chaque élément, des images, du logo, du menu, des colonnes, du texte principal…

 

Cela veut dire que même si vous utilisez un thème qui propose seulement 5 couleurs de personnalisation, vous pourrez les remplacer par celle de votre choix, voire même mettre une texture ou une image de fond si vous le voulez.

Pareil si votre thème ne propose pas de slider, vous pourrez en rajouter un. S’il n’y a qu’une seule colonne à droite, vous pourrez la mettre à gauche, ou bien en avoir une de chaque côté, une mise en page différente sur chaque page.

Essayez d’imaginer le blog de vos rêves : il est possible de l’avoir… avec plus ou moins de facilité technique.

 

Comment faire techniquement ?

Il y a plusieurs manières de personnaliser son blog, je vous montre 3 façons ci-dessous, du plus simple techniquement (mais le moins personnalisable), au plus compliqué (mais personnalisable à l’infini).

En général, on utilise les 3 techniques en parallèle pour optimiser chacun des outils et customiser plus facilement et rapidement son blog :

  • avec les options du thème,
  • avec des extensions WordPress,
  • avec du langage informatique, notamment le css et le php pour WordPress.

 

Avec les options du thème

Dans chaque thème WordPress, il y a un minimum d’options qui varient d’un thème à un autre.

En général les thèmes payants proposent une plus grande personnalisation que les gratuits, ce qui peut être pratique si les options conviennent à ce que l’on souhaite, mais ça peut vite devenir une usine à gaz : trop d’options tuent l’option ! On peut ne plus comprendre quoi modifier, et en plus, cela peut aussi alourdir le blog pour rien.

 

Avec des extensions

Comme je l’avais dit dans mon article sur les extensions WordPress, vous pouvez personnaliser votre blog en y ajoutant des fonctionnalités mais aussi des éléments de design, comme par exemple :

  • un slider,
  • un carousel d’images,
  • un portfolio,
  • une mise en page du texte en accordéon ou sous forme d’onglets,
  • un site mobile,
  • un site e-commerce,
  • des boutons cliquables,
  • des tableaux,
  • des pop up,
  • des formulaires,
  • et tout ce qui est imaginable.

 

Il suffira de paramétrer l’extension pour obtenir ce que vous souhaitez. Attention toutefois à ne pas utiliser trop d’extensions car cela peut alourdir le blog.

 

Avec du code informatique

Avec cette méthode, on peut personnaliser à 100% le design de son blog, voire même créer un thème entier (voire même ne pas utiliser WordPress et coder de A à Z).

Mais pour aller plus vite, on peut utiliser un thème existant, lui créer un thème enfant, ajouter des extensions et enfin, ajouter des touches de code là où le thème et les extensions ne peuvent pas intervenir. (ou bien lorsqu’il est plus rapide et moins lourd de modifier du code que d’ajouter une extension)

 

Les fichiers à modifier doivent ainsi être intégrés dans le thème enfant, et c’est notamment le fichier style.css qui va être utilisé pour personnaliser le design, et les fichiers de templates de pages et des éléments qui composent une page (header.php, footer.php, etc.).

 

Qu’est-ce que le css ?

Le CSS (Cascade Style Sheet) est un langage informatique utilisé pour définir une mise en page sur l’ensemble d’un site internet. Il est utilisé dans des fichiers appelés feuilles de style (comme style.css) qui vont contenir les couleurs, les dimensions, les marges, l’emplacement de chaque élément, etc. Chacun de ces éléments est défini dans des sélecteurs qui permettent de les identifier : id et class.

Par exemple, on va placer le logo dans un sélecteur appelé id= »logo-blog » et on va écrire des propriétés css sur ce sélecteur pour définir ses dimensions, son emplacement, ses marges, ses bordures, la façon de s’afficher, de s’animer, etc.

 

Quelques codes css pour personnaliser le thème de son blog

Pour connaître le sélecteur de l’élément que vous souhaitez modifier, vous pouvez utiliser une fonction fournie par certains navigateurs : sur Chrome ou Firefox, faites un clic droit sur une page de votre blog, et cliquez sur « Procéder à l’inspection de l’élément » (sur Chrome) ou « Examiner l’élément » (sur Firefox).

 

Vous verrez alors apparaître en bas ou à droite de la fenêtre, des encadrés avec plein de codes. Si vous cliquez sur le petit icône en forme de loupe (sur Chrome) ou de flèche dans un rectangle (sur Firefox), vous pourrez sélectionner l’élément de votre choix. Par exemple j’ai ici sélectionné le logo, et je vois donc apparaître dans l’encadré à gauche le nom du sélecteur : « site-logo ».

A droite, on voit le code css actuellement utilisé pour le logo :

#site-logo {
position: relative;
display: block;
}

trucs-de-blogueuse-dossier-refonte-blog-css

 

Si je modifie le code dans l’encadré en bas à droite, je peux tester l’apparence du blog en direct, sans réellement modifier le site.

Dans cet exemple, j’ai mis le logo à gauche et à 40 pixels du haut de la page. Pour que les modifications soient vraiment prises en compte sur le blog, il faut que je copie-colle le code dans le fichier style.css :

#site-logo {
position: absolute;
top: 40px;
}

A noter que je n’ai pas besoin de remettre la ligne display: block car je ne l’ai pas modifiée par rapport au code initial.

trucs-de-blogueuse-dossier-refonte-blog-css-2

 

A chaque propriété css correspondent plusieurs valeurs possibles. Voici les propriétés css les plus courantes :

  • Police : font-family (avec comme valeur par exemple Arial)
  • Taille du texte : font-size (avec comme valeur par exemple 16px)
  • Couleur de texte : color
  • Image de fond : background-image
  • Largeur d’un élément : width
  • Marge : margin
  • Marge intérieure : padding
  • Bordure : border
  • Position depuis le haut du site : top

 

Vous pouvez voir une plus grande liste de propriétés css sur le site OpenClassRooms. Le livre HTML et CSS : Design et création sites web m’est également d’une grande aide pour personnaliser mes sites en CSS.

 

En modifiant le css, on peut changer la mise en page d’éléments existants. Si vous voulez rajouter une colonne ou un menu supplémentaire par exemple, il faudra modifier les templates en php pour pouvoir structurer les pages selon vos souhaits.

 

Je vous conseille de vous former au langage informatique (css, php et html) avant de toucher au code de votre blog, car il y a un grand risque de faire n’importe quoi et de tout faire planter ! En tout cas, n’oubliez pas de faire des sauvegardes avant de modifier quoi que ce soit.

 

Une fois les optimisations terminées, vous n’avez plus qu’à mettre la nouvelle version de votre blog en ligne !

 

A vous de jouer

Comment faites-vous pour personnaliser votre blog ? Avec les options existantes, en ajoutant des plugins WordPress ou en modifiant le code ?

 

Mia W.

Mia, de son nom de plume, est trafiquante de blogs depuis plus de 15 ans et partage ses compétences dans le blogging et le marketing digital.
Ancienne responsable e-commerce pour une marque de luxe, elle est l'auteure du livre "Augmenter le trafic de son blog" paru aux Editions Eyrolles.
Elle s'adresse à tous ceux dont la passion est le moteur.
Voir sa description détaillée.