{"title":"Phlox Gallery","id":37275,"link":"https:\/\/env.averta.net\/en\/step\/phlox-gallery\/","parent":[37224,35059,35056],"content":"<p>One of the elements of Phlox Elements plugin is?<strong>Gallery <\/strong>widget.?Your images can be displayed in a gallery which is customizable.?You can specify the gallery layout and change its style or even columnize the images.<\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-layout.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37009 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-layout.png\" alt=\"grid-layout\" width=\"1345\" height=\"1347\" \/><\/a><\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/masonry-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37010 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/masonry-1.png\" alt=\"masonry\" width=\"1339\" height=\"1232\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>You can find gallery demos <a href=\"http:\/\/demo.phlox.pro\/default\/gallery\/\">here<\/a>.<\/p>\n<p>Follow below steps to add?<strong>Gallery Widget<\/strong>?in your posts and pages content.<\/p>\n<hr \/>\n<h3>Access Modern Gallery 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 href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a><\/strong><strong>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; General?<\/strong>section<\/li>\n<li>Choose <strong>Modern?<\/strong><strong>Gallery<\/strong><\/li>\n<\/ol>\n<p>After adding modern gallery to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h3>Content<\/h3>\n<\/li>\n<\/ul>\n<h4>Gallery Images<\/h4>\n<p>You can select the images you want to appear in the gallery by clicking on?<strong>ADD IMAGES?<\/strong>button.<\/p>\n<h4>Gallery Layout<\/h4>\n<p>There are three available layouts: Grid, Masonry, and Tiles<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55512 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-12-at-3.37.36-PM.png\" alt=\"\" width=\"301\" height=\"918\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-12-at-3.37.36-PM.png 301w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-12-at-3.37.36-PM-98x300.png 98w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-12-at-3.37.36-PM-57x173.png 57w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/p>\n<h4>Columns<\/h4>\n<p>On Grid and Masonry galleries, you are able to change the number of columns up to 6 columns. Also, you are able to change the column numbers on mobile and tablet.<\/p>\n<h4>Image Spacing<\/h4>\n<p>Like the previous option, on Grid and Masonry layouts. You can change the values from 0 to 40 pixels.<\/p>\n<h4>Image Aspect Ratio<\/h4>\n<p>This option is only available for Grid layout. You can change it from 0.1 to 2.<\/p>\n<h4>Link to<\/h4>\n<p>Your images can be linked to Media File, Attachment Page, Lightbox, or you can simply choose no link for them.<\/p>\n<h4>Pagination<\/h4>\n<p>You can add pagination to your gallery and change the two following options:<\/p>\n<h4>Enable Lazyload<\/h4>\n<p>This option is suitable for long webpages.?Images outside of viewport will not be loaded before user scrolls to them.<\/p>\n<h4>Images per Page<\/h4>\n<p>You can show up to 100 images per page.<\/p>\n<h4>Order by Query<\/h4>\n<p>After you enable this option, you can change the images order:<\/p>\n<h4>Order<\/h4>\n<p>You can order them either ascending or descending.<\/p>\n<h4>Order by<\/h4>\n<ul>\n<li><strong>Date:<\/strong> Order the posts by their publication date<\/li>\n<li><strong>Menu Order:<\/strong>?Order by page order<\/li>\n<li><strong>ID:?<\/strong>Order by post ID<\/li>\n<li><strong>None<br \/>\n<\/strong><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>\n<h3>Style<\/h3>\n<\/li>\n<\/ul>\n<h4>Image Hover<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55517 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/modern-gallery.jpg\" alt=\"\" width=\"299\" height=\"574\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/modern-gallery.jpg 299w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/modern-gallery-156x300.jpg 156w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/modern-gallery-90x173.jpg 90w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/p>\n<p>You can choose a color for the image hover overlay. Also, you are able to change the hover transition duration in milliseconds. The space around of the image can be increased after hovering with increasing image hover zoom.<\/p>\n<h4>Image Border<\/h4>\n<p>If you add an image border, it can be?<strong>Solid<\/strong>,?<strong>Double<\/strong>,?<strong>Dotted<\/strong>,?<strong>Dashed<\/strong>, and?<strong>Groove<\/strong>. Besides, you can change the width and color. Or add a?<strong>Border Radius?<\/strong>in pixels.<\/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 Gallery 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]?Gallery<\/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>After adding gallery to your post or page, you are able to customize it by available options:<\/p>\n<h4>Title<\/h4>\n<p>Writing a title for the gallery is optional.<\/p>\n<h4>Images<\/h4>\n<p>To select the images of your gallery, you can <strong>Add Images<\/strong> one by one, or hold the ctrl key and select the images you want to add to the gallery.<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-gallery-options.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-50467 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-gallery-options.jpg\" alt=\"\" width=\"297\" height=\"1155\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-gallery-options.jpg 297w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-gallery-options-77x300.jpg 77w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-gallery-options-263x1024.jpg 263w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/a><\/p>\n<h4>Gallery Layout<\/h4>\n<p>Choose the way you want your images to appear in the gallery. They can be in a?Grid?gallery or?Masonry gallery.<\/p>\n<h4>Order<\/h4>\n<p>Here you are able to order the images either ascending or descending.<\/p>\n<h4>Order by<\/h4>\n<ul>\n<li><strong>Date:<\/strong> Order the posts by their publication date<\/li>\n<li><strong>Menu Order:<\/strong>?Order by page order<\/li>\n<li><strong>ID:?<\/strong>Order by post ID<\/li>\n<li><strong>None<\/strong><\/li>\n<\/ul>\n<h4>Column Number<\/h4>\n<p>The images can be shown in columns. You can specify the number of columns (up to 6) or change the number of columns on smaller screen sizes.<\/p>\n<h4>Space<\/h4>\n<p>The space between images is changeable in pixels.<\/p>\n<h4>Image Aspect Ratio<\/h4>\n<p>You can change image aspect ratio to: ?Horizontal 4:3, Horizontal 16:9, Square 1:1, and Vertical 3:4<\/p>\n<h4>Link Images to<\/h4>\n<p>You are able to choose what happens when you click the images.They can open in a Lightbox?or in WordPress Attachment Page. Choose?None?if you want nothing to happen, and if you want to?open images in the original size, select?File.<\/p>\n<h4>Image Size<\/h4>\n<p>This option determines the size of the images. Different image sizes are as follow: Original, Large, Medium, Small, Thumbnail<\/p>\n<p>Our Recommendation is Large-sized for 2 column gallery, Medium for 4 column gallery, and Thumbnail for more than 4 columns.<\/p>\n<h4>Images Per Page<\/h4>\n<p>You can specify?the number of images per page.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>This field lets?you customize the widget. Write a style on?your CSS file, then add the defined class name here.<\/p>\n","type":"solution"}