{"id":367414,"date":"2023-03-04T16:10:00","date_gmt":"2023-03-04T13:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367414"},"modified":"2022-10-12T12:56:50","modified_gmt":"2022-10-12T09:56:50","slug":"comment-creer-des-bascules-et-des-accordeons-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-des-bascules-et-des-accordeons-dans-wordpress\/","title":{"rendered":"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress"},"content":{"rendered":"\n<p>Les accord\u00e9ons et les bascules sont des \u00e9l\u00e9ments pratiques qui ajoutent plus de fonctionnalit\u00e9s \u00e0 votre page, vous permettent de mieux structurer le contenu et aident \u00e0 l&rsquo;organisation globale du site Web. <strong>Leur ajout n&rsquo;est pas particuli\u00e8rement compliqu\u00e9 mais peut \u00eatre particuli\u00e8rement facile avec le bon outil<\/strong>.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">C&rsquo;est pourquoi nous avons opt\u00e9 pour les Qi Addons<\/a> conviviaux pour Elementor qui incluent une <strong>grande vari\u00e9t\u00e9 d&rsquo;options de personnalisation et sont incroyablement faciles \u00e0 utiliser<\/strong>. Ce plugin est actuellement la plus grande collection de <strong>60 widgets gratuits<\/strong> que vous pouvez utiliser pour ajouter plus de fonctionnalit\u00e9s \u00e0 votre site Web. En outre, il existe une incroyable collection de plus de <strong>40 widgets Qi premium<\/strong>. Et, ce qui est \u00e9galement tr\u00e8s important, c&rsquo;est qu&rsquo;il est compatible avec tous les th\u00e8mes WordPress.<\/p>\n<h2>Ajout d&rsquo;accord\u00e9ons et basculement du widget gratuit avec les modules Qi pour Elementor<\/h2>\n<p>Qi Addons vous permet de <strong>personnaliser compl\u00e8tement le style des accord\u00e9ons et des bascules en fonction du th\u00e8me WordPress que vous utilisez<\/strong>, des polices aux couleurs et bordures et tout le reste.<\/p>\n<p>Pour vous inspirer, nous vous recommandons de consulter la <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/accordions-and-toggles\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">page des widgets<\/a>. Nous allons vous montrer comment nous l&rsquo;avons appliqu\u00e9.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>La perception de base du fonctionnement d&rsquo;Elementor est tout ce que vous devez comprendre dans cette section. Il s&rsquo;agit en fait d&rsquo;une ligne contenant deux colonnes avec une image dans la colonne de gauche et des accord\u00e9ons dans celle de droite. <strong>Bien s\u00fbr, un accord\u00e9on peut occuper toute la rang\u00e9e ou n&rsquo;importe quelle partie de la rang\u00e9e, selon vos besoins<\/strong>.<\/p>\n<p>Avant de continuer, v\u00e9rifions certaines caract\u00e9ristiques de style de base fournies avec cet addon. Commen\u00e7ons donc par le comportement. <strong>Deux types de comportement sont possibles: les accord\u00e9ons<\/strong> o\u00f9 un seul \u00e9l\u00e9ment peut \u00eatre ouvert \u00e0 un moment donn\u00e9 et les <strong>bascules<\/strong> qui permettent \u00e0 plusieurs \u00e9l\u00e9ments d&rsquo;\u00eatre ouverts au m\u00eame moment.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p><strong>Le style peut en outre \u00eatre d\u00e9fini avec des bordures et plusieurs options sont disponibles :<\/strong><\/p>\n<ul>\n<li>Standard &#8211; pas de bordures<\/li>\n<li>Boxed \u2013 avec des bordures,<\/li>\n<li>Bordure en haut &#8211; n&rsquo;a qu&rsquo;une bordure en haut au-dessus du titre<\/li>\n<li>Border Between &#8211; n&rsquo;a que la fronti\u00e8re entre le titre et la description<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<h2>Comment ajouter des accoridons et des bascules avec les addons Qi<\/h2>\n<p>Pour commencer, nous allons d\u00e9finir la ligne \u00e0 diviser en deux colonnes et ajouter une image \u00e0 la colonne de gauche, juste pour rendre la section plus attrayante visuellement.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Une fois l&rsquo;image ajout\u00e9e, nous trouverons le widget Accord\u00e9ons et bascules en tapant dans la barre de recherche ou en faisant d\u00e9filer le menu. Lorsque le widget est trouv\u00e9, <strong>cliquez simplement dessus, maintenez-le enfonc\u00e9 et d\u00e9placez-vous \u00e0 l&rsquo;endroit o\u00f9 vous souhaitez placer le nouvel \u00e9l\u00e9ment<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Nous avons ajout\u00e9 le widget Accord\u00e9ons et bascule sur le c\u00f4t\u00e9 droit de la ligne, et vous pouvez voir <strong>tous les param\u00e8tres qui s&rsquo;y rapportent sur la gauche<\/strong>. Les param\u00e8tres par d\u00e9faut du widget sont d\u00e9finis de mani\u00e8re \u00e0 ce que le <strong>texte et le style correspondent automatiquement au th\u00e8me que vous utilisez<\/strong>, donc au cas o\u00f9 vous ne verriez pas la n\u00e9cessit\u00e9 de le modifier, vous pouvez simplement terminer le processus ici, le widget aura l&rsquo;air d&rsquo;avoir naturellement appartenu au th\u00e8me.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>La prochaine chose que vous devez d\u00e9finir est le <strong>comportement et le style<\/strong>. Nous avons d\u00e9j\u00e0 mentionn\u00e9 les options Comportement et Style afin que vous puissiez d\u00e9finir ici tout ce qui vous convient. Pour les besoins de cet article, nous avons s\u00e9lectionn\u00e9 l&rsquo;option Accord\u00e9ons dans le menu Comportement et le style Standard.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Ce qu&rsquo;il faut faire maintenant, c&rsquo;est <strong>ajouter des \u00e9l\u00e9ments<\/strong>. Faites d\u00e9filer vers le bas pour trouver les <strong>options de l&rsquo;\u00e9l\u00e9ment<\/strong>. Vous remarquerez deux petites ic\u00f4nes dans le coin sup\u00e9rieur droit de l&rsquo;onglet \u00c9l\u00e9ments. Le premier sert \u00e0 <strong>copier un \u00e9l\u00e9ment existant<\/strong> et le <strong>petit X suivant sert \u00e0 supprimer un \u00e9l\u00e9ment<\/strong>. Sous l&rsquo;onglet Article se trouve le <strong>bouton Ajouter nouveau<\/strong> qui sert \u00e0 ajouter de nouveaux articles. Lorsque vous cliquez pour entrer un nouvel \u00e9l\u00e9ment, vous devez d&rsquo; <strong>abord d\u00e9finir un titre, puis saisir le texte dans le champ d\u00e9sign\u00e9 ci-dessous<\/strong>. Vous remarquerez de nombreuses options similaires \u00e0 celles propos\u00e9es dans divers \u00e9diteurs de texte pour styliser et formater le texte. Nous vous recommandons d&rsquo;organiser le texte et le titre \u00e0 ce stade, car vous aurez imm\u00e9diatement un aper\u00e7u de ce \u00e0 quoi il ressemblera \u00e0 la fin.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Apr\u00e8s avoir saisi le texte, vous pouvez d\u00e9finir la <strong>hauteur du contenu<\/strong>. Cette option <strong>fait r\u00e9f\u00e9rence \u00e0 la taille du champ bascule<\/strong>. Si vous le r\u00e9glez sur la <strong>hauteur de l&rsquo;\u00e9l\u00e9ment<\/strong> le plus haut, chaque \u00e9l\u00e9ment aura la m\u00eame taille que le plus grand. Si vous s\u00e9lectionnez l&rsquo; option <strong>Hauteur de l&rsquo;\u00e9l\u00e9ment individuel<\/strong>, la taille de chaque \u00e9l\u00e9ment correspondra \u00e0 la taille de son contenu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Si vous souhaitez <strong>modifier les ic\u00f4nes par d\u00e9faut qui s&rsquo;affichent lors de l&rsquo;ouverture et de la fermeture de l&rsquo;\u00e9l\u00e9ment, cliquez simplement sur le champ Ic\u00f4ne Ouvrir ou Ic\u00f4ne Fermer et deux nouvelles options s&rsquo;afficheront<\/strong>. L&rsquo;un sert \u00e0 ajouter de nouvelles ic\u00f4nes \u00e0 partir de la biblioth\u00e8que d&rsquo;ic\u00f4nes et l&rsquo;autre \u00e0 ajouter un SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Nous pouvons maintenant passer aux <strong>param\u00e8tres de style<\/strong>. C&rsquo;est ici que vous effectuez le r\u00e9glage fin du style de widget accord\u00e9on et bascule.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Vous pouvez <strong>choisir le style de titre et d\u00e9finir la typographie du titre<\/strong>. Comme nous l&rsquo;avons mentionn\u00e9, les options par d\u00e9faut sont d\u00e9finies de mani\u00e8re \u00e0 ce que le style du widget corresponde au th\u00e8me que vous utilisez. Mais vous pouvez toujours <strong>essayer toutes les autres options simplement en les s\u00e9lectionnant et les changements seront imm\u00e9diatement visibles dans le widget sur le c\u00f4t\u00e9 droit de l&rsquo;\u00e9cran<\/strong>. Explorez les options et voyez ce qui vous convient le mieux.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Les param\u00e8tres suivants font r\u00e9f\u00e9rence aux changements de style qui <strong>se produisent sur un \u00e9l\u00e9ment lorsqu&rsquo;il est ferm\u00e9 ou ouvert<\/strong>. Vous pouvez, par exemple, d\u00e9finir le texte pour qu&rsquo;il soit d&rsquo;une couleur diff\u00e9rente lorsqu&rsquo;il est ouvert, ou l&rsquo;arri\u00e8re-plan peut \u00eatre d&rsquo;une couleur diff\u00e9rente. Il y a aussi la possibilit\u00e9 de d\u00e9finir un rembourrage diff\u00e9rent lorsque l&rsquo;\u00e9l\u00e9ment est actif, c&rsquo;est-\u00e0-dire ouvert.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.jpg\" alt=\"Comment cr\u00e9er des bascules et des accord\u00e9ons dans WordPress\" ><\/a><\/p>\n<p>Si vous pr\u00e9f\u00e9rez les didacticiels vid\u00e9o, jetez un \u0153il \u00e0 celui-ci cr\u00e9\u00e9 par les auteurs de Qi\u00a0:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/WDgy5sFM0vc\" frameborder=\"0\"><\/iframe><\/div>\n<h2>En conclusion<\/h2>\n<p>Au fur et \u00e0 mesure que vous vous familiariserez avec le plugin, vous explorerez des options encore plus raffin\u00e9es pour affiner le style de votre widget Accord\u00e9on et bascule. Cet outil intuitif est parfait pour les d\u00e9butants car il est incroyablement facile \u00e0 utiliser, tandis que les utilisateurs avanc\u00e9s appr\u00e9cieront \u00e9galement de l&rsquo;utiliser car il offre une telle pl\u00e9nitude d&rsquo;options de personnalisation.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apprenez \u00e0 cr\u00e9er des accord\u00e9ons dans WordPress avec un plugin gratuit et organisez votre contenu de la mani\u00e8re la plus conviviale !<\/p>\n","protected":false},"author":1,"featured_media":364273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-367414","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\/367414","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=367414"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367414\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364273"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}