{"id":235872,"date":"2022-03-15T11:12:00","date_gmt":"2022-03-15T08:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=235872"},"modified":"2022-05-16T10:55:04","modified_gmt":"2022-05-16T07:55:04","slug":"comment-ajouter-un-curseur-dimage-a-votre-page-daccueil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-curseur-dimage-a-votre-page-daccueil\/","title":{"rendered":"Comment ajouter un curseur d&rsquo;image \u00e0 votre page d&rsquo;accueil"},"content":{"rendered":"<p>Vous voulez ajouter un curseur \u00e0 votre page d&rsquo;accueil\u00a0?<\/p>\n<p>Dans cet article, vous apprendrez\u00a0:<\/p>\n<ul>\n<li>Comment cr\u00e9er des curseurs dans WordPress<\/li>\n<li>Comment ajouter un curseur d&rsquo;image \u00e0 n&rsquo;importe quelle page<\/li>\n<li>Comment inclure un curseur sur votre page d&rsquo;accueil uniquement<\/li>\n<\/ul>\n<p>Le curseur fonctionnera sur votre site quel que soit le th\u00e8me que vous avez install\u00e9.<\/p>\n<h2>Comment ajouter un curseur \u00e0 votre page d&rsquo;accueil<\/h2>\n<p>Voyons comment ajouter un curseur \u00e0 votre page d&rsquo;accueil, \u00e9tape par \u00e9tape, en commen\u00e7ant par ajouter le plugin dont vous aurez besoin.<\/p>\n<h3>Installer et activer le m\u00e9ta-curseur<\/h3>\n<p>Tout d&rsquo;abord, installez et activez l&rsquo;excellent plugin <a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meta Slider<\/a> sur votre site.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023eb9feb0.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\" \/><\/a><\/p>\n<p>Meta Slider est le plugin de curseur le mieux not\u00e9 sur wordpress.org, et c&rsquo;est le premier sur <a href=\"https:\/\/themewp.inform.click\/fr\/les-9-meilleurs-plugins-wordpress-slider-pour-2021\/\" title=\"ma liste de curseurs recommand\u00e9s\">ma liste de curseurs recommand\u00e9s<\/a> (gratuits et payants).<\/p>\n<p><strong>Go Pro :<\/strong> la version gratuite de Meta Slider est fantastique et riche en fonctionnalit\u00e9s, mais il existe \u00e9galement une <a href=\"http:\/\/link.competethemes.com\/meta-slider-post\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">version Pro<\/a> avec des curseurs vid\u00e9o, une navigation par vignettes, etc.<\/p>\n<h3>Cr\u00e9er un curseur<\/h3>\n<p>Une fois activ\u00e9, vous trouverez un nouveau menu de param\u00e8tres Meta Slider dans votre tableau de bord. Le menu sera initialement vide, vous invitant \u00e0 cr\u00e9er votre premier curseur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023ef0e96e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023ef0e96e.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>En cliquant sur le bouton plus, vous cr\u00e9erez votre premier diaporama. Une fois que vous avez cr\u00e9\u00e9 un curseur, vous \u00eates pr\u00eat \u00e0 commencer \u00e0 ajouter des images.<\/p>\n<h3>Ajouter des images \u00e0 votre curseur<\/h3>\n<p>Cliquez sur le bouton Ajouter une diapositive pour r\u00e9v\u00e9ler la biblioth\u00e8que multim\u00e9dia. Vous pouvez t\u00e9l\u00e9charger une nouvelle image ou s\u00e9lectionner l&rsquo;une de vos images existantes.<\/p>\n<p>Ajoutez quelques images maintenant. Il n&rsquo;est pas n\u00e9cessaire qu&rsquo;elles soient vos images finales. Ajoutez simplement quelques diapositives pour pouvoir suivre le reste du didacticiel.<\/p>\n<h3>Choisissez votre curseur<\/h3>\n<p>Meta Slider comprend quatre curseurs diff\u00e9rents. Les quatre curseurs sont :<\/p>\n<ul>\n<li>Curseur Flex<\/li>\n<li>Diapositives r\u00e9actives<\/li>\n<li>Niveau du curseur<\/li>\n<li>Curseur de pi\u00e8ces<\/li>\n<\/ul>\n<p>Le seul curseur que je ne recommanderais pas est Coin Slider car il ne r\u00e9pond pas. Les trois autres sont tous excellents.<\/p>\n<p>Vous pouvez s\u00e9lectionner le curseur que vous souhaitez utiliser dans la barre lat\u00e9rale droite.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f2a7b1a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f2a7b1a.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<h3>Personnaliser le curseur<\/h3>\n<p>Une fois que vous avez ajout\u00e9 des images et choisi votre curseur, l&rsquo;\u00e9tape suivante consiste \u00e0 personnaliser l&rsquo;apparence et les fonctionnalit\u00e9s du diaporama.<\/p>\n<p>Meta Slider comprend \u00e9galement des options de configuration de base et certains param\u00e8tres avanc\u00e9s. Je vous laisse le choix de l&rsquo;affichage de votre slider, mais voici un aper\u00e7u des options disponibles\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f918c8a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023f918c8a.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>Un conseil: utiliser l&rsquo;\u00e9tirement \u00e0 100 % de la largeur est g\u00e9n\u00e9ralement une bonne id\u00e9e car cela permettra au curseur de s&rsquo;adapter \u00e0 la largeur de l&rsquo;\u00e9cran.<\/p>\n<p>La version gratuite de Meta Slider comprend un nombre limit\u00e9 d&rsquo;effets de transition de diapositive, mais <a href=\"http:\/\/link.competethemes.com\/meta-slider\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meta Slider Pro<\/a> ajoute de nombreux nouveaux effets int\u00e9ressants.<\/p>\n<h3>Cr\u00e9er une page pour votre page d&rsquo;accueil<\/h3>\n<p>Votre site affiche actuellement une Page ou vos derniers articles.<\/p>\n<p>Si vous affichez vos derniers articles et que vous ne savez pas comment passer \u00e0 une page normale, <a href=\"https:\/\/themewp.inform.click\/fr\/comment-changer-votre-page-daccueil-dans-wordpress-en-un-design-personnalise\/\" title=\"suivez ce didacticiel pour savoir\">suivez ce didacticiel pour savoir<\/a> comment proc\u00e9der.<\/p>\n<p>Une fois qu&rsquo;une page s&rsquo;affiche sur votre page d&rsquo;accueil, passez \u00e0 l&rsquo;\u00e9tape suivante.<\/p>\n<h3>Ajouter le curseur \u00e0 votre page d&rsquo;accueil<\/h3>\n<p>La derni\u00e8re \u00e9tape consiste \u00e0 ajouter le curseur que vous avez cr\u00e9\u00e9 \u00e0 la page que vous affichez sur votre page d&rsquo;accueil. Heureusement pour nous, Meta Slider rend cela tr\u00e8s facile.<\/p>\n<p>Acc\u00e9dez \u00e0 l&rsquo;\u00e9diteur de page et vous remarquerez qu&rsquo;il y a un nouveau bouton Ajouter un curseur au-dessus de l&rsquo;\u00e9diteur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023fce2fa8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617023fce2fa8.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>Placez votre curseur \u00e0 l&rsquo;endroit o\u00f9 vous souhaitez int\u00e9grer le curseur et appuyez sur le bouton Ajouter un curseur pour ouvrir le menu de s\u00e9lection du curseur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702400027af.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702400027af.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>S\u00e9lectionnez votre curseur nouvellement cr\u00e9\u00e9.<\/p>\n<p>Une fois que vous avez appuy\u00e9 sur le bouton Ins\u00e9rer un diaporama, vous verrez un shortcode ajout\u00e9 \u00e0 l&rsquo;\u00e9diteur, comme celui-ci\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702403184fa.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-61702403184fa.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>Le shortcode ne ressemble pas \u00e0 grand-chose dans l&rsquo;\u00e9diteur, mais une fois visualis\u00e9 sur le site, il affiche le slider que vous avez cr\u00e9\u00e9 avec Meta Slider.<\/p>\n<p>Si vous n&rsquo;\u00eates pas familier avec les shortcodes, vous pouvez consulter notre <a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-du-contenu-dynamique-avec-des-codes-courts\/\" title=\"tutoriel\">tutoriel<\/a> sur les <a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-du-contenu-dynamique-avec-des-codes-courts\/\" title=\"shortcodes ici\">shortcodes ici<\/a>.<\/p>\n<p>Affichez la page maintenant et vous verrez votre curseur int\u00e9gr\u00e9 \u00e0 votre page d&rsquo;accueil.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617024064b0a1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-186495-617024064b0a1.png\" alt=\"Comment ajouter un curseur d&#039;image \u00e0 votre page d&#039;accueil\"><\/a><\/p>\n<p>Curseur int\u00e9gr\u00e9 au th\u00e8me <a href=\"https:\/\/www.competethemes.com\/founder\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Founder<\/a><\/p>\n<p>\u00c9tant donn\u00e9 que Meta Slider vous permet d&rsquo;int\u00e9grer des curseurs avec un code court, vous pouvez facilement ajouter n&rsquo;importe quel curseur que vous cr\u00e9ez \u00e0 n&rsquo;importe quelle page. Dans ce cas, nous avons ajout\u00e9 un curseur \u00e0 la page d&rsquo;accueil uniquement.<\/p>\n<p>Meta Slider comprend \u00e9galement un widget afin que vous puissiez \u00e9galement placer des curseurs dans les barres lat\u00e9rales et d&rsquo;autres zones de widgets.<\/p>\n<h2>Montrez le diaporama de votre page d&rsquo;accueil<\/h2>\n<p>Comment c&rsquo;\u00e9tait? \u00cates-vous pr\u00eat \u00e0 montrer votre nouveau curseur\u00a0?<\/p>\n<p>Bien qu&rsquo;il existe de nombreux plugins de curseurs disponibles, je pense que Meta Slider est le meilleur.<\/p>\n<p>Si vous n&rsquo;avez jamais utilis\u00e9 de shortcodes auparavant, j&rsquo;esp\u00e8re que ce guide vous a ouvert les yeux sur les possibilit\u00e9s disponibles. Les shortcodes de Meta Slider vous permettent d&rsquo;int\u00e9grer des curseurs n&rsquo;importe o\u00f9 sur votre site.<\/p>\n<p>Si vous avez une question sur l&rsquo;ajout de curseurs d&rsquo;image ou l&rsquo;utilisation de plugins de diaporama avec WordPress, veuillez poster un commentaire ci-dessous.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apprenez \u00e0 cr\u00e9er un curseur et \u00e0 l&rsquo;ajouter \u00e0 votre page d&rsquo;accueil. Vous d\u00e9couvrirez un plugin gratuit qui contient quatre types de curseurs et des dizaines de personnalisations.<\/p>\n","protected":false},"author":1,"featured_media":186584,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[548],"tags":[844],"class_list":["post-235872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personnaliser-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/235872","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=235872"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/235872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/186584"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=235872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=235872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=235872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}