Codes CSS et HTML pour personnaliser votre site web ou votre blog WordPress

Avez-vous déjà voulu modifier un élément de votre site web et ne saviez pas comment le faire ?

De nos jours, il existe des constructeurs qui nous facilitent la création de contenu et, pour beaucoup d’entre nous, ils facilitent notre travail et notre vie, car ils nous font gagner du temps.

Mais si vous apprenez vous-même la langue des sites web, savez-vous que rien ne vous résistera au moment de créer votre page ?

Les dernières tendances en matière de conception de sites web sont de plus en plus visuelles et difficiles à coder, mais il n’y a jamais de mal à apprendre les langages au cas où un élément nous résiste avec les constructeurs visuels.

Dans cet article très complet, vous apprendrez tout ce que vous devez savoir sur les CSS, les couleurs CSS et le HTML pour WordPress. Vous trouverez également des conseils très utiles pour WordPress qui vous aideront à personnaliser et à rendre unique le design de votre site web ou de votre blog.

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

Le code HTML est un langage de balisage utilisé pour modéliser nos pages web.

C’est comme un document sur lequel vous pouvez mettre des balises et qui organise et gère le contenu.

Une page web à son niveau n’est rien d’autre qu’un document en texte clair, qui peut être envoyé d’un ordinateur à l’autre grâce au protocole WWW.

Donc, si c’est un document texte seulement, pourquoi les pages Web ont-elles cette conception avec leurs tableaux, listes, images, etc.

Cela est dû au langage HTML avec lequel nous pouvons modifier certaines parties de ce document.

Un exemple de ceci serait que, lorsque nous écrivons le texte <b>hello</b>, nous voulons vraiment que ce soit hello en gras.

Ce travail de « substitution » est effectué par le navigateur, qui sait remplacer tout code grâce à un standard appelé HTML.

Les codes web HTML ont évolué au fil des ans vers le HTML5, qui est beaucoup plus polyvalent et propre que les versions précédentes, tout en permettant une plus grande adaptation aux différentes tailles d’écran, résolutions, etc.

Le HTML pour l’insertion d’un titre h3 serait :

<h3> Je suis un titre </h3>

Mais ce code pourrait être personnalisé de la manière suivante, en ajoutant une couleur bleue :

<h3 style= »color:#569FE8″> Je suis un titre </h3>

Toutefois, si nous voulons personnaliser chaque titre, nous devons leur attribuer la même étiquette à tous, de sorte que nous finirions par répéter la même chose des millions de fois, à moins de vouloir que chaque étiquette ait un style différent.

Vous pourriez également être intéressé :

• Qu’est-ce qu’un blog et à quoi sert-il ?

Structure du code HTML

La structure de base de cette langue par laquelle nos pages sont composées commence par un en-tête, qui est l’en-tête de la page, où se trouvent les informations plus techniques dont notre navigateur aura besoin.

Cette section sera suivie d’un corps, où nous ajouterons le contenu de toute la page (images, textes, formulaires, etc.)

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

Une fois que le code HTML est compris, une autre question se pose : qu’est-ce que le code CSS ?

Le code CSS est un langage qui se présente pour organiser et faciliter la tâche du code HTML.

Le CSS définira la présentation ou l’apparence du document texte HTML.

Ce langage a évolué jusqu’à arriver à la CSS3, qui permet d’ajouter à notre contenu des transitions et des animations très originales aux éléments de notre page web.

Structure du code CSS

La structure CSS sera composée du sélecteur ou de l’élément HTML que nous voulons personnaliser, suivi de la propriété et de la valeur entre crochets.

Pour vous donner un exemple, choisissons l’élément HTML du titre h3, auquel nous ajouterons une couleur blanche. La structure sera donc la suivante :

Comme je l’ai déjà dit, le HTML pour insérer un titre h3 serait :

<h3> Je suis un titre </h3>

Maintenant, nous ajouterions un CSS pour le personnaliser, avec la structure que je viens d’expliquer afin que le même titre soit répété dans tout le site web avec la même apparence.

h3 {
color: #569FE8;
font-size: 25px;
font-weight: bold;
}

Ce qui va se passer maintenant, c’est que tous les titres de notre page avec une balise HTML h3 title, auront la même couleur bleue, avec la même taille de police et le même style.

CONSEIL : Lorsque nous disposons d’une très longue feuille de style CSS, nous pouvons nous perdre. Ajoutez des commentaires entre /* et */ pour préciser avec du texte ce que nous faisons dans chaque ligne de code.

Voyons un exemple de ce conseil.

h3 {
color:#569FE8 ; /*Le titre h3 sera bleu*/
}

Comme je l’ai dit, j’ai inclus une description selon laquelle nous avons ajouté une couleur, sans affecter le code h3.

Quelle est la différence entre CSS et HTML ?

