Codes CSS et HTML pour éditer votre site WordPress

Sommaire

Les CMS comme WordPress vous permettent de faire presque tout très facilement sans avoir besoin de connaître le code web, mais il est parfois intéressant de pouvoir faire des choses très spécifiques avec votre modèle pour aller un peu plus loin en termes de personnalisation du thème et obtenir un résultat encore meilleur que celui que vous pourriez obtenir a priori. Je vous en parle dans ce post !

Si vous allez sur votre site web et que vous faites un clic droit dessus, puis que vous voyez le code source de la page, ce que vous verrez est le code HTML et CSS avec lequel votre site est construit. Ces codes sont automatiquement créés par votre CMS afin que votre site web soit visible sur Internet. Si vous travaillez avec un système de gestion de contenu, vous n’avez pas besoin de les mettre en œuvre manuellement, mais les connaître un peu peut faire de véritables merveilles.

Les modèles Premium ont généralement une grande section d’options pour modifier facilement presque tous les éléments de votre site Web, tels que les couleurs, les fonds, les styles de police, etc. Mais que faire s’il y a des éléments et des zones du modèle que vous ne pouvez pas modifier parce qu’ils ne sont pas inclus dans les options ?

Apprenez à modifier votre template et à faire tout ce que vous voulez sur votre site web

En combinant la bonne utilisation de votre modèle avec la connaissance des codes web de base, vous pouvez réaliser des pages totalement professionnelles sans aucune limitation. Et vous pourrez le faire de façon très rapide et facile.

Dans cet article, je ne vais pas vous apprendre à être un expert en code web, mais je vais essayer d’expliquer de manière amusante comment connaître les bases et ensuite, quand vous aurez appris le nécessaire, je vous donnerai une liste de trucs de code pour que vous puissiez faire des choses comme

  • Supprimer la date de publication de vos postes
  • Faire disparaître tout élément de votre page
  • Changer les couleurs et les tailles des polices, des boutons et des arrière-plans
  • Ajout de code à vos widgets
  • Modifier les marges ou les espaces entre les éléments
  • Personnaliser à 100% le comportement réactif de votre personnel par dispositif Ajout de bannières avec HTML

Qu’est-ce que le CSS et à quoi sert-il ?

Le CSS est un code qui fonctionne avec le HTML et qui sert à modifier tout ce qui concerne le style, c’est-à-dire les couleurs, les typographies, les tailles, etc.

Par exemple, grâce à une règle CSS, je peux redéfinir le style de toutes les balises h1 (titres 1 de mon web) pour qu’elles aient dorénavant une taille de 36 pixels, une couleur noire et une typographie Open Sans. La façon de le faire serait de placer le code suivant dans la feuille de style CSS :

h1 {
font-size : 36px ;
color : #000 ;
font-family : « Open Sans » ;
}

Avec CSS, vous pouvez également faire disparaître les éléments de votre modèle que vous voulez supprimer en entrant une simple ligne de code. Vous le verrez dans ce post un peu plus tard.

De plus, avec CSS, vous pouvez complètement personnaliser le comportement réactif de votre modèle, c’est-à-dire lui donner l’aspect que vous souhaitez sur chaque appareil.

Qu’est-ce que le HTML et à quoi sert-il ?

De façon générale, on peut dire que le HTML est un code qui sert à créer la structure de base d’un site Web, l’en-tête, le contenu, le pied de page, les barres latérales, etc. Il fonctionne grâce à des balises prédéfinies dont vous pouvez modifier les styles par le biais de CSS.

On peut donc dire que le code CSS sert à modifier et à personnaliser le HTML.

L’apprentissage du HTML et du CSS n’est pas difficile. Avec un peu de pratique et en utilisant la logique, vous serez en mesure de transformer un modèle de base en un site web professionnel, même si votre modèle ne comporte pas beaucoup d’options de personnalisation.

Portez une grande attention à l’explication initiale dans laquelle je vais vous apprendre à sélectionner les éléments de votre site web et ensuite à les modifier dans votre feuille de style.

Les bases du CSS

