{"id":371938,"date":"2023-04-07T16:05:00","date_gmt":"2023-04-07T13:05:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371938"},"modified":"2023-04-07T16:05:43","modified_gmt":"2023-04-07T13:05:43","slug":"comment-creer-un-flux-detape-a-laide-du-widget-de-processus-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-flux-detape-a-laide-du-widget-de-processus-elementor\/","title":{"rendered":"Comment cr\u00e9er un flux d&rsquo;\u00e9tape \u00e0 l&rsquo;aide du widget de processus Elementor"},"content":{"rendered":"\n<p>Quel que soit le type de site Web que vous poss\u00e9dez, il est essentiel non seulement d&rsquo;avoir un contenu de qualit\u00e9 mais aussi de pouvoir l&rsquo;afficher de mani\u00e8re attrayante. Heureusement, de nombreux outils nous permettent de <strong>partager un large \u00e9ventail d&rsquo;informations et de donn\u00e9es de mani\u00e8re cr\u00e9ative<\/strong>. Vous pouvez <a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-effet-elementor-parallax-rapidement-et-facilement\/\" title=\"ajouter un effet de parallaxe\">ajouter un effet de parallaxe<\/a> pour mettre en valeur le ton moderne de votre site, <a href=\"https:\/\/themewp.inform.click\/fr\/comment-creer-des-bascules-et-des-accordeons-dans-wordpress\/\" title=\"utiliser des bascules et des accord\u00e9ons\">utiliser des bascules et des accord\u00e9ons<\/a> pour obtenir une meilleure structure de contenu, et les widgets de processus sont pr\u00e9cieux car ils nous permettent d&rsquo;afficher des donn\u00e9es complexes de mani\u00e8re claire, int\u00e9ressante et engageante.<\/p>\n<p>Si vous avez un type de contenu qui implique l&rsquo;affichage d&rsquo;une sorte de processus, il est essentiel de pouvoir le d\u00e9composer pour vos utilisateurs de mani\u00e8re simple, claire et concise, sans perdre aucun d\u00e9tail important qui s&rsquo;y rapporte. Les magasins en ligne trouveront le widget de processus pr\u00e9cieux car il peut \u00eatre utilis\u00e9 pour <strong>montrer le processus d&rsquo;achat en ligne \u00e9tape par \u00e9tape, les entreprises peuvent partager \u00e0 quoi ressemble la proc\u00e9dure d&#8217;emploi dans leur entreprise<\/strong>, les sites Web m\u00e9dicaux peuvent <strong>pr\u00e9senter le processus de gu\u00e9rison \u00e0 travers les \u00e9tapes<\/strong>, tout type de flux de travail peut \u00eatre repr\u00e9sent\u00e9 visuellement par phases \u2013 les possibilit\u00e9s sont illimit\u00e9es.<\/p>\n<p>Dans cet article, nous vous montrerons comment configurer et personnaliser facilement le widget de processus sur votre site Web. Restez \u00e0 l&rsquo;\u00e9coute pour en savoir plus sur\u00a0:<\/p>\n<\/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\/colSjAmnAQU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Modules Qi pour le widget de processus Elementor<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons for Elementor<\/a> est un outil puissant, polyvalent et <strong>tr\u00e8s facile \u00e0 utiliser<\/strong> qui ajoute un air d&rsquo;\u00e9l\u00e9gance en plus de la fonctionnalit\u00e9 \u00e0 votre site Web. \u00c0 l&rsquo;heure actuelle, cet outil est la <strong>plus grande collection de modules compl\u00e9mentaires gratuits sur le Web et comprend 60 widgets gratuits<\/strong> qui permettent m\u00eame aux d\u00e9butants complets d&rsquo;enrichir leurs sites Web avec des \u00e9l\u00e9ments efficaces sans aucune connaissance en codage n\u00e9cessaire. Outre les widgets gratuits, vous pouvez trouver une incroyable prime 40+.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Le widget de processus<\/a> inclus gratuitement comprend de <strong>nombreuses options de personnalisation et vous permet de cr\u00e9er de superbes affichages de toutes sortes de flux de travail et de processus<\/strong>, qui correspondent parfaitement aux besoins et au style de votre site Web.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.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-288518-633e36d783b50.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Apr\u00e8s avoir fait glisser le widget de processus sur le c\u00f4t\u00e9, vous obtiendrez sa vue par d\u00e9faut que vous pouvez modifier. Il est important de noter que le widget utilise les polices utilis\u00e9es par votre th\u00e8me, donc si vous voulez une uniformit\u00e9 dans cette partie vous n&rsquo;aurez pas \u00e0 la changer.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.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-288518-633e36d96dc04.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Les options de configuration du widget Processus sont les options Contenu et Style. Ici, nous <strong>choisirons quel \u00e9l\u00e9ment nous voulons dans notre widget de processus et nous d\u00e9terminerons \u00e0 quoi cela ressemblera en termes de style<\/strong>. Il existe de nombreux param\u00e8tres de personnalisation, mais ils sont si bien organis\u00e9s que vous trouverez tr\u00e8s facile d&rsquo;essayer et d&rsquo;exp\u00e9rimenter les options.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.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-288518-633e36db5fdc3.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h2>Widget de processus &#8211; Option de l&rsquo;onglet Contenu<\/h2>\n<p>Voici les options g\u00e9n\u00e9rales, les options d&rsquo;animation, la mise en page du processus et un outil de d\u00e9veloppement utile, mais aussi <strong>l&rsquo;aide o\u00f9 vous pouvez trouver des instructions et une assistance de l&rsquo;auteur de l&rsquo;addon lui<\/strong> -m\u00eame .<\/p>\n<h3>Options g\u00e9n\u00e9rales<\/h3>\n<p>La premi\u00e8re chose dont vous aurez besoin est de configurer les param\u00e8tres g\u00e9n\u00e9raux du widget lui-m\u00eame.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.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-288518-633e36ddf0499.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Ici, nous choisissons le <strong>nombre de colonnes et si vous voulez que tous vos \u00e9l\u00e9ments soient sur une seule ligne, vous s\u00e9lectionnerez le nombre d&rsquo;\u00e9l\u00e9ments pour le nombre de colonnes<\/strong>. Sinon, si vous mettez moins de colonnes que l&rsquo;\u00e9l\u00e9ment, les \u00e9l\u00e9ments seront sur 2 lignes ou plus, ou si vous s\u00e9lectionnez plus de colonnes que l&rsquo;\u00e9l\u00e9ment, il vous restera un espace vide dans la ligne.<\/p>\n<p>Vous saurez probablement combien d&rsquo;\u00e9l\u00e9ments vous voulez d\u00e8s que vous commencerez \u00e0 le construire, donc j&rsquo;aime le configurer tout de suite, et bien s\u00fbr, vous pouvez \u00e9galement personnaliser ces param\u00e8tres plus tard.<\/p>\n<p>Un param\u00e8tre important est <strong>Columns Responsive<\/strong> o\u00f9 nous <strong>ajustons l&rsquo;apparence de notre processus sur des appareils de diff\u00e9rentes tailles<\/strong>. Vous pouvez s\u00e9lectionner pr\u00e9d\u00e9fini ou personnalis\u00e9, c&rsquo;est votre choix.<\/p>\n<p>Sur la base de notre exp\u00e9rience, la taille de 618-768px semble meilleure lorsqu&rsquo;elle utilise une colonne, nous l&rsquo;avons donc formul\u00e9e de cette fa\u00e7on.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.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-288518-633e36e0a9b27.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p><strong>Les \u00e9l\u00e9ments servent bien s\u00fbr \u00e0 ajouter un \u00e9l\u00e9ment au processus<\/strong>. Vous pouvez en ajouter autant que vous le souhaitez. Il existe une option permettant \u00e0 la fois de <strong>copier l&rsquo;\u00e9l\u00e9ment et de le supprimer<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.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-288518-633e36e2be51a.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p><strong>Chaque article est personnalis\u00e9 s\u00e9par\u00e9ment<\/strong>, ses caract\u00e9ristiques sp\u00e9cifiques sont renseign\u00e9es et <strong>il est possible de d\u00e9finir certains articles pour chaque article afin que chaque article ait un aspect diff\u00e9rent<\/strong>. Toutefois, <strong>si vous souhaitez que tous les \u00e9l\u00e9ments aient la m\u00eame apparence, vous sp\u00e9cifierez leur style dans les options de style, et non dans chaque \u00e9l\u00e9ment individuellement<\/strong>. Tout ce qui est d\u00e9fini dans les options de style s&rsquo;applique \u00e0 tous les \u00e9l\u00e9ments de processus, \u00e0 l&rsquo;exception de ceux o\u00f9 l&rsquo;\u00e9l\u00e9ment lui-m\u00eame est d\u00e9fini l\u00e9g\u00e8rement diff\u00e9remment par rapport aux param\u00e8tres de style. Tout sera clair pour vous lorsque nous passerons par les param\u00e8tres.<\/p>\n<p>Les champs <strong>Titre<\/strong> et <strong>Texte sont utilis\u00e9s pour<\/strong> <strong>saisir le texte qui accompagne une \u00e9tape de processus sp\u00e9cifique<\/strong>. Bien s\u00fbr, il est naturel dans ce cas que chaque \u00e9tape ait un titre et une description diff\u00e9rents, c&rsquo;est donc le seul endroit o\u00f9 vous pouvez entrer ces valeurs.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.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-288518-633e36e46aed3.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Voici \u00e0 quoi cela ressemble lorsqu&rsquo;il est remplac\u00e9 par notre texte.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.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-288518-633e36e68d676.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p><strong>Les options d&rsquo;\u00e9l\u00e9ment font r\u00e9f\u00e9rence \u00e0 la partie de l&rsquo;\u00e9l\u00e9ment qui n&rsquo;est ni le titre ni la description<\/strong>. Nous utilisons <strong>Item Offset pour positionner un \u00e9l\u00e9ment<\/strong>. Le cercle avec l&rsquo;unit\u00e9 et la ligne menant \u00e0 l&rsquo;\u00e9tape suivante font partie d&rsquo;un \u00e9l\u00e9ment et en ajustant le d\u00e9calage d&rsquo;\u00e9l\u00e9ment, <strong>nous d\u00e9pla\u00e7ons ces \u00e9l\u00e9ments vers le bas ou vers le haut<\/strong>. Comme vous pouvez le voir sur l&rsquo;image, nous avons d\u00e9fini un d\u00e9calage pour le premier \u00e9l\u00e9ment et il est maintenant un peu en dessous du niveau de l&rsquo;\u00e9l\u00e9ment suivant.<\/p>\n<p>L&rsquo;option de d\u00e9calage d&rsquo;\u00e9l\u00e9ment existe \u00e9galement dans les options de style, qui, comme nous l&rsquo;avons mentionn\u00e9, tout ce qui y est d\u00e9fini s&rsquo;applique \u00e0 tous les \u00e9l\u00e9ments de processus. Par cons\u00e9quent, si vous souhaitez que tous les \u00e9l\u00e9ments soient dans un plan diff\u00e9rent pour chaque \u00e9l\u00e9ment, vous d\u00e9finirez le d\u00e9calage s\u00e9par\u00e9ment.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.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-288518-633e36e95bd4c.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> est la taille du champ dans lequel il est actuellement 1, c&rsquo;est-\u00e0-dire le nombre d&rsquo;\u00e9tapes, et plus tard nous verrons ce que l&rsquo;on peut trouver d&rsquo;autre ici. (Cette option se trouve \u00e9galement dans les options de style si nous voulons que tous les porte-objets aient la m\u00eame taille).<\/p>\n<p><strong>La typographie des items<\/strong> fait r\u00e9f\u00e9rence aux caract\u00e9ristiques typographiques du nombre d&rsquo;\u00e9tapes.<\/p>\n<p>L&rsquo; <strong>arri\u00e8re<\/strong> -plan sert \u00e0 <strong>attribuer la couleur ou l&rsquo;arri\u00e8re-plan appropri\u00e9 \u00e0 l&rsquo;\u00e9l\u00e9ment<\/strong>. En outre, nous pouvons d\u00e9finir un arri\u00e8re-plan d\u00e9grad\u00e9. Si nous voulons que tous les \u00e9l\u00e9ments aient le m\u00eame arri\u00e8re-plan, nous l&rsquo;ajusterons dans les options de style, si nous voulons que l&rsquo;arri\u00e8re-plan soit diff\u00e9rent pour un \u00e9l\u00e9ment diff\u00e9rent, nous l&rsquo;ajusterons via les param\u00e8tres de l&rsquo;\u00e9l\u00e9ment.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.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-288518-633e36eb93a9c.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Pour l&rsquo;instant, nous n&rsquo;ajouterons que la couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.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-288518-633e36edc20b7.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Par d\u00e9faut, les \u00e9l\u00e9ments sont affich\u00e9s sous forme de cercles, mais si vous voulez un carr\u00e9 ou une forme avec certains angles, le <strong>rayon du porte-\u00e9l\u00e9ment<\/strong> est l&rsquo;endroit o\u00f9 vous l&rsquo;ajusterez. <strong>Quand la valeur est 0 alors c&rsquo;est le carr\u00e9 des angles droits<\/strong>. En ajoutant des valeurs, vous verrez comment les angles changent. Si vous supprimez les valeurs, vous obtenez \u00e0 nouveau un cercle. Tous les angles ne doivent pas n\u00e9cessairement \u00eatre identiques, vous pouvez d\u00e9finir une valeur diff\u00e9rente pour chaque angle.<\/p>\n<p><strong>Le type de bordure, la largeur et la couleur font r\u00e9f\u00e9rence aux \u00e9l\u00e9ments de bordure<\/strong>. Lorsque vous ne voulez pas de bordure, Border est Type None.<\/p>\n<p>Vous avez \u00e9galement tous ces param\u00e8tres dans les options de style, si vous voulez que tous les \u00e9l\u00e9ments soient identiques.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.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-288518-633e36f07dd7e.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Nous venons de voir comment modifier le d\u00e9calage et nous avons maintenant deux options qui nous permettent de modifier uniquement la position de la ligne qui m\u00e8ne au processus suivant. <strong>Le d\u00e9calage du haut de la ligne<\/strong> est utilis\u00e9 pour <strong>d\u00e9placer la position de la ligne (haut \/ bas)<\/strong> et <strong>la rotation de la ligne est utilis\u00e9e pour la faire pivoter<\/strong>. Comme vous pouvez le voir dans la note ci-dessous, nous avons fait pivoter la ligne et elle n&rsquo;est plus perpendiculaire \u00e0 l&rsquo;\u00e9l\u00e9ment. Vous n&rsquo;avez ces param\u00e8tres que sur l&rsquo;\u00e9l\u00e9ment lui-m\u00eame.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.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-288518-633e36f3073fc.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Ce que nous avons intentionnellement manqu\u00e9 au d\u00e9but, c&rsquo;est l&rsquo; <strong>option Type d&rsquo;ic\u00f4ne<\/strong>, elle nous sert \u00e0 <strong>ajouter une ic\u00f4ne de la biblioth\u00e8que \u00e0 l&rsquo;\u00e9l\u00e9ment ou \u00e0 t\u00e9l\u00e9charger notre ic\u00f4ne SVG<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.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-288518-633e36f658152.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Faites attention \u00e0 ce qui se passe ensuite, <strong>le nombre ordinal d&rsquo;\u00e9tapes n&rsquo;est plus \u00e9crit au centre de l&rsquo;\u00e9l\u00e9ment mais sous la forme d&rsquo;un cercle suppl\u00e9mentaire s\u00e9par\u00e9<\/strong>.<\/p>\n<p>D\u00e9sormais, la <strong>typographie<\/strong> et <strong>la couleur de l&rsquo;\u00e9l\u00e9ment font r\u00e9f\u00e9rence \u00e0 l&rsquo;ic\u00f4ne elle-m\u00eame<\/strong>. Ici, nous allons ajuster la taille (en option de taille de typographie) et la couleur de chaque ic\u00f4ne.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.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-288518-633e36f84bdde.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Une autre chose que nous n&rsquo;avons pas examin\u00e9e plus en d\u00e9tail ci-dessus est l&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;\u00e9l\u00e9ment, comme dans le cas du deuxi\u00e8me \u00e9l\u00e9ment de l&rsquo;exemple\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.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-288518-633e36fac84a2.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p><strong>Chaque image de fond comporte certains param\u00e8tres<\/strong> concernant le positionnement de l&rsquo;image, sa taille et s&rsquo;il s&rsquo;agira d&rsquo;un fond uni ou avec un effet de d\u00e9filement (option de pi\u00e8ce jointe). Vous aurez toutes ces options lorsque vous utiliserez une image d&rsquo;arri\u00e8re-plan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.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-288518-633e36fe223dd.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Apr\u00e8s avoir d\u00e9fini les options g\u00e9n\u00e9rales, notre widget de processus ressemble \u00e0 ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.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-288518-633e370092b5f.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Afficher les options d&rsquo;animation<\/h3>\n<p>Le widget de processus peut avoir une animation &#8211; <strong>les \u00e9l\u00e9ments sont charg\u00e9s les uns apr\u00e8s les autres et apparaissent dans le m\u00eame ordre<\/strong>, et c&rsquo;est \u00e0 cet endroit que nous ajusterons si nous le voulons ou non.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.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-288518-633e37034cbd2.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Options de mise en page<\/h3>\n<p>Il existe deux options de mise en page &#8211; <strong>vue horizontale et verticale du processus<\/strong>. Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons tout montr\u00e9 horizontalement. Cependant, si vous optez pour l&rsquo;affichage vertical, les options sont exactement les m\u00eames. <strong>La seule chose \u00e0 laquelle il faut faire attention est le nombre de colonnes<\/strong> (nous en avons parl\u00e9 dans les options g\u00e9n\u00e9rales). Le processus vertical a toujours une colonne si nous voulons que les \u00e9l\u00e9ments soient dispos\u00e9s les uns en dessous des autres dans une colonne.<\/p>\n<p>Puisque nous avons d\u00e9fini trois colonnes pour notre exemple parce que nous avons 3 \u00e9l\u00e9ments, sans passer \u00e0 une colonne, notre widget ressemble \u00e0 ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.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-288518-633e3706c21f6.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Bien s\u00fbr, si nous mettons en place une colonne, tout sera comme il se doit\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.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-288518-633e3709b51cf.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Outils de d\u00e9veloppement<\/h3>\n<p>Cette option nous donne la possibilit\u00e9 de <strong>voir le widget sous forme de shortcode<\/strong> si nous en avons besoin.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.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-288518-633e370d32300.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Comme nous l&rsquo;avons mentionn\u00e9, nous pouvons <strong>trouver ici la documentation et l&rsquo;aide de l&rsquo;auteur<\/strong> des addons pour le widget lui-m\u00eame.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.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-288518-633e371118542.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h2>Widget de processus &#8211; Option de l&rsquo;onglet Style<\/h2>\n<p>L&rsquo;onglet style fournit des <strong>options pour styliser les parties du processus<\/strong>. Comme nous l&rsquo;avons d\u00e9j\u00e0 mentionn\u00e9, <strong>tout ce qui est d\u00e9fini ici s&rsquo;appliquera \u00e0 tous les \u00e9l\u00e9ments de notre processus, \u00e0 l&rsquo;exception de ceux dans lesquels quelque chose de diff\u00e9rent est d\u00e9fini sur l&rsquo;\u00e9l\u00e9ment lui-m\u00eame<\/strong>.<\/p>\n<h3>Options de style<\/h3>\n<p>Ici vous pouvez trouver diverses options r\u00e9p\u00e9t\u00e9es \u00e0 partir des \u00e9l\u00e9ments eux-m\u00eames, telles que celles li\u00e9es aux couleurs, \u00e0 la typographie, aux d\u00e9calages.<\/p>\n<p>La seule chose qui ne figure pas dans les \u00e9l\u00e9ments est l&rsquo; <strong>alignement<\/strong> qui sp\u00e9cifie <strong>comment le titre et le texte seront centr\u00e9s<\/strong>.<\/p>\n<p>Si vous voulez que tous les \u00e9l\u00e9ments soient identiques, vous ajusterez le style ici. Dans notre cas, nous avons principalement ajust\u00e9 les \u00e9l\u00e9ments car nous avons diff\u00e9rentes couleurs d&rsquo;arri\u00e8re-plan, diff\u00e9rentes tailles et positions. Ce que nous avons d\u00e9fini ici est la <strong>couleur de l&rsquo;\u00e9l\u00e9ment<\/strong>, c&rsquo;est-\u00e0-dire la couleur de l&rsquo;ic\u00f4ne qui \u00e9tait grise par d\u00e9faut et qui est maintenant noire pour nous.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.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-288518-633e371766e2b.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Options de style de ligne<\/h3>\n<p>Stylisation de la ligne de processus &#8211; nous avons <strong>plusieurs types<\/strong>, nous pouvons ajuster la couleur et l&rsquo;\u00e9paisseur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.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-288518-633e3719cdd73.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Style d&rsquo;espacement<\/h3>\n<p><strong>Espacement, espace au-dessus du sous-titre, au-dessus du texte et remplissage autour du texte<\/strong>. Ce rembourrage autour du texte sert en quelque sorte \u00e0 &quot;r\u00e9tr\u00e9cir&quot; le contenu en pla\u00e7ant le rembourrage dans un champ o\u00f9 il ne sera pas possible d&rsquo;afficher le texte.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.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-288518-633e371c3e0ee.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<h3>Style suppl\u00e9mentaire<\/h3>\n<p>Nous avons ces param\u00e8tres <strong>uniquement lorsque notre \u00e9l\u00e9ment contient une ic\u00f4ne ins\u00e9r\u00e9e, c&rsquo;est-\u00e0-dire lorsque nous avons ce champ suppl\u00e9mentaire dans lequel se trouve le num\u00e9ro<\/strong>. Les param\u00e8tres font r\u00e9f\u00e9rence \u00e0 ce num\u00e9ro et au champ dans lequel il se trouve.<\/p>\n<p><strong>La couleur du support suppl\u00e9mentaire<\/strong> est la couleur du champ dans lequel le num\u00e9ro et la <strong>typographie du support suppl\u00e9mentaire<\/strong> sont tous li\u00e9s \u00e0 l&rsquo;ajustement de l&rsquo;apparence du num\u00e9ro lui-m\u00eame. <strong>La taille du support suppl\u00e9mentaire<\/strong> correspond \u00e0 la taille du champ et, \u00e0 l&rsquo;aide de la position du support suppl\u00e9mentaire, nous pouvons modifier la position du champ.<\/p>\n<p>Nous pouvons \u00e9galement ajouter un arri\u00e8re-plan pour le champ d&rsquo;\u00e9l\u00e9ment r\u00e9gulier, mais nous ne pouvons pas l&rsquo;ajouter pour chaque champ individuellement ici, il sera appliqu\u00e9 \u00e0 tous les champs en g\u00e9n\u00e9ral. Nous avons ajout\u00e9 une image de fond.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.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-288518-633e371ec0061.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Voyons si nous nous comprenons bien et sur la base de la pr\u00e9sentation, nous pouvons voir comment certains processus ont \u00e9t\u00e9 effectu\u00e9s. Cela peut vous aider \u00e0 cr\u00e9er le v\u00f4tre et \u00e0 savoir imm\u00e9diatement o\u00f9 d\u00e9finir quoi.<\/p>\n<p>Nous avons d\u00e9j\u00e0 montr\u00e9 un exemple d&rsquo;horizontale. Ce que nous pouvons remarquer \u00e0 premi\u00e8re vue, c&rsquo;est que nous avons 3 colonnes et dans celles-ci, les \u00e9l\u00e9ments dans lesquels se trouvent des ic\u00f4nes &#8211; un champ suppl\u00e9mentaire avec le num\u00e9ro nous indique que l&rsquo;\u00e9l\u00e9ment est une ic\u00f4ne et non une image car nous avons dit que ce n&rsquo;est qu&rsquo;alors qu&rsquo;il appara\u00eet .<\/p>\n<p>\u00c9tant donn\u00e9 que les \u00e9l\u00e9ments ont des couleurs diff\u00e9rentes, nous savons que ces param\u00e8tres ont \u00e9t\u00e9 d\u00e9finis dans les \u00e9l\u00e9ments eux-m\u00eames, et non dans les options g\u00e9n\u00e9rales.<\/p>\n<p>On peut aussi remarquer que le d\u00e9calage est ajustable car tous les \u00e9l\u00e9ments ne sont pas dans le m\u00eame plan.<\/p>\n<p>Toutes les ic\u00f4nes et tous les textes ont les m\u00eames couleurs, ce qui nous indique que cela est d\u00e9fini dans les options de l&rsquo;onglet style.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.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-288518-633e37205efd6.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Le deuxi\u00e8me exemple, bien qu&rsquo;il semble plus compliqu\u00e9, est encore plus facile \u00e0 ex\u00e9cuter. Ici, la ligne sur la page est divis\u00e9e en deux parties. \u00c0 gauche, l&rsquo;image et \u00e0 droite, le processus.<\/p>\n<p>Le processus a une disposition verticale, ce qui signifie que le nombre de colonnes de ce processus est de 1 et que les 5 \u00e9l\u00e9ments sont plac\u00e9s les uns en dessous des autres.<\/p>\n<p>Tous les \u00e9l\u00e9ments sont dispos\u00e9s sym\u00e9triquement les uns sous les autres, ce qui signifie qu&rsquo;aucun d\u00e9calage n&rsquo;est d\u00e9fini.<\/p>\n<p>Tous les textes ont les m\u00eames caract\u00e9ristiques, le style est donc d\u00e9fini dans l&rsquo;onglet style.<br \/>\nIci, nous pouvons voir que chaque \u00e9l\u00e9ment a une image de fond (et qu&rsquo;il n&rsquo;y a pas de champs suppl\u00e9mentaires pour le num\u00e9ro), mais nous pouvons \u00e9galement remarquer que le num\u00e9ro n&rsquo;est pas au milieu de l&rsquo;\u00e9l\u00e9ment comme c&rsquo;est le cas par d\u00e9faut.<\/p>\n<p>Il existe une astuce que vous pouvez utiliser pour masquer le num\u00e9ro au cas o\u00f9 vous ne voudriez pas qu&rsquo;il s&rsquo;affiche. Tout ce que vous avez \u00e0 faire est de d\u00e9finir la taille de la typographie de l&rsquo;\u00e9l\u00e9ment sur 0px dans l&rsquo;onglet Style des options g\u00e9n\u00e9rales. De cette fa\u00e7on, le num\u00e9ro ne sera pas affich\u00e9.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.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-288518-633e3725561cd.jpg\" alt=\"Comment cr\u00e9er un flux d&#039;\u00e9tape \u00e0 l&#039;aide du widget de processus Elementor\"><\/a><\/p>\n<p>Cela peut \u00eatre utile si vous ne souhaitez pas afficher le processus mais utilisez simplement ce widget pour vos autres besoins et cela vous d\u00e9range d&rsquo;afficher le nombre ou les \u00e9tapes.<\/p>\n<h2>En conclusion<\/h2>\n<p>Ajouter un widget de processus \u00e0 votre site Web avec Qi Addons pour Elementor est non seulement facile, mais aussi amusant et vous permet \u00e9galement d&rsquo;exprimer votre cr\u00e9ativit\u00e9. Nous vous encourageons \u00e0 continuer \u00e0 explorer les moyens d&rsquo;enrichir la conception et les fonctionnalit\u00e9s de votre site Web. Si votre site Web se concentre principalement sur le contenu visuel &#8211; vous pouvez \u00e9galement \u00eatre curieux d&rsquo;en savoir plus sur <a href=\"https:\/\/themewp.inform.click\/fr\/page-et-ligne-pleine-largeur-delementor-expliquees-en-detail\/\" title=\"l&#039;ajout d&#039;une page et d&#039;une ligne pleine largeur\">l&rsquo;ajout d&rsquo;une page et d&rsquo;une ligne pleine largeur<\/a> \u00e0 votre site Web WordPress, ou si vous souhaitez obtenir une meilleure structure de contenu, vous voudrez peut-\u00eatre en <a href=\"https:\/\/themewp.inform.click\/fr\/comment-creer-des-onglets-wordpress-avec-qi-addons-pour-elementor\/\" title=\"savoir plus sur les onglets WordPress\">savoir plus sur les onglets WordPress<\/a>. Comme nous l&rsquo;avons mentionn\u00e9, Qi Addons est livr\u00e9 avec 60 widgets gratuits, donc exp\u00e9rimenter et essayer de nouvelles possibilit\u00e9s ne sera pas une menace pour votre budget, mais ne pourra que vous inspirer pour am\u00e9liorer votre site Web et y ajouter des fonctionnalit\u00e9s plus utiles.<\/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>Un moyen rapide et facile d&rsquo;ajouter un widget de processus Elementor et de pr\u00e9senter un flux d&rsquo;\u00e9tapes sur tout type de site Web WordPress.<\/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-371938","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\/371938","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=371938"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371938\/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=371938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=371938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=371938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}