{"id":637,"date":"2016-11-14T11:32:20","date_gmt":"2016-11-14T11:32:20","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=637"},"modified":"2024-07-08T13:12:25","modified_gmt":"2024-07-08T12:12:25","slug":"layout-examples-a-sliding-banner-and-two-columns","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2016\/11\/14\/layout-examples-a-sliding-banner-and-two-columns\/","title":{"rendered":"Layout examples: a sliding banner and two columns"},"content":{"rendered":"<p>This post explains how to create a page with a <a href=\"http:\/\/dev-research.ncl.ac.uk\/yourproject\/contentsamples\/layoutexamples\/slidingbanner-2columns\/\">sliding banner header and two columns<\/a> for content below it.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-638\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_-300x192.png\" alt=\"two-columns-and-a-banner-fw\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_-768x493.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/two-columns-and-a-banner.fw_-468x300.png 468w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Firstly, to create the sliding banner, you&#8217;ll need to <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/08\/27\/hidden-sections-and-restricted-content\/\">create a hidden section<\/a> inside the section you want the banner to appear in called &#8220;Section Banner&#8221; and put some All Purpose Content in it.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1037 size-medium\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-300x176.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-1024x599.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-768x449.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-1536x899.png 1536w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList-500x293.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerList.png 1564w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Images should be 950px wide by 250px tall and the content needs to have the class &#8220;swipe&#8221;.\u00a0 Each image in the sliding banner needs to be in its own piece of All Purpose Content.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1039 size-medium\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-300x160.png\" alt=\"\" width=\"300\" height=\"160\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-300x160.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-1024x546.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-768x410.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-1536x819.png 1536w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit-500x267.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerEdit.png 1575w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&#8220;Update and Approve&#8221; the content and the banner will appear on your page in Preview and be published at the next scheduled publish.<\/p>\n<p>To add the two columns of content below, create two pieces of All Purpose Content in your section:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1041 size-medium\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-300x150.png\" alt=\"\" width=\"300\" height=\"150\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-300x150.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-1024x512.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-768x384.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-1536x768.png 1536w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList-500x250.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBanner2ColList.png 1565w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>and use the class field to give both pieces of content the class &#8220;nosidebar twocol&#8221;.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1044 size-medium\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-300x176.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-1024x601.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-768x451.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-1536x901.png 1536w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit-500x293.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/SlidingBannerLeftColEdit.png 1566w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&#8220;Update and Approve&#8221; both pieces of content and they will be visible in Preview and be published at the next scheduled publish.<\/p>\n<p>The first piece of content will apear in the left column, the second will appear in the right column.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post explains how to create a page with a sliding banner header and two columns for content below it. Firstly, to create the sliding banner, you&#8217;ll need to create a hidden section inside the section you want the banner &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2016\/11\/14\/layout-examples-a-sliding-banner-and-two-columns\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":835,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-637","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/users\/835"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":14,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":1045,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/637\/revisions\/1045"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}