Qu’est-ce qu’un sélecteur et quels sont les types ?

Un sélecteur est le nom d’un certain élément dans votre code web. Connaissant le nom du sélecteur, vous pouvez modifier cet élément comme vous le souhaitez. Il existe deux types de sélecteurs : les identificateurs et les classes.

  • Un identifiant est le nom d’un élément spécifique qui n’est répété qu’une seule fois dans l’ensemble du site web. C’est un nom unique, et en appliquant une modification vous ne pourrez modifier que cet élément. Les identifiants sont définis dans la feuille de style CSS avec # (pad), et à l’intérieur du HTML ils sont écrits comme ceci : id= »nom de l’identifiant ».
  • Une classe est le nom d’une règle qui est répétée à plusieurs endroits sur votre site web. Par exemple, vous pouvez avoir une classe appelée .black que vous pouvez appliquer à la fois au texte et aux boutons pour leur donner cette couleur. Autrement dit, vous définissez un style générique que vous pouvez appliquer à n’importe quel élément autant de fois que vous le souhaitez. Les classes sont définies dans le CSS avec un . (point) et dans le code HTML, ils sont appliqués comme ceci : class= »nom de la classe ».

Le nom des sélecteurs est déterminé par le développeur du modèle, c’est-à-dire que ce sont des noms arbitraires choisis par le créateur du thème, bien qu’ils aient souvent une certaine logique. Par exemple, les classes pour les boutons sont généralement appelées .button, celle identifiée dans l’en-tête du site web est généralement appelée #header.

Qu’est-ce qu’une propriété ?

Une propriété est la ou les modifications spécifiques que vous appliquez dans la feuille de style CSS à un élément de votre site web à l’aide d’un sélecteur. Par exemple, au sélecteur appelé #button (qui donne du style à un type de bouton concret à l’intérieur de mon site), je peux appliquer les propriétés suivantes de couleur, de largeur, de remplissage et de bordure :

  • background-color : #ccc ; (couleur de fond grise spécifiée en code hexadécimal)
  • color : #fff ; (couleur du texte à l’intérieur de la case blanche)
  • width: 100px ; (largeur de 100 pixels)
  • padding: 20px ; (rembourrage ou marge intérieure de 20 pixels par côté)
  • border: 1px solide #000 ; (bordure noire continue d’une épaisseur de 1 pixel)
  • border-radius: 5px ; (arrondi à partir d’un angle de 5 pixels sur tous les coins de la boîte)

Comment appliquer des propriétés à une classe ou à un identifiant ?

En suivant l’exemple précédent, le code serait exprimé de cette manière dans la feuille de style CSS :

button {

 background-color : #ccc ;
color: #fff ;
width : 100px ;
padding: 20px ;
border : 1px solide #000 ;
border-radius : 5px ;
}

C’est-à-dire que nous assignons une série de propriétés de couleur, largeur, remplissage, bordure à tous les boutons du site qui ont assigné l’id #button.

