{"id":3308,"date":"2024-09-07T18:42:52","date_gmt":"2024-09-07T18:42:52","guid":{"rendered":"https:\/\/tableberg.com\/?p=3308"},"modified":"2024-09-07T18:42:53","modified_gmt":"2024-09-07T18:42:53","slug":"comment-ajouter-des-boites-de-produits-amazon-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-add-amazon-product-boxes-in-wordpress\/","title":{"rendered":"Comment ajouter des bo\u00eetes de produits Amazon dans WordPress"},"content":{"rendered":"

Les bo\u00eetes \u00e0 produits Amazon sont con\u00e7ues pour pr\u00e9senter les produits disponibles sur la plateforme Amazon d'une mani\u00e8re visuellement attrayante. Elles comprennent des images, des caract\u00e9ristiques, des descriptions, des prix et des liens directs permettant aux internautes d'acheter les produits.<\/p>\n\n\n\n

L'objectif principal de cette bo\u00eete est d'informer les clients sur les caract\u00e9ristiques et les avantages du produit en un coup d'\u0153il et de les inciter \u00e0 l'acheter instantan\u00e9ment. Avec le plugin Tableberg, vous pouvez cr\u00e9er de superbes bo\u00eetes de produits Amazon dans l'\u00e9diteur WordPress.<\/p>\n\n\n\n

Dans cet article, nous allons couvrir un tutoriel sur la fa\u00e7on d'ajouter des bo\u00eetes de produits Amazon dans WordPress.<\/p>\n\n\n\n

\u00c9tape 01 : Ajouter le bloc Tableberg \u00e0 l'\u00e9diteur<\/h2>\n\n\n\n

Le plugin est livr\u00e9 avec un bloc personnalis\u00e9 nomm\u00e9 Tableberg. Cliquez sur le bouton ic\u00f4ne plus (+)<\/strong>. Ajouter le Bloc Tableberg<\/strong> \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

D\u00e9finissez le nombre de colonnes et de lignes dont vous avez besoin en fonction de votre contenu. Pour ce tutoriel, nous choisirons 2*1.<\/p>\n\n\n\n

\"D\u00e9finir<\/figure>\n\n\n\n

La version de base du tableau est pr\u00eate. Nous allons maintenant ajouter du contenu \u00e0 ses colonnes et \u00e0 ses lignes.<\/p>\n\n\n\n

\"S\u00e9lection<\/figure>\n\n\n\n

\u00c9tape 02 : Ajouter une image du produit Amazon<\/h2>\n\n\n\n

Tableberg vous permet d'ajouter plusieurs blocs personnalis\u00e9s aux cellules du tableau comme dans l'\u00e9diteur Gutenberg. Ajoutez le bloc Bloc d'images<\/strong> \u00e0 une cellule permettant de pr\u00e9senter l'image du produit Amazon.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

Nous avons ajout\u00e9 une image de produit Amazon. Vous pouvez augmenter sa taille en faisant glisser l'ic\u00f4ne circulaire tout en la maintenant enfonc\u00e9e.<\/p>\n\n\n\n

\"Augmenter<\/figure>\n\n\n\n

\u00c9tape 03 : Ajouter les d\u00e9tails du produit<\/h2>\n\n\n\n

Dans la colonne de droite, nous ajouterons le nom du produit, ses caract\u00e9ristiques, son prix et une br\u00e8ve description. Vous pouvez effectuer toutes ces op\u00e9rations \u00e0 l'aide de la fonction Bloc de paragraphes<\/strong>.<\/p>\n\n\n\n

\u00c9crire le nom du produit<\/h3>\n\n\n\n

Par d\u00e9faut, le Bloc de paragraphes<\/strong> est automatiquement s\u00e9lectionn\u00e9. Il suffit d'y inscrire le nom de votre produit.<\/p>\n\n\n\n

\"\u00c9crire<\/figure>\n\n\n\n

Augmenter la taille du nom du produit<\/strong> de la Section typographique<\/strong> dans la barre lat\u00e9rale droite. Ce texte doit \u00eatre plus grand que les autres.<\/p>\n\n\n\n

\"Redimensionner<\/figure>\n\n\n\n

Ajouter le prix du produit<\/h3>\n\n\n\n

Ajouter un nouveau Bloc de paragraphes<\/strong> pour \u00e9crire le prix de votre produit.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

Choisissez une couleur diff\u00e9rente pour la tarification afin d'attirer l'attention du public. <\/p>\n\n\n\n

\"Coloriser<\/figure>\n\n\n\n

Il est toujours bon d'afficher un prix r\u00e9duit pour susciter l'int\u00e9r\u00eat du public. Pour ce faire, vous pouvez ajouter un prix major\u00e9 avec un trait de plume.<\/p>\n\n\n\n

Inscrivez donc un prix plus \u00e9lev\u00e9. Les options de surlignage et de biffage vous permettent de d\u00e9finir une couleur diff\u00e9rente et de la biffer.<\/p>\n\n\n\n

\"R\u00e9diger<\/figure>\n\n\n\n

R\u00e9diger une description du produit<\/h3>\n\n\n\n

En utilisant un autre bloc Paragraphe, r\u00e9digez une description pour le produit Amazon.<\/p>\n\n\n\n

\"R\u00e9diger<\/figure>\n\n\n\n

\u00c9tape 04 : Ajouter un bouton CTA<\/h2>\n\n\n\n

Recherchez et ajoutez le Bloc de boutons<\/strong> sous la description.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

R\u00e9digez un texte pour le bouton. Ensuite, allez \u00e0 la page Onglet Param\u00e8tres<\/strong>. <\/p>\n\n\n\n

De Param\u00e8tres de largeur<\/strong>S\u00e9lectionnez une option pour augmenter la largeur du bouton<\/strong> comme vous le souhaitez.<\/p>\n\n\n\n

\"Augmenter<\/figure>\n\n\n\n

Ensuite, venez \u00e0 la Onglet Styles<\/strong>. Utilisation d'options appropri\u00e9es, coloriser<\/strong> et redimensionner le bouton copier<\/strong>.<\/p>\n\n\n\n

\"Personnaliser<\/figure>\n\n\n\n

\u00c9tape 05 : Ajouter de l'espace entre les blocs<\/h2>\n\n\n\n

S\u00e9lectionner toute la colonne<\/strong> en cliquant sur son bord. Acc\u00e9dez \u00e0 la page Onglet Styles<\/strong>. Venez au Section sur l'espacement des blocs<\/strong> en faisant d\u00e9filer l'onglet vers le bas. Placez une valeur pour ajouter de l'espace entre les blocs de la colonne.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

\u00c9tape 06 : Ajouter un ruban \u00e0 la bo\u00eete de produit Amazon<\/h2>\n\n\n\n

Les rubans vous permettent d'afficher un bref message promotionnel qui incite instantan\u00e9ment les utilisateurs \u00e0 acheter votre produit. Ajoutez le Bloc de rubans<\/strong> dans la colonne o\u00f9 vous souhaitez l'afficher.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n

Ajouter un copie du ruban, style du ruban, position, <\/strong>et couleur<\/strong> en utilisant les options de l'onglet Param\u00e8tres et styles.<\/p>\n\n\n\n

\"Personnaliser<\/figure>\n\n\n\n

\u00c9tape 07 : Personnaliser la bordure de la bo\u00eete de produit Amazon<\/h2>\n\n\n\n

En personnalisant la bordure de la bo\u00eete, vous pouvez en am\u00e9liorer l'esth\u00e9tique. Venez \u00e0 la Tableau Section fronti\u00e8re<\/strong> en faisant d\u00e9filer vers le bas la page Onglet Styles<\/strong>.<\/p>\n\n\n\n

D\u00e9sactiver la bordure int\u00e9rieure<\/strong>. Apr\u00e8s cela, changer la couleur<\/strong> et largeur de la bordure ext\u00e9rieure<\/strong>. <\/p>\n\n\n\n

\"Personnaliser<\/figure>\n\n\n\n

Votre bo\u00eete de produit Amazon est donc pr\u00eate. Vous pouvez la modifier \u00e0 votre guise.<\/p>\n\n\n\n

Point bonus : Utiliser un mod\u00e8le de bo\u00eete de produit pr\u00e9construit<\/h2>\n\n\n\n

Le plugin Tableberg est accompagn\u00e9 d'un syst\u00e8me complet de gestion de l'information. biblioth\u00e8que de mod\u00e8les<\/a> o\u00f9 vous trouverez une bonne collection de tableaux pr\u00e9construits qui vous permettront de pr\u00e9parer instantan\u00e9ment vos nombreuses sections web. Il comprend \u00e9galement de nombreuses bo\u00eetes de caract\u00e9ristiques pr\u00e9d\u00e9finies que vous pouvez utiliser pour cr\u00e9er des tableaux de produits Amazon.<\/p>\n\n\n\n

Dans les clips vid\u00e9o suivants, nous avons montr\u00e9 comment trouver les bo\u00eetes de caract\u00e9ristiques et les ajouter \u00e0 l'\u00e9diteur. Ensuite, en modifiant simplement son contenu, vous pouvez pr\u00e9parer votre bo\u00eete de produit Amazon.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Nous avons couvert le tutoriel en bref. Vous pouvez rendre votre bo\u00eete de produit Amazon plus vaste en ajoutant de nombreuses informations suppl\u00e9mentaires. Vous pouvez m\u00eame ajouter plusieurs images et des boutons CTA. Dans cet article, nous avons juste essay\u00e9 de pr\u00e9senter un guide d'inspiration que vous pouvez utiliser pour cr\u00e9er des designs plus int\u00e9ressants.<\/p>\n\n\n\n

Par exemple, avant de partir, prenez quelques minutes de plus pour explorer le poste Comment afficher les \u00e9tapes d'un processus dans WordPress<\/a> avec le plugin.<\/p>","protected":false},"excerpt":{"rendered":"

Amazon product boxes are designed to feature products available on the Amazon platform in a visually engaging way. They include images, features, descriptions, prices, and direct links so people can buy the products. The main purpose of this box is to inform customers about the product’s features and benefits at a glance and excite them […]<\/p>\n","protected":false},"author":1,"featured_media":3334,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[111,10,102],"class_list":["post-3308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-amazon-product-marketing","tag-customize-table","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Add-Amazon-Product-Boxes-in-WordPress.webp","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/fr\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=3308"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3308\/revisions"}],"predecessor-version":[{"id":3335,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3308\/revisions\/3335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=3308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=3308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=3308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}