{"id":4570,"date":"2022-02-13T06:05:18","date_gmt":"2022-02-13T06:05:18","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=4570"},"modified":"2022-12-07T22:19:15","modified_gmt":"2022-12-07T22:19:15","slug":"product-image-element","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/product-image-element\/","title":{"rendered":"Product Image Element"},"content":{"rendered":"\n<p>Product Images and gallery are very important of our single product page.<\/p>\n\n\n\n<p>In\u00a0<strong>UDesign<\/strong>\u00a0, we provide horizontal and vertical layout.<\/p>\n\n\n\n<p>UDesign Product Images Element allows you to place your Image element on any part of your single product layout.<\/p>\n\n\n\n<p>And it gives you five types and multiple custom options.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to create product image element?<\/h4>\n\n\n\n<p><strong>Step 1<\/strong>&nbsp;\u2013 Please create, or choose the Column into which you want to add your element.<\/p>\n\n\n\n<p><strong>Step 2<\/strong>&nbsp;\u2013 Select UDesign Product Image Element from the Element List.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"299\" height=\"824\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/1-3-1.png\" alt=\"\" class=\"wp-image-4657\"\/><\/figure>\n\n\n\n<p><strong>Step 3<\/strong>&nbsp;\u2013 Configure the UDesign Product Image Element to some place into your content.&nbsp;<\/p>\n\n\n\n<p><strong>Step 4<\/strong>&nbsp;\u2013 After you finish your configuration, don\u2019t forget to save all changes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Element Content Options<\/strong><\/h4>\n\n\n\n<p>There are 3 types of product images. \u2013\u00a0<strong>Featured<\/strong>,\u00a0<strong>Horizontal<\/strong>,\u00a0<strong>Vertical<\/strong>.<\/p>\n\n\n\n<p><strong>Thumbnail Columns:<\/strong>&nbsp;You can select thumbnail column.<\/p>\n\n\n\n<p><strong>Spacing:<\/strong>&nbsp;You can select the amount of spacing between product images.<\/p>\n\n\n\n<p><strong>Columns:<\/strong>&nbsp;You can set count of columns in desktop, tabled and mobile mode.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Element Style Options<\/h4>\n\n\n\n<p>You can style product image in style editor.<\/p>\n\n\n\n<p><strong>Border Type:<\/strong>&nbsp;You can control border type of each product images. In here you can give css style of border type: solid, dashed, double and so on.<\/p>\n\n\n\n<p><strong>Border Width:<\/strong>&nbsp;Width of border about product images.<\/p>\n\n\n\n<p><strong>Colour:<\/strong>&nbsp;Border colour of product images.<\/p>\n\n\n\n<p><strong>Border Radius:<\/strong>&nbsp;Border radius of product images.<\/p>\n\n\n\n<p>If product image type is default or horizontal type, you would control thumbnail style. For it, we provide border style and width as above. In addition, there is spacing option controlling gutter between thumbnail images.<\/p>\n\n\n\n<p><strong>Spacing:<\/strong>&nbsp;Gutter between thumbnail images.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Product Images and gallery are very important of our single product page. In\u00a0UDesign\u00a0, we provide horizontal and vertical layout. UDesign Product Images Element allows you to place your Image element on any part of your single product layout. And it gives you five types and multiple custom options. How to create product image element? Step [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-4570","post","type-post","status-publish","format-standard","hentry","category-single-product-builder"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=4570"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4570\/revisions"}],"predecessor-version":[{"id":8348,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4570\/revisions\/8348"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=4570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=4570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=4570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}