Le sélecteur ou le nom est précédé d’un point (.) ou d’un pavé (#) selon la classe ou l’identifiant et ensuite entre {} les propriétés et leurs valeurs sont placées.

Plus tard, je vous donnerai une liste des propriétés les plus utilisées sur le web afin que vous puissiez les appliquer aux vôtres.

Un peu de HTML

Vous pouvez également appliquer des propriétés directement aux balises HTML. Une balise HTML est un élément spécifique du web défini entre < et >, comme ceci : <tag> . Les balises HTML représentent des parties spécifiques de la structure et du contenu du site.

Par exemple, il y a une balise <html> qui indique que le contenu du web est en HTML. Il y a une balise <head> où vous mettez un code spécifique comme le code de Google Analytics et bien d’autres choses. La balise où se trouve le contenu visuel du web (celui que l’utilisateur voit) est <body> . La balise pour donner un format de paragraphe à un texte est <p> , et ainsi de suite avec tout le contenu du web. Il y a beaucoup d’autres balises que j’énumérerai plus tard.

Les tag ont généralement une ouverture et une fermeture. Par exemple, la balise body s’ouvre comme ça <body> et se ferme comme ça </body> . Qu’est-ce que cela signifie ? Que tout le contenu entre <body> et </body> est à l’intérieur et est affecté par la qualité de cette balise. Dans ce cas précis, tout ce qui se trouve entre <body> et </body> est ce que vous verrez dans la partie visuelle du web.

Autre exemple, dans le cas de la balise paragraphe, les textes qui se trouvent entre les balises <p> et </p> adoptent les styles définis dans la feuille de style pour cette balise (et que vous pouvez modifier quand vous le souhaitez).

Et un autre, un texte contenu entre les balises <h1> et </h1> adopte le style Header ou Title 1, c’est-à-dire plus large et aussi plus pertinent pour Google.

Comment appliquer des propriétés à une balise HTML ?

Dans la feuille de style du site, vous pouvez appliquer des propriétés pour des balises spécifiques, de sorte que vous puissiez les modifier globalement dans tout le site.

Par exemple, si vous souhaitez que tous les paragraphes de votre site soient écrits en typographie Open Sans, corps 14px, couleur grise, espacement 18px et toujours 20 pixels entre les paragraphes, dans la feuille de style, vous écrivez ce qui suit

p {
font-family : "Open Sans" ;
font-size : 14px ;
color : #ccc ;
line-height : 18px ;
margin-bottom : 20px ;
}

Plus tard, je vous montrerai une liste des balises les plus courantes que l’on trouve habituellement sur les sites web.

Comment obtenir le nom ou le sélecteur d’un élément de votre site web

Inspecteur d’élément

Pour connaître le nom d’un élément de votre site Web et le modifier dans la feuille de style, vous pouvez utiliser l’inspecteur d’éléments. Presque tous les navigateurs actuels offrent un outil similaire. Je vous recommande tout particulièrement l’inspecteur Google Chrome pour son excellente convivialité et ses fonctionnalités.

Comment utiliser l’inspecteur

Rendez-vous sur votre site web et placez le pointeur de la souris sur un élément spécifique. Par exemple, prenons le nom ou le sélecteur d’un bouton réel sur le site. Ensuite, étant sur le bouton, cliquez sur le bouton droit et cliquez sur Inspecter. Vous verrez qu’une fenêtre indiquant le code apparaîtra en bas (ou sur le côté) de la page. Il s’agit du code HTML dont est composée votre page et, plus précisément, lorsque vous cliquez sur le bouton, il vous montre la portion de code dans laquelle le bouton est implémenté.

Dans le code, il est écrit class= »btn btn-primary btn-lg btn-icon-right ». Cela signifie que ce bouton comporte plusieurs classes (séparées par des espaces et sans virgule). Un élément peut se voir attribuer plusieurs classes pour modifier différents aspects. Cela signifie que dans la feuille de style il y a plusieurs classes définies par les sélecteurs .btn .btn-primary .btn-lg et .btn-icon-right qui ont une série de propriétés appliquées à chacun séparément et qui influencent si le bouton est rouge, 394 pixels de large et avec du texte blanc, etc.

De cette façon, si vous voulez modifier les propriétés ou les styles de ce bouton, il suffit d’aller dans votre feuille de style et de chercher les expressions .btn .btn-primary .btn-lg et .btn-icon-right, et à l’intérieur des touches {} introduire ou modifier ce que vous voulez pour que ce bouton et tous ceux qui ont appliqué ces classes adoptent les nouveaux styles que vous voulez leur donner.

Comment et où ajouter du code CSS pour définir et modifier les styles de votre site web

Utilisation de la feuille de style

Tous les sites web ont une feuille de style où sont définies les propriétés de tous les éléments du site. Habituellement, les propriétés sont appliquées aux balises, classes et identifiants HTML. Les feuilles de style sont des fichiers avec une extension .css que vous avez téléchargés sur votre serveur avec le reste des fichiers de votre site web.

Il existe des feuilles de style générales où sont définis presque tous les styles globaux du site web, qui sont généralement appelés styles.css ou stylesheet.css. Il existe également des feuilles de style secondaires pour des choses spécifiques. Dans l’idéal, vous n’en avez pas beaucoup, mais tout est défini en quelques-uns pour améliorer le temps de chargement du site et faciliter leur modification ultérieure.

Comment modifier la feuille de style ?

Directement dans la feuille de style originale (mode moins recommandé)

La première chose à faire est d’accéder au fichier de feuille de style .css via votre FTP ou le gestionnaire de fichiers de votre hébergement. Une fois que vous l’avez localisé (dans WordPress, il se trouve généralement dans le dossier du thème principal dans un chemin similaire à celui-ci : wp-content/themes/nom du thème/css/styles.css), vous pouvez éditer la feuille directement en utilisant des éditeurs comme Dreamweaver, Coda, etc.

Les hôtes vous permettent généralement de modifier directement les feuilles de style. Faites attention en faisant cela, je vous recommande de faire une copie préalable. Si vous modifiez quelque chose et que vous ne savez pas ce que vous avez touché, vous pouvez gâcher les styles du site. C’est pourquoi j’ai marqué ce mode comme étant moins recommandable, car il nécessite d’être un peu plus expert et peut aussi provoquer des accidents.

Vous pouvez également accéder à vos fichiers de modèles à partir de votre bureau WordPress, sous Apparence > Éditeur. Comme dans le cas précédent, il n’est pas recommandé de modifier à partir d’ici car vous modifieriez directement les fichiers et cela pourrait générer des problèmes au cas où vous supprimeriez quelque chose par erreur.

Avec votre template ou avec un plugin (le plus recommandé)

Ce mode est plus conseillé car ce que vous modifiez se fait de l’extérieur, sans toucher à la feuille de style originale, donc en cas d’erreur vous pouvez simplement effacer le code que vous avez écrit ou désactiver le plugin.

Il existe des modèles premium qui comprennent une zone généralement appelée CSS personnalisé ou Code personnalisé où vous pouvez ajouter vos propres styles CSS à la feuille de modèle originale. Cela se trouve généralement dans les options de thème de votre modèle, dans une section générale ou dans une section CSS.

Si votre template ne comporte pas de zone où vous pouvez ajouter du code CSS, vous pouvez facilement le faire en utilisant un plugin comme Simple Custom CSS. Lorsque vous l’installez et l’activez, dans Appearance vous aurez un onglet appelé CSS personnalisé ou Custom CSS.

A quoi ressemble une feuille de style CSS

Une feuille de style CSS possède de nombreuses balises et sélecteurs et pour chacun d’eux, elle définit un ensemble de règles par des propriétés regroupées entre {}.

Pour récapituler ce qui a été dit précédemment :

  • A l’intérieur de la feuille de style, les balises HTML que vous voulez modifier doivent être écrites sans le <>. Par exemple, pour toutes les balises (paragraphe) du site, il suffit d’écrire la lettre p puis ses propriétés spécifiques entre {} :
p {
}
  • Les identificateurs ou éléments uniques doivent être écrits avec #. Par exemple, vous écrivez #bouton et ensuite les propriétés spécifiques que vous voulez donner à l’identifiant du bouton entre {} :
button {
}

Les espaces entre les définitions CSS n’ont pas d’importance, c’est-à-dire qu’il importe peu que vous mettiez un espace ou que vous appuyiez plusieurs fois sur Entrée. L’important est que vous respectiez TOUJOURS la structure suivante :

étiquette ou le sélecteur {
propriété1 : attribut ;
property2 : attribut ;
propriété3 : attribut ;
propriété4 : attribut ;
propriété5 : attribut ;
}

Que se passe-t-il si vous définissez deux règles égales pour le même élément dans différentes parties de la feuille de style

Si vous avez défini des propriétés pour l’identifiant #button deux fois à deux endroits différents dans la feuille de style, vous pouvez simplement aller aux propriétés que vous voulez être prééminentes sur les autres (appliquer oui ou oui sur les autres) et avant le point-virgule qui ferme chacune d’elles, mettre !important :

p {
font-size : 14px ! important ;
}

Si ailleurs dans le modèle, dans les options du thème ou dans la feuille de style il y avait déjà une définition précédente des styles pour le p-tag, avec ! important nous écrasons cette règle et vous obligeons à toujours afficher tous les paragraphes à la taille de 14 pixels à partir de maintenant.
Twitter Plan Art GalleryLa plupart des codes CSS utilisés

Ensuite, je vais vous montrer les codes CSS les plus utilisés dans les sites web et que vous pouvez appliquer dans le vôtre afin de pouvoir le personnaliser au maximum. Je les ai classés selon leur utilisation pour modifier des éléments de texte, des éléments graphiques (boîtes, fonds, boutons, etc.) et d’autres types d’éléments.

Pour les textes

Les propriétés les plus courantes et leurs attributs pour modifier l’apparence de vos textes web sont les suivants :

font-family: Définir une famille ou une police de caractères.
font-style: style normal, italique ou oblique. Attributs [ normal | italique | oblique ]
font-variant: Convertit les minuscules en majuscules mais en plus petit format. Attributs [ normal | petites capitales ]
font-weight: Épaisseur de la typographie spécifiée dans des mesures allant de 100 à 900.
font-size: taille de la police ou corps spécifié en pixels (px)
text-indent: quantité de déplacement latéral de la première ligne de texte, exprimée en px.
text-align : alignement du texte. Attributs [ gauche | droite | centre | justification ]
text-decoration: s'applique en soulignant, barrant, clignotant. Attributs [ none | [ underline || overline || line-through || clignotant ] ]
letter-spacing: espacement entre les caractères spécifiés en px
text-transform : pour transformer les textes en majuscules ou en minuscules [ majuscules | majuscules | minuscules | aucune ].
line-height: espacement entre les lignes de texte spécifié en px.
vertical-align : alignement vertical du texte. Attributs [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <pourcentage> | <length> ]

Pour les éléments graphiques du web

width : largeur d'un élément ou d'une image. Il peut être défini en pixels (px), unités em (em) et pourcentages (%).
Par exemple : #content {width:960px;}
height: hauteur d'un élément ou d'une image. Même chose que ci-dessus.
Ex : #header {hauteur : 250px;}
background-color: couleur de fond d'un élément. Il est exprimé en valeur hexadécimale avec # et six caractères. Ex : #bouton {couleur de fond : #1CBACC;}
background-image: image de fond d'un élément.
Ex : #content {background-image : url("https://www.aulacm.com/fondo.jpg);}
background-repeat: répétition ou non de l'image à l'intérieur du fond (idéal pour créer des motifs ou des fonds avec des textures). Il peut être répété en x (horizontalement) ou en y (verticalement).
Ex : #content {background-repeat : repeat-x;}
background-position : position de l'image dans l'arrière-plan. Il peut être défini au centre, à gauche ou à droite. Egalement avec des pixels et des pourcentages.
Ex : #content {position de fond : centre;}
border: bordure d'un élément ou d'une image. Il possède 3 paramètres : le type de bordure (lisse, pointillée, rayée, etc.), l'épaisseur (exprimée en pixels) et la couleur (exprimée en valeur hexadécimale). Il peut aussi être défini sans bordure (none).
Ex : #button {border : solid 1px #000000}
display: mode dans lequel un élément ou une image est affiché ou n'est jamais affiché. Il a plusieurs valeurs, les plus courantes sont : afficher les éléments en bloc,
z-index : position d'un élément ou d'une image dans l'axe des z (pour mettre des éléments couvrant d'autres éléments)

