{"id":7600,"date":"2014-07-10T16:15:04","date_gmt":"2014-07-10T23:15:04","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7600"},"modified":"2015-08-13T15:33:09","modified_gmt":"2015-08-13T22:33:09","slug":"5-minute-website-fixes-improve-your-business-website-with-a-custom-slider","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-improve-your-business-website-with-a-custom-slider\/","title":{"rendered":"5-minute website fixes: Improve your business website with a custom slider"},"content":{"rendered":"<p>A successful website owner will consistently wonder how they can better their business, and how they can make their website stand out even more. We have an exciting new tip for this week&#8217;s 5-minute fix, showing readers an easy way to boost their online presence from <em>good<\/em> to <em>jaw dropping<\/em>.<\/p>\n<p><em>How,<\/em> you ask?<\/p>\n<p>By adding a custom slider, and here we have all of the details how.<\/p>\n<p>Due to their range\u00a0of responsive options, we will be using <a title=\"ComSlider\" href=\"http:\/\/www.comslider.com\" target=\"_blank\">ComSlider<\/a> for today&#8217;s 5-minute fix. Upon landing on their page, go ahead and quickly register in the upper right hand corner.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7601\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-2.53.52-PM.png\" alt=\"Registering for ComSlider\" width=\"406\" height=\"326\" \/><\/p>\n<p>Once you&#8217;ve registered, you&#8217;ll see ComSlider has a variety of different templates for you to choose from as you scroll down the page. \u00a0Select your favorite one and we&#8217;ll get going.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter  wp-image-7603\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-3.17.17-PM.png\" alt=\"Selecting a template on ComSlider\" width=\"535\" height=\"325\" \/><\/p>\n<p>Once you&#8217;ve selected a template, the fun begins! Click the &#8220;Upload Image&#8221; button in the upper left hand corner, and upload as many images on your slider as you&#8217;d like displayed. For the sake of this example, I&#8217;ll go with two.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter  wp-image-7605\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-3.31.39-PM.png\" alt=\"Adding images to ComSlider\" width=\"612\" height=\"412\" \/><\/p>\n<p>Next up: Customizations. On the left hand side, you&#8217;ll see a variety of effects under &#8220;Transitions.&#8221; This is how your pictures will slide from one to the next. Because <a title=\"Responsive Templates make for beautiful mobile browsing and added SEO value\" href=\"https:\/\/www.yola.com\/blog\/responsive-templates-make-for-beautiful-mobile-browsing-and-added-seo-value\/\" target=\"_blank\">responsive websites are so important these days<\/a>, your transition should be responsive as well.<\/p>\n<p class=\"p1\"><span class=\"s1\">Be sure to set your transition preferences under &#8220;Mobile&#8221; tab on the Transition property panel. Then you will be able to set &#8220;Responsive&#8221; checkbox on the Layout property panel (this option is located above &#8220;Transitions&#8221;).<\/span><\/p>\n<p>Feel free to flip through various effects, clicking &#8220;Apply&#8221; (located at the bottom of the panel) to test out how they look.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter  wp-image-7606\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-3.31.20-PM.png\" alt=\"Adding transitions to your ComSlider\" width=\"626\" height=\"421\" \/><\/p>\n<p>Now that you&#8217;ve decided on a transition, customize your navigation. These customizations will vary from template to template. Go ahead and try out different Types, Positions and Colors to really make it your own.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7607\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-3.44.34-PM.png\" alt=\"Customizing your navigation on ComSlider\" width=\"237\" height=\"422\" \/><\/p>\n<p>Once you&#8217;ve made some basic customizations to your slider and you like the way it looks, copy the HTML code listed below your slider to your clipboard (you will be pasting it to your website next).<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter  wp-image-7608\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-3.50.05-PM.png\" alt=\"Copying the HTML code on ComSlider\" width=\"614\" height=\"238\" \/><\/p>\n<p>Next, hop into Yola Sitebuilder, and drag and drop your HTML widget (Located in Widgets&gt;Popular&gt;HTML) onto your page, pasting the HTML code inside and hitting save.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter  wp-image-7609\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-4.03.22-PM.png\" alt=\"Adding the HTML widget to your Yola Site\" width=\"482\" height=\"341\" \/><\/p>\n<p>Voila! Your own custom slider!<\/p>\n<p><a href=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-4.06.59-PM.png\"><img loading=\"lazy\" class=\"aligncenter  wp-image-7610\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2014\/07\/Screen-Shot-2014-07-10-at-4.06.59-PM.png\" alt=\"Screen Shot 2014-07-10 at 4.06.59 PM\" width=\"611\" height=\"499\" \/><\/a><\/p>\n<p>As you can see, creating a business website is a cinch with Yola. Check out our <a title=\"Get Yola Silver\" href=\"https:\/\/www.yola.com\/yola-silver?cid=501050\" target=\"_blank\">Yola Silver<\/a> package and get your online business up and running in no time.<\/p>\n<p>Have you made your own custom slider? Show us yours by linking to your website in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With this week&#8217;s 5-minute website fix, learn how to wow your site visitors by adding a custom slider to your business website.<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[130],"tags":[834,782,832,835,833],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7600"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=7600"}],"version-history":[{"count":8,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7600\/revisions"}],"predecessor-version":[{"id":8387,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/7600\/revisions\/8387"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=7600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=7600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=7600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}