Bonjour à tous les amis de YCLAS ! Cette semaine, nous partageons quelques astuces et bonnes idées pour embellir votre site grâce au code CSS.
Sachez que c’est l’apparence de votre site qui déterminera si les utilisateurs et les clients restent, ou s’ils partent à la recherche d’un site plus attrayant.
Commencez par activer l’utilisation du CSS dans le panneau de votre site ; cliquez ici pour découvrir comment activer et ajouter du CSS personnalisé sur YCLAS.
C’est parti !
Arrière-plan
Aujourd’hui, les meilleurs sites utilisent des arrière-plans en dégradé : un changement de couleur simple et doux. Si vous choisissez les bonnes couleurs, votre site prendra un style moderne. Voici 3 arrière-plans modernes différents :
Dégradé n° 1 (couleurs du Pacifique)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Dégradé n° 2 (couleurs vives)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Dégradé n° 3 (couleurs douces)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Polices
La police de votre site joue un rôle fondamental. Nous vous recommandons d’utiliser des polices sans empattement (Sans-Serif), comme :
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Ce sont des polices agréables à lire.
Bordures des éléments
Autre astuce : utilisez des bords arrondis pour les éléments. Votre site paraîtra ainsi simple et moderne. Pour cela, utilisez ce code :
p.round {
border: 2px solid black;
border-radius: 8px;
}
Vous pouvez ajuster la couleur (solid black) et le rayon (8px) de la bordure.
Barre de navigation
La barre de navigation est l’un des éléments les plus importants d’un site. Une barre de navigation bien conçue aidera les utilisateurs à se déplacer facilement sur votre site. Voici une barre de navigation fixe avec lien actif/courant : elle se déplace et reste collée en haut de la page selon la position du défilement :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Vous pouvez modifier les couleurs (arrière-plan, texte et lien actif/courant), et redimensionner (padding) la barre de navigation.
Images responsive
Les images ! Aujourd’hui, elles sont indispensables sur tous les sites, et nous avons l’habitude d’en voir partout. Mais il ne suffit pas de placer une image sur votre site : vous devez la rendre responsive pour qu’elle s’affiche au mieux sur tous les appareils. Pour cela, utilisez ce code pour toutes les images que vous voulez rendre responsive :
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
Le X représente l’URL de l’image ; dans IMG Width et IMG Height, indiquez la taille d’origine de l’image.
Mise en page du site
Il s’agit de la disposition des principaux éléments de votre site, par exemple l’en-tête. L’en-tête est le premier élément que voit tout utilisateur en arrivant sur le site : il doit donc être simple et facile à comprendre. Voici un code CSS pour un en-tête avec image et texte :
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
Le X représente l’URL de l’image ; avec Padding , vous réglez la taille de l’image d’en-tête, et Header Text est l’endroit où vous écrivez ce que vous voulez afficher sur l’image d’en-tête.
Autre élément principal de votre site : le pied de page, placé en bas de la page, et aussi important que l’en-tête. Vous pouvez utiliser ce code pour un pied de page réussi :
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Vous pouvez modifier la couleur et la taille (padding) du pied de page.
Essayez ces astuces et dites-nous si elles fonctionnent pour vous !
Remarque : l’utilisation du code CSS demande un peu de compétences et d’expérience. Si vous n’avez jamais utilisé le CSS, nous vous recommandons de suivre des tutoriels CSS et des guides CSS pour obtenir le résultat recherché. Si vous ne souhaitez pas utiliser de CSS, vous pouvez utiliser nos thèmes : nous proposons de nombreux modèles de sites personnalisables. Cliquez ici pour les découvrir.
Cordialement,
L’équipe YCLAS.