Pour ajouter des espaces ou des marges

margin: marge d'un élément vers l'extérieur exprimée en px. Elle pousse généralement d'autres éléments à s'en rapprocher
padding: remplissage ou espace intérieur du bord d'un élément vers l'intérieur. Le rembourrage élargi fait généralement ressortir les bords et augmente donc la taille de l'élément

Dans les deux cas, vous pouvez exprimer la valeur en pixels mais aussi en pourcentages. Les pourcentages sont idéaux pour définir un espacement proportionnel, de sorte qu’il n’y ait pas de distance fixe entre les éléments, mais que, selon la taille de l’écran ou du dispositif, les éléments soient placés proportionnellement.

C’est la clé pour définir des tailles d’éléments qui sont réactives (qui s’adaptent automatiquement à tous les appareils). Ainsi, une boîte d’une largeur de 100 % occupera toujours 100 % de l’écran, qu’il s’agisse d’un grand écran ou d’un smartphone.

En outre, la marge et le rembourrage peuvent être définis pour une direction particulière vers le haut, la droite, le bas ou la gauche :

margin-top : marge en hausse
margin-right : marge de droite
margin-bottom : marge vers le bas
margin-left: marge de gauche
padding-top : remplissage du haut vers l'intérieur
padding-right : remplissage de la droite vers l'intérieur
padding-bottom : remplissage du fond vers l'intérieur
padding-left : remplissage de gauche à l'intérieur

