{"id":371127,"date":"2022-12-25T19:22:00","date_gmt":"2022-12-25T16:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371127"},"modified":"2023-04-11T15:35:52","modified_gmt":"2023-04-11T12:35:52","slug":"comment-ajouter-une-liste-de-prix-a-votre-site-web-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-une-liste-de-prix-a-votre-site-web-wordpress\/","title":{"rendered":"Comment ajouter une liste de prix \u00e0 votre site Web WordPress"},"content":{"rendered":"\n

Grand ou petit, le prix est toujours important, tant pour le client que pour le vendeur. Quoi que vous vendiez, il est recommand\u00e9 de rendre vos prix aussi transparents que possible<\/strong>. Il est donc facile de comprendre l’importance des tableaux de prix pour tout type de boutique en ligne. Outre les prix, ils affichent g\u00e9n\u00e9ralement les caract\u00e9ristiques du produit ou la comparaison des packages de produits par prix<\/strong> afin que l’acheteur puisse prendre une d\u00e9cision \u00e9clair\u00e9e concernant son achat.<\/p>\n

Une liste de prix soign\u00e9e et bien structur\u00e9e vous donne \u00e9galement une apparence professionnelle et digne de confiance, c’est donc certainement un \u00e9l\u00e9ment auquel vous devez faire attention lors de la cr\u00e9ation d’une<\/a> boutique<\/strong> en ligne ou d’un site Web dans le but de vendre. De nombreux th\u00e8mes WordPress sont livr\u00e9s avec une liste de prix d\u00e9j\u00e0 incluse, et certains n\u00e9cessitent un plugin de tableau de prix. Dans cet article, nous allons vous montrer comment cr\u00e9er une liste de prix Elementor avec l’ addon QI elementor<\/a>.<\/p>\n

Modules Qi pour Elementor<\/h2>\n

La liste de prix ne ressemble pas \u00e0 un \u00e9l\u00e9ment amusant, c’est plut\u00f4t un \u00e9l\u00e9ment o\u00f9 la r\u00e9alit\u00e9 et les souhaits du client se rencontrent. Mais ce n’est qu’une raison de plus pour rendre les listes de prix aussi belles et \u00e9l\u00e9gantes que possible<\/strong>. Les addons Qi Elementor vous prouveront que la cr\u00e9ation de listes de prix peut \u00eatre bien plus qu’une t\u00e2che intimidante<\/strong>. Il s’agit d’un outil exceptionnellement convivial qui vous permet de cr\u00e9er des listes de prix \u00e9l\u00e9gantes et d\u00e9taill\u00e9es qui correspondent parfaitement au style et \u00e0 l’objectif de votre site Web.<\/p>\n

Le nouveau Qi est incroyablement polyvalent et comprend une vari\u00e9t\u00e9 de widgets fantastiques<\/strong>, mais surtout, il vous permet de cr\u00e9er des listes de prix impressionnantes. Ce qui le rend particuli\u00e8rement pratique pour tous les types de sites Web WordPress, c’est qu’il est si flexible et permet de nombreuses personnalisations<\/a>.<\/p>\n

La meilleure fa\u00e7on de comprendre \u00e0 quel point Qi est puissant et toutes les options de liste de prix que vous pouvez d\u00e9finir avec lui, est \u00e0 travers des exemples, et c’est exactement ce que nous allons vous montrer<\/strong>.<\/p>\n

Le composant de l’\u00e9l\u00e9ment de prix est le titre<\/strong> de l’article auquel le prix de l’article est li\u00e9. La description de l’article<\/strong> n’est pas obligatoire mais vous pouvez l’avoir si vous le souhaitez. Comme vous pouvez le voir dans nos exemples, un menu peut contenir des images<\/strong>. Vous avez \u00e9galement la possibilit\u00e9 d’avoir l’ image avant et\/ou apr\u00e8s l’item<\/strong>, mais bien s\u00fbr il n’est pas n\u00e9cessaire d’avoir l’image, comme vous pouvez le voir dans le troisi\u00e8me exemple. Il y a une ligne facultative du<\/strong> sous-titre de l’article au prix qui peut \u00eatre stylis\u00e9e, et il y a la s\u00e9paration des articles, comme nous le voyons dans le troisi\u00e8me exemple. Le bouton est facultatif<\/strong>, il peut mener \u00e0 une liste plus compl\u00e8te ou n’importe o\u00f9 ailleurs.<\/p>\n

\"Comment<\/a><\/p>\n

Comment cr\u00e9er une liste de prix qui correspond \u00e0 votre style<\/h2>\n

\"Comment<\/a><\/p>\n

Faites attention, il y a deux onglets pour d\u00e9finir cet \u00e9l\u00e9ment<\/strong> – onglet Contenu et Style. L’onglet Avanc\u00e9 est l’onglet Elementor par d\u00e9faut contenu par chaque \u00e9l\u00e9ment de ce plugin.<\/p>\n

\"Comment<\/a><\/p>\n

La premi\u00e8re chose que vous devez faire est de choisir la mise en page<\/strong>. Il existe deux mises en page – Image avant et mise en page standard<\/strong>. La mise en page Image avant indique clairement que l’ image est affich\u00e9e avant l’\u00e9l\u00e9ment<\/strong>, comme vous pouvez le voir dans l’exemple ci-dessus. Dans la disposition standard, l’ image s’affiche apr\u00e8s le titre de l’\u00e9l\u00e9ment<\/strong>. Si vous ne voulez pas du tout avoir d’image ici, tout ce que vous avez \u00e0 faire est de ne pas ins\u00e9rer l’image de l’article.<\/p>\n

\"Comment<\/a><\/p>\n

L’insertion de donn\u00e9es d’\u00e9l\u00e9ment dans le menu<\/strong> est la prochaine chose \u00e0 faire d\u00e8s que la mise en page est s\u00e9lectionn\u00e9e. N’importe quel nombre d’\u00e9l\u00e9ments peut \u00eatre ajout\u00e9<\/strong>. Ce nombre est de trois par d\u00e9faut, mais vous pouvez en avoir plus ou moins, selon vos besoins. En plus des informations telles que le nom, la description, le prix et l’image, vous remarquerez qu’ici vous pouvez choisir les couleurs du nom et du prix<\/strong>. Au cas o\u00f9 vous ne voudriez pas que tous ces \u00e9l\u00e9ments aient la m\u00eame couleur, changez-la ici, sinon, vous styliserez tout ce dont vous avez besoin plus tard dans l’onglet Style<\/strong>. L’onglet Style, entre autres, a la possibilit\u00e9 d’ajuster ces couleurs et vous permet de d\u00e9finir la couleur de tous les \u00e9l\u00e9ments en un seul endroit<\/strong>. Si vous souhaitez que chaque \u00e9l\u00e9ment ait des couleurs diff\u00e9rentes, vous devez le d\u00e9finir s\u00e9par\u00e9ment dans chaque \u00e9l\u00e9ment.<\/p>\n

Il y a aussi une option pour entrer le prix avec une remise.<\/p>\n

\"Comment<\/a><\/p>\n

De cette fa\u00e7on, des donn\u00e9es sont ajout\u00e9es pour chaque \u00e9l\u00e9ment, et les \u00e9l\u00e9ments peuvent \u00eatre dupliqu\u00e9s, supprim\u00e9s et bien s\u00fbr vous pouvez toujours en ajouter de nouveaux<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Comme nous l’avons dit, le bouton peut ou non \u00eatre sur la liste. Si vous ne le souhaitez pas, il vous suffit de ne pas saisir le texte du bouton. Si vous voulez le bouton, voici l’endroit o\u00f9 vous sp\u00e9cifiez le style du bouton. Les couleurs et la personnalisation suppl\u00e9mentaire peuvent \u00eatre d\u00e9finies dans l’onglet style. Nous vous recommandons d’explorer les options ici, de jouer, de v\u00e9rifier toutes les mises en page et les autres options disponibles. L’ic\u00f4ne du bouton par exemple est encore une autre option int\u00e9ressante qui vous permet d’ajouter une ic\u00f4ne au bouton.<\/p>\n

\"Comment<\/a><\/p>\n

Exemple<\/strong>: Mise en page \u2013 Contour, Type-Avec bordure int\u00e9rieure et ic\u00f4ne ajout\u00e9e :<\/p>\n

\"Comment<\/a><\/p>\n

Dans l’onglet style, on ajuste tout ce qui concerne les mises en page, les polices, les couleurs<\/strong> \u2026 Les options ici sont divis\u00e9es en segments pour faciliter la navigation.<\/p>\n

\"Comment<\/a><\/p>\n

Section Style – tous les param\u00e8tres pour le titre et la description<\/strong>. Ce sont les param\u00e8tres li\u00e9s aux couleurs et aux polices<\/strong>. Il est tr\u00e8s facile de naviguer et nous vous recommandons d’explorer et d’exp\u00e9rimenter pour trouver le style qui correspond le mieux \u00e0 votre site Web.<\/p>\n

\"Comment<\/a><\/p>\n

Style de prix – c’est ici que vous trouverez tous les param\u00e8tres li\u00e9s au prix<\/strong>. Outre la police et la couleur, l’option qui est int\u00e9ressante ici est la couleur de fond et le rayon de la bordure des prix<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Avec ces options, nous pouvons obtenir le r\u00e9sultat comme dans l’exemple ci-dessous\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Le rembourrage des prix affecte \u00e9galement ce contexte. Le rembourrage est en fait un espace autour du prix et \u00e0 mesure que le rembourrage augmente, l’arri\u00e8re-plan augmente \u00e9galement<\/strong>.<\/p>\n

La partie style de contenu fait r\u00e9f\u00e9rence \u00e0 l’organisation de la ligne entre le titre de l’article et le prix. Vous pouvez choisir le style de la ligne, l’\u00e9paisseur de la marge<\/strong>, cela fait r\u00e9f\u00e9rence \u00e0 tout ce qui entoure cette ligne. C’est ici que les marges autour de la description et de l’image sont ajust\u00e9es.<\/p>\n

L’onglet style g\u00e9n\u00e9ral contient les options d’agencement de l’espace autour de l’\u00e9l\u00e9ment<\/strong>, c’est-\u00e0-dire l’espace entre les \u00e9l\u00e9ments. C’est \u00e9galement l\u00e0 que vous ajoutez un s\u00e9parateur entre les \u00e9l\u00e9ments et une marge sup\u00e9rieure au bouton qui est utilis\u00e9 pour modifier l’espace entre le dernier \u00e9l\u00e9ment et le bouton.<\/p>\n

Dans l’exemple ci-dessous, vous pouvez voir \u00e0 quoi il ressemble lorsque vous ajoutez le s\u00e9parateur et modifiez les espaces.<\/p>\n

\"Comment<\/a><\/p>\n

D’autres param\u00e8tres sont li\u00e9s au bouton. Ils sont divis\u00e9s en trois segments pour faciliter la navigation<\/strong> et font r\u00e9f\u00e9rence \u00e0 la disposition des polices sur le bouton, les couleurs des boutons et de la bordure, l’\u00e9paisseur de la bordure et l’ajustement de l’ic\u00f4ne si elle est dessus. Ils sont si intuitifs et faciles \u00e0 utiliser<\/strong> que toute explication sp\u00e9ciale \u00e0 leur sujet est tout simplement inutile – une fois que vous aurez ouvert toutes ces options, vous saurez exactement quoi faire. Alors, n’h\u00e9sitez pas \u00e0 explorer les options car nous sommes s\u00fbrs que ce plugin rend chaque liste de prix tout simplement magnifique<\/strong>.<\/p>\n

En conclusion<\/h2>\n

Peut-\u00eatre que vos prix ne sont pas beaux pour tout le monde, mais vos listes de prix peuvent l’\u00eatre. N’h\u00e9sitez pas \u00e0 essayer et \u00e0 jouer avec toutes les options offertes par ce plugin. Vous ne pouvez tout simplement pas vous tromper et vous avez toujours la possibilit\u00e9 de modifier vos param\u00e8tres de plusieurs mani\u00e8res. N’h\u00e9sitez pas \u00e0 poser des questions sur le plugin Qi Elementor et tout ce qui concerne ses fonctionnalit\u00e9s, nous serons ravis de vous r\u00e9pondre !<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Apprenez \u00e0 ajouter une liste de prix \u00e0 votre WordPress en quelques \u00e9tapes simples<\/p>\n","protected":false},"author":1,"featured_media":300313,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-371127","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\/371127","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=371127"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/371127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/300313"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=371127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=371127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=371127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}