Guide – Prise en main de son site WordPress

logo fdc svg

Lorsque vous faites un changement sur vos pages, n’oubliez pas de cliquer sur le bouton « Publier » pour enregistrer vos modifications et les rendre visible sur votre site.

Prise en main de votre site internet WordPress

Dans ce guide vous trouverez le nécessaire pour gérer votre site internet en toute autonomie, peu importe avec quel outil il a été construit. Les modifications les plus courantes sont expliquées de manière claire et simplifiées, étape par étape. N’hésitez pas à vous référer à ce guide à chaque fois que vous en aurez besoin.

Comment savoir quelle partie de ce guide vous concerne ?

Avant de commencer, il est important de savoir quel type d’outil a été utilisé pour construire votre site. Pour le savoir :

1. Connectez-vous avec vos identifiants sur WordPress en ajoutant « /wp-admin/ » à la fin de l’adresse URL de votre site internet 

login wp admin wp def
2. Cliquez sur l’onglet « Pages » situé dans le bandeau latéral gauche
navigation laterale pages wp def
3. Survolez l’une de vos pages avec votre souris, vous verrez qu’il est écrit « Modifier avec Elementor » ou seulement « Modifier »
modifier avec elementor def

Cliquez sur le bouton correspondant à ce qui est écrit lorsque vous survolez l’une de vos pages : 

Modifier avec Elementor
Modifier

Modifier mon site avec Elementor

Avant de commencer, il est nécessaire de savoir certaines choses. Elementor est une extension permettant d’organiser les différentes pages du site sous forme de blocs de manière assez intuitive à l’aide de la fonctionnalité « glisser et déposer ». Votre page est constituée de (voir le schéma suivant) :

  • Sections : un grand bloc qui occupe souvent toute la largeur de la page et qui sert à regrouper plusieurs autres blocs d’une même partie.
  • Colonnes : regroupe plusieurs éléments comme un titre, une description, un bouton ou tout simplement une image et permet de les organiser selon des colonnes.
  • Conteneurs : regroupe plusieurs éléments comme un groupe.
  • Éléments ayant différentes fonctions possibles comme des titres, des éditeurs de textes, des images, etc.
schéma construction blocs elementor

Lorsque vous changez des éléments de votre page avec Elementor, vous pouvez visualiser ce que vous faites directement en éditant. Cependant, les modifications sont visibles seulement par vous. Ce n’est que lorsque vous cliquez sur le bouton « Publier » que les changements deviennent visibles pour l’ensemble des utilisateurs. N’oubliez pas de cliquer sur le bouton « publier » si vous voulez enregistrer vos changements.

Sur votre site vous pouvez donc assez facilement modifier les différents éléments d’une page. C’est ce que nous allons voir maintenant. Pour modifier une page cliquez sur l’onglet « Pages » puis sur le bouton « Modifier avec Elementor » sur la page que vous souhaitez modifier (comme vu précédemment dans l’introduction). Ensuite, référez-vous aux changements que vous voulez effectuer dans la liste suivante.

Dans Elementor, plusieurs blocs sont disponibles et permettent une personnalisation de vos pages.

Il existe des blocs de titre, de textes, des boutons, des images, ou encore des vidéos pour le contenu. Mais aussi des séparateurs ou des espaceurs pour la mise en forme.

Vous pouvez retrouver tous les blocs sur le bandeau latéral de gauche (voir Figure 1 : cercle rouge). Pour retrouver un bloc facilement, vous pouvez le chercher par son nom dans la barre de recherche (voir Figure 1 : cercle bleu).

bandeau lateral blocs def
Figure 1 : Bandeau latéral regroupant les blocs utilisables (en rouge) et la barre de recherche (en bleu).

Pour ajouter un nouveau bloc,

1. Cliquez avec votre clic gauche sur le bloc voulu pour le sélectionner.
2. Faites glisser vers l’emplacement sur la page que vous souhaitez.

 

Un trait violet clair apparaîtra pour vous préciser où le bloc sera ajouté (« drag and drop » ou « glisser-déposer » en français).