Note : Vous pouvez spécifier les marges et les remplissages dans les quatre directions sans avoir à les déclarer séparément. Dans la propriété générale, il suffit d’écrire les quatre directions toutes en ligne et dans le sens des aiguilles d’une montre. Par exemple, si vous voulez mettre un élément #button avec une marge de 20 pixels en haut, 0 à droite, 20 en bas et 5 à gauche, vous pouvez écrire ce qui suit :

button {
margin : 20px 0 20px 5px ;

}

CSS pour améliorer votre site web

De tous les codes ci-dessus, je vais mettre en évidence ceux que vous pouvez trouver les plus utiles et vous montrer des exemples concrets de la façon de les mettre en œuvre sur votre site :

Comment faire disparaître un élément de votre site web

L’affichage.

Grâce à la propriété d’affichage, vous pouvez cacher n’importe quel élément de votre site web. Pour la mettre en œuvre, il faut d’abord obtenir le nom du sélecteur de l’élément en question. Par exemple, si vous voulez supprimer la date des articles du blog, la première chose à faire est d’aller à l’un de vos articles, de vous mettre sur la date, de faire un clic droit et d’inspecter.

Dans la zone inférieure, l’inspecteur des éléments est affiché et la partie du code utilisée pour afficher la date est marquée. A l’intérieur de cette ligne, il y a une class= »date ». Cela signifie que la « date » est la classe qui est appliquée à la date pour lui donner les styles de police, la taille, la couleur, etc.

