Download MANUEL D`UTILISATION WORDPRESS

3 Rue Paul Chatrousse, 92200 Neuilly-sur-Seine - 01 47 45 82 01 - [email protected] -Du mardi au samedi - 10h 30 à 19h 00
MANUEL D’UTILISATION WORDPRESS
Thème The7child
SOMMAIRE
SOMMAIRE
L’ESSENTIEL DE L’UTILISATION.......................3
PAGES................................................................................................................4
REVOLUTION SLIDER.......................................................................................7
LAYER SLIDER WP............................................................................................10
LES ONGLETS IMPORTANTS..........................12
MEDIAS...........................................................................................................13
PORTFOLIO....................................................................................................15
WOOCOMMERCE ET PRODUITS...................................................................16
APPARENCE -> MENU....................................................................................17
OPTIONS THEME............................................................................................17
FAQ ou NE PAS OUBLIER...............................18
FF
L’essentiel de l’utilisation
3
JAB-NEUILLY
PANNEAU D’ADMINISTRATION
soit : le texte et les images du site.
Tout se passe dans l’interface d’administration suivante : www.jab-neuilly.com/wp-admin
Vous aurez besoin des onglets du menu, (situé à gauche de l’écran dans la barre noire) suivants :
1. Pages
2. LayerSlider
3. RevolutionSlider
PAGES
Permet l’accès à chacune des pages
4
FF
On rentre donc dans la page accueil et on accède à l’interface utilisateur de gestion de la page avec des
possibilités d’ajouter des éléments, types bloc de texte, des images, le tout en l’animant si l’on souhaite .
un élément déjà existant.
Nous remarquerons que le site est principalement une suite de bloc imbriquer les uns à côtés des autres
dans une ligne ou un élément unique prenant toute la largeur de la ligne.
mêmes.
1. Add element : Ajoute un élément type slider, image, portfolio, marge (gap), vidéo etc directement dans
une nouvelle ligne.
2. Add row : Ajoute une ligne dans la page. On pourra mettre ensuite des éléments.
3. Le + : doublon ou autre façon d’ajouter une ligne
4.
5. Ex d’élément dans une row il s’agit ici d’un élément permettant de créer une marge de 40 px
5
JAB-NEUILLY
Si on observe l’illustration précédente on peut remarquer qu’une row ou ligne se distingue d’un élément
par sa couleur grise contrairement à un élément qui lui
est blanc (revolution slider, Gap etc.).
de la ligne en survolant l’onglet en haut à gauche de
chacune d’elles.
Certains de ces éléments sont assez intuitifs.
En revanche d’autres sont un peu plus complexes. Par exemple si on ajoute un élément Revolution slider
dans une ligne, il faudra au préalable aller créer le slider puisque ici nous allons seulement intégrer l’outil.
Dans votre cas, les sliders sont déjà crées il n’y aura donc pas de problème.
de «Pages» et aller dans Revolution Slider qui se trouve lui aussi à gauche dans la barre de menu du panneau d’administration.
6
FF
REVOLUTION SLIDER
Avant d’ajouter par exemple l’élément «Revolution slider» que l’on peut apercevoir sur la page précédente,
votre page d’accueil.
tration (3 de la première illustration).
SliderPrincipal : Le Grand Slide principal de la page d’accueil
-
Create New Slider : fonction pour créer un nouveau slider dans lequel on mettra les images et les textes
éventuels.
Clic -> sliderPrincipal. On arrive sur l’illustration ci-dessous.
On voit qu’il y a des champs obligatoires à renseigner et les dimensions du Slide «Grid Settings» puis sur la
droite plusieurs option de décoration et d’animation du slide qu’il faut tester. Ce serait trop long à passer en
revue.
Ici nous avons les informations principal du Slider.
Un slider comprend plusieurs slide en théorie mais ce n’est pas obligatoire pour que ça fonctionne.
7
JAB-NEUILLY
Nous allons nous concentrer essentiellement sur la page suivante que l’on peut atteindre en cliquant sur
Edit Sides (3)
Nous arrivons à ce panneau
New Slide : On ajoute de nouveau slide (images et texte) ici.
8
FF
En cliquant sur le (2) Edit Slide nous rentrons dans le détail.
Change image : permet de changer l’image
L’icône permet de sauvegarder
Add layer : Permet d’ajouter un slide transparent pour le texte
En dessous : c’est ici qu’on choisit la police, et qu’on écrit ce que l’on souhaite, ajout de boutons etc.
Animation : Comme on peut le constater les calque sont envoyés l’un après l’autre. Chaque bande corres-
9
JAB-NEUILLY
LAYER SLIDER WP
Le principe est à peu près le même que Revolution Slider.
Nous nous trouvons ici avec
Add New : qui permet d’ajouter un slider
collecArchidec : un slider créer dans lequel nous allons travailler. Il y a le slider egalement de créer «ambiance».
On y accède en scrollant avec la souris (voir page suivante).
10
FF
2. Ici on servira plus tard du shortcode que l’on voit dans l’illustration plus bas.
Simplement en insérant ce code le slider fonctionnera.
11
JAB-NEUILLY
LES ONGLETS IMPORTANTS
12
FF
Il s’agit des autres onglets du menu de droite dans la barre noire de navigation du panneau d’administration.
Ils seront moins utilisés mais pratiques à connaître et nécessiterons parfois d’y aller. Car en effet, nous allons
MEDIAS
images, etc. On ne l’utilisera pas trop car en réalité la plupart des images que l’on ajoutera ne se feront pas
ici. Elles se feront dans les éléments comme Add elements : images, revolution slider, layerslider etc. C’est à
1. Pour rentrer dans le média, voir tableau suivant,
2. Pour ajouter manuellement un média.
13
JAB-NEUILLY
voir ci-dessous.
14
FF
PORTFOLIO
Voir le portfolio des canapés à la page «Collection de meubles» en dessous de l’animation. C’est pareil, on
ajoute chaque photo dans l’onglet portfolio dans la barre à gauche noire.
Lorsque l’on ajoutera un élément portfolio dans le site il prendra toutes les photos du portfolio.
Si on souhaite plusieurs portfolio différents, nous affecterons la même catégories aux photos que l’on souhaite voir appartenir à tel ou tel portfolio.
Exemple : si je souhaite une portfolio avec les produits Londres, Lisbonnes, Prague et sur une autre page un
autre portfolio avec Barcelone Varsovie et Copenhague, nous affecterons la même catégorie aux 3 premiers
l’élément de la ligne.
Add New : permet d’ajouter une nouvelle image et son descriptif
Catégories : on voit bien qu’ici c’est vide, donc toute apparaîtront si nous insérons un portfolio dans une
page.
15
JAB-NEUILLY
Nous ajouterons également la photo désirée en image à la une et Add/Edit Project, comme indiqué sur l’illustration ci-dessous.
WOOCOMMERCE ET PRODUITS
photos.
Add produit: Comme son nom l’indique ;) Il apparait donc ensuite en dessous car il s’agit de la liste des produits déjà présents..
Nous rentrons à présent dans le 2
16
FF
1. Image à la une : Nous ajoutons l’image du produit ici
2. Nous renseignerons les infos du produit à cet endroit (prix, promo etc.)
APPARENCE -> MENU
est pratique car c’est ici que l’on gère le menu. chaque nouvelle page crée s’in-
OPTIONS THEME
Polices, couleurs de certains aspect du site exemple le vert qui viennent en com-
17
JAB-NEUILLY
FAQ
ou
NE PAS OUBLIER
18
FF
la page que la sauvegarde est proposée.
TOUJOURS FAIRE UNE SAUVEGARDE DE CES MODIFICATIONS
MENU : Pour changer l’ordre du menu Apparence -> menu
Les autres onglets... Ne devraient pas être nécessaire dans les mises à jour du site.
BONNES VENTES...
19