{"title":"Displaying Phlox Blog Slider","id":35087,"link":"https:\/\/env.averta.net\/en\/step\/displaying-phlox-blog-slider\/","parent":[35048],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35272 size-full\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Phlox-Theme-Free-Responsive-and-Minimal-Blog-Theme-of-2016-Google-Chrome-2016-09-29-09.47.08-e1475129956566.png\" alt=\"PhloxBlogSlider\" width=\"457\" height=\"317\" \/>Phlox has a built-in post slider which shows your recent posts as a slider at the top of your blog.?This slider displays?posts with or without title and meta in four different styles.?Besides, you can choose which posts to appear?and there is no limit on?the number of slides. The slider can be either manual or automatic slideshow ??which you can swipe it manually at the same time.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong> If you want to design?the slider with any other content, we recommend to download <a style=\"color: #999999;\" href=\"http:\/\/www.masterslider.com\/\"><b>Master Slider<\/b><\/a><span style=\"font-weight: 400;\">. Master Slider gives you more options to make more complex sliders for your website. <\/p><\/span><\/p>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/UIVE7ZWbSoI?rel=0\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Enabling Blog Slider<\/h3>\n<p><span style=\"font-weight: 400;\">To add and manage a <strong>Blog Slider?<\/strong><\/span>on your website, you can find its options?by following these?steps:<\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click on?<\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> on the <\/span><b>Dashboard<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then click on?<\/span><b>Customize<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click on the <\/span><b>Blog &gt; Blog Slider<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now you can insert the?blog slider by enabling?<strong>Display Slider <\/strong>option<\/span><\/li>\n<\/ol>\n<div id=\"attachment_35265\" style=\"width: 1010px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-35265\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35265 size-full\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/location.jpg\" alt=\"Step1-Location\" width=\"1000\" height=\"333\" \/><p id=\"caption-attachment-35265\" class=\"wp-caption-text\">You can choose your slider location. There are two available locations to choose: <strong>Above archive content<\/strong> or <strong>below the header<\/strong> section.<\/p><\/div>\n<hr style=\"clear: both;\" \/>\n<h3><span style=\"color: #000000;\">Specify Posts<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In this section, you can set which posts to appear on the slider.<\/span><\/p>\n<h4><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35248 size-full\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/afterlocation.png\" alt=\"Step2-Customization\" width=\"299\" height=\"581\" \/>Slides Number<\/h4>\n<p><span style=\"font-weight: 400;\">Specify the number of the slides.<\/span><\/p>\n<h4>Exclude and Include Posts<\/h4>\n<p>Exclude and include specific posts by adding their IDs, separated by a comma.<\/p>\n<h4>Start Offset<\/h4>\n<p>Set a number to choose the number of posts to pass over when selecting them?by the slider.<\/p>\n<h4>Order by<\/h4>\n<p>Change the order of the posts by their:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Date:<\/strong> Order the posts by their date<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Menu Order:<\/strong> Order by page order<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Title:<\/strong> Order by post title<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>ID:<\/strong> Order by post ID<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Random:<\/strong> The slider will show your posts randomly<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Comments:<\/strong> Order the posts by number of comments<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Date Modified:<\/strong> Order by last modified date<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Author:<\/strong> Order by the posts&#8217; author<\/span><\/span><\/li>\n<\/ul>\n<h4>Order<\/h4>\n<p>You can choose the sliders being either ascending or descending.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3><span style=\"color: #000000;\">Slider Skin<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are four different styles to?choose.<\/span><\/p>\n<div style=\"float: right;\"><\/div>\n<div style=\"float: right;\"><\/div>\n<div style=\"float: right;\"><\/div>\n<div style=\"float: right;\"><\/div>\n<ol>\n<li style=\"font-weight: 400; text-align: left;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Light and boxed <\/strong>adds a lightbox at the center of the slider?<\/span><\/span><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/span><\/li>\n<li style=\"font-weight: 400; text-align: left;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Dark and boxed<\/strong> adds a dark box at the center of the slider<br \/>\n<\/span><\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400; text-align: left;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Light overlay<\/strong>?adds a white transparent overlay on the slider<br \/>\n<\/span><\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Dark overlay<\/strong>?adds a black?transparent overlay on the slider?<\/span><\/span><\/span><\/span><\/span>\n<div id=\"attachment_35357\" style=\"width: 1010px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-35357\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35357 size-full\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/skinss-2.jpg\" alt=\"step3_skins\" width=\"1000\" height=\"500\" \/><p id=\"caption-attachment-35357\" class=\"wp-caption-text\">You can add?post title and meta on each slide. To do so, switch?on the <strong>Insert post title<\/strong>, then switch on the <strong>Insert post meta<\/strong>.<\/p><\/div><\/li>\n<\/ol>\n<hr \/>\n<h3><span style=\"color: #000000;\">Slides Background and Navigation<img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35279 size-full\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/last-step-e1475136292512.png\" alt=\"LastStep-Customization\" width=\"297\" height=\"760\" \/><\/span><\/h3>\n<p><strong>Grab the image from<\/strong>, has four available options to choose the source of the slides&#8217; background:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Auto Select:?<\/strong>This option automatically insert some images from the posts into the slides<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Featured Image:<\/strong> Choose this to select the posts with <\/span><a href=\"https:\/\/en.support.wordpress.com\/featured-images\/\"><span style=\"font-weight: 400;\">featured image<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>First Image in Post:<\/strong> The posts? first image will be shown on the slides (Posts containing multiple images)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Custom Image:<\/strong> It allows you to choose one desirable picture to be shown on every slide on the slider<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Switch on the next?option to <strong>Exclude Posts without Image<\/strong>?from the slider.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Moreover, you can change the size of the slider by changing image <strong>width<\/strong> and <strong>height<\/strong> values (in pixels).<\/span><\/p>\n<div style=\"clear: both;\"><\/div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">To add arrows?to the slider, simply?switch on the <strong>Arrow navigation<\/strong>. Moving to the next\/previous slide is possible by clicking on the arrows.<br \/>\nNext, to set the space between the slides, change the <strong>Space Between Slides?<\/strong>value?(in pixels).<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35261 size-full alignleft\" style=\"padding: 15px; border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/arrows-3-1.gif\" alt=\"LastStep-Arrows\" width=\"344\" height=\"224\" \/><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35285\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/spacebetweenslides-1.png\" width=\"375\" height=\"236\" \/><\/p>\n<div style=\"clear: both;\"><\/div>\n<p>By switching on <strong>Looped<\/strong> <strong>Navigation<\/strong>,<strong>?<\/strong>The slider backs?to the first?slide again?after the finished slides.<\/p>\n<p>Switch on the <strong>Slideshow <\/strong>to set an auto-play slideshow. Moreover,?<strong>Slideshow Delay?<\/strong>(in seconds) is settable.<\/p>\n","type":"solution"}