Mais dans ce cas particulier, nous ne voulons pas modifier ces styles, mais plutôt supprimer directement l’affichage de la date. Pour ce faire, allez dans la zone CSS personnalisée du modèle (ou le plugin CSS personnalisé simple) et écrivez ce qui suit :

.date {
affichage : aucun ;
}

La classe « date » a un point au début car c’est ainsi que l’on écrit les noms des classes dans les feuilles CSS. La commande « display : none ; » signifie « arrêter d’afficher un élément ». Par conséquent, dans ce cas particulier, nous ordonnons ce qui suit : tous les éléments auxquels la classe « date » a été attribuée cesseront d’être affichés sur le web.

Comment modifier la taille et la couleur d’une police de caractères particulière sur votre site web

Taille de la police, couleur. Et si au lieu de cacher la date, on voulait juste changer sa taille de police et sa couleur ?

Dans ce cas, allez dans le CSS personnalisé du modèle (ou plugin CSS personnalisé simple) et tapez ce qui suit :

 .date {
 font-size: 36px !important;
 color: #F00 !important; 
} 

La date est désormais indiquée en caractères plus grands et en rouge.

Rappelez-vous, pourquoi mettre !important ?

De sorte que les nouvelles propriétés définies « step » sur les propriétés que le modèle apporte par défaut, puisque nous touchons des propriétés qui sont déjà prédéfinies dans le modèle avec des styles concrets.

Quel est ce #F00 que nous avons mis dans la propriété de couleur ?