draganddroptitresurpagedef
Figure 2 : Capture d'écran de la prévisualisation d'un ajout de bloc.

Attention !

La mise en page d’un bloc de texte par exemple risque d’être altérée,

il vaut mieux privilégier la duplication qui garde les mêmes caractéristiques.

N’utilisez l’ajout que si le bloc n’existe pas déjà dans votre page.

Pour dupliquer ou supprimer un bloc,

1. Cliquez avec le clic gauche sur le petit crayon violet en haut à droite du bloc afin de le sélectionner.

2. Appuyez sur clic droit.

3. Sélectionnez supprimer ou dupliquez en fonction de votre objectif (voir Figure 3).

clic droit sur bloc suppr dupliquer def
Figure 3 : Capture d'écran des options du clic droit sur un élément

Lorsque vous dupliquez un élément (un bloc ou un groupe), celui-ci garde toutes les caractéristiques du bloc initial, ce qui est pratique pour garder la même mise en forme globale. Cette technique est à privilégier par rapport à l’ajout d’un nouveau bloc.

Sur vos pages vous pouvez réorganiser les blocs assez facilement. Cependant attention, en déplaçant certains blocs, il se peut que la mise en page soit altérée.

Pour changer l’emplacement d’un élément vous devez maintenir clic gauche sur le crayon qui se situe en haut à droite de ce bloc et le déplacer où vous le souhaitez. Vous pouvez prévisualiser où le bloc se placera grâce au repère violet (voir icône ci-contre)

reorganiser bloc existant btn def

Il existe deux types de blocs permettant de rédiger un texte : le premier le bloc titre, et le second le bloc éditeur de texte. Ces deux blocs ont des modes de fonctionnement assez similaires mais l’éditeur de texte permet de mettre facilement en forme un long texte, contrairement au bloc titre.

Pour modifier le contenu d’un texte, vous devez cliquer sur le bloc, si c’est un bloc titre vous pouvez écrire dans la partie « Titre » du bandeau latéral gauche. (voir Figure 4)

modifier contenu titre def
Figure 4 : Bandeau latéral gauche d'un bloc titre

Attention !

La hiérarchie des titres est importante pour le référencement de votre site internet !

Si ce bloc est utilisé pour écrire un texte de paragraphe, veuillez cliquer sur la case « Balise HTML » et changer pour « p ».

A noter que vous pouvez également faire des retours à la ligne en ajoutant : <br/>

Si c’est un bloc éditeur de texte, vous aurez la plupart des mêmes options que n’importe quel éditeur de texte comme Word, Libre Office, etc. Dans le menu latéral gauche et dans « éditeur de texte », vous pourrez donc changer le texte mais également changer sa mise en forme (centrer, changer la couleur d’une partie du texte, mettre en gras ou en italique, etc.) (voir Figure 5).

modifier contenu editeur texte def
Figure 5 : Détails des options de l'éditeur de texte

Les blocs titres et éditeurs de textes fonctionnent de la même manière ici :
1. Cliquez sur l’onglet « style » dans le menu latéral gauche.

2. Tout en bas vous trouverez une section destinée à la couleur du texte mais aussi du lien (s’il y en a un).
3. De plus, vous pouvez aussi changer la couleur du lien au survol en cliquant sur la sous-partie « Au survol ».

modifier couleur titre def

Si vous souhaitez changer la taille ou la police il faudra

1. Cliquer sur le petit icone de crayon à la ligne « Typographie ».

2. Choisir une police dans le menu déroulant « Famille » proposant des polices Google Fonts,

3. Changer la taille du texte ou encore toutes les autres options disponibles comme la graisse ou le style de texte (italique).

modifier typo titre def

Vous pouvez ajouter un lien sur un texte de deux manières différentes.

Si vous voulez votre lien sur une partie d’un texte dans un éditeur de texte,

1. Sélectionnez la partie du texte qui contiendra le lien
2. Cliquez sur l’icône de chaine dans le bandeau latéral gauche « Insérer / Modifier un lien » (voir Figure 6).

