{"title":"Phlox Image","id":36502,"link":"https:\/\/env.averta.net\/en\/step\/phlox-image\/","parent":[37224,35059,35056],"content":"<div id=\"attachment_37302\" style=\"width: 592px\" class=\"wp-caption alignright\"><img aria-describedby=\"caption-attachment-37302\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-37302 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/image-hover.gif\" alt=\"image-hover\" width=\"582\" height=\"380\" \/><p id=\"caption-attachment-37302\" class=\"wp-caption-text\">Image Hover<\/p><\/div>\n<p>Phlox <strong>Image Widget<\/strong> gives you the possibility to upload an image or a number of images in any widget area you want.<\/p>\n<p>There is no limit to the number of image widgets you add and you can also upload a second image to each image widget that shows up after the user hover over the image.<\/p>\n<p>Follow below steps to add <strong>Phlox Image<\/strong>?to a widget area or in a page content in <strong>widget area<\/strong>:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click?<b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then click?<strong>Widgets<\/strong><\/li>\n<li>Find <strong>[Phlox] Image?<\/strong>among the available widgets and add it to your desired <strong><a href=\"https:\/\/env.averta.net\/en\/step\/adding-widgets-to-different-widget-areas\/?b=36406,36406\" title=\"Adding Widgets to Different Widget Areas\">Widget Area<\/a><\/strong><\/li>\n<\/ol>\n<div id=\"attachment_37303\" style=\"width: 586px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-37303\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-37303 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/image-lightbox.gif\" alt=\"image-lightbox\" width=\"576\" height=\"380\" \/><p id=\"caption-attachment-37303\" class=\"wp-caption-text\">Image Lightbox<\/p><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Access Advanced Image Options in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your?<strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the?<b>Pages?<\/b>on the?<b>Dashboard<\/b><\/li>\n<li>Click the?<b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a title=\"Getting Started with Elementor Page Builder\" href=\"http:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=51166,35059,55475,55475\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX PRO ? GENERAL?<\/strong>section<\/li>\n<li>Choose?<strong>Advanced Image<\/strong><\/li>\n<\/ol>\n<ul>\n<li>\n<h4>Content<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-69344 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-content.jpg\" alt=\"\" width=\"297\" height=\"1034\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-content.jpg 297w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-content-86x300.jpg 86w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-content-294x1024.jpg 294w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-content-50x173.jpg 50w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p>You can add your image to this section. The available?<strong>Image Sizes<\/strong>?are: <b>Thumbnail &#8211; 150 x 150, Medium 300 x 300, Medium Large 768 x 768, Large 1024 x 1024, Post-thumbnail 280 x 180, Full,<\/b>?and <strong>Custom<\/strong><\/p>\n<p>Image link is settable. You are able to click the gear icon to see the options: Open in new window or Add nofollow.<label for=\"elementor-control-nofollow-c1319\"><\/label><\/p>\n<h4>Hover Image<\/h4>\n<p>Besides the image, it is possible to add a second image that will be appear when the mouse is hovering over the image.<\/p>\n<h4>Ribbon<\/h4>\n<p>Another option is adding a?<strong>Ribbon?<\/strong>to your image. The text of this badge is changeable. Also, there are three available styles: <strong>Simple<\/strong>, <strong>Corner<\/strong>, and <strong>Cross<\/strong><\/p>\n<p>You can change the ribbon position and align it to?<strong>Top Right<\/strong>,?<strong>Top Left<\/strong>,?<strong>Bottom Right<\/strong>, and?<strong>Bottom Left<\/strong><\/p>\n<p><strong>Ribbon Thickness<\/strong> can be changed in PX or EM. Maximum possible value is 50px (3EM)<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-69654 alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-settings-1.jpg\" alt=\"\" width=\"298\" height=\"665\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-settings-1.jpg 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-settings-1-134x300.jpg 134w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-settings-1-78x173.jpg 78w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/p>\n<ul>\n<li>\n<h4>Settings<\/h4>\n<\/li>\n<\/ul>\n<p>To open image in lightbox, enable?<strong>Open in lightbox<\/strong>. It can be specified by a <strong>Plus?<\/strong>iconic button.<\/p>\n<p>Image?<strong>Alignment?<\/strong>in block can be?<strong>Left<\/strong>,?<strong>Center<\/strong>, or?<strong>Right<\/strong><\/p>\n<p><strong>Dark?<\/strong>and?<strong>Light?<\/strong>are the two available player skins.<\/p>\n<p class=\"aswi-text-box box-recommend\">Enable?<strong>Preload Image<\/strong>, so it add a loading animation while loading the image. The available effects are: <strong>Blurred placeholder image<\/strong>,?<strong>In-progress box animation<\/strong>, and?<strong>Loading spinner in Blue, Light,?<\/strong>or?<strong>Dark<\/strong><\/p>\n<p>If you leave it blank, an option will be available to set a color for the placeholder while loading image.<\/p>\n<p><strong>Tilt Effect<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Colorized Shadow<\/strong> adds a shadow of the image below it.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p>&nbsp;<\/p>\n<ul>\n<li><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-69653 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-style.jpg\" alt=\"\" width=\"298\" height=\"888\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-style.jpg 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-style-101x300.jpg 101w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-advanced-image-style-58x173.jpg 58w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><br \/>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p>You can set <strong>max width\/height<\/strong> to your image, or give rounded corners by adding<strong> Border Radius<\/strong>.<\/p>\n<p>Besides, it is possible to apply?<strong>Box Shadow?<\/strong>and?<strong>Solid<\/strong>, <strong>Double<\/strong>, <strong>Dotted<\/strong>, <strong>Dashed<\/strong>, or <strong>Groove<\/strong>?<strong>Border <\/strong>to your image.<\/p>\n<p><strong>Background Type?<\/strong>option lets you add a background image or background color\/gradient to your element. You are able to change the position of background image to?<strong>Top Left<\/strong>,?<strong>Top Center<\/strong>,?<strong>Top Right<\/strong>,?<strong>Center Left<\/strong>,?<strong>Center Center<\/strong>,?<strong>Center Right<\/strong>,?<strong>Bottom Left<\/strong>,?<strong>Bottom Center<\/strong>,?<strong>Bottom Right<\/strong>, or?<strong>Custom (X Position, Y Position)<\/strong>. The background image can be?<strong>Fixed?<\/strong>or?<strong>Scroll <\/strong>and it can be repeated.?Also, you can change its size to?<strong>Auto<\/strong>,?<strong>Cover<\/strong>,?<strong>Contain<\/strong>, or?<strong>Custom<\/strong>.<\/p>\n<h4>Ribbon<\/h4>\n<p><strong>Background Color?<\/strong>of the ribbon or badge is customizable. There are some options to change the style of?<strong>Box Shadow?<\/strong>and?<strong>Typography<\/strong>.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Access Advanced Image Options in SiteOrigin Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click?<b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click?<b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find <strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>, beside text tab<\/li>\n<li>Click?<strong>Add Widget<\/strong><\/li>\n<li>Click?<strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Image<\/strong><\/li>\n<li>Click?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36540 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/image-widget.png\" alt=\"image-widget\" width=\"431\" height=\"969\" \/><\/p>\n<h4>Title<\/h4>\n<p>In this section, you can give your image a title.<\/p>\n<h4>Image<\/h4>\n<p>Easily click?<strong>Add Image?<\/strong>to add an image to your desired widget area.<\/p>\n<h4>Image Hover<\/h4>\n<p>Whenever you hover over the first image you have added, this?second image will show up.<\/p>\n<h4>Width and Height<\/h4>\n<p>Here you can specify the images&#8217; width and height.<\/p>\n<h4>Alignment<\/h4>\n<p>You can align the images according to the widget area.<\/p>\n<h4>Open Large Image in Lightbox<\/h4>\n<ul>\n<li>\n<h5>Iconic button<strong><br \/>\n<\/strong><\/h5>\n<\/li>\n<\/ul>\n<p>By switching on this option, the image (not the hover) will enlarge in a lightbox.?If you want to add a plus icon on the image whenever you hover over it, change it to plus.<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>After enabling this option, next options will be disabled.<\/p>\n<h4>Link URL<\/h4>\n<p>If you want the image to link to another page, add the page&#8217;s URL in this field. After clicking the image, the page that you have linked?opens.<\/p>\n<h4>Target<\/h4>\n<p>You can choose the image opens in the new page or in the current page.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>In order to customize particular content element, write the style on your CSS file with a class name, then add the class name in this field.<\/p>\n","type":"solution"}