Il n’est pas facile de savoir ce que HTML et CSS signifient si vous n’avez utilisé aucun des deux, c’est pourquoi je vais vous montrer la différence entre eux.

Lorsque vous procédez à la création de votre page web, vous utilisez un langage HTML pour définir le contenu et attribuer le type d’élément qui sera présent dans chaque section de la page.

C’est alors que, une fois cette structure d’éléments créée, le CSS agit pour définir l’aspect que la page web va avoir.

Ainsi, le HTML donne la structure ou la position des éléments et le CSS applique les styles.

Beaucoup de gens confondent ces langues, et il n’est parfois pas facile de voir la différence entre elles si vous ne comprenez pas bien le sujet.

C’est pourquoi je vais l’expliquer à l’aide d’un exemple.

En HTML, vous ajoutez à votre conception un titre avec une balise de titre de la couleur.

Mais maintenant, si nous ajoutons 20 titres exactement identiques, en changeant le texte, nous aurions la même balise pour les 20 titres, ce qui laisserait un document assez long.

<h3 style= »color:#569FE8″> Je suis le premier titre </h3>
<h3 style= »color:#569FE8″> Je suis le deuxième titre </h3>
<h3 style= »color:#569FE8″> Je suis le troisième titre </h3>

Le CSS vous permettra de ne pas avoir de code en double, et pour un même titre h3 d’avoir une seule structure, et non la même répétée 20 fois.

Moins le code est dupliqué, plus il sera efficace et propre.

Elle serait donc résumée dans le CSS suivant :

h3 {
couleur : #569FE8 ;
}

Avec ce code, tous les titres portant l’étiquette <h3> auront cette même couleur.

Comme je viens de vous l’apprendre, le HTML définit le contenu et le CSS permet de l’organiser, de le structurer et de le définir.

Caractéristiques et propriétés de base de chaque élément

Avant d’aborder les éléments de base de la structure d’un design web, je vais vous montrer comment les propriétés de base des bordures, des rembourrages et des marges seraient composées.

La marge est la chose la plus éloignée du contenu, c’est-à-dire l’espace qui l’entoure. Cependant, le padding est l’espace entre le contenu et la bordure.

Elles seront composées du haut, du bas et des côtés (droite et gauche).

Modification des éléments de la structure de votre site web avec CSS et HTML

Pour vous aider à comprendre un peu mieux le HTML et le CSS, je vais vous expliquer certains de leurs éléments et vous donner des exemples afin que vous puissiez les mettre en pratique lors de la création de votre site web.

Padding et margin en CSS et HTML

La propriété de padding définit la largeur de la zone dans laquelle l’article est inclus.

Pour h3 dans l’exemple, nous pouvons lui ajouter une largeur en haut, à gauche, à droite et en bas comme suit :

h3 {
padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;
}

On peut maintenant résumer et regrouper tout cela comme suit :

h3 {
padding : 100px 40px 10px 70px ;
}

Comme je l’ai dit, la marge sera l’espace qui l’entoure, et elle sera utilisée de la même manière que le rembourrage, mais en changeant le mot en marge. Prenons un exemple :