icone lien def
Figure 6 : Options du bloc éditeur de texte, dont celle pour insérer un lien

Si vous voulez que votre lien se situe sur un bloc titre, vous utiliserez la ligne « Lien ».

Si vous renvoyez vers un site externe,

1. Entrez le lien de destination

2. Veillez à cliquer sur l’icône de roue crantée « Options du lien »

3. Cochez la case « Ouvrir le lien dans un nouvel onglet »

4. Confirmez avec le bouton « Ajouter un lien ».

 

Si le lien ne renvoie pas vers un site externe mais vers une page de votre propre site,

1. Cliquez sur l’icône de roue crantée « Options du lien »

2. Sélectionnez dans la liste la page vers laquelle vous voulez que votre texte renvoi

lien 1 def
lien 2 def

Remplacer une image existante (facile)

Pour remplacer une image :

1. Cliquez sur l’image à changer pour la sélectionner.

2. Cliquez sur votre image dans le bandeau latéral gauche.

3. (facultatif) Importez votre image en la glissant dans la fenêtre « Téléverser des fichiers ».

4. Sélectionnez la bonne image en cliquant dessus.

5. Cliquez sur « Sélectionner ».

changer image 1 def
changer image 2 def

Pour remplacer le contenu texte :

1. Cliquez gauche sur le bouton.

2. Dans la ligne « texte », changez le contenu.

changer texte btn def

Pour changer le lien du bouton, si vous renvoyez vers un site externe,

1. Cliquez sur le bouton.

2. Entrez le lien de destination.

3. Veillez à cliquer sur l’icône de roue crantée « Options du lien ».

4. Cochez la case « Ouvrir le lien dans un nouvel onglet ».

5. Confirmez avec le bouton « Ajouter un lien ».

changer lien btn def
inserer lien btn def 2

Si le lien ne renvoie pas vers un site externe mais vers une page de votre propre site,

1. Cliquez sur l’icône de roue crantée dans le bandeau latéral gauche
2. Sélectionnez dans la liste la page vers laquelle vous voulez que votre texte renvoi

Pour rajouter un bouton, il est recommandé de dupliquer un bouton existant pour conserver la mise en forme existante. Sinon vous pouvez en ajouter un comme expliqué ici.

Si vous voulez cacher un élément de votre page sans le supprimer :

1. Cliquez sur l’élément que vous souhaitez cacher.

2. Cliquez sur l’onglet « Avancé » dans le bandeau latéral gauche.

3. Cliquez sur l’onglet « Responsive ».

4. Cochez tous les boutons « Masquer sur … » (ordinateur, tablette et mobile).

masquer element def

Pour dupliquer une section existante vous devez procéder presque de la même manière que pour dupliquer un bloc, il faut :

1. Sélectionner la section à dupliquer en cliquant sur l’icône.

2. Cliquez avec le clic droit sur la même icône.

3. Sélectionnez « Dupliquer ».

Cela placera la section dupliquée juste en dessous de celle qui existait déjà.

dupliquer section existante def

Si vous voulez ajouter ou changer la couleur de fond d’une section :

1. Sélectionnez la section que vous souhaitez changer en cliquant dessus.

2. Cliquez sur « Style ».

3. Si l’option n’est pas déjà cochée, cliquez sur « type d’arrière-plan classique » avec l’icône de pinceau.

4. Cliquez sur l’icône qui se situe à côté de la petite planète.

5. Choisissez votre couleur.

changer couleur fond section def

Pour changer l’ordre des différentes sections d’une page,

1. Maintenez votre clic gauche sur l’icône de la section (voir icône ci-contre).

2. Déplacez votre curseur jusqu’à l’emplacement que vous souhaitez (vous pouvez vous repérer grâce à la ligne violette qui apparait au déplacement d’un bloc).

3. Relâchez le clic.

bouton section def

Il est important dans un premier temps de différencier les deux termes : margin est l’espacement en dehors du bloc sélectionné tandis que padding et celui à l’intérieur du bloc.

 

