
French: 
Salut à tous! Aujourd'hui, nous faisons l’effet 3D à
cette image de téléphone avec effet de Parallaxe. On peut le faire
avec presque n'importe quel arrière-plan, n'importe quelle couleur de téléphone et presque n'importe quel type d'image ou de capture d'écran
Vous avez besoin de Elementor Pro, d'une maquette de téléphone
et d'une capture d'écran de l'application. Ni Photoshop
ni aucun autre logiciel n'est requis car
nous utiliserons un outil Web gratuit pour préparer
nos actifs. Et si vous cherchez une maquette de téléphone, vous trouverez certainement une bonne
sur templatemonster.com où j'ai en fait pris celle que j'utilise dans cette vidéo. Donc, voilà.
Commençons par les actifs. Nous allons utiliser
l'outil en ligne gratuit appelé Photopea.
C'est super facile à utiliser car c’est similaire à Photoshop. Mais bien sûr, vous êtes libre
d'utiliser d'autres outils. Donc, déposons le fichier PSD
avec les maquettes téléchargées ici, supprimons
supprimons toutes les trucs supplémentaires comme ombres et
reflets, et supprimons le conteneur d'écran.
Maintenant, changeons les dimensions et la taille de notre maquette. Cela signifie que je dois changer
la taille de la toile. Je vais opter pour les valeurs suivantes
et dans votre cas, elles peuvent être différentes
mais il est important que vous mémorisez les proportions car notre capture d'écran devra
avoir le même rapport et changer la couleur de l'espace réservé au  blanc. Et si vous vous demandez

English: 
Hey you guys! Today we're making this 
3D-ish phone with Parallax effect. It can
be done with pretty much any background, any phone color and almost any kind of image or screenshot.
You need Elementor Pro, a phone mockup
and an actual app screenshot. No Photoshop
or any other software is required because
we'll use a free web-based tool to prepare
our assets. And in case you need a phone mockup, chances are you'll find something you like
at templatemonster.com where I actually got the one I'm using in this video. So that's it.
Let's start with the assets. We'll use
the free online tool called Photopea.
It's super easy to use because it's so similar to Photoshop. But of course you're free to
use any other tools. So, let's drop a PSD
file with the mockups we download here, delete
all the extra stuff like shadows and
reflections, and delete the screen container.
Now, let's change the dimensions and the size of our mockup. It means that I need to change
the canvas size. I'll go for the following
values and in your case, they might be different
but it's important that you memorized to aspect ratio because our screenshot will need to
have the same ratio and change the color of the placeholder to white. And if you're wondering

English: 
Why we need the white backgrounds and couldn't just export the mockup with transparent screen,
here is why. We will have a closer look
at how it works later in the video. If you
have a gray or almost white phone mockup or phone or any other color, also set placeholder
color to white. We're done with the mockup. Make sure it has no background and save it
as PNG. When saving, I can even pick a bit smaller image size. It won't hurt cuz we don't
need the mockup to be super sharp unlike the screenshot. Now, the image is saved, let's bring our screenshot
in the same project file. You can edit your
screenshot in a separate tab, but to remember
that you need to preserve the same aspect ratio. Scale it up a bit, so the contents are closer to the edges and save it as JPG or PNG.
Here we go. We got our assets prepared. Now, the simple part is left - putting it altogether in the Elementor
editor, I'll jump to my page and create a
new section, I put some content on the left
just for the context. Adjust the height of
the section and set the vertical align inside
the column to 'Middle'. Now it's time to bring in the phone. I'll drop an inner section here
and delete the second column. So it looks
just like that. Why? Because this way we'll

French: 
pourquoi nous avons besoin des arrière-plans blancs et ne pouvons pas simplement exporter la maquette avec un écran transparent,
voici pourquoi. Nous verrons de plus près comment
cela fonctionne plus tard dans la vidéo. Si vous avez
une maquette ou un téléphone gris ou presque blanc ou de toute autre couleur, définissez également la couleur de l'espace réservé sur blanc
l'espace réservé sur blanc. Nous avons fini avec la maquette. Assurez-vous qu'elle n'a pas de fond et enregistrez-la
au format PNG. Lors de l'enregistrement, je peux même choisir une taille un peu plus petite. Ça ne fait rien car nous n'avons pas besoin
que la maquette soit super nette contrairement à la capture d'écran. Maintenant, l'image est enregistrée, apportons notre capture d'écran
dans le même fichier de projet. Vous pouvez modifier votre capture
d'écran dans un onglet séparé, mais souvenez-vous que
vous devez conserver le même rapport hauteur / largeur. Redimensionnez-la un peu, de sorte que le contenu soit plus proche des bords et enregistrez-la au format JPG ou PNG.
Voilà. Nous avons préparé nos actifs. Maintenant, la partie simple est terminée - il faut la transférer complètement dans l'éditeur Elementor
je vais sauter sur ma page et créer un
nouvelle section, Je mets du contenu à gauche
juste pour le contexte. J'ajuste la hauteur de la
section je règle l'alignement vertical à l'intérieur de
la colonne sur 'Middle'. Il est maintenant temps d'apporter le téléphone. Je vais déposer une section intérieure ici
et supprimer la deuxième colonne. Donc ça ressemble à ça.
Pourquoi? Parce que comme ça, nous pourrons

