{"id":40993,"date":"2021-08-18T11:07:31","date_gmt":"2021-08-18T09:07:31","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/jettricks-unfold-widget-bouton-pour-afficher-plus-de-contenu\/"},"modified":"2023-08-29T14:19:56","modified_gmt":"2023-08-29T12:19:56","slug":"jettricks-unfold-widget-bouton-pour-afficher-plus-de-contenu","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/jettricks-unfold-widget-bouton-pour-afficher-plus-de-contenu\/","title":{"rendered":"JetTricks Unfold Widget : Bouton pour afficher plus de contenu"},"content":{"rendered":"\n<p>Ce tutoriel pr\u00e9sente le widget <strong>Unfold<\/strong> du plugin <a href=\"https:\/\/lacolmenatecnologica.com\/fr\/academie-elementor\/?jsf=jet-engine:1&amp;tax=categorias-ea:82\">JetTricks<\/a> inclus dans le site <a href=\"https:\/\/lacolmenatecnologica.com\/unirse\/1-licencia-jetplugins\/\">Crocoblock JetPlugins<\/a>. Vous aurez la possibilit\u00e9 de masquer une partie d&#8217;un texte ou d&#8217;un mod\u00e8le et d&#8217;afficher le reste lorsque l&#8217;utilisateur clique sur un bouton.<\/p>\n\n<p>Ce widget <strong>peut vous aider \u00e0 gagner de l&#8217;espace<\/strong> et \u00e0 mieux organiser l&#8217;apparence de la page en masquant le contenu suppl\u00e9mentaire. Contrairement au widget <strong>Lire plus<\/strong>, vous ne pouvez pas masquer une ou plusieurs sections. Cependant, le widget Unfold <strong>peut \u00eatre ouvert et referm\u00e9<\/strong>. Il comprend \u00e9galement de nombreuses options de personnalisation qui peuvent vous aider \u00e0 en tirer le meilleur parti. Par exemple, vous pouvez le concevoir diff\u00e9remment en mode de pliage et de d\u00e9pliage. D&#8217;ailleurs, si vous voulez plus d&#8217;informations sur le widget <strong>Lire plus<\/strong>, je l&#8217;ajouterai bient\u00f4t \u00e0 l&#8217;<a href=\"https:\/\/lacolmenatecnologica.com\/fr\/academie-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Academy<\/a>.<\/p>\n\n<p>Une autre caract\u00e9ristique de ce widget est qu&#8217;il peut \u00eatre utilis\u00e9 non seulement pour afficher\/masquer du texte, mais aussi pour utiliser un mod\u00e8le que vous avez pr\u00e9alablement cr\u00e9\u00e9.<\/p>\n\n<p>Voyons comment fonctionne le widget Unfold.<\/p>\n\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#paso1\">1. ajouter le widget Deploy<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso2\">2. D\u00e9finir la configuration<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso3\">3. Choisir le contenu<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso4\">4. Personnaliser le bouton<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso5\">5. Pr\u00e9parer \u00e0 sa guise<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"paso1\">1. ajouter le widget Deploy<\/h2>\n\n<p>Ouvrez la <strong>page<\/strong> ou l&#8217;<strong>article<\/strong> auquel vous souhaitez ajouter un widget <strong>Unfold<\/strong> dans le constructeur Elementor. Recherchez le <strong>widget D\u00e9plier<\/strong> dans le panneau \u00c9l\u00e9ments et faites-le glisser vers la section o\u00f9 vous souhaitez le placer.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"359\" height=\"272\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Les JetTricks se d&#xE9;voilent\" class=\"wp-image-16745\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 359w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1-300x227.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=143 143w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=215 215w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"paso2\">2. D\u00e9finir la configuration<\/h2>\n\n<p>Dans la barre lat\u00e9rale gauche, vous verrez le bloc <strong>Param\u00e8tres<\/strong>. Vous pouvez ici d\u00e9finir les param\u00e8tres de pliage et de d\u00e9pliage.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"359\" height=\"778\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"JetTricks Unfold - Param&#xE8;tres\" class=\"wp-image-16746\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 359w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2-138x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 138w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=215 215w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=287 287w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/a><\/figure><\/div>\n\n<ul class=\"wp-block-list\"><li><strong>Pli<\/strong>: Si vous n&#8217;activez pas cette option, le bloc de contenu sera affich\u00e9 ouvert par d\u00e9faut. Dans le cas contraire, il sera affich\u00e9 ferm\u00e9.<\/li><li><strong>D\u00e9filement vers le haut apr\u00e8s masquage du contenu<\/strong>  (retour au d\u00e9but apr\u00e8s avoir masqu\u00e9 le contenu) : si vous activez cette option, l&#8217;\u00e9cran d\u00e9filera vers le haut lorsque vous masquerez le contenu d&#8217;un bloc, ce qui peut s&#8217;av\u00e9rer tr\u00e8s utile lorsque le contenu est long afin que l&#8217;utilisateur ne perde pas le point de r\u00e9f\u00e9rence.<\/li><li><strong>Hauteur ferm\u00e9e<\/strong>: cette option permet de d\u00e9finir la hauteur du bloc de contenu lorsqu&#8217;il est ferm\u00e9. Vous pouvez le faire en d\u00e9pla\u00e7ant le curseur ou en tapant simplement la valeur requise dans la barre ;<\/li><li><strong>Hauteur du s\u00e9parateur<\/strong>: d\u00e9finit la hauteur de la bande de s\u00e9paration color\u00e9e en partant du bas du bloc d\u00e9pli\u00e9 et en allant vers le haut. Vous pouvez \u00e9claircir la couleur par transparence dans l&#8217;onglet <strong>Style<\/strong>. Il est m\u00eame possible de le convertir en d\u00e9grad\u00e9.<\/li><li><strong>Dur\u00e9e<\/strong>: vous pouvez ici choisir la vitesse \u00e0 laquelle le bloc de contenu sera pli\u00e9 et d\u00e9pli\u00e9. Plus la valeur est \u00e9lev\u00e9e, plus le mouvement est lent.<\/li><li><strong>Facilitation<\/strong>: vous avez le choix entre 9 types d&#8217;animations de pliage et de d\u00e9pliage.<\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"paso3\">3. Choisir le contenu<\/h2>\n\n<p>Dans le bloc <strong>Contenu<\/strong>, vous pouvez ajouter un contenu statique (texte, images, vid\u00e9o ou autres m\u00e9dias) ou l&#8217;extraire dynamiquement du champ m\u00e9ta. En outre, vous pouvez ajouter n&#8217;importe quel mod\u00e8le disponible dans le bloc de contenu cach\u00e9.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-jettricks-content.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"360\" height=\"944\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-jettricks-content.gif?strip=all&quality=92&webp=92&avif=92&resize=360%2C944\" alt=\"D&#xE9;ployer le contenu de JetTricks\" class=\"wp-image-16747\"\/><\/a><\/figure><\/div>\n\n<p>Pour ajouter le mod\u00e8le pr\u00eat \u00e0 l&#8217;emploi au bloc cach\u00e9, vous devez appuyer sur le bouton &#8221; <strong>Mod\u00e8le&#8221;<\/strong> dans la ligne &#8221; <strong>Type de contenu<\/strong> &#8220;, qui est le bouton avec l&#8217;ic\u00f4ne de feuille. Choisissez le mod\u00e8le dans le menu d\u00e9roulant et il sera automatiquement ajout\u00e9 au bloc de contenu cach\u00e9.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"paso4\">4. Personnaliser le bouton<\/h2>\n\n<p>Vous pouvez personnaliser le bouton qui permet de plier et de d\u00e9plier le bloc de contenu cach\u00e9 dans la section <strong>Bouton<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Alignement<\/strong>: permet de choisir l&#8217;emplacement du bouton.<\/li><li><strong>Ic\u00f4ne de pli<\/strong> age : vous pouvez choisir l&#8217;ic\u00f4ne des boutons de pliage et de d\u00e9pliage dans la biblioth\u00e8que d&#8217;ic\u00f4nes ou t\u00e9l\u00e9charger votre propre fichier SVG.<\/li><li><strong>Texte du pli<\/strong>: tapez ici les titres des boutons de pliage et de d\u00e9pliage.<\/li><\/ul>\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-boton.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"268\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-boton.gif?strip=all&quality=92&webp=92&avif=92&resize=360%2C268\" alt=\"D&#xE9;plier - Bouton\" class=\"wp-image-16748\"\/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"paso5\">5. Pr\u00e9parer \u00e0 sa guise<\/h2>\n\n<p>L&#8217;onglet <strong>Style<\/strong> propose de nombreux param\u00e8tres de mise en page pour chaque \u00e9l\u00e9ment. Voici quelques exemples de ce que vous pourriez cr\u00e9er \u00e0 l&#8217;aide du widget Unfold :<\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/02\/unfold_cases.mp4\" playsinline=\"\"><\/video><\/figure>\n<p>Ces quelques \u00e9tapes simples suffisent donc pour obtenir un bloc d&#8217;affichage impressionnant sur la page de votre site web.<\/p>\n","protected":false},"featured_media":31306,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-40993","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Ce tutoriel pr\u00e9sente le widget Unfold du plugin JetTricks inclus dans le site Crocoblock JetPlugins. Vous aurez la possibilit\u00e9 de masquer une partie d&#8217;un texte ou d&#8217;un mod\u00e8le et d&#8217;afficher le reste lorsque l&#8217;utilisateur clique sur un bouton. Ce widget peut vous aider \u00e0 gagner de l&#8217;espace et \u00e0 mieux organiser l&#8217;apparence de la page&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/40993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/31306"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=40993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}