Retranscription vidéo
salut c’est alex aujourd’hui je vais
vous montrer comment mettre en place un
slider révolution sur wordpress
allez c’est parti alors simplement pour
refaire un petit récapitulatif
hier j’ai donc mis en place le menu la
de du dessus cette partie là maintenant
ce que je souhaite faire c’est vous
voyez ici en dessous là il ya il va y
avoir ce qu’on appelle un slider donc un
élément qui va être amené à bouger et
surtout ça va être le premier élément
finalement que les utilisateurs
électeurs qui vont revenir sur mon site
vont voir donc c’est quelque chose qui
est vraiment important de peaufiner et
donc pour cela j’utilise est donc
actuellement c’est mon site qui est en
état ok si vous tapez traîneau dot com a
point comme vous allez tomber dessus à
la slider révolution vous allez voir
c’est ce qui va créer ce sentiment
mouvement en fait vous voyez avec sa tak
tak petit texte qui apparaît les boutons
qui apparaissent comme ça là l’image
aussi qui apparaît d’une certaine façon
donc ici en a plusieurs
j’ai pas du tout à en créer plusieurs
jeux ont créé qu’un seul parce qu’en
fait le bouton ici pour pour switcher et
pas forcément évident et je pense que
personne de switch pour passer d’un
slider à l’autre et au final c’est
beaucoup de de volume et de quantité de
contenu pour pour rien donc finalement
je vais ses deux boutons et sitac est
ici le n’aura pas l’objectif aussi pour
moi c’est que là vous voyez typiquement
c’est pas du tout optimisé pour l’écran
pour mon écran et donc ça typiquement va
falloir c’est bien trop long en fait
donc s’associent un élément ici là
falloir que je que je réduise
alors pour faire ça
vous allez vous rendre sur wp tirer
admin up et d’ailleurs je vous montrais
ça depuis ici ce sera plus simple donc
là ici vous allez vous rendre sur
modifier la page
voilà modifier la page le voyez tout en
haut
s’écrie slider révolution donc c’est
exactement la petite image qui sait
qu’ils étaient en mouvement auparavant
ça se traite à partir d’ici donc bien
évidemment pour chaque page différente
vous pouvez mettre un slider révolution
différents sachant que si vous voulez
aussi accéder à l’ensemble des menus
style leur évolution
vous pouvez aussi accéder directement
via ici d’accord
sachant que quand on est là sur la page
alors c’est pas très évident donc quand
vous allez dans la vad à tout en bas et
écrit donc fusionnent pêche auction et
la slider’s et donc typiquement et si ça
vous permet de choisir le nom le bon nom
de de sneijder
donc ce que je vais faire je me rende
sur edit slider de ce que je vais faire
c’est que je me rende ici de lasser les
différents paramètres pour le slider que
je vous ai montré auparavant est donc
lié pour moi ça va être de faire en
sorte tac de dupliquer et je puisse à
tout et non traîneau
mon père et ma mère qui est dupliqué
fait j’ai simplement pris le slider qui
fonctionnait bien et là je le copie pour
avoir une autre version
donc une fois que ça qu’on a ça
maintenant je pouvais faire mieux
modifications donc je clique dessus et
donc là la foule la manière dont ça
fonctionne vous voyez donc ici il ya
trois slide donc ces trois celles que
j’ai fait défiler tout à l’heure ici
c’est le font pour avec la couleur et là
vous voyez donc on a le le slider ça
fonctionne un peu comme une vidéo dont
par exemple typiquement si vous appuyez
ici vous allez différents éléments qui
vont se lancer en fonction de votre
votre volonté en fonction du timing et
le typique mans si vous appuyez ici sur
play vous allez voir en fait
hop voilà la mise en
effectivement de l’ensemble du du du
slider révolution qui se met en place
ok donc là par exemple si vous cliquez
sur le deuxième vous êtes simplement
tombé finalement sur le deuxième stade
de révolution qu’on pouvait obtenir
donc pour moi l’idéal est assez simple
c’est que vous voyez donc là tout est
paramétré donc à la seconde près
pour moi l’objectif ça va pas forcément
être de tout modifier ici et de tout
changer ici vous pouvez changer le
timing de la manière dont vous le voulez
je trouve un titre personnel que ça nous
dit qui est puissant mais qui peut être
extrêmement consommateurs entend
rapidement
donc moi ce que je vais faire c’est que
je vais partir donc du slide un et je
vais leur travail et en attendant on l’a
hop je vais effacer les autres slider
qui vont pas être utile
effacée et donc ici on sauvegarde
je trouve que l’interface est pas
forcément optimum parfois c’est un peu
ça va être un peu c’est un peu difficile
de mon point de vue de trouver les infos
mais bon voilà quand on quand on en fait
un petit peu ça ça fonctionne donc la
première chose qu’on va faire donc notre
modèle nous il est ici donc bah on va
faire exactement la même chose en tout
cas tenté de faire exactement la même
chose donc pour cela hop
première chose à faire
ça va être de voir qu’elles sont voilà
quels sont les coûts
utilisée ici dans le gradient pour le
faire en sorte que ça s’applique ici
donc voyez ici donc on a colonnes la
salle avec l’arrière-plan donc j’ai
cliqué qui cliquaient sur colored
ensuite j’ai cliqué donc l’assaut des
cols des solides color soit gradient et
de compliquer la et ensuite vous allez
mettre le connaître tout simplement ici
hop
ils ont reproduit la même chose tac
color up et en copie ok tac
donc ça c’était la première chose à
faire
donc voyez déjà on a un changement à ce
niveau là parfait ensuite
alors vous souhaitez augmenter votre
trafic organique je veux simplement
copié d’ailleurs
c’est un peu quand on clique dessus et à
cette petite fenêtre qui s’ouvre là et
là pour si vous savez pas quand il ya un
br avec un slash après ça veut
simplement dire sauter la ligne hop
donc voilà on qu’on a ça alors ce qu’on
va faire
hop on va changer ici la police pour m
goodyear qui est donc le police la
police qui nous intéresse ensuite ici
c’est la taille donc on va la réduire
on omet 55 hockey
donc c’est notre premier c’est fait pour
notre premier une première partie
ensuite alors tac découvrez notre
technologie mems à une même idée
logis pardon up alors
découvrir nos logis nous quand nous
conseille pour augmenter votre
visibilité
alors on va mettre ça ici ok donc celui
ci c’est ça
6 ok up hockey
donc là elle a pas un parti elle est
faite au niveau du texte
ensuite alors on a donc les la partie
blog
donc ça c’est donc on va le marquer hop
donc ça s’appelait blog est ici au
revoir une partie qui va s’appeler
service ok donc ensuite on va cliquer
sur ce bouton est donc on va appliquer
les mêmes types de couleur jeu sera
amené à évoluer au niveau des couleurs
up alors arrière-plan tac
donc on va coller ça ici ok est ce que
pop
donc ça la police ça sera donc goudé a
aussi hop et on va mettre 15 pour
augmenter la taille comme ça j’utilise
simplement ma flèche du haut sachant que
up
en fait c’est ça que j’aime pas trop
avec cette interface est que parfois il
ya des choses qui sont sélectionnés et
je ne souhaite pas qu’ils le soient
un peu la même façon effectivement de
sélectionner quand vous galérez un peu
pour pour saisir le texte qui vous
intéresse vous pouvez directement le
sélectionner via cette ba est donc ce
que je veux faire ici c’est que alors
vous voyez là l’idée c’est que lorsqu’on
va passer au dessus je veux que le
bouton change de couleur et donc
obtienne ce jaune est donc là pour le
coup c’est pas forcément simple j’ai un
peu tâtonné au début pour pour trouver
comment faire
et en fait faut se rendre ici sur survol
et une fois vous êtes sûr survol vous
allez pouvoir changer alors ça c’est le
la police hop et donc effectivement un
changement de police aussi ici
ok maintenant si on tourne sur i do vous
voyez quand on passe dessus la couleur
change
bon donc ça c’est pas mal maintenant il
va falloir faire la même chose pour
celui là
hop c’est pour ça que c’est vraiment
pratique d’avoir un template à côté
parce qu’ici il suffit de suivre le
entre guillemets les instructions qu’on
était fixé au départ et ça rend vraiment
la chose de beaucoup plus simple
finalement
vous voyez à typiquement elle le fait de
chaque fois tâtonner
sinon d’une pour la police pour la
couleur pour jour des choses n’ont
finalement rapidement lorsqu’on n’a pas
fixé au départ des sortes de règles par
rapport à ça eh ben ça devient
rapidement difficile finalement à à
tenir
hop
ap là on en compte change pour goode et
hop
donc voilà pour le moment on a quelque
chose comme ça alors ensuite le dernier
changement qu’on va faire c’est au
niveau de l’image alors fermé ça si je
peux up
alors est-ce que ce qu’il faut faire
c’est qu’il faut simplement
double-cliquez sur sur l’image est
ensuite téléverser les fichiers alors
sélectionner des fichiers
alors donc là et surtout hainaut je
pourrais effectivement c’est une image
en fête donc cette image qui ici que
donc je vais vouloir importer
c’est quelque chose que j’ai déjà milieu
au bon format
ici donc ce que j’ai simplement fait en
fait c’est que j’ai pris
l’image qui existantes
donc j’ai pris 7
l’a1
et il est simplement apporter va ramener
sur sur illustrator et en plus derrière
général on peut voir la taille aussi
pour voir la taille de taille d’une
image il faut aller dans média et
ensuite bibliothèque
je vais vous montrer
e
ce que ces voix là ok donc c’est en
cliquant sur ce lien vous voyez ici on a
la taille de limoges
donc ça c’est quelque chose qui est
pratique parce qu’en fait parfois avec
avec sneijder révolution c’est bien les
cd de précis notamment au niveau corse
que lorsqu’il ya des temps plein qui
sont faits comme ça par défaut moi je
vous conseille vraiment d’essayer de
vous en inspirer au départ et pas de
partir de zéro
parce que sinon vous voyez typiquement
toutes ses configurations comme ça c’est
assez difficile à faire c’est pas
impossible mais ça va vous prendre
beaucoup beaucoup de temps et donc pour
ça moi je vous conseille vraiment de
partir du template de base donc là
typiquement pas ce que j’ai fait c’est
que j’ai pris donc cette image à la
bonne dimension et ensuite j’ai
simplement collé mon image à moi avec
les mêmes dimensions que l’image qu’ils
présentent à l’heure actuelle et ensuite
de les sauvegarder
ok donc maintenant nous sommes en double
clic sur l’image et donc on met à
sélectionner des fichiers
donc voilà c’est celui-ci typiquement
donc on a quelque chose qui n’est pas
très lourd et qui veut fonctionner donc
on va importer
ok insertion hop voilà donc pour le
moment on a quelque chose qui ressemble
à ça maintenant toute la
tout le challenge entre guillemets avec
avec celle de révolution vous allez voir
ce à partir de maintenant et c’est le
moment où finalement parfois on pourrait
avoir tendance à peut-être un peu se
décourager alors vous allez sur vous
rendre sur le site donc maintenant qu’on
a sauvegardé et en fait on va faire un
test sur la page réel ok donc là bien
évidemment on va sur l’ancienne version
donc ce qu’on va faire c’est qu’on va
donc modifier la page et on va venir
associés le slameur révolution convient
de créer sur cette page
donc pour cela vous allez tout en bas et
vous allez sur donc slider seuils de
révolution est donc on va aller sur toi
nos widgets pour mettre à jour est donc
maintenant quand on fait donc preview
hop voilà donc
notre création qui est ici donc là il ya
deux choses qu’on va qu’on va faire
c’est premièrement vous voyez n’est pas
du tout bien centré d’une part et
d’autre part j’aimerais en fait vous
voyez ici la longueur elle s’arrête là
et finalement il ya tout ça donc à peu
près entre la et là qui n’apparaît pas
sur l’écran unodc typiquement c’est
quelque chose qui ne sert à rien et donc
je vais réduire aussi sur celle de
révolution ok alors pour cela ce que
vous allez faire donc on va vraiment on
va bien sauvegarder et vous allez vous
rendre sur paramètres slider voilà vous
voyez les différentes possibilités que
j’essaye de révolution vous pouvez
couple et ce à un coût commerce
instagram avec vos posts wordpress bref
il ya vraiment moyen de faire des choses
sympas donc moi par exemple a
typiquement ce que je vous ai dit tout à
l’heure je ne veux pas forcément avoir
de flèches comme ça parce qu’il y aura
un seul le slider révolution
par par page donc je vais m hersen donc
vous voyez c’est vraiment une seule page
pleine largeur ça c’est bon ensuite la
par exemple au niveau du de la taille
c’est ça en fait qu’on va devoir
modifier donc pour savoir quel est votre
taille
depuis un radar vous allez vous rendre
sur telle option
le voilier
écrit cit ritz et donc typiquement ça
c’est la taille que fait votre votre
site web en largeur ok donc ce qu’on va
simplement faire c’est qu’on va hop on
va mettre ça ici et ensuite on va mettre
l mettons ici quelque chose comme ça ok
même principe pour le second là et on va
mettre un peu plus petits sachant que
le voilà donc en fonction de fonction de
vos envies bien évidemment vous pouvez
faire les ces changements là est atone
et petit à petit ce qui est un peu ce
qui est un peu bizarre entre guillemets
avec saïda révolution c’est que vous
allez voir sur mon écran donc là c’est
un écran de macbook air que vous voyez
bien je travaille sur l’ordi macbook air
est typiquement ça va être cette
résolution là qui va être pris en compte
plutôt que celle ci alors pour une
raison que j’ignore mais voilà c’est
c’est un petit moteur de cette étrangeté
disons de deux styles de révolution donc
on va enregistrer samatan n’a plus
besoin ce qu’on va faire on va retirer
le preview ici et vous voyez tech
maintenant c’est vraiment à la bonne
taille
donc pour ce qu’il va falloir faire bien
évidemment s’est recentré tout ça mais
là on a tous le tout l’image qui était
présente ici auparavant
on l’a on a réglé ok donc une fois que
ça c’est fait vous allez vous rendre sur
donc slide editor
est-ce qu’on va simplement faire c’est
qu’on va remonter alors une autre
subtilité aussi qui était pas forcément
simple à voir au départ avec celle de
révolution c’est que vous voyez ici il
ya trois écrans donc ça typiquement ça
va être pour les différents formats et
par exemple la cie admettons tout de
suite maintenant je vais sur le site web
voyage je vais vous montrer maintenant
et que je réduis voyez il ya du texte
qui est coupée ok donc là typiquement là
c’est pas du tout optimum donc ce qu’on
va faire maintenant c’est qu’on va
corriger la la manière dont ce texte à
paris sur les trois types de d’appareils
donc ça typiquement ce qu’on va faire
hop c’est qu’on va remonter
ça c’est un petit objet aussi quoi
pourra remonter aussi ensuite tac ça on
le remonte ensuite ça on le remonte pas
trop petit matelas on peut aussi la
remontée un petit peu courte que ok
sauvegarder et c’est pour ça que
l’appareil en typiquement c’est bien
d’avoir une vie je suis comme ça mais
moi ce que je vous conseille tour c’est
de faire un peu entre guillemets l’aller
retour avec votre votre page que vous il
ya le goût que le slider révolution
pourvoir très rapidement parce que ça
donne en fait voilà donc là on est quel
sur quelque chose de pas mal de mon
point de vue
ça me semble pas mal
ok mais encore une fois comme je vous ai
dit tout à l’heure là si on réduit la
soirée du la page et qu’on tombe
typiquement sur la partie au responsive
donc téléphone là bas il faut encore le
corriger donc c’est ce qu’on va faire
maintenant up donc déjà on va se rendre
sur ordi et là vous voyez typiquement ce
qui est un peu bizarre c’est que
effectivement encore une fois la petite
excentricité de sliders révolution c’est
que là le changement que je veux faire
sur ordinateur portable donc ordinateur
portable c’est sur quoi je travaille à
l’heure actuelle finalement ça n’affecte
pas le la vraie vie que je vois depuis
mon ordinateur c’est celle du grand
écran alors peut-être que là ils ont
pris vraiment une résolution à une
taille d’écran vraiment petit
je ne sais pas mais c’est un peu dans
leur manière de faire est un peu bizarre
de mon produit
hop alors là pas
vous pouvez aussi changer la taille de
votre texte en fonction de ce qui vous
convient en fait
et là ça va affecter simplement là cette
vue là en fait ok alors
pique mois sur une situation que je
n’aime pas beaucoup avec google avec
sneijder évolution c’est que voyez si
typiquement j’ai mes boutons et
j’aimerais est sélectionné pour les
remonter mais j’ai pas accès j’arrive
pas et donc pour ça alors on va cliquer
ici et ensuite vous pouvez plus sur la
flèche du haut et ça à pouvoir vous
remontez votre bouton donc on est sur
quelque chose qui de mon point de vue
pas forcément optimum loin de là
est typiquement au début effectivement
quand je faisais laisser leur évolution
gera peu galéré pour trouver la manière
de faire
ok
et alors ça on va le bouger un petit peu
aussi celui-ci on va le mettre là
ça ça me paraît bien je les sauvegarder
ok et maintenant on va faire ça pour le
téléphone et vous voyez pas le téléphone
c’est vraiment important que cela tout
est coupé alors tant qu on va prendre ce
texte ceci est donc on va le réduire
ensuite c’est excellent on va grossir un
petit peu hop un les boutons sur
téléphone moi je vous conseille de
différer un peu plus gros hold up le
coup c’est un peu trop tech ce
qu’effectivement on veut pousser les
gens à à cliquer sur ce lien
alors pour centrer tech centre et
l’arrière-plan non alors transformé
arrière-plan non space un tel que ces
lignes et le texte centre et donc voyez
comment alors on est sur un quelque
chose qui de mon point de vue n’est pas
du tout facile à trouver
vraiment c’est vraiment pas simple et
bon après le boutis quand même
intéressant donc ça vaut le coup quand
même de de regarder à deux d’un peu plus
près ce que ça donne mais effectivement
je vous cache pas que lors de mes
premières utilisations de sliders
révolution j’ai eu un peu des soucis au
début valant pour pour trouver en fait
les différents éléments
ok alors ça est ce que c’est hop
moi
alors ensuite donc cette image là on va
la remontée
eon rae a diminué un petit peu encore un
peu
ok donc la une
donc on est sur quelque chose qui est
vraiment pas mal peut-être que ça je
veux grandir un tout petit peu pour que
ce soit à peu près égalisant à l’autre à
côté on s’est un peu approximatif up
ok bon je pense qu’on est sur quelque
chose de pas mal là donc ce qu’on va
faire c’est qu’on va on va vérifier ce
que ça donne
d’accord ça au poil
on va regarder ce que ça donne
maintenant
donc là je vais faire hop une mise à
jour bon je pense qu’on est sur quelque
chose qui est pas mal
peut-être que ça mériterait d’être un
tout petit peu baissé effectivement donc
on va revenir sur l’écran taki 6
ok même si j’ai descendu un peu l’image
bon voyons voir ce que ça donne
ok je pense qu’ils en aient sous quelque
chose qui me paraît bien ça me paraît
vraiment pas mal
et si on réduit up effectivement donc
vous voyez là on a là on a tous qu’il va
s’adapter correctement donc là c’est
parfait
ok t’es ok donc voilà là c’est donc
c’est fait de mon point de vue en tout
cas là y’a pas ça fonctionne bien
[Musique]
alors là
effectivement là pour le moment j’ai pas
encore de j’ai pas encore mais parce
qu’ils sont correctement configuré mais
le train des éléments qui va fort a
ajouté par la suite pour faire en sorte
que ces boutons soit actif parce que là
pour le moment en fait il si on clique
dessus ça renvoie sur rien donc en fait
ce qu’il faudra certainement faire
cefral sur cliquez sur votre bouton
aller sur actions et ensuite cliquer
simple lien est ensuite rajouté l’url
donc soit ça ouvre sur une nouvelle
fenêtre ça peut être sur une même
fenêtre
bref donc il ya deux trois paramètres à
faire à ce niveau là il n’y a rien de
très très compliqué donc voilà
voilà je
faire que cette vidéo donc sur slider
révolution ça vous aura plu ça vous aura
intéressé
vous avez vu c’est vraiment un outil qui
est extrêmement puissant en tout cas qui
permet de faire une présentation et un
design qui soit un peu un mot un peu
original donc ils sortent un peu du lot
et donc ça s’est vraiment bien
par contre effectivement c’est une plate
forme aussi ou un outil qui nécessite
qu’ils méritent parfois qu’on y passe un
peu de temps surtout quand on vraiment
quand on débute
l’agencement en tout cas de l’outil pas
optimum de mon point de vue mais une
fois qu’on sait le faire voilà après ça
va bien évidemment beaucoup plus vite
donc moi je vous en prie je vous invite
vraiment à essayer bien évidemment
d’améliorer votre site web
avec ce type d’outil attention quand
même là par exemple sur ce type d’outil
parfois peut être puissant d’un point de
vue visuel
par contre le pendant de ça c’est que ça
peut être ça peut prendre du temps à
charger et donc ça typiquement va
falloir faire une bonne balance un bon
mix entre un design de sites web qui
soit attractif et sympa d’à côté et une
vitesse de chargement pour votre site
web qui soit extrêmement rapide
c’est le bon rapport entre les deux
qu’il est important de trouver donc
j’espère que ça vous aura intérêt c’est
que ça vous aura plu est donc dans la
prochaine vidéo
je vais continuer à faire ma page
d’accueil et donc vous montrer comment
faire les choses avec havas da sachant
que je préfère vous le dire
là avec slider révolution c’était un peu
plus difficile disons ce qu’on va faire
par la suite
ça va être beaucoup plus simple avec de
l’agencement de textes agencement
d’image est globalement ça fonctionnait
extrêmement bien et ça va vous permettre
d’avoir quelque chose qui soit vraiment
sympa sur votre site web
allez à bientôt