C’est une couleur (dans ce cas le rouge) que nous avons définie avec une valeur hexadécimale. C’est l’une des façons les plus courantes d’introduire une couleur exacte dans un environnement web. Avec l’application Paletton vous pouvez faire des tests et obtenir des valeurs de couleurs hexadécimales à mettre dans votre web.

Comment ajouter du code HTML à votre site web ?

Dans une entrée ou une page

Vous pouvez ajouter du code HTML dans vos messages et vos pages pour obtenir un résultat beaucoup plus personnalisé. Normalement, vous éditez vos entrées dans l’onglet Visuel, mais si vous voulez les éditer avec HTML, cliquez sur l’onglet Texte ou HTML.

Si vous remarquez, dans cette capture d’écran du même post j’ai chargé l’onglet HTML et vous pouvez voir le texte en code HTML pur. Le mot WordPress de la première ligne se situe entre les balises et , ce qui signifie que ce mot prend un style gras dans la partie visuelle.

Dans un widget texte

Vous pouvez ajouter du code HTML pur à vos widgets en allant dans Apparence > Widgets et en faisant glisser un widget de type Texte. A l’intérieur de ce widget, vous pouvez écrire n’importe quel code HTML et WordPress l’interprétera correctement pour afficher ce que vous voulez.

Par exemple, si vous souhaitez ajouter une image de bannière liée à une URL spécifique sur votre site web ou externe, et qu’elle est affichée dans une zone de widget de votre site, à l’intérieur de la zone de texte que vous glissez vers la zone de widget correspondante, vous écrivez ce qui suit :

Codes HTML pour améliorer votre site

Ensuite, je mets les balises HTML les plus courantes dans un site web et vous pouvez les insérer où vous voulez ou modifier celles qui existent en utilisant le code CSS :

<p></p> Paragraphes
<a href=""></a> Liens
<b></b> Gras
<i></i> Italique
<strong></strong> plus épais
<h1></h1> En-tête ou titre 1
<h2></h2> En-tête ou titre 2
<h3></h3> En-tête ou titre 3
<h4></h4> En-tête ou titre 4
<h5></h5> En-tête ou titre 5
<h6></h6> En-tête ou titre 6
<li></li> Élément de liste
<span></span> Sélection de texte avec un certain style
<u></u> Texte surligné
<em></em> Texte souligné
<small></small> Petit texte
<br /> Saut de ligne (une seule balise, pas de verrouillage)
<img src=""> Pour insérer une image. Avec le code <img src="URL de l'image"> vous pouvez mettre dans n'importe quelle zone de widget une bannière ou une image que vous voulez. Je vous conseille de télécharger l'image dans votre propre médiathèque avant d'obtenir l'URL de l'image et de là obtenir l'URL que vous collerez ensuite dans le code.
<form></form> Formulaire.
<table></table> Table
<iframe></iframe> Incorporation d'éléments d'autres sites web

Générer facilement du code HTML

Que faire si vous ne connaissez absolument rien au HTML mais que vous souhaitez insérer du code dans votre site web et le faire facilement ? Avec l’outil Quackit, vous pouvez créer des styles de texte et des structures de mise en page avec des tableaux et générer automatiquement le code pour l’insérer dans votre site web.
Éditeur HTML

Comment modifier les styles CSS directement sur le web

Et si je vous disais que toutes les modifications CSS que vous pouvez faire directement sur le web de manière visuelle et que vous apportez ensuite ce code à votre feuille de style ? Vous pouvez le faire très facilement avec une extension Chrome appelée StyleBot. Cet excellent outil vous permet de prévisualiser les modifications que vous apportez aux styles web et de copier tout le code résultant sur votre feuille de style.

Pour ce faire, cliquez ici et ajoutez-le à votre navigateur Chrome. Ensuite, l’extension est placée dans la partie supérieure droite de votre navigateur (dans un bouton où il est indiqué CSS). Maintenant, allez sur votre site Web et cliquez sur l’icône CSS et ouvrez StyleBot. Ici, vous pouvez modifier n’importe quel aspect du site : couleurs, polices et tailles, bordures, etc.

