Transcription
1. Introduction: Bienvenue dans un autre
super cours de Skillshare avec moi, peut Besser. C'est toujours un plaisir
de vous accueillir ici. Voulez-vous savoir comment ajouter vecteurs
animés à
votre site Web comme celui-ci ? Je veux vous montrer comment
ajouter des fichiers chargés à votre site Web WordPress
avec Elementor, le fichier a été créé par l'équipe Airbnb et
il est open source. Et comme vous pouvez le constater, le service a été utilisé par des concepteurs et des développeurs de très
nombreuses entreprises du monde entier. Certaines d'entre elles sont aujourd'hui
les plus grandes marques du secteur technologique. Nous allons faire
tout cela gratuitement. Vous n'aurez pas à payer
pour un plug-in
ou un service avec toujours
plus de temps. Allons de l'avant et commençons.
2. Ajoutons les images animées: Nous voici dans mon tableau de bord. Il s'agit d'une toute nouvelle
installation de WordPress, donc je n'ai pas
installé de plugins sauf ceux
qui viennent par défaut. Je vais sélectionner
les deux en cochant cette case et en les supprimant. Je ne veux pas
les avoir là. Maintenant que nous
avons une ardoise propre, je clique sur Ajouter un nouveau. Et bien sûr, j'ai besoin
d'ajouter Elementor. Installez Elementor. Je dois mentionner que
Elementary a la possibilité d'ajouter
des animations à votre site Web, mais qui est disponible dans la version
Pro d'Elementor. Donc, si nous passons
au site officiel, comme vous pouvez le voir ici lors incroyables animations sur votre
site Web avec beaucoup de widgets. Vous devez passer
au pro pour
pouvoir utiliser cette fonctionnalité. Puisque cela est disponible
dans la version pro, existe-t-il un moyen de le faire
gratuitement sans dépenser d'argent ? Et la réponse est oui. revenant dans
notre tableau de bord, comme vous pouvez le voir ici, nous avons d'autres modules complémentaires
Elementor créés par des
développeurs tiers. Et certaines de ces
fonctionnalités supplémentaires sont gratuites avec ces modules complémentaires. Les fonctionnalités premium ou dans la version Pro de l'
élémentary elle-même. Nous voulons donc installer
des modules complémentaires premium pour Elementor. Et c'est le module complémentaire
qui nous donnera la fonctionnalité d'ajout d'
animations à notre site Web. Maintenant que nous les avons tous les
deux installés,
nous pouvons aller de l'avant et les
activer en
même temps en entrant dans les plugins
installés. Je vais les sélectionner tous les deux
en cochant cette case ici. Ensuite, je vais
dire activer et postuler. C'est vrai ? Et maintenant que les deux plugins sont
installés et activés, je dois mentionner que j'
utilise le thème Astra. Donc, si je rentre dans l'apparence, vous remarquerez que mon thème
actif est Astra. Je vais à l'intérieur des pages. Je vais
créer une nouvelle page. Appelons ça atterrir. Ensuite, j'irai ici
dans ces paramètres, je vais aller au modèle
Elementor pleine largeur. Ensuite, je vais
le publier. Probablement l'override de stat. Passons donc à Edit with Elementor car cela va être fait depuis le front-end. C'est vrai ? Nous y voilà. Ce que nous voulons faire, c'est en ajouter de nouveaux. Je souhaite ajouter une nouvelle section. Je vais donc ajouter cette section à
deux colonnes. Et dans cette colonne,
c'est ici que nous
ajoutons notre animation. Je vais donc cliquer sur le
signe plus ici. Et puis je suis venu ici,
je vais taper Lottie. Vous remarquerez que nous avons
la version élémental pro
et la version des animations de chargement premium. Donc, si nous cliquons sur la version
Elementor Pro, nous ne pouvons pas l'utiliser car,
comme vous pouvez
le voir, le journal ici indique que vous
devez avoir la version pro. Mais ce qui est bien, c'est que
nous avons bloqué le plug-in Premium Elementor Adams et qu'il nous permet d'ajouter les fichiers de
chargement à l'aide de celui-ci. Il nous présentera ici
les options d'édition premium d'
animations Lawdy. Et la première chose que
vous remarquerez, c'est que nous avons une source de fichiers. Dans la source du fichier,
nous avons deux options. Nous pouvons télécharger notre propre fichier, notre propre animation s'il est
dans le bon format. Nous pouvons également ajouter une URL externe. Nous allons donc utiliser
l'URL externe. Cela signifie que nous
devons récupérer une URL lors
du chargement des fichiers
et la déposer ici. Ira à l'intérieur du chargement des fichiers. Et ici, je vais
aller dans la barre de recherche et taper n'importe quel type
d'animation dont j'ai besoin. Disons donc,
par exemple, l'affûtage. Appuyez ensuite sur Entrée. Comme vous pouvez le constater, nous avons le choix entre plusieurs options
. La plupart d'entre eux sont gratuits, bien
sûr, il doit y avoir
des versions premium. Je vais choisir
peut-être celui-ci ici. Je vais donc cliquer dessus. Et cela fera apparaître cette fenêtre contextuelle avec tous les
détails dont nous avons besoin. Il s'agit maintenant de l'URL que
nous devons copier, donc je clique dessus pour la copier
, et maintenant elle est copiée. Je vais aller dans notre page
Elementor
et la coller dans ce champ. Il faudra un moment pour se présenter. là que nous l'avons. Maintenant, vous
remarquerez qu'il est trop petit. La première chose à faire est peut-être d'augmenter sa taille. Vous pouvez également simplement taper la taille dont
vous avez besoin directement ici. Disons 500. Ensuite,
mettons à jour cela. Prévisualisez les modifications.
C'est là que nous l'avons, l'animation sur notre site web. Vous pouvez donc ajouter
plus de détails à votre site Web. Vous voudrez
peut-être aller là. Shopping limité. Vous voudrez peut-être modifier
cette couleur de police. Peut-être que la topographie a changé la taille de la police
Montserrat. Peut-être. Je vais sélectionner
la colonne elle-même. Colonne qui retient cette zone. Allez à l'intérieur et allez à l'intérieur. Avancé. Décochez la marge, puis donnons-lui
une marge supérieure de 70. Très bien,
cliquez sur cette icône ici pour ajouter du texte. Cliquez
à nouveau dessus pour ajouter un bouton. Changeons le
bouton de couleur par ce jaune. Je vais donc cliquer sur le bouton. Et puis sous le bouton, sous Style, passez à la couleur. Ce jaune, juste ici. là que nous l'avons. Mettez à jour cela. Et prévisualisons les modifications. Peut-être pourriez-vous donner à ces
polices une couleur bleue. Je vais choisir cette consistance de couleur bleue et
brune. Et maintenant, le bleu correspond
au bleu là-dessus. Et puis cliquons sur cette animation Lawdy en
entrant dans le style. Comme vous pouvez le constater, nous avons ici
de nombreuses options différentes. Nous pouvons également augmenter
la vitesse de l'animation. La vitesse augmentera par
petites incréments
car, comme vous pouvez le constater, nous augmentons en points. Et nous pouvons également choisir ce qui
déclenche l'animation. Peut-être en survol, quand
quelqu'un le survole, c' est à ce moment
qu'il s'anime. Sur défilement. Lorsque quelqu'un
a besoin de défiler, c'est à ce moment qu'il
commence à s'animer. Style de perspicacité. Nous pouvons également entrer dans les filtres CSS et jouer avec ces
paramètres ici. Par exemple, nous pouvons
augmenter la luminosité. Nous pouvons jouer
avec le contraste. Nous pouvons également augmenter
et diminuer la saturation des couleurs. Nous pouvons également jouer avec la teinte juste pour voir si nous pouvons obtenir les couleurs de notre
marque. Très bien, mettons à jour ça. Et prévisualisons les modifications. Et c'est là que nous l'avons. Quand on survole huit, c'est à
ce moment qu'il s'anime. Lorsque nous ne planons pas déjà, ce n'est pas une animation car c'est le paramètre
que nous avons choisi. C'est comme ça, les gars. Je vous recommande d'aller de
l'avant et de jouer avec tous les paramètres et voir à quel point vous
pouvez être créatif avec eux. Et cela marque la
fin de notre tutoriel. J'espère que vous avez appris
quelque chose aujourd'hui. Et surtout, j'espère que vous en ferez quelque chose de
génial. Si vous aimez le cours, n'oubliez pas de laisser un avis. Cela pourrait aider un autre
étudiant à décider si c'est
ce qu'il cherche
avant de le regarder réellement. Si vous utilisez Elementor et
que vous souhaitez apprendre à créer des pages Web impressionnantes et des sites Web
entièrement fonctionnels. Consultez mon profil. Vous
y trouverez plusieurs cours où je
vous apprends comment faire cela. Sinon, c'était un plaisir de vous
enseigner cela aujourd'hui et je vous verrai la
prochaine fois. La paix.
Ken Mbesa, Web Designer | 3D Artist