English: 
be able to create multiple layers of motion effects for our object. I know that's not
the best practice to use a lot of inner sections across your page, because it makes the page
structure more complex. But if you do it
once, it won't ruin your site. So, there we
have our container for your phone. And to add the mockup, I'll go to the inner section settings
-> "Background Overlay", bring in the phone PNG, and bring up the opacity. Set the following
values for the 'Position' and 'Repeat' and
for the 'Size' - select 'Contain'. Now we'll
add our screenshot. Go to the background tab, upload your image, by the way, make sure you
optimize images on your site and set it as
the 'Section Background'. Now it's there but
the mockup is covering it. To fix that go back to 'Background Overlay' and set the 'Blend
Mode' to 'Multiply'. Now all the areas of
the mockup that are completely white become
transparent. Now we'll adjust the background image properties the following way, just like we did
with the mockup, but the size option to pick is not 'Contain', but 'Custom'. This way we can tweak
the size of the image so it fits perfectly
inside the phone frame. Now, adding the motion
effects to the background image, we're still in the settings of the inner section background

French: 
créer plusieurs couches d'effets de mouvement pour notre objet. Je sais que c'est pas
la meilleure pratique d'utiliser beaucoup de sections internes sur la page, car cela rend la structure
de la page plus complexe. Mais si vous le faites une fois,
cela ne ruinera pas votre site. Donc, là, nous avons
notre conteneur pour votre téléphone. Et pour ajouter la maquette, je vais aller dans les paramètres de la section intérieure
-> "Background Overlay", apporter le PNG du téléphone et évoquer l'opacité. J'ai défini les valeurs
suivantes de 'Position' et 'Repeat' et pour le 'Size' - je sélectionne 'Contain'. Nous allons maintenant
ajouter notre capture d'écran. Accédez à l'onglet background, téléchargez votre image, en passant, assurez-vous d’avoir
optimisé les images sur votre site et définissez-la comme
'Section Background'. La voilà, mais
la maquette la couvre. Pour résoudre ce problème, revenez à 'Background Overlay' et définissez 'Blend
Mode' sur 'Multiply'. Maintenant, toutes les zones de la
maquette blanches deviennent
transparentes. Nous allons maintenant ajuster les propriétés de l'image d'arrière-plan, comme nous l'avons fait
avec la maquette, mais l'option de taille à choisir n'est pas 'Contain', mais 'Custom'. Ainsi,nous pouvons modifier
la taille de l'image afin qu'elle s'adapte parfaitement à
l'intérieur du cadre du téléphone. Maintenant, en ajoutant les effets de mouvement
à l'image d'arrière-plan, nous sommes toujours dans les paramètres de l'image d'arrière-plan

English: 
image. And let's enable the 'Mouse Track'
and change the speed to 0.6. This is what
we've got. Now, you could think: "Well, let's add motion effects to the inner section to
make your phone move", but we don't have this option here. But there is a workaround!
Go to the settings of the parent column -> Advanced settings -> Motion effects and enable 'Mouse
effects'. Turn on the 'Mouse track', change the direction to direct and bring the speed down
a little bit. Next 3D tilt. Leave it on 'Direct',
and set the speed to around 2. There it is!
Now you've got your fake 3D phone effect. Play around with the values and figure out
what works best for you. The process is completely the same for any other background and for
phones of other colors, and if your phone
mockup is of a different shape and you can
see the screenshot edges peeking out, just adjust the screenshot size so it fits inside
the phone frame. Well, that is it. That's how we create this effect with Elemento Pro and Motion
effects. If you like the video, thumbs up
and some nice comments are appreciated! Subscribe
and leave a request if you want more tutorials like this one, and if you're ever need something
to speed up your creative process there is
templatemonster.com with hundreds of WordPress themes

French: 
de la section intérieure. Et activons 'Mouse Track'
et modifions la vitesse à 0,6. Voici ce
qu’on obtient. Maintenant, vous pourriez penser: "Eh bien, ajoutons des effets de mouvement à la section intérieure pour
faire bouger votre téléphone", mais nous n'avons pas cette option ici. Mais il existe une solution!
Accédez aux paramètres de la colonne parent -> Advanced settings -> Motion effects et activez 'Mouse
effects'. Activez le 'Mouse track', changez la direction à direct et réduisez un peu la
vitesse. Ensuite, l'inclinaison 3D. Laissez-la sur 'Direct',
et réglez la vitesse à environ 2. C’est tout!
Maintenant, vous avez votre faux effet de téléphone 3D. Jouez avec les valeurs et déterminez ce qui
vous convient le mieux. Le processus est complètement le même pour tout autre contexte et pour
les téléphones d'autres couleurs, et si votre maquette de téléphone
est d'une forme différente et que vous pouvez
voir les bords de la capture d'écran furtivement, ajustez simplement la taille
de la capture d'écran. C’est tout. Voilà comment nous créons cet effet avec Elemento Pro et effet
Motion. Si vous aimez la vidéo, mettez les pouces bleu
et laissez des commentaires! Abonnez-vous et laissez
une demande si vous voulez plus de tutoriels comme celui-ci, et si jamais vous avez besoin de quelque chose
pour accélérer votre processus créatif, il y a
templatemonster.com avec des centaines de thèmes WordPress

English: 
for Elementor, and other design assets like phones, illustrations and more, and even
a collection of Elementor WordPress themes for your app! And I thank you for watching! Hope, you liked the video, see you in another one!

French: 
pour Elementor, et d'autres éléments de conception tels que les téléphones, les illustrations etc, et même
une collection de thèmes WordPress Elementor pour votre application! Merci d'avoir regardé la vidéo! J'espère que vous l’avez aimé, on se revoit bientôt dans une autre!