Faites une modification (dans l’exemple j’ai changé la couleur de fond de notre web en rouge) et ensuite cliquez sur Edit CSS pour obtenir le code. Vous collez ce code dans votre feuille de style et vous avez terminé ! Vous avez fait la modification, c’est aussi simple que cela.

Rappelez-vous que vous pouvez coller le code de votre feuille de style dans un fichier généralement appelé styles.css ou stylesheet.css, ou utiliser le plugin CSS simple et personnalisé si vous préférez le faire de manière plus simple et sans risquer de toucher directement les fichiers du web.

Important : Même si vous faites des modifications en utilisant StyleBot et que vous voyez votre site web avec les styles déjà modifiés, tant que vous ne les collez pas dans votre feuille de style, les modifications ne seront pas vraiment faites pour que le reste des utilisateurs puissent les voir.
Présence sur les réseaux sociauxComment rendre votre site web totalement réactif

Grâce à un code CSS spécial appelé « Media Queries », vous pouvez contrôler de manière absolue la manière dont votre site web est affiché sur chaque appareil.

En utilisant les requêtes médias, vous pouvez indiquer des styles CSS spécifiques pour votre site web en fonction de la largeur de l’écran. Les requêtes de médias sont placées directement dans votre feuille de style CSS et déclarées comme suit :

 /* Smartphones (horizontal) ----------- */ 
@media only screen and (min-width : 321px) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
 /* Smartphones (vertical) ----------- */ 
@media only screen and (max-width : 320px) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
 /* iPads (horizontal) ----------- */ 
@media only screen and (min-width : 768px) and 
(max-width : 1024px) and (orientation : landscape) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
 /* iPads (vertical) ----------- */ 
@media only screen and (min-width : 768px) and 
(max-width : 1024px) and (orientation : portrait) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
iPad 3

 @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and 
(-webkit-min-device-pixel-ratio : 2) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
 @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 

/* ICI VOUS ÉCRIVEZ LES STYLES CSS /
}
/ Ordinateurs de bureau et portables ------------- /
@media only screen and (min-width : 1224px) {
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
/* Grands écrans ------------- /
@media only screen and (min-width : 1824px) {
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */
}
/* iPhone 4 ------------- /
 @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
 @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
/* iPhone 5 ------------- /
 @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
media only screen et (min-width : 320px) et (max-height : 568px) et (orientation : portrait) et (-webkit-device-pixel-ratio : 2){
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */
}
/* iPhone 6 ------------- /
 @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
media only screen and (min-width : 375px) and (max-height : 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */
}
/* iPhone 6+ ------------- /
 @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
media only screen and (min-width : 414px) and (max-height : 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){
 /* ICI VOUS ÉCRIVEZ LES STYLES CSS */
 }
/* Samsung Galaxy S3 ------------- /
 @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
media only screen and (min-width : 320px) and (max-height : 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */
}
/* Samsung Galaxy S4 ------------- /
 @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
media only screen and (min-width : 320px) and (max-height : 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 3){
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */
}
/* Samsung Galaxy S5 ------------- /
 @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/ ICI VOUS ÉCRIVEZ LES STYLES CSS */

}
écran multimédia uniquement et (largeur min. : 360px) et (hauteur max. : 640px) et (orientation : portrait) et (-webkit-device-pixel-ratio : 3){
/* ICI VOUS ÉCRIVEZ LES STYLES CSS */
}

Je vous invite à visiter notre guide réactif afin que vous puissiez lire plus de détails sur la façon d’avoir un site Web qui s’adapte à différents appareils.

Tout cela n’est-il bon que pour WordPress ?

En fait, si vous connaissez HTML et CSS vous pouvez modifier n’importe quel CMS ou système de gestion de contenu, et bien sûr n’importe quel site web fait avec du code pur. Il suffit de savoir comment le faire dans chaque cas, soit en accédant aux fichiers de modèles, soit en utilisant des plugins ou des extensions. Après tout, tous les sites Web, quel que soit le gestionnaire de contenu qu’ils utilisent, affichent leur contenu en HTML et en CSS.