{"id":5038,"date":"2022-02-13T23:23:20","date_gmt":"2022-02-13T23:23:20","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=5038"},"modified":"2022-12-07T19:34:37","modified_gmt":"2022-12-07T19:34:37","slug":"image-box","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/image-box\/","title":{"rendered":"Image Box"},"content":{"rendered":"\n<p>Sometimes, <strong>Image Box <\/strong>is useful to display multi-information except products or posts. UDesign ImageBox offers various types so you can realize many layouts with this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image-box-1-1024x439.jpg\" alt=\"\" class=\"wp-image-8307\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image-box-1-1024x439.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image-box-1-768x329.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to create Image Box Widget?<\/h4>\n\n\n\n<p><strong>Step 1<\/strong>. Create, or choose the Column into which you want to add your element. Click on Add New Element.<\/p>\n\n\n\n<p><strong>Step 2<\/strong>. Drag UDesign <strong>Image Box <\/strong>element from the element List. <\/p>\n\n\n\n<p><strong>Step <\/strong>3. Choose <strong>ImageBox <\/strong>type and set image and content.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">About Image Box Option.<\/h4>\n\n\n\n<p><strong>Image Type<\/strong> &#8211; You can choose 4 default types to display imagebox.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"398\" height=\"422\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image1.jpg\" alt=\"\" class=\"wp-image-8312\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"285\" height=\"286\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image2.jpg\" alt=\"\" class=\"wp-image-8313\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image3.jpg\" alt=\"\" class=\"wp-image-8314\" width=\"318\" height=\"422\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"428\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/image4.jpg\" alt=\"\" class=\"wp-image-8315\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Above the images, Image Box includes title, subtitle and content.<\/p>\n\n\n\n<p>You can edit the text of title, subtitle and give link url to title. You should put <strong>Custom Html <\/strong>in the content. So you can realize anything to imagebox.<\/p>\n\n\n\n<p><strong>Alignment<\/strong> &#8211; You can control the horizontal alignment of your imagebox.<\/p>\n\n\n\n<p><br>In <strong>Image Box <\/strong>Style, You can control color, typography, spacing of <strong>Title<\/strong>, <strong>Subtitle<\/strong>, <strong>Content<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, Image Box is useful to display multi-information except products or posts. UDesign ImageBox offers various types so you can realize many layouts with this. How to create Image Box Widget? Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element. Step 2. Drag UDesign [&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":[32],"tags":[],"class_list":["post-5038","post","type-post","status-publish","format-standard","hentry","category-udesign-elements"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5038","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=5038"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5038\/revisions"}],"predecessor-version":[{"id":8318,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5038\/revisions\/8318"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=5038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=5038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=5038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}