{"id":61,"date":"2017-03-03T04:03:28","date_gmt":"2017-03-03T02:03:28","guid":{"rendered":"http:\/\/themanual.local\/?p=61"},"modified":"2023-08-27T08:27:49","modified_gmt":"2023-08-27T06:27:49","slug":"add-a-slider","status":"publish","type":"post","link":"https:\/\/simonbarnett.co.za\/themanual\/add-a-slider\/","title":{"rendered":"Add a Slider"},"content":{"rendered":"\n\nThere&#8217;s some choice here..\nWordPress itself doesn&#8217;t come with a slider. Generally-speaking, if you want a slider you&#8217;ll need to either code one in, or install a slider plugin, then add the slider according to the plugin&#8217;s method.In this case,\u00a0the installed Beaver Builder may be used. It has four slider options, two of them for images, one for images and \/ or posts, and another geared towards\u00a0posts only.\n<h4><a href=\"#collapse10\" data-toggle=\"collapse\" data-parent=\"#accordion10\">Firstly you&#8217;ll want to launch the page builder.<\/a><\/h4>\n<strong>To launch the page builder<\/strong>\r\n<ol>\r\n \t<li>On the front end (not the dashboard), go to the page you want to add-to or edit eg. mywebsite.com<strong>\/about<\/strong><\/li>\r\n \t<li>Click the <strong>Page Builder<\/strong> item in the WordPress admin bar at the top.\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-80\" src=\"http:\/\/simonbarnett.co.za\/themanual\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-03-at-16.36.55-1.png\" alt=\"\" width=\"161\" height=\"38\" \/><\/li>\r\n<\/ol>\r\nThe <b>Beaver Builder Page Builder<\/b> will load so you can begin editing content on the front end of your website.\r\n<h3>Other ways of launching the page builder<\/h3>\r\n<div id=\"accordion\" class=\"panel-group\">\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading1\" class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a class=\"collapsed\" href=\"#collapse1\" data-toggle=\"collapse\" data-parent=\"#accordion\">From Pages or Posts list in the WordPress dashboard<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">\r\n<ol>\r\n \t<li>Go to the WordPress dashboard<\/li>\r\n \t<li>Go to Pages or Posts in the sidebar<\/li>\r\n \t<li>Hover over the page name, and click <b>Page Builder<\/b><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading2\" class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a class=\"collapsed\" href=\"#collapse2\" data-toggle=\"collapse\" data-parent=\"#accordion\">From the Edit screen for a Page or Post<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse2\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">\r\n\r\nIf you are on the Edit screen to change the title, date, featured image etc of a Page or Post, there will be a Page Builder button where the content area normally is, or a Page Builder tab next to a Text Editor tab at the top of the post. You can launch the page buider from there.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n<p>Once the page builder is open, decide if you want simple image slider, or something more complex with a title and text content from your posts.<\/p>\n<ul>\n<li>\n<h3>Row-based slider<\/h3>\n<p>If it&#8217;s a simple image, then chances are that a <strong>row-based slider<\/strong> will be fine. In a row-based slider, the image covers the background of the whole row. In this method, rather than adding a module, you simply set the background of the row to be a slider.<\/p>\n<ol>\n<li>Assuming the page builder is active, hover over the row until the Row&#8217;s controls appear at the top left. Click the Row Settings (spanner icon) button. The Row Settings window will appear.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/simonbarnett.co.za\/themanual\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-04-at-19.18.15.png\" alt=\"\" width=\"191\" height=\"96\" \/><\/li>\n<li>Scroll down until you see the settings for the row&#8217;s <strong>background<\/strong>. Choose <strong>Slideshow<\/strong>.<\/li>\n<li>Then proceed to modify the settings for the slider \/ slideshow.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/simonbarnett.co.za\/themanual\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-03-at-04.32.43-768x725.png\" width=\"390\" height=\"368\" \/><\/li>\n<\/ol>\n<\/li>\n<li>\n<h3>Slideshow Module<\/h3>\nOr perhaps you need an image slider that&#8217;s contained within a smaller area. In that case the <strong>Slideshow Module<\/strong> may be better.<\/li>\n<li>\n<h3>Content Slider<\/h3>\n<p>The other two options are the <strong>Content Slider<\/strong> and <strong>Post Slider<\/strong>, which allow the display of post text content: title and excerpt.<\/p>\nThey are similar in concept to each other, though different in execution. Generally the Content Slider is considered more powerful, and probably closer to what you want. The Content Slider allows for video backgrounds too.<\/li>\n<\/ul>\n<h3>Further Reading<\/h3>\n<p><a id=\"snlink\" title=\"Short URL\" href=\"https:\/\/docs.wpbeaverbuilder.com\/beaver-builder\/layouts\/modules\/slideshow\/\" target=\"_blank\" rel=\"noopener\">Posts, Posts Carousel and Posts Slider modules overview &#8211; Beaver Builder Knowledge Base<\/a><\/p>\n<p><a id=\"snlink\" title=\"Short URL\" href=\"https:\/\/docs.wpbeaverbuilder.com\/beaver-builder\/layouts\/modules\/content-slider\/\" target=\"_blank\" rel=\"noopener\">Content slider module overview &#8211; Beaver Builder Knowledge Base<\/a><\/p>\n<p><a id=\"snlink\" title=\"Short URL\" href=\"https:\/\/beaverbrains.com\/module\/content-slider\/\" target=\"_blank\" rel=\"noopener\">Content Slider Module for Beaver Builder WordPress Page Builder<\/a><\/p>\n<p><a id=\"snlink\" title=\"Short URL\" href=\"https:\/\/beaverbrains.com\/make-full-width-5050-post-slider-beaver-builder\/\" target=\"_blank\" rel=\"noopener\">How to make a full width 50\/50 post slider with Beaver Builder \u00bb Beaver Brains<\/a><\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Add a slider \/ slideshow to your website using Beaver Builder plugin.<\/p>\n","protected":false},"author":1,"featured_media":93,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,6],"tags":[21,17],"class_list":["post-61","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-specific-instruction","category-content-manager","tag-page-builder","tag-wordpress"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":0,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media\/93"}],"wp:attachment":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}