{"id":356,"date":"2018-03-23T02:20:18","date_gmt":"2018-03-23T02:20:18","guid":{"rendered":"http:\/\/www.loftocean.com\/fallsky\/?p=356"},"modified":"2018-08-27T03:28:09","modified_gmt":"2018-08-27T03:28:09","slug":"add-custom-content-slider-at-the-top-of-homepage","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/fallsky\/style\/add-custom-content-slider-at-the-top-of-homepage\/","title":{"rendered":"Add Custom Content or a Custom Slider at the top of Homepage"},"content":{"rendered":"<p>When your site homepage displays &#8220;Your latest posts&#8221;, or it is a &#8220;<a href=\"http:\/\/www.loftocean.com\/fallsky-doc\/documentation.html#homepage\" target=\"_blank\" rel=\"noopener\">Multi-content Homepage<\/a>&#8220;, you can display a <strong>Fullwidth Featured Area<\/strong> at the top of your homepage.<\/p>\n<p>What content can be displayed in the Fullwidth Featured Area:<\/p>\n<ul>\n<li>A slider of selected posts<\/li>\n<li>3 selected posts in block layout<\/li>\n<li>Custom content &#8211; text, media, shortcodes.<\/li>\n<\/ul>\n<p>In this article, we will focus on how to add custom content in this <strong>Fullwidth Featured Area<\/strong>.<\/p>\n<hr \/>\n<h5>Custom Text\/Media Content with Background<\/h5>\n<p>Here is an example:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-loft_extra_large wp-image-361\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-1440x775.jpg\" alt=\"\" width=\"1200\" height=\"646\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-1440x775.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-300x161.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-768x413.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-1024x551.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-360x194.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-480x258.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-720x387.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-960x516.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content-1200x646.jpg 1200w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-custom-content.jpg 1500w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>It contains: a logo image, some text, 2 buttons (created with button shortcode) and a background image.<\/p>\n<p>In the customizer, please go to <strong>Home Page<\/strong> &gt; <strong>Fullwidth Featured Area<\/strong>. Tick the &#8220;<strong>Display Featured Content<\/strong>&#8221; box, then choose &#8220;<strong>Custom Content<\/strong>&#8221; for the &#8220;<strong>Type<\/strong>&#8221; option.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-360\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area.png\" alt=\"\" width=\"2560\" height=\"1600\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area.png 2560w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-300x188.png 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-768x480.png 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-1024x640.png 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-360x225.png 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-480x300.png 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-720x450.png 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-960x600.png 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-1440x900.png 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-content-in-featured-area-1200x750.png 1200w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>You should see the content editor. Now you can add some text in the editor, click on the &#8220;<strong>Add Media<\/strong>&#8221; button to upload images (or choose some images from the media library), and click on the &#8220;<strong>Add Shortcode<\/strong>&#8221; button to insert some shortcodes (buttons, dropcaps, separator lines, columns, etc).<\/p>\n<p>If the edit field is too small, you can click on the &#8220;<strong>Fullscreen<\/strong>&#8221; button to expand it to fullscreen. (Currently the &#8220;Fullscreen&#8221; button only shows under &#8220;Visual&#8221; mode. We will enable this button for &#8220;Text&#8221; mode in future updates.)<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-365\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode.jpg\" alt=\"\" width=\"1600\" height=\"1000\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode.jpg 1600w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-300x188.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-960x600.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/fullscreen-edit-mode-1200x750.jpg 1200w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>To edit the background of this featured area, please scroll down to locate the &#8220;<strong>Design Options<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-368\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg.jpg\" alt=\"\" width=\"290\" height=\"705\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg.jpg 595w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg-123x300.jpg 123w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg-421x1024.jpg 421w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg-360x875.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/featured-bg-480x1167.jpg 480w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><\/p>\n<hr \/>\n<h5>Custom Slider<\/h5>\n<p>You may like to display some other content instead of posts as a slider in this <strong>Fullwidth Feature Area<\/strong>. We recommend using a third-party slider plugin for this purpose.<\/p>\n<ol>\n<li>Please install and activate a plugin for creating your custom slider. There are many choices, free or premium. You might like to search on <a href=\"https:\/\/wordpress.org\/plugins\/search\/slider\/\" target=\"_blank\" rel=\"noopener\">wordpress.org\/plugins\/<\/a> to find a suitable plugin for your site.<\/li>\n<li>Then create your custom slider. Copy the shortcode of the slider.<\/li>\n<li>Open your WordPress customizer, go to <strong>Home Page<\/strong> &gt; <strong>Fullwidth Featured Area<\/strong> &gt; choose &#8220;<strong>Custom Content<\/strong>&#8221; for the &#8220;<strong>Type<\/strong>&#8221; option. Then paste the shortcode into the field.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-372\" src=\"http:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode.png\" alt=\"\" width=\"290\" height=\"678\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode.png 596w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode-128x300.png 128w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode-438x1024.png 438w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode-360x842.png 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/08\/custom-slider-shortcode-480x1123.png 480w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><\/p>\n<div style=\"border: 1px solid #ddd; padding: 20px 20px 0; margin-bottom: 30px;\">\n<strong>Why use a third-party plugin for creating a custom slider?<\/strong><\/p>\n<p style=\"font-size: 14px;\">WordPress theme controls over the look and presentation of the material on your website, plugin extends your site functionality. Although Fallsky theme also provides some extra functionalities, but there already are many great plugins for creating sliders. They are powerful and flexible, some are maintained well by their authors.<\/p>\n<p style=\"font-size: 14px;\">It&#8217;s better to provide a simple and convenient interface to support those third-party plugins than to create our own built-in custom sliders feature from scratch.<\/p>\n<\/div>\n<p>Please note: Usually those third-party plugins provide design options so Fallsky theme doesn&#8217;t contain any style for those plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to add some Custom Content or a Custom Slider instead of the Featured Posts Slider on Homepage.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-style"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":6,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/356\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}