{"id":367020,"date":"2023-01-30T11:26:00","date_gmt":"2023-01-30T08:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367020"},"modified":"2023-01-30T11:27:06","modified_gmt":"2023-01-30T08:27:06","slug":"comment-ajouter-un-effet-elementor-parallax-rapidement-et-facilement","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-effet-elementor-parallax-rapidement-et-facilement\/","title":{"rendered":"Comment ajouter un effet Elementor Parallax rapidement et facilement"},"content":{"rendered":"\n

L’effet de parallaxe est souvent observ\u00e9 sur les sites Web qui cultivent l’esth\u00e9tique contemporaine. Il ajoute une impression de profondeur et de dynamisme et met en valeur la modernit\u00e9 du site<\/strong>. Il existe une grande vari\u00e9t\u00e9 de th\u00e8mes WordPress qui viennent avec des effets de parallaxe, mais vous avez \u00e9galement toujours la possibilit\u00e9 de cr\u00e9er un effet de parallaxe par vous-m\u00eame. De nombreux sites utilisent l’effet de d\u00e9filement parallaxe<\/a> comme un puissant outil d’engagement des utilisateurs et de narration.<\/p>\n

Dans cet article, nous vous montrerons comment ajouter l’effet de parallaxe \u00e0 votre site Web \u00e0 l’aide du constructeur de pages Elementor. Elementor est le seul constructeur de pages qui est livr\u00e9 avec une option de parallaxe Elementor int\u00e9gr\u00e9e<\/strong>. Tous les autres constructeurs n\u00e9cessitent l’utilisation d’une sorte de plugin ou d’outil. Avant de continuer, assurons-nous simplement que vous comprenez exactement ce qu’est l’effet de parallaxe. Dans cet article, vous d\u00e9couvrirez\u00a0:<\/p>\n

Qu’est-ce que l’effet de parallaxe\u00a0?<\/h2>\n

L’effet de parallaxe est obtenu lorsque les \u00e9l\u00e9ments en arri\u00e8re-plan et les \u00e9l\u00e9ments au premier plan se d\u00e9placent \u00e0 un rythme diff\u00e9rent lorsque l’utilisateur fait d\u00e9filer<\/strong>. Plus pr\u00e9cis\u00e9ment, les \u00e9l\u00e9ments d’arri\u00e8re-plan sont r\u00e9gl\u00e9s pour se d\u00e9placer plus lentement que les \u00e9l\u00e9ments de premier plan et c’est ainsi qu’une illusion de profondeur est cr\u00e9\u00e9e.<\/p>\n<\/p>\n

Comment trouver l’option d’effet Elementor Parallax<\/h2>\n

Le constructeur de pages Elementor a facilit\u00e9 l’ajout d’un effet de parallaxe en vous permettant d’attribuer un arri\u00e8re-plan de parallaxe \u00e0 une certaine ligne ou colonne<\/strong>. Ci-dessus, vous pouvez voir un exemple de l’effet de parallaxe cr\u00e9\u00e9 par Elementor.<\/p>\n

Vous pouvez appliquer un effet de parallaxe Elementor sur une ligne qui ne contient aucune information<\/strong> – juste pour servir d’image anim\u00e9e, pour rendre la page plus attrayante ou vous pouvez l’appliquer sur une ligne contenant des informations, o\u00f9 l’image de parallaxe sera derri\u00e8re le informations<\/strong>.<\/p>\n

Il est \u00e9galement possible d’ajouter un effet de parallaxe \u00e0 toute la section, ou \u00e0 la colonne contenue dans la section.<\/p>\n

Vous pouvez trouver l’option Parallaxe en cliquant sur la petite ic\u00f4ne qui ressemble \u00e0 un livre ouvert et qui se trouve dans le coin sup\u00e9rieur gauche de la colonne que nous avons s\u00e9lectionn\u00e9e pour ajouter la parallaxe<\/strong>. Si vous souhaitez ajouter de la parallaxe \u00e0 toute la section et non \u00e0 la colonne, la m\u00eame option se trouve \u00e9galement dans un onglet bleu qui appara\u00eet au milieu de la ligne lorsque vous la survolez<\/strong>. Pour acc\u00e9der \u00e0 l’option de parallaxe, choisissez l’option Modifier la colonne ou Modifier la section. Dans notre cas, nous modifions la colonne.<\/p>\n

\"Comment<\/a><\/p>\n

Cliquer sur la colonne Modifier ouvre un menu de gauche avec trois onglets principaux. Choisissez l’onglet Style<\/strong>, pour commencer. Cliquez sur l’ option Type d’arri\u00e8re<\/strong> -plan, et le champ pour ajouter une image appara\u00eetra<\/strong>. Vous pouvez ajouter une image de votre m\u00e9diath\u00e8que ou t\u00e9l\u00e9charger un nouveau fichier.<\/p>\n

\"Comment<\/a><\/p>\n

Apr\u00e8s avoir choisi l’image pour la section de parallaxe, vous pouvez proc\u00e9der au r\u00e9glage des param\u00e8tres d’image<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Dans les param\u00e8tres de pi\u00e8ce jointe, choisissez l’option Fixe<\/strong>, car nous avons besoin que l’image se comporte de mani\u00e8re fixe lorsque nous faisons d\u00e9filer, si nous choisissons Faire d\u00e9filer ici, l’image se d\u00e9placera avec l’arri\u00e8re-plan.<\/p>\n

\"Comment<\/a><\/p>\n

Les r\u00e9glages de position d’image offrent beaucoup de choix<\/strong>. Vous pouvez choisir de d\u00e9finir l’image au centre de la section, en haut \u00e0 droite, en haut \u00e0 gauche, etc. – la bonne chose est que vous voyez imm\u00e9diatement l’aper\u00e7u de la position de l’image, ce qui facilite la d\u00e9cision.<\/p>\n

\"Comment<\/a><\/p>\n

L’ option R\u00e9p\u00e9ter qui suit est principalement utilis\u00e9e lorsque l’image est en fait un motif qui doit \u00eatre r\u00e9p\u00e9t\u00e9<\/strong> ou dans les cas o\u00f9 l’image est trop petite. Dans notre cas, l’image est \u00e0 la bonne taille donc nous choisissons l’option par d\u00e9faut. Pour l’effet de parallaxe, il est pr\u00e9f\u00e9rable d’avoir une taille d’image de 1920 pixels – de cette fa\u00e7on, l’image occupera la largeur de toute la section<\/strong>. Mais, si la taille de votre image n’est pas optimale, vous pouvez toujours l’ajuster \u00e0 l’aide des param\u00e8tres de taille<\/strong>. Ceux-ci offrent plusieurs options, notamment les param\u00e8tres personnalis\u00e9s qui vous permettent de d\u00e9finir vous-m\u00eame la taille \u00e0 l’aide d’un curseur. L’aper\u00e7u de chaque modification que vous apportez est imm\u00e9diatement disponible sur la droite afin que vous puissiez essayer chacune des options pour voir celle qui convient le mieux.<\/p>\n

\"Comment<\/a><\/p>\n

Apr\u00e8s avoir r\u00e9gl\u00e9 tous ces param\u00e8tres, vous pouvez passer au menu de superposition d’arri\u00e8re-plan<\/strong>. Lorsque vous l’ouvrirez, vous remarquerez que toutes les options sont les m\u00eames que dans le menu pr\u00e9c\u00e9dent, mais avec quelques param\u00e8tres plus int\u00e9ressants. Il s’agit de l’ opacit\u00e9, des filtres CSS et du mode<\/strong> de fusion. Le curseur Opacit\u00e9 vous permet de d\u00e9finir une superposition de couleurs de base et de jouer avec l’opacit\u00e9 pour augmenter ou diminuer son effet<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Les filtres CSS et le mode de fusion vous permettent d’appliquer des effets de type Photoshop \u00e0 vos \u00e9l\u00e9ments. Les effets de filtre CSS activent des effets graphiques tels que le flou ou le changement de couleur des images. En ce qui concerne les modes de fusion, Elementor en propose 13\u00a0: Normal (il s’agit de la valeur par d\u00e9faut et n’a aucun m\u00e9lange), Multiplier, \u00c9cran, Superposer, Assombrir, \u00c9claircir, Color Dodge, Saturation, Couleur, Diff\u00e9rence, Exclusion, Teinte et Luminosit\u00e9.<\/p>\n

\"Comment<\/a><\/p>\n

Comment r\u00e9gler la hauteur de la section de parallaxe<\/h2>\n

La hauteur de la section de parallaxe peut d\u00e9pendre du contenu de la section<\/strong>. Si, par exemple, nous avons d\u00e9fini le rembourrage du contenu, ou si le contenu a d\u00e9j\u00e0 son propre rembourrage par d\u00e9faut, la parallaxe s’ajustera de mani\u00e8re \u00e0 couvrir toute la surface derri\u00e8re l’\u00e9l\u00e9ment<\/strong>. Donc, pour r\u00e9gler la hauteur dans ce cas, nous devons ajuster l’\u00e9l\u00e9ment lui-m\u00eame.<\/p>\n

\"Comment<\/a><\/p>\n

Si cela ne suffit pas ou si nous avons une section sans contenu, nous reviendrons aux param\u00e8tres et choisirons l’ onglet Avanc\u00e9. Dans les param\u00e8tres de rembourrage, nous pouvons d\u00e9finir la hauteur et voir comment cela prend effet imm\u00e9diatement dans un aper\u00e7u en direct<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Comment d\u00e9finir l’effet de parallaxe dans une rang\u00e9e avec plusieurs colonnes<\/h2>\n

Que se passe-t-il lorsque nous avons deux colonnes ou plus dans une rang\u00e9e et que nous voulons avoir l’effet de parallaxe Elementor dans une seule des colonnes\u00a0? La proc\u00e9dure est tr\u00e8s simple. Allez dans le menu des options de la colonne dans laquelle vous souhaitez d\u00e9finir l’effet de parallaxe<\/strong>. Ajoutez l’arri\u00e8re-plan comme vous l’avez fait pr\u00e9c\u00e9demment lorsqu’il n’y avait qu’une seule colonne \u00e0 la suite. Mais, vous ne pouvez pas d\u00e9finir la hauteur de parallaxe simplement en ajustant le rembourrage, il est n\u00e9cessaire d’ajouter du contenu \u00e0 la colonne. Vous pouvez soit ins\u00e9rer le contenu dans la colonne avec l’effet de parallaxe ou vous pouvez ins\u00e9rer le contenu dans l’autre colonne et il sera alors possible d’ajuster la hauteur de la section en ajustant le rembourrage dans le menu Options avanc\u00e9es<\/strong>. Si vous n’aimez pas la fa\u00e7on dont l’image de parallaxe est centr\u00e9e, vous pouvez toujours revenir aux param\u00e8tres de style et ajuster sa position.<\/p>\n

\"Comment<\/a><\/p>\n

Les micro-interactions et les interfaces utilisateur anim\u00e9es sont souvent les \u00e9l\u00e9ments qui rendent l’exp\u00e9rience utilisateur attrayante et m\u00e9morable. C’est l’une des raisons pour lesquelles l’effet de parallaxe est si populaire sur tous les types de sites Web de nos jours. Il vous permet de r\u00e9v\u00e9ler les d\u00e9tails de votre contenu de mani\u00e8re dynamique et inspire l’utilisateur \u00e0 se sentir en contr\u00f4le.<\/p>\n

L’effet de parallaxe peut vraiment am\u00e9liorer de nombreux aspects de l’exp\u00e9rience utilisateur. Mais, cela ne doit pas \u00eatre fait correctement et avec un but. Ajouter de la parallaxe simplement parce que tout le monde l’a n’a aucun sens, et cela pourrait en fait ennuyer les utilisateurs, surtout si cela ne correspond pas au contenu du site Web.<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L’effet de parallaxe Elementor peut vraiment am\u00e9liorer de nombreux aspects de l’exp\u00e9rience utilisateur. Apprenez \u00e0 cr\u00e9er un effet de parallaxe dans Elementor.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-367020","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=367020"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}