{"id":124697,"date":"2019-01-02T17:56:00","date_gmt":"2019-01-02T16:56:00","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/pinned-elements\/"},"modified":"2025-02-03T16:45:09","modified_gmt":"2025-02-03T15:45:09","slug":"pinned-elements","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/elements-epingles","title":{"rendered":"\u00c9l\u00e9ments \u00e9pingl\u00e9s"},"content":{"rendered":"

Les \u00e9l\u00e9ments peuvent rester dans la m\u00eame position sur l’\u00e9cran lorsque l’utilisateur fait d\u00e9filer l’\u00e9cran vers le haut ou vers le bas. C’est ce qu’on appelle l’\u00e9pinglage et vous pouvez l’utiliser pour cr\u00e9er des effets de parallaxe avec des \u00e9tiquettes flottantes, un contenu centr\u00e9, des en-t\u00eates collants, et bien plus encore.

Pour \u00e9pingler un \u00e9l\u00e9ment :<\/h3>\n
    \n
  1. S\u00e9lectionnez l’\u00e9l\u00e9ment de votre choix, allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l’aiguille dans la partie sup\u00e9rieure droite de la palette. Les param\u00e8tres \u00ab\u00a0X\u00a0\u00bb et \u00ab\u00a0Y\u00a0\u00bb sont alors modifiables. <\/li>\n
  2. \u00c0 l’aide du menu d\u00e9roulant, s\u00e9lectionnez le type de position d’\u00e9pinglage que vous souhaitez pour l’\u00e9l\u00e9ment. Vous pouvez ajouter une marge en px \u00e0 partir de la position \u00e9pingl\u00e9e si vous souhaitez un certain espacement par rapport \u00e0 la position \u00e9pingl\u00e9e. <\/li>\n<\/ol>\n

    Options de position des broches<\/h3>\n

    Les options suivantes permettent d’\u00e9pingler un \u00e9l\u00e9ment. Les options X et Y peuvent \u00eatre combin\u00e9es de mani\u00e8re \u00e0 ce que vous puissiez \u00e9pingler un \u00e9l\u00e9ment en haut et \u00e0 gauche. <\/p>\n

    Axe X<\/h4>\n
      \n
    1. Non \u00e9pingl\u00e9 (par d\u00e9faut) :<\/strong> l’\u00e9l\u00e9ment ne sera pas \u00e9pingl\u00e9 ; il ne se d\u00e9placera pas avec l’\u00e9cran.<\/li>\n
    2. \u00c9pingler \u00e0 gauche :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 \u00e0 gauche de l’\u00e9cran.<\/li>\n
    3. Centre d’\u00e9pinglage :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 au centre de l’\u00e9cran.<\/li>\n
    4. \u00c9pingler \u00e0 droite :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 \u00e0 droite de l’\u00e9cran.<\/li>\n<\/ol>\n

      Axe Y<\/h4>\n
        \n
      1. Non \u00e9pingl\u00e9 (par d\u00e9faut) :<\/strong> l’\u00e9l\u00e9ment ne sera pas \u00e9pingl\u00e9 ; il ne se d\u00e9placera pas avec l’\u00e9cran.<\/li>\n
      2. \u00c9pingler en haut :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 en haut de l’\u00e9cran.<\/li>\n
      3. Centre d’\u00e9pinglage :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 au centre de l’\u00e9cran.<\/li>\n
      4. \u00c9pingler en bas :<\/strong> l’\u00e9l\u00e9ment sera \u00e9pingl\u00e9 en bas de l’\u00e9cran.<\/li>\n<\/ol>\n

        Comment \u00e9pingler plusieurs \u00e9l\u00e9ments<\/h3>\n

        Les groupes ne peuvent pas \u00eatre \u00e9pingl\u00e9s, seuls les \u00e9l\u00e9ments individuels peuvent l’\u00eatre. Au lieu d’\u00e9pingler des groupes, vous pouvez regrouper des \u00e9l\u00e9ments dans un panneau dynamique et \u00e9pingler ce panneau. Par exemple, vous pouvez cr\u00e9er un menu de navigation qui restera en haut de la page lorsque vous ferez d\u00e9filer la page en suivant les \u00e9tapes suivantes : <\/p>\n

          \n
        1. Faites glisser quatre \u00e9l\u00e9ments de texte sur le canevas et donnez-leur des titres comme s’il s’agissait de diff\u00e9rentes sections de votre site web.<\/li>\n
        2. S\u00e9lectionnez-les tous, puis cliquez avec le bouton droit de la souris lorsque vous \u00eates au-dessus de l’un d’entre eux et allez dans Groupe – Groupe dans le panneau dynamique.<\/li>\n
        3. Organisez-les dans l’ordre que vous souhaitez, puis allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l’aiguille de l’\u00e9pingle. R\u00e9glez ensuite le menu d\u00e9roulant Y sur \u00ab\u00a0Pin top\u00a0\u00bb. <\/li>\n
        4. Ajoutez ensuite du contenu \u00e0 l’\u00e9cran de mani\u00e8re \u00e0 cr\u00e9er une longue page. Simulez et le r\u00e9sultat devrait \u00eatre similaire \u00e0 l’image ci-dessous <\/li>\n<\/ol>\n

          \"\u00c9l\u00e9ment<\/p>\n","protected":false},"excerpt":{"rendered":"

          Les \u00e9l\u00e9ments peuvent rester dans la m\u00eame position sur l’\u00e9cran lorsque l’utilisateur fait d\u00e9filer l’\u00e9cran vers le haut ou vers le bas. C’est ce qu’on appelle…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8441],"tags":[],"class_list":["post-124697","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124697"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124697"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124697\/revisions"}],"predecessor-version":[{"id":126228,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124697\/revisions\/126228"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}