Comment personnaliser son site web ? (même en étant un débutant)

Personnaliser son site web

On a tous, un jour, voulu personnaliser son site web car on souhaite tous avoir un site internet à nos couleurs et surtout à notre image. Si vous êtes comme moi, que vous n’avez pas suivi de cursus de développeur, vous vous êtes peut-être rendu compte que cela peut être plus compliqué que prévu.

Heureusement, nous ne sommes plus dans les années 2000 où il fallait absolument avoir des compétences en développement pour avoir un site internet personnalisé à ses couleurs et à son image. Aujourd’hui avec, par exemple, l’émergence des CMS ou de nombreuses extensions, il est devenu plus facile de personnaliser son site internet. Vous n’aurez donc pas besoin d’écrire une seule ligne de code.

Voyons ensemble les différents moyens pour personnaliser son site web et avoir un site internet à son image.

Utiliser un CMS pour personnaliser son site web

Comme j’ai commencé à vous le dire dans l’introduction de cet article, le CMS (content management system ou en français système de gestion de contenu) est un bon moyen pour personnaliser son site web. Pour rappel, voici différents noms de CMS : WordPress, Joomla, Drupal, Wix, Prestashop ou encore Shopify.

Au départ, ces logiciels étaient conçus pour faciliter l’intégration des contenus mais aujourd’hui ils se sont tellement développés qu’ils ne sont plus qu’un simple système de gestion de contenu. Ces systèmes ont maintenant la capacité  de créer votre site internet de A à Z, du contenu aux fonctionnalités en passant par la case “personnalisation”.

Tout dépend du CMS que vous allez utiliser, mais pour la plupart une rubrique est destinée à la personnalisation de votre site internet. Vous allez pouvoir y configurer la couleur, le logo, la typographie… Et avoir un accès “aux grandes lignes” pour personnaliser votre site web.

Vous avez même la possibilité, avec certains CMS, de pouvoir configurer votre contenu comme vous le souhaitez. Vous pouvez ainsi modifier la mise en forme de vos pages en créant des colonnes, en changeant la couleur de votre texte par exemple.

C’est le cas de WordPress qui possède des extensions très poussées pour personnaliser l’ensemble de la mise en page du site web. On appelle ces plugins des Page builder (en français “constructeur de pages”).

Se servir d’un template ou d’un thème graphique pour personnaliser son site web

Autre option, si vous souhaitez avoir une mise en page particulière et graphique qui est déjà prête et qui n’attend plus que votre contenu, l’utilisation de templates ou d’un thème graphique.

Ces thèmes graphiques doivent en général être incorporés au CMS. C’est-à-dire que vous allez l’installer sur votre CMS. La plupart des CMS ont un espace dédié aux thèmes graphiques. Vous y trouverez une bibliothèque de thèmes graphiques pour personnaliser votre site web. 

Il faut savoir que la plupart de ces thèmes sont payants mais vous pouvez tout de même en trouver des gratuits. Les prix sont plus que raisonnables car il faudra seulement débourser autour de 30 à 60 € pour avoir un thème graphique pour personnaliser l’ensemble de votre site internet

Si vous ne trouvez pas de thème dans la bibliothèque de votre CMS, je vous conseille le site themeforest qui est une mine d’or pour trouver le thème graphique qui vous correspondra. En plus d’avoir de nombreux thèmes pour personnaliser votre site web, le site propose pour environ 40 € d’installer votre thème. Un bon rapport qualité-prix quand on sait que l’installation d’un thème graphique complet peut être complexe et peut prendre quelques heures.

Themeforest personnaliser son site web theme wordpress

Une fois l’installation de ce thème, votre site internet sera entièrement personnalisé, vous n’aurez plus qu’à ajouter le contenu.

Passer par du code CSS pour personnaliser son site internet

Je sais ! Je vous avais dit que vous n’auriez pas besoin de faire du code pour personnaliser votre site internet. Rassurez-vous, avec les deux options précédentes, pas besoin de faire une seule ligne de code.