Par exemple dans l’image suivante, on peut voir que le margin du container c’est l’espacement entre son bord et le bord de la colonne, alors que le padding est l’espacement à l’intérieur : entre le bord du container et le bord de l’image.

schéma explications espacements padding margin

Peu importe le bloc dont vous voulez changer l’espacement,

1. Sélectionnez le bloc que vous souhaitez changer en cliquant dessus.

2. Cliquez sur l’onglet « Avancé » du bandeau latéral gauche.

3. Vous pouvez changer le margin ou le padding en entrant des valeurs (en pixels) dans les différentes cases.

espacement margin padding def

A noter que lorsque vous rentrez une valeur, elle s’applique sur les 4 côtés de votre bloc. Si vous voulez entrer des valeurs personnalisées à chacun des côtés, vous devez cliquer sur l’icône de chaine qui se situe à droite des colonnes de valeurs.

Ajouter une nouvelle page (intermédiaire)

Si vous voulez ajouter une nouvelle page dans votre site, il est conseillé de dupliquer une page existante pour garder le même style de page et pour éviter de devoir tout refaire de zéro. De plus, la page ajoutée sera en « brouillon » et ne sera donc pas visible par les utilisateurs du site. Pour publier une page cliquez sur « Modifier avec Elementor » et publiez la page en cliquant en haut à droite sur « Publier ».

 

Pour dupliquer une page existante, 

1. Rendez-vous dans l’onglet « Pages » de WordPress.

2. Cliquez sur « Dupliquer cela » lorsque vous survolez une page avec votre souris.

dupliquer une page def

Modifier mon site avec l'éditeur WordPress

Certaines parties de votre site peuvent être construites sans Elementor, directement avec l’éditeur natif de WordPress, comme la section « Articles ». Cette section n’est pas toujours utilisée sur tous les sites.

Pour le vérifier, rendez-vous dans l’onglet « Articles » du menu latéral gauche de WordPress. Si vous voyez des articles déjà présents ou des contenus correspondant à ce que vous souhaitez afficher alors cette fonctionnalité est bien utilisée sur votre site et cette partie vous concerne.

Le fonctionnement global

L’éditeur WordPress fonctionne globalement de la même manière que les blocs « Éditeur de texte ». Vous pouvez intégrer du texte, des titres, des images ; les mettre en gras ou soulignés, etc.

 

Pour modifier l’une de ces pages il faut :

1.  Cliquer sur l’onglet « Articles ».
2. Survoler la page à modifier et cliquer sur « Modifier ».

menu articles wp
wp modifier article def

Ajouter un titre sur votre article

Vous pouvez ajouter un titre global à votre article en entrant du texte dans la partie centrale où il est écrit « Saisissez le titre ».

saisir titre wp

Ajouter le contenu de votre article

Pour ajouter le contenu de votre article,

1. Cliquez dans la partie « SAISIR « / » POUR CHOISIR UN BLOC  ».

2. Écrivez « /CLASSIQUE ».

3. Sélectionnez le bloc qui est apparu.

4. Cliquez sur « Modifer les contenus ».

ajouter contenu article wp
ajouter contenu article wp2
ajouter contenu article wp3

Vous avez maintenant accès à l’éditeur de contenus classique et pouvez désormais :

1. Changer le style du texte que vous écrivez (paragraphe, texte de niveau 1, texte de niveau 2, etc.).

2. Changer la couleur du texte sélectionné.

3. Changer la mise en forme en alignant le texte à gauche, au centre ou à droite.

4. Ajouter des médias (images).

5. N’oubliez pas d’enregistrer vos changements en cliquant sur le bouton « Enregistrer » en bas à droite !

integrer contenu article def

Une fois votre contenu rédigé, vous avez la possibilité d’enregistrer votre brouillon, avec le bouton « Enregistrer le brouillon » afin que la page ne soit pas publiée et visible par tous, ou alors vous pouvez la publier en cliquant sur le bouton « Publier » disponible en haut à droite.

enregistrer wp
Retour en haut