{"id":232,"date":"2018-12-27T01:44:18","date_gmt":"2018-12-26T23:44:18","guid":{"rendered":"http:\/\/e-merald.com\/themes\/transvision-wp\/?page_id=232"},"modified":"2018-12-28T16:38:58","modified_gmt":"2018-12-28T14:38:58","slug":"fancy-image","status":"publish","type":"page","link":"https:\/\/e-merald.com\/themes\/transvision-wp\/resources\/elements\/fancy-image\/","title":{"rendered":"Fancy Image"},"content":{"rendered":"\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-white-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-0\"  class=\"panel-grid row\"  data-cells=\"1\"  data-grids=\"7\" ><div id=\"pgc-232-0-0\"  class=\"panel-grid-cell col-sm-12 columns\"  data-cells=\"1\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-0-0-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child\" data-index=\"0\" >\n<p class=\"lead-text-large text-primary-color-saturated\">The Fancy Image element allows you to add a fancy graphic (with image) to some text.<\/p>\n<p>See below the examples of how you can use the Fancy Image element in the theme.<\/p>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-light-grey-bg dots-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-1\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-1-0\"  class=\"panel-grid-cell col-sm-3 columns\"  data-cells=\"2\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-1-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child align-only-md-center align-only-lg-center align-only-xl-center\" data-index=\"1\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture box-filled-bg\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"128\" height=\"128\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/icon-stats.png\" class=\"attachment-full size-full\" alt=\"stats\" loading=\"lazy\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-1-1\"  class=\"panel-grid-cell col-sm-9 columns\"  data-cells=\"2\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-1-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child\" data-index=\"2\" >\n<h4 class=\"remove-bottom\">Fancy Image<\/h4>\n<p class=\"font-weight-normal text-light-grey\">with filled background<\/p>\n<p>Icons for this element can be downloaded here: <a href=\"https:\/\/www.flaticon.com\/packs\/management-2\" target=\"_blank\" rel=\"noopener\">Management pack<\/a>, <a href=\"https:\/\/www.flaticon.com\/packs\/communication-and-media-2\" target=\"_blank\" rel=\"noopener\">Communication and Media pack<\/a>, and other appropriate packs...<\/p>\n<p class=\"text-small\">Icons made by <a title=\"Freepik\" href=\"http:\/\/www.freepik.com\" target=\"_blank\" rel=\"noopener\">Freepik<\/a> from <a title=\"Flaticon\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\" rel=\"noopener\">www.flaticon.com<\/a> is licensed by <a title=\"Creative Commons BY 3.0\" href=\"http:\/\/creativecommons.org\/licenses\/by\/3.0\/\" target=\"_blank\" rel=\"noopener\">CC 3.0 BY<\/a><\/p>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-white-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-2\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-2-0\"  class=\"panel-grid-cell col-sm-6 columns\"  data-cells=\"2\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-2-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child offset-sm-right-20px\" data-index=\"3\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture box-filled-bg colored-beam-left\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"128\" height=\"128\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/icon-protest.png\" class=\"attachment-full size-full\" alt=\"protest\" loading=\"lazy\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-2-1\"  class=\"panel-grid-cell col-sm-6 columns\"  data-cells=\"2\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-2-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child offset-md-left-20px\" data-index=\"4\" >\n<h4><span class=\"text-highlighted\">Fancy<\/span> Image<\/h4>\n<ul class=\"dot-list\">\n<li>an image (icon) on the filled background<\/li>\n<li>colored beam at the left side of the image<\/li>\n<\/ul>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-white-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-3\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-3-0\"  class=\"panel-grid-cell col-sm-6 col-sm-push-6 columns\"  data-cells=\"2\"  data-ordering=\"swap-cols-sm\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-3-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child offset-sm-left-20px\" data-index=\"5\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture box-filled-bg colored-beam-right\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"128\" height=\"128\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/icon-signing.png\" class=\"attachment-full size-full\" alt=\"signing\" loading=\"lazy\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-3-1\"  class=\"panel-grid-cell col-sm-6 col-sm-pull-6 columns\"  data-cells=\"2\"  data-ordering=\"swap-cols-sm\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-3-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child offset-md-right-20px\" data-index=\"6\" >\n<h4><span class=\"text-highlighted\">Fancy<\/span> Image<\/h4>\n<p>an image (icon) on the filled background + colored beam at the right side of the image<\/p>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-light-grey-bg dots-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-4\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-4-0\"  class=\"panel-grid-cell col-sm-3 columns\"  data-cells=\"2\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-4-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child align-only-md-center align-only-lg-center align-only-xl-center\" data-index=\"7\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture full-image\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"360\" height=\"360\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture09-360x360.jpg\" class=\"attachment-transvision-picture-medium-square size-transvision-picture-medium-square\" alt=\"Picture 9\" loading=\"lazy\" srcset=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture09-360x360.jpg 360w, https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture09-150x150.jpg 150w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-4-1\"  class=\"panel-grid-cell col-sm-9 columns\"  data-cells=\"2\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-4-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child\" data-index=\"8\" >\n<h4 class=\"remove-bottom\">Fancy Image<\/h4>\n<p class=\"font-weight-normal text-light-grey\">simple <span class=\"text-highlighted\">full image<\/span><\/p>\n<p>Coaching isn't just for athletes and celebrities anymore! Coaching is right for you if you actively want to improve your life, and know that having support, accountability and some additional wisdom on that journey is the extra boost your need to really push past whatever might be holding you back.<\/p>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-white-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-5\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-5-0\"  class=\"panel-grid-cell col-sm-6 columns\"  data-cells=\"2\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-5-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child offset-sm-right-20px\" data-index=\"9\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture full-image colored-beam-left\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"360\" height=\"360\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture05-360x360.jpg\" class=\"attachment-transvision-picture-medium-square size-transvision-picture-medium-square\" alt=\"Picture 5\" loading=\"lazy\" srcset=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture05-360x360.jpg 360w, https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture05-150x150.jpg 150w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-5-1\"  class=\"panel-grid-cell col-sm-6 columns\"  data-cells=\"2\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-5-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child offset-md-left-20px\" data-index=\"10\" >\n<h4><span class=\"text-highlighted\">Fancy<\/span> Image<\/h4>\n<ul class=\"dot-list\">\n<li>simple full image<\/li>\n<li>colored beam at the left side of the image<\/li>\n<\/ul>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n\n\t\t<!-- Stripe section -->\n\t\t<div class=\"stripe stripe-white-bg\">\n\t\t\t<div class=\"stripe-upper-bg\"><\/div>\n\n\t\t\t<div class=\"container\"> <!-- Container -->\n\n<div id=\"pg-232-6\"  class=\"panel-grid row\"  data-cells=\"2\"  data-grids=\"7\" ><div id=\"pgc-232-6-0\"  class=\"panel-grid-cell col-sm-6 col-sm-push-6 columns\"  data-cells=\"2\"  data-ordering=\"swap-cols-sm\" >\n\n<!-- Fancy Image -->\n<div id=\"panel-232-6-0-0\" class=\"so-panel widget widget_transvision-fancy-image widget-fancy-image panel-first-child panel-last-child offset-sm-left-20px\" data-index=\"11\" >\n\t\t\t\r\n\t\t\t<div class=\"fancy-picture full-image colored-beam-right\">\r\n\t\t\t\t<figure class=\"box-image\">\r\n\t\t\t\t\t<img width=\"360\" height=\"360\" src=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture03-360x360.jpg\" class=\"attachment-transvision-picture-medium-square size-transvision-picture-medium-square\" alt=\"Picture 3\" loading=\"lazy\" srcset=\"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture03-360x360.jpg 360w, https:\/\/e-merald.com\/themes\/transvision-wp\/wp-content\/uploads\/2018\/12\/picture03-150x150.jpg 150w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/>\n\t\t\t\t<\/figure>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\n<!-- end Fancy Image -->\n<\/div><div id=\"pgc-232-6-1\"  class=\"panel-grid-cell col-sm-6 col-sm-pull-6 columns\"  data-cells=\"2\"  data-ordering=\"swap-cols-sm\" >\n\n<!-- Text Block -->\n<div id=\"panel-232-6-1-0\" class=\"so-panel widget widget_transvision-text-block widget-text-block panel-first-child panel-last-child offset-md-right-20px\" data-index=\"12\" >\n<h4><span class=\"text-highlighted\">Fancy<\/span> Image<\/h4>\n<p>simple full image + colored beam at the right side of the image<\/p>\n\n<\/div>\n<!-- end Text Block -->\n<\/div><\/div>\n\n\t\t\t<\/div> <!-- end Container -->\n\n\t\t<\/div>\n\t\t<!-- end Stripe section -->\n","protected":false},"excerpt":{"rendered":"<p>The Fancy Image element allows you to add a fancy graphic (with image) to some text. See below the examples of how you can use the Fancy Image element in the theme. Fancy Image with filled background Icons [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":20,"parent":220,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/pages\/232"}],"collection":[{"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":0,"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/pages\/232\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/pages\/220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/media\/20"}],"wp:attachment":[{"href":"https:\/\/e-merald.com\/themes\/transvision-wp\/wp-json\/wp\/v2\/media?parent=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}