h3 {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

En résumé, ce serait le suivant :

h3 {
margin: 100px 40px 10px 70px;
}

Couleurs CSS et HTML

Tout d’abord, nous devons savoir quelle palette de couleurs pour la page web que nous allons utiliser, et avoir des codes de couleurs CSS et HTML clairs pour effectuer les changements dans le modèle.

Color : Tout d’abord, et comme vous l’avez vu précédemment, pour inclure la couleur du texte en CSS à un titre, nous ajouterions simplement la propriété suivante :

h3 {
color:#569FE8;
}

Background-color : Cette propriété ajoute un fond coloré à notre élément, et il serait ajouté de la manière suivante :

h3 {
background-color:#569FE8;
}

Arrière-plans CSS et HTML

Background-image : Cette fonction permet d’insérer une image de fond dans notre site web.

Une fois l’image téléchargée dans le dossier média, il suffirait d’insérer l’URL après le code.

Background-repeat : Nous pouvons répéter ou non l’arrière-plan que nous avons inclus dans l’élément en fonction de la valeur que nous lui attribuons.

Annexe de l’arrière-plan : Inclure les effets que l’arrière-plan a, c’est-à-dire si nous voulons qu’il soit fixe et ne défile pas avec le contenu, ou si au contraire, nous voulons qu’il descende avec le reste des éléments (défilement).

Background-Attachment: Lorsque nous couvrons une image dans certains constructeurs WordPress (entre autres CMS), il se peut que l’image ne soit pas complètement centrée, la position nous permettra donc de l’aligner à gauche (gauche), à droite (droite) ou au centre (centre).

Voici un exemple d’arrière-plan pour notre site web :

body {
background-image: url (http://cdn2.marketingandweb.es/wp-content/uploads/2017/09/Marketing-and-Web-Miguel-2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: center;
}

Personnaliser les frontières avec CSS et HTML

Avec cette propriété, nous pouvons mettre des frontières à nos éléments et aussi les personnaliser.

C’est une propriété très utile, notamment pour personnaliser les boutons avec le CSS.

Mais, comment les personnaliser ? Nous le ferons avec ces valeurs :

• Border-width, c’est-à-dire la largeur de la frontière. Nous pouvons la rendre plus fine et plus épaisse selon notre conception.
• Border-color. Cette fonction permet de modifier la couleur de la bordure. Mais attention, le texte qui le compose suivra la couleur originale.
• Border-style est le style que nous voulons qu’il ait : pointillé, solide, en relief…

Je vais vous expliquer les types de bords que vous pouvez appliquer.

• Solid: ajouter une seule ligne droite.
• Dotted: bordure en pointillés séparés par des espaces.add HTML border
• Dashed: l’effet est similaire au précédent, mais au lieu de points, ce serait une frontière avec des lignes séparées.
• Double: Double bord, sont deux lignes droites ensemble et séparées l’une de l’autre.
• Groove: produit un effet de bord enfoncé.
• Ridge: Type de bordure qui dépasse, comme un effet 3D.
• Inset: Comme vous pouvez le voir sur l’image, cela crée un effet de bord enfoncé.
• Outset: Il s’agit d’un bord saillant, créant un effet 3D.
• None: Aucun type de bord ne sera affiché.

Personnalisation du texte et des polices avec CSS et HTML

Lorsque nous avons du texte sur notre site web, nous n’aimons souvent pas la forme du paragraphe, les polices de caractères, les tailles ou tout autre élément qui pourrait affecter la conception de la page.

C’est pourquoi le HTML et le CSS nous permettent d’apporter certaines modifications à nos mots afin qu’ils aient un aspect plus esthétique.

Examinons certaines de ces modifications :

Font-family : Cette propriété nous permet de sélectionner le type de police dont notre texte sera doté.

L’avantage qu’elle présente est que, si nous ajoutons deux polices de caractères à la suite dans notre code, nous indiquerons une police de rechange à la première, au cas où un utilisateur n’aurait pas cette police dans son appareil, la seconde apparaîtra par défaut.

Font-style : outre le choix du type de police, nous pouvons choisir les versions des lettres et établir des italiques en CSS, en gras, en oblique, etc.

Font-Weight : Il s’agit du poids des polices. Pour que vous compreniez mieux, il s’agit de l’épaisseur des lettres. Ils peuvent être fins, moyens ou épais, selon la valeur que nous leur attribuons, qui se situera entre 100 et 900.

Font-Size : Nous définirons sa taille en pixels ou en pourcentage selon le besoin que nous avons dans notre conception web.

Si ce que nous voulons c’est changer la taille de la police en HTML et non en CSS, nous utiliserons la balise <Font Size> par exemple :

<h3><Font Size=3> Soy un título </Font></h3>

Contrairement au CSS, qui se présenterait comme suit :

h3 {
Font-size: 25px;
}

Line-Height : l’espacement CSS est l’espacement entre une phrase et une autre dans un même paragraphe. Il peut être défini en pourcentage (100 % est l’interligne normal) ou en « em ». Il sera utilisé pour notre espacement de ligne HTML.

Text-align: si nous voulons que notre texte soit aligné à gauche ou à droite, nous devons l’indiquer avec cette propriété.

Text-decoration : Nous pouvons décorer notre texte avec des lignes autour de lui (soulignement, lignes au-dessus…). Certaines de ses valeurs sont les suivantes :

• Underline:: Souligne le texte. Le soulignement en CSS est généralement visible dans les liens.
• Overline : comprend une barre au-dessus du texte.
• Line-through : Rayez le texte.

Text-transform : Lorsque nous avons un texte très long en minuscules et que nous voulons le changer en majuscules, ou vice versa, nous commençons à le réécrire, mais il y a une façon très simple de le faire automatiquement, et c’est avec les valeurs suivantes :

• Uppercase : Lettres majuscules
• Lowercase : Lettres minuscules.
• Capitalize : Première lettre en majuscules.

Important :

Souvent, le modèle est fourni avec des personnalisations par défaut, et peu importe les efforts que nous déployons pour les modifier, les deux instructions se heurtent.

Lorsque nous ajouterons ce terme, nous parviendrons à donner la priorité à notre instruction.

Voici un exemple de la manière dont nous inclurions certains de ces éléments pour notre titre type :

h3 {

color:#569FE8 important ; /*Couleur bleue dans la police, au-dessus des autres instructions */
Font-family : Arial, Verdana ; /*La police par défaut sera Arial, sauf si nous ne l’avons pas installée, qui sera Verdana */
Font-size: 25px ; /*Taille du texte */
Font-style : Normal ; /*Type normal
Font-weight : 400 ; /*Nous indiquons le poids des lettres */
Text-align : à droite ; /* Aligné à droite */
Text-decoration : Surlignage ; /*Barre sur le texte */
Text-transform : Majuscules ; /*Le texte sera en majuscules */
}

Balises de style HTML de base pour les textes

• <h1> </h1> : On attribue au texte le rôle qu’il aura dans la page (h1, h2, h3…), dans ce cas il s’agirait du titre principal.
• <b> </b> ou <strong> </strong> : Avec ces balises HTML, nous incluons les balises en gras dans le texte.
• <i> </i> : balise HTML permettant d’ajouter des italiques au texte.
• <p> </p> : Avec une balise, nous indiquons qu’il s’agit d’un paragraphe.

Autrement dit, si nous n’incluons pas cette balise dans un texte, tout sera dans le même paragraphe.

Si nous le distribuons en paragraphes, il sera organisé de la manière que nous indiquons.

• <br> : Avec la balise BR, nous obtiendrons un saut de ligne ou ce qui est également connu sous le nom de break.

J’ai expliqué certains des éléments de base du web et certaines de ses propriétés, mais il y en a d’autres comme l’ajout d’une indentation au texte (text-indent) ou l’espacement entre les caractères (letter-spacing), entre autres.

Création de listes HTML

La langue nous permet de créer différentes listes pour commander nos articles ou sections de texte sur les pages web.

Liste par points en HTML

Avec le label <ul> nous allons créer une liste par points comme la suivante :

Checklist: <ul>
<Analyse des mots-clés
<Ecrire l’article
<La mise en page dans WordPress
</ul>

Chaque point sera précédé de l’étiquette « liste » pour structurer notre label UL.

Liste par numéros en HTML

Avec l’étiquette <ol> nous allons créer une liste numérotée comme la suivante :

Checklist : <ol>
<Analyse des mots-clés
<Ecrire l’article
<La mise en page dans WordPress
</ol>

Comme la précédente, elle doit être précédée de l’étiquette <li> pour organiser les éléments de notre liste.

Autres éléments d’une page web

Liens en HTML

Beaucoup d’entre nous ont constaté qu’un lien a été placé par défaut en bleu et avec le soulignement typique de Word.

Je vais vous montrer comment changer ça manuellement.

Les liens sont spécifiés avec la balise HTML <a> </a> ainsi que l’attribut href pour spécifier l’URL de destination du lien.

<a href= »https://marketingandweb.es »>Marketing et Web</a>

Et si nous décidons maintenant de personnaliser le lien, nous avons des options pour le faire :

• a:link – Ce sera le style par défaut du lien lorsqu’il n’a pas encore été cliqué et qu’il n’a jamais été visité. C’est-à-dire le style par défaut.
• a:visited – Nous allons ici appliquer le style du lien visité. Vous vous souvenez de la couleur violette typique de Google ? Pareil pour notre site web.
• a:hover – Lorsque nous passons la souris sur un lien, elle change généralement pour définir la couleur qu’il aura.
• a:active – Lorsque nous cliquons avec la souris jusqu’à ce que nous laissions tomber, ce lien aura un style, que nous pouvons définir, bien qu’il ne soit généralement pas très visible.

CONSEIL : Pour masquer le soulignement par défaut avec le lien, utilisez la ligne a:link { text-decoration:none ; }

Il ne nous reste plus qu’à définir les styles du lien de la manière suivante :

a:link {
color: #black;
background-color: #efefef;
}
a:visited {
color:#569FE8;
background-color: #efefef;
}

Comme vous pouvez le voir, j’ai ajouté une couleur noire au lien, et pour quand il a été visité un ton bleu. Aux deux, j’ai ajouté avec le CSS une couleur de fond grise.

De plus, si nous voulons que ce lien s’ouvre dans un nouvel onglet, nous utiliserons la balise HTML target= »_blank ».

<a href= »https://imgpublic.com » target= »_blank »>Magazine Digital</a>

Images <img>

Nous pouvons insérer des images sur notre site web de la manière suivante, en précisant l’URL à afficher, le texte alternatif, ainsi que la largeur et la hauteur de l’image.

N’oubliez pas, avant d’insérer vos images, de les optimiser et de les retoucher avec certains programmes pour éditer des photos gratuites ou payantes.

Le code HTML pour insérer une image serait le suivant :

<img src= » http://cdn2.imgpublic.com/wp-content/uploads/2017/09/Marketing-and-Web.jpg » alt= »Digital » Width= »500″ Height= »550″>

Tableaux en HTML

Avec le langage HTML, nous pouvons également insérer des tableaux à travers la balise <table>, en indiquant chaque ligne entre <tr> et chaque colonne dans <td>.

Par exemple :
<table><tr>
<td> Date </td>
<td> Titre du message </td>
<td> Date de publication </td>
</tr>
<tr>
<td> 30 juin </td>
<Optimisez votre référencement naturel
<td> 10:00h </td>
</tr>
</table>

L’application du CSS pour les tableaux se ferait par le biais des styles. Nous sélectionnerions notre tableau et modifierions les couleurs, les bordures, les textes, etc.

Où et comment éditer le HTML dans WordPress ?

Nous pouvons insérer du code HTML dans la page WordPress par le biais de widgets, de billets de blog, et des pages elles-mêmes.

Ajout de HTML aux widgets WordPress

WordPress nous permet d’inclure des Widgets dans nos sidebars, en haut ou en bas, et pour cela, nous allons dans Apparence et Widgets.

Si nous voulons inclure du code HTML personnalisé dans notre Sidebar, nous ferons glisser le widget vers le Sidebar lui-même.

Ici, nous pouvons ajouter les shortcodes des plugins que nous voulons ou notre propre code.
Ajout de HTML aux messages du blog WordPress

La façon de modifier le HTML dans le blog WordPress serait par l’onglet HTML qui suit l’onglet Texte ou Visuel.

Édition de HTML dans WordPress

Ici nous ajouterions toutes les spécifications que notre billet aurait pour le mettre en page et le faire rester tel que nous l’avons dans notre tête.
Ajout de HTML aux pages WordPress

Comme pour les articles de blog, sur le même onglet, nous ajouterions notre code HTML à nos pages.

Mais voici une autre option qui va dépendre du constructeur.

Nous pouvons également ajouter un shortcode en faisant glisser l’élément appelé « shortcode » ou « HTML » (selon le constructeur que vous utilisez sur votre site web) dans notre design de manière très simple.

Comment et où modifier le modèle WordPress et son CSS ?

Souvent, nous comprenons la théorie, mais nous sommes bloqués quand il s’agit de modifier un style, et nous ne savons pas où aller.

La feuille de style CSS (style.CSS) est un fichier qui se connecte et affecte le HTML de notre site web. C’est-à-dire que c’est une feuille qui est orientée pour donner du style à notre document HTML et que nous utiliserons pour donner un design personnalisé au web.

Mais, où modifier cette feuille de style CSS de WordPress ?

Nous avons plusieurs options pour aller sur cette feuille de style et la modifier à notre guise.

Option 1

Par notre FTP, dans le dossier de votre thème, vous aurez le fichier Style.CSS où vous pourrez ajouter les styles que vous souhaitez pour votre design web.

Option 2

Si vous ne voulez pas aller sur votre FTP, depuis WordPress lui-même dans l’onglet « Apparence », « Editeur », vous pouvez modifier les dossiers de votre modèle.

Option 3

Si vous faites partie de ceux qui n’aiment pas toucher à leur FTP ou à leurs dossiers internes, dans WordPress même, vous pouvez aller dans « Apparence » et « Personnaliser », et les personnalisations de votre page web s’ouvriront.

Une fois ouvert, allez à « CSS supplémentaire ». Vous pouvez y ajouter votre code personnalisé. L’éditeur vous informera également de toute erreur dans le code que vous ajoutez (si vous avez la dernière version de WordPress installée).

Option 4

Il existe de nombreux thèmes WordPress qui vous permettent d’ajouter du CSS personnalisé à partir de leurs propres options par le biais de code personnalisé.

Cependant, je vais vous montrer comment le faire avec l’option 3, du CSS supplémentaire.

Vous pourriez également être intéressé :

• Comment créer une page web ou un blog dans WordPress sans programmation
• Guide SEO pour WordPress + Manuel SEO pour le commerce électronique

Comment inspecter les éléments d’une page web ?

La grande question est maintenant de savoir si je dois créer chaque code sans savoir ce qui apparaîtra sur mon écran une fois que je l’aurai enregistré.

Non, nous avons un moyen très pratique que j’aime voir et de créer les codes à tout moment. C’est l’inspecteur des articles.

Mais attention, l’inspecteur d’éléments n’est pas disponible dans tous les navigateurs, nous y accéderons via Google Chrome.

Lorsque nous sommes sur notre site web, nous appuyons sur le bouton droit de notre souris ou de notre pavé tactile et un menu déroulant s’ouvre où nous cliquons sur « Inspecter ».

Une fois qu’on a cliqué, notre console s’ouvre pour voir le code de la page web.

Vous vous demanderez encore ce que je vais faire avec un code aussi étrange ?

Eh bien, maintenant vous allez découvrir l’inspecteur des objets.

Si vous regardez sur le côté gauche de notre panneau, nous avons une flèche qui vous aidera beaucoup et à partir de maintenant, vous consulterez beaucoup.

Lorsque vous le sélectionnez, cliquez sur l’élément que vous souhaitez modifier.

Maintenant, nous allons le changer.

Si on descend, dans les options de style (Styles, dans la colonne de droite) on verra tout ce qui compose le texte h2.

Quand j’arriverai à la classe .h2, j’aurai sa taille, sa couleur et d’autres éléments.

Donc, pour que notre modification se démarque, nous allons ajouter un fond coloré.

Si je mets à jour la page, les fonctionnalités du h2 seront de retour comme avant, puisque c’est juste pour tester et n’agit pas sur le code de la page.

Maintenant, si je veux laisser cet arrière-plan dans mon site web, je vais coller la nouvelle personnalisation dans ma feuille de style ou dans mon code personnalisé.

Je vais vous montrer comment.

Tout d’abord, nous ouvrons le CSS supplémentaire dans le personnalisateur de WordPress.

Une fois que nous l’avons ouvert, nous copions le code que nous avons modifié dans la console, comme ceci :

CSS WordPress personnalisé

Avez-vous remarqué que je n’ai pris que le .h2 et pas tout ce qui se trouve entre parenthèses ?

En fait, il ne serait pas nécessaire de recoller toutes les caractéristiques, puisqu’elles sont déjà définies dans le modèle, et que la taille de la police et la ligne ne seront pas modifiées.

En cliquant sur « Publier », nous ferons évoluer notre contexte sur le site web.

ASTUCE : Lorsque vous sélectionnez un élément avec la flèche, une classe lui sera attribuée (class= »name » 😉 cette classe sera l’élément que vous devrez modifier en ajoutant un point devant lui (.name) et ses propriétés.

Les classes en CSS peuvent être définies, et sont utilisées pour identifier les étiquettes et leur ajouter des propriétés.

L’avantage est que nous pouvons créer de nouvelles classes d’attributs et les personnaliser comme nous le souhaitons.

Cela ne semble-t-il pas plus compliqué que cela ne l’est en réalité ?

Ce que j’ai fait est un changement minime, mais avec votre console, votre inspecteur d’éléments et votre capacité de recherche, vous pourrez personnaliser le design de votre site web comme vous le souhaitez.

Au bout du compte, on se laisse tellement prendre que l’on devient un maniaque de la retouche (je vous le dis par expérience).

Modifier le CSS mobile. La question des médias

Que faire si je souhaite modifier ces éléments uniquement en format mobile ?

Je vais vous montrer une astuce pour que, depuis votre ordinateur, vous puissiez voir à quoi ressemble votre site web sur différents appareils mobiles.

Nous allons rouvrir l’inspecteur d’articles, et sélectionner le bouton Réactif (le symbole de l’écran mobile à côté de la flèche magique que je vous ai montrée auparavant).

Ici, nous pouvons voir les différents appareils sur lesquels notre site web est affiché.

Dans ce cas, si nous voulons modifier à nouveau le h2 uniquement pour les mobiles, nous cliquerons à nouveau avec la flèche notre h2 et nous mettrons à nouveau le fond d’écran.

Nous recherchons la classe correspondante ou l’élément que nous voulons modifier et appliquons le fond.

Mais cette fois, si vous regardez, au-dessus nous avons un écran @media seulement et (largeur max : 1000px).

Nous allons revenir à notre CSS supplémentaire à partir du customiseur et ajouter le code modifié avec la requête de média, comme ceci
@media only screen and (max-width : 1000px) {

.home h2
{
background-color:#569FE8;
}
}

Nous aurions déjà un fond bleu pour les mobiles !

Créez votre code HTML avec Word

Saviez-vous que vous pouvez créer un texte dans Word et le convertir au format HTML en cliquant sur un seul bouton ?

Si vous ne le saviez pas, je vous expliquerai comment faire au cas où cela vous serait utile.

Tout d’abord, nous créons notre texte en Word.

Une fois que nous l’avons créé, avec ses couleurs, son gras, et toute la personnalisation que nous voulons, nous allons à « Enregistrer sous » et sélectionnons l’option « Pages Web ».

Nous aurons notre fichier en format web.

Ce que je fais maintenant, c’est l’ouvrir dans Google Chrome et sélectionner « Afficher la source de la page ».

Une fois qu’elle s’ouvre, je vais directement à la balise « Div » de la page qui a été générée (sans regarder la tête), où je ferai créer le HTML.

Il suffit de le copier et de le coller sur notre site web !

Je dois vous dire que c’est une façon de nous épargner du travail, mais il est toujours préférable de le faire à partir de notre propre CMS ou de notre site web afin que le code soit aussi propre que possible, sans influence de Microsoft Word lui-même.

Conseils pour personnaliser votre site web et votre modèle WordPress avec le CSS

Comment créer une page d’erreur 404

Lorsqu’un nouveau visiteur entre sur notre site web et trouve « PAGE NON TROUVÉE », il la quittera probablement et ne la visitera plus.

Alors, comment pouvons-nous résoudre ce problème ? En personnalisant l’erreur 404.

Mais nous l’avons lu à plusieurs reprises et nous pensons qu’il est très bien de personnaliser le 404, mais nous ne savons pas comment faire.

Nous disposons de plusieurs moyens pour créer cette page et pour pouvoir retenir l’utilisateur qui arrive sur le site même s’il n’est pas entré dans la page qu’il attendait.

Je vais donc vous expliquer les différentes options pour créer la page 404 dans WordPress.

Personnalisez l’erreur 404 avec le CSS de manière originale

Nous pouvons avertir l’utilisateur de manière créative que ce qu’il recherche ne se trouve pas sur cette page, en utilisant des effets CSS amusants pour l’erreur 404.

Personnalisez l’erreur 404 en utilisant un plugin WordPress

404 Page est un plugin très simple pour réaliser votre page 404.

Vous créez simplement une nouvelle page avec les éléments que vous voulez inclure avec votre constructeur, et dans le plugin lui-même, vous choisissez quelle page apparaîtra lorsque l’erreur se produira.

Personnalisez l’erreur 404 grâce à .htaccess

Une fois que nous aurons créé notre page avec le constructeur, nous devrons aller dans notre fichier .htaccess et définir que les erreurs 404 seront redirigées vers la page que nous avons conçue de nouveau.

Il serait préférable de faire une nouvelle page qui comprend des appels à l’action.

Pour un blog, une bonne erreur 404 serait d’inclure les derniers articles que vous avez écrits, un bouton pour vous suivre sur Feedly, et des boîtes d’abonnement ou de téléchargement d’ebook.

Pour une page de commerce électronique ou de services, l’idéal serait d’inclure une série de produits, ainsi que des appels à l’action sous forme de réductions pour l’abonnement à la newsletter.

Personnaliser les catégories du Blog avec CSS

Avez-vous déjà été sur un blog et aimé la façon dont les catégories sont distribuées et personnalisées ?

Les catégories de blogs vous aident à structurer les articles de votre site web de manière à ce que les sujets soient facilement accessibles à l’utilisateur qui vient sur votre blog.

Ces catégories sont un moyen d’organiser le contenu de vos posts et ont un rôle très important, car elles peuvent améliorer ou détériorer le positionnement SEO.

Si vous créez du contenu régulièrement, et que chaque article est lié à sa catégorie correspondante, ceux-ci sont mis à jour lorsque vous créez du nouveau contenu, ce qui est très important pour le positionnement.

Si les catégories de votre blog sont frappantes, le lecteur qui lit vos articles peut visiter un sujet qui l’intéresse et commencer à lire plus d’articles, diminuant ainsi le pourcentage de rebond, augmentant le nombre de pages vues, augmentant le temps passé sur le site, etc.

Mais si vous avez un blog, vous savez que WordPress vous permet seulement de mettre un nom, une petite description sans personnalisation et un slug à la catégorie, sans pouvoir les personnaliser de manière simple.

Nous avons différentes options pour votre personnalisation.

L’un d’entre eux serait un plugin comme Visual Term Description Editor ou CategoryTinyMCE, qui ajoutera à la boîte de description de la catégorie un éditeur WordPress afin que vous puissiez personnaliser visuellement les descriptions.

Mais je vais vous montrer comment rendre ces catégories plus accrocheuses à la main avec le CSS pour améliorer l’expérience utilisateur de vos lecteurs et le référencement de votre site Web.

Nous pouvons personnaliser les catégories en modifiant la couleur de fond de la barre latérale pour qu’elle apparaisse directement sur notre site.

Et comment obtenir cela ?

Avec l’inspecteur d’articles et la flèche que j’ai expliquée précédemment, allez dans la section des catégories, et un nom class= »cat-item » ou similaire apparaîtra dans la classe, selon le modèle.

Nous prenons le texte entre guillemets (cat-item) et allons dans notre CSS personnalisé.

Une fois sur place, nous ajoutons un point au texte que nous avons copié auparavant, de sorte que cela ressemble à ceci : .cat-item

Il ne reste plus qu’à ajouter les personnalisations entre parenthèses.

.cat-item {
height:20px;
background-color:#569FE8;
text-align:center;
font-size:1.2em;
margin-top: 8px !important;
color:#ffffff;
}
.cat-item:hover{
background-color:#ffffff;
color: #ffffff !important;
}

Nous allons obtenir nos catégories de couleurs !

Mais que faire si nous voulons faire de chaque catégorie une couleur pour attirer davantage l’attention sur l’utilisateur ?

Eh bien, nous répéterions les étapes précédentes, mais au lieu de sélectionner toutes les catégories, nous pointerions avec la flèche une par une, et nous copierions les noms à l’intérieur de la classe.

En général, ces catégories sont associées à des chiffres. Dans mon cas, il s’agira de .cat-item-81, .cat-item-82 et .cat-item-83.

Les changements seront effectués dans le style suivant :

Et nous n’aurions qu’à ajouter le code suivant, en changeant les noms et les numéros, avec la couleur que nous voulons inclure à chaque catégorie :

.cat-item-81 {
height:20px;
background-color:#438EEF;
text-align:center;
font-size:1.2em;
margin-top: 8px !important;
color:#fff;
}
.cat-item:hover {
background-color:#fff;
color: #fff !important;
}
.cat-item-82 {
height:20px;
background-color:#58c2d8;
text-align:center;
font-size:1.2em;
margin-top: 8px !important;
color:#fff;
}
.cat-item:hover{
background-color:#fff;
color: #fff !important;
}
.cat-item-83 {
height:20px;
background-color:#F3D662;
text-align:center;
font-size:1.2em;
margin-top: 8px !important;
color:#fff;
}
.cat-item:hover{
background-color:#fff;
color: #fff !important;
}

Cacher un élément de page web avec le CSS

Souvent, dans notre conception, nous avons des éléments que nous n’aimons pas ou ne voulons pas voir apparaître, et nous ne savons pas comment les supprimer.

Lorsque nous concevons le site web avec un constructeur, il est facile de faire disparaître un élément, mais lorsque nous concevons un blog avec lequel nous n’utilisons pas le constructeur, il y a des éléments que nous ne voulons pas voir apparaître, comme la date, les commentaires, les likes al post, etc.

Grâce à la propriété d’affichage, nous pouvons cacher un élément sur notre site web.

Pour ce faire, il faudrait aller voir l’inspecteur des éléments et chercher l’élément que l’on veut supprimer avec la flèche.

Une fois que nous l’avons, nous recherchons le nom attribué dans la classe et ajoutons la propriété display:none ; de la manière suivante :

.post_comments {
display:none;
}

Ce que j’ai fait ici, c’est que sur la page principale de mon blog, le nombre de commentaires de chaque article n’apparaîtra pas, il n’y aura donc que la date.

Cela semblait plus compliqué que ça ne l’est, n’est-ce pas ?

Élément de menu en vedette avec le CSS

Vous êtes entré sur un site web et vous avez vu que ses services ou un autre élément du menu se démarquent des autres ?

J’en suis sûr.

Cette technique est très utile pour attirer l’attention de l’utilisateur sur la page de notre site web qui se trouve au-dessus des autres.

N’oubliez pas d’utiliser cette technique avec une stratégie précédente pour guider l’utilisateur vers cette page afin d’atteindre vos objectifs.

Je vais vous expliquer comment mettre en évidence un élément de menu en code.

Comme dans les cas précédents, vous devez identifier l’attribut de classe affecté à chaque point de menu avec le contrôleur d’éléments.

Une fois que nous avons localisé l’élément, où il nous donne des espaces, nous le remplaçons par des points de la façon suivante :

menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-468  .menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-468

Une fois que nous l’aurons, il s’agira d’ajouter un fond coloré et un rayon pour créer notre élément comme suit :

N’oubliez pas de remplacer le nom de l’élément de menu par le nom de votre page.
Insérer des icônes HTML

Dans les articles que nous lisons, nous sommes habitués à voir des icônes pour répartir les points ou par moitié du texte.

A travers cette page d’icônes, nous recherchons celle qui nous intéresse et nous copions et collons le code dans le HTML de l’entrée ou de la page de notre WordPress.

<i class= »fa fa-check »></i>
<i class= »fa-smile-o »></i>
<i class= »fa fa-arrow-right »> </i>

Dois-je apprendre le HTML et le CSS ?

Le code web HTML et le code CSS ne sont pas faciles à apprendre au début. Mais une fois que vous avez compris, le reste vient naturellement.

Il est vrai qu’aujourd’hui nous n’avons pas besoin de connaître le code pour concevoir notre site web, mais il n’est pas superflu de savoir où aller au cas où nous voudrions modifier un élément et que notre constructeur ne nous permet pas de le faire.

De plus, les extensions nous permettent de modifier notre thème beaucoup plus facilement.

Mon conseil est le suivant : si vous voulez modifier quelque chose et que vous le faites à partir du code personnalisé, n’ayez pas peur d’essayer de nouvelles choses, WordPress lui-même vous avertira des erreurs dans le code inclus.

C’est comme ça qu’on apprend vraiment, en essayant. Et oui, j’ai aussi souvent fait des erreurs.
De plus, la connaissance est un pouvoir, on ne sait jamais quand on pourrait avoir besoin de savoir ce genre de choses.
Vous osez modifier le code de votre site web ?
Connaissez-vous une technique ou une astuce intéressante avec HTML et CSS ?

Si vous avez aimé l’article, vous pouvez le partager avec un ami.
Vous avez aimé ce poste ? Notez le