{"id":16318,"date":"2018-12-17T12:45:24","date_gmt":"2018-12-17T17:45:24","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=16318"},"modified":"2023-06-14T14:59:24","modified_gmt":"2023-06-14T18:59:24","slug":"sliders","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/sliders\/","title":{"rendered":"Working with Sliders"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>With the Premium <a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\">WordPress Page Builder<\/a> by BoldGrid you will have access to built-in, native sliders that render in real time from within the WordPress Editor. No need to get an additional plugin to create sliders, this one has them included!<\/p>\n<p>There are two types of WordPress sliders that you can create: Section Sliders and Content Sliders. Each type can have as many slides as you need. They are added the same way and have the same options in the editor.<\/p>\n<h2 id=\"adding-a-slider\">Adding a Slider<\/h2>\n<ul>\n<li>Place the cursor in your content where you wish to place the icon<\/li>\n<li>Click the + in the DropTab<\/li>\n<li>Select the type of slider you want to use<\/li>\n<\/ul>\n<p>Each slide on a <b>Section Slider<\/b> can have a unique background with different page elements than the one before. With a <b>Content Slider<\/b> the background stays the same while elements like text, images, buttons, and more change on top.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full alignnone\" src=\"https:\/\/www.boldgrid.com\/wp-content\/uploads\/2020\/04\/content-slider.png\" alt=\"Slider controls for the WordPress Page Builder by BoldGrid\" width=\"1167\" height=\"792\"><\/p>\n<h2 id=\"slider-controls\">Slider Controls<\/h2>\n<ul>\n<li><b>Slide Actions<\/b> allow you to move thru the slides in the Editor, make or delete a slide, and rearrange the order<\/li>\n<li><b>Autoplay<\/b> has the slider rotating by itself when the page loads and the duration is time between slides<\/li>\n<li><b>Loop<\/b> repeats slides after reaching the end<\/li>\n<li><b>Navigation Buttons<\/b> provide several positions to choose from. The overlay puts the navigation on top or next to slider. You can also set the size, style, and color of the icon<\/li>\n<li><b>Navigation Dots<\/b> have two positions to choose from, the dots can be overlay or not, and the size\/color can be set.<\/li>\n<\/ul>\n<h2 id=\"faqs\">FAQs<\/h2>\n<h3 id=\"how-do-i-pick-what-images-go-in-the-slider\">How do I pick what images go in the slider?<\/h3>\n<p>You can add images to sliders in two ways. If you click on the placeholder image, you&rsquo;ll see the icon to swap it with the image of your choice. It looks like a camera and a musical note. You can also add media to any part of a slider by using the &ldquo;Add Media&rdquo; button at the top-left of the editor.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/06\/add-media-to-slider.png\" alt=\"Change image in slider\"><\/p>\n<h3 id=\"the-default-number-of-pictures-in-a-slider-is-3-how-can-i-add-more\">The default number of pictures in a slider is 3. How can I add more?<\/h3>\n<p>While you&rsquo;re working on the slider, look for the slider controls at the top of the editor. Once you&rsquo;re there, click on <b>Slide Actions -&gt; Edit<\/b> and you&rsquo;ll see the <b>New Slide<\/b> option. Here&rsquo;s a screenshot to illustrate:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/04\/new-slide.png\" alt=\"add new slide to slider\"><\/p>\n<h3 id=\"when-i-select-a-slider-i-get-the-same-layout-how-do-i-get-a-different-one-to-choose-from\">When I select a Slider I get the same layout. How do I get a different one to choose from?<\/h3>\n<p>When you&rsquo;re working with a Section Slider, you have the ability to add and delete columns and rows, as well as drag them to adjust their sizes, but it can be confusing. You can click the <b>Add Block<\/b> button in the top-right of the editor and look for the pre-designed sliders in the following categories:<\/p>\n<div class=\"row\">\n<div class=\"col-md-6 col-sm-6 col-xs-6\">\n<ul>\n<li>Services<\/li>\n<li>About<\/li>\n<li>Contact<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-md-6 col-sm-6 col-xs-6\">\n<ul>\n<li>Testimonial<\/li>\n<li>Team<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>Look for the three dots to indicate which blocks are sliders:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/04\/premium-slider.png\" alt=\"premium slider block\"><\/p>\n<h3 id=\"how-do-i-save-my-slider-design\">How do I save my Slider design?<\/h3>\n<p>Once you have your slider designed how you&rsquo;d like, you can <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/saving-blocks\/\">save the block<\/a> future use.<\/p>\n<h3 id=\"some-of-my-images-are-not-showing--formatted-incorrectly\">Some of my images are not showing \/ formatted incorrectly<\/h3>\n<p>If you have sliders on your page and you notice that either some images are not showing, or they are formatted incorrectly, it may be due to lazy loading settings. For example, if you are lazy loading images with Jetpack, it may not be able to detect the images in the slider that are off screen and properly lazy load them. Try disable any lazy loading feature to see if this corrects the issue.<\/p>\n<p><span class=\"heading-font branded\" style=\"font-size: 20px;\">Congratulations!<\/span><\/p>\n<p>You now know how to work with Sliders, a Premium feature of our<a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\"> WordPress Page Builder<\/a>, the BoldGrid Post and Page Builder. Next, you may want to learn more about <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/block-library\/\">using the Block library.<\/a><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>With the Premium WordPress Page Builder by BoldGrid you will have access to built-in, native sliders that render in real time from within the WordPress Editor. No need to get an additional plugin to create sliders, this one has them included! There are two types of WordPress sliders that you can create: Section Sliders and [&hellip;]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[690,127],"class_list":["post-16318","post","type-post","status-publish","format-standard","hentry","category-page-builder","tag-faq","tag-gridblock","feature-type-premium","experience-level-getting-started"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=16318"}],"version-history":[{"count":13,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16318\/revisions"}],"predecessor-version":[{"id":92161,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/16318\/revisions\/92161"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=16318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=16318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=16318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}