Je vous propose quand même cette troisième option car parfois, avoir un CMS et un thème graphique ne suffisent pas. Certains éléments de base font de la résistance, c’est-à-dire qu’ils ne vont pas se personnaliser ou mal se personnaliser. C’est pour cela que je vous conseille d’avoir tout de même des notions en CSS

Je vais vous montrer juste en dessous que le CSS (code qui sert à personnaliser les sites web) est un style de code très simple à comprendre et à écrire.

Notion de base au CSS

Voilà, on y est, n’ayez pas peur ! Une chose avant de faire du CSS, c’est que le code CSS est relié au code HTML par des sélecteurs CLASS et des ID.

Les sélecteurs CLASS et ID

Le sélecteur CLASS est un sélecteur qui peut être repris plusieurs fois, c’est-à-dire qu’on va le retrouver un peu partout sur le site internet. Il est souvent utilisé pour la structure globale du site internet.

Alors que le sélecteur ID est un sélecteur unique ! Ce sélecteur va personnaliser un seul élément de votre site web et seulement un seul. Toutefois nous pouvons mettre plusieurs ID dans la page mais ils devront tous être différents.

Voyons comment en HTML, on les appelle :

<div class=”titre-1”>Mon titre 1</div>
<div id=”titre-2”>Mon titre 2</div>

<div class=”titre-1”>Mon titre 1</div>
<div id=”titre-3”>Mon titre 3</div>

Vous remarquerez qu’il y a deux sélecteurs CLASS identiques et que j’ai deux ID également  mais obligatoirement différents. Il faut savoir que les sélecteurs CLASS et ID s’incorporent dans des balises HTML comme la balise DIV.

Maintenant, voyons comment on personnalise “Mon titre 1” et “Mon titre 2” en CSS :

.titre-1 {

}

#titre-2 {

}

Pour le sélecteur CLASS, en CSS on applique un . avant le nom du sélecteur. Pour le sélecteur ID, on applique un # avant le nom du sélecteur.

Exemple de CSS pour personnaliser son site web

Maintenant que vous savez relier votre sélecteur CSS à l’élément en HTML et que vous savez écrire du CSS, ajoutons-lui des attributs comme COLOR. L’attribut COLOR a pour but de modifier la couleur du texte.

Pour l’exemple, nous allons mettre le “titre-1” en couleur rouge et le “titre-2” en couleur bleue. Voici ce que cela donne :

.titre-1 {
color:red;
}

#titre-2 {
color:blue;
}

Attention, toujours mettre un ; (point virgule) après la fin de l’attribut. Voilà, vous savez faire du CSS, vous pouvez vous féliciter ! Maintenant vous n’avez plus qu’à jouer avec les attributs car il y en existe des centaines.

Attention au responsive quand vous personnalisez votre site web

Aujourd’hui la majorité des sites internet sont consultés par des smartphones, alors quand on veut personnaliser son site web, il faut bien vérifier que la personnalisation que vous faites soit lisible sur smartphone. C’est très important car en général la moitié du trafic si ce n’est plus d’un site internet se fait via mobile.

Personnaliser son site web sous WordPress

De nombreuses personnes décident de créer leur site internet sous WordPress car c’est un CMS gratuit. J’ai le plaisir de vous annoncer que WordPress possède un espace réservé à la personnalisation de votre site web. Vous avez la possibilité par exemple de changer le logo ou la couleur des textes très simplement. 

Dans cet espace, vous avez également un lieu pour écrire du CSS. Je sais, c’est merveilleux. Vous le trouverez dans le menu de gauche : Apparence > Personnaliser.

css wordpress personnaliser son site web

Nous arrivons à la fin de cet article, vous connaissez maintenant trois solutions pour personnaliser son site web. J’espère que ces solutions vous permettront de personnaliser comme vous le souhaitez votre site internet et de le mettre à votre image. Merci de m’avoir lu et n’hésitez pas à partager l’article.

Vous avez aimé cet article ?

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (1 vote(s), moyenne : 5,00 sur 5)
Loading...

Laisser un commentaire

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