{"id":4638,"date":"2023-01-11T17:48:17","date_gmt":"2023-01-11T16:48:17","guid":{"rendered":"https:\/\/digi-ed.uk\/support\/?post_type=ht_kb&#038;p=4638"},"modified":"2023-01-11T17:48:19","modified_gmt":"2023-01-11T16:48:19","slug":"navigation-and-layout-in-xerte","status":"publish","type":"ht_kb","link":"https:\/\/digi-ed.uk\/support\/article\/navigation-and-layout-in-xerte\/","title":{"rendered":"Navigation and layout in Xerte"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This article explores the use of the following Navigation and Layout elements\/functions in Xerte;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top Bar Navigation<\/li>\n\n\n\n<li>Left Menu Navigation<\/li>\n\n\n\n<li>Tabs<\/li>\n\n\n\n<li>Pills<\/li>\n\n\n\n<li>Accordion<\/li>\n\n\n\n<li>Carousel<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Top Bar Navigation<\/h1>\n\n\n\n<p>Each page within a Xerte project will show on the Top Bar Navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-1024x682.jpg\" alt=\"A screenshot showing the correlation between pages and the top menu.\" class=\"wp-image-4639\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-1024x682.jpg 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-300x200.jpg 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-768x512.jpg 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-50x33.jpg 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-60x40.jpg 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top-100x67.jpg 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-top.jpg 1028w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Removing -Top Bar Navigation<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Xerte main holding page<\/li>\n\n\n\n<li>Within &#8216;Optional Properties&#8217;, click Navigation Bar<\/li>\n\n\n\n<li>Click the checkbox &#8211; Hide Navigation Bar<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-1024x476.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4640\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-1024x476.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-300x140.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-768x357.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-50x23.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-60x28.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav-100x47.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav.png 1101w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fixing the Top Navigation Bar to the Top of your Screen<\/h3>\n\n\n\n<p>Within Xerte, the Top Navigation Bar&nbsp;appears only at the top of the web page.&nbsp;This means that when you scroll down, the top menu will go out of sight. To amend this and have the top menu stay in view, you will need to add a CSS code.<\/p>\n\n\n\n<p>To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Xerte main holding page<\/li>\n\n\n\n<li>On the right section click \u2018Styles\u2019<\/li>\n\n\n\n<li>Type in the following code<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-fixed-top {&nbsp;\/* position: fixed; *\/ position: sticky;}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-1024x476.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4641\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-1024x476.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-300x140.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-768x357.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-50x23.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-60x28.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS-100x47.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_top_nav_adding_CSS.png 1101w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Left Menu Navigation<\/h1>\n\n\n\n<p>The Sections within Xerte will show on the left menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-1024x682.png\" alt=\"A screenshot showing the correlation between pages and the left menu.\" class=\"wp-image-4642\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-1024x682.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-300x200.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-768x512.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-50x33.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-60x40.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2-100x67.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/learning_xerte_Nav_-left2.png 1028w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Removing &#8211; Left Menu Navigation<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Xerte section&nbsp;page<\/li>\n\n\n\n<li>On the right section, Click &#8216;Hide Section Menu&#8217;<\/li>\n\n\n\n<li>Click the checkbox &#8211; &#8216;Hide Section Menu&#8217;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-1024x408.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4643\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-1024x408.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-300x119.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-768x306.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-50x20.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-60x24.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav-100x40.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/hide_left_nav.png 1289w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Tabs<\/h1>\n\n\n\n<p>Tabs allow you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Meaningfully separate content into different sections.<\/li>\n\n\n\n<li>Show people what content is available to them and how they can get to that content.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding &#8211; Tabs<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click page where the Tabs Navigation is&nbsp;required<\/li>\n\n\n\n<li>Click &#8216;New Navigation&#8217;<\/li>\n\n\n\n<li>Select Tabs from the drop-down Menu<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-1024x575.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4644\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-1024x575.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-300x168.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-768x431.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-50x28.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-60x34.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs-100x56.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Tabs.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Click &#8216;New Pane&#8217;<\/li>\n\n\n\n<li>Select the content media required<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"591\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4645\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab.png 784w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab-300x226.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab-768x579.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab-50x38.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab-60x45.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-tab-100x75.png 100w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styling &#8211; Tabs<\/h3>\n\n\n\n<p><strong>Design Tip<\/strong>: Maintaining consistency throughout the resource will enable the user focus on the material. A mishmash of colors, different size text and fonts can confuse the user.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-1024x500.png\" alt=\"A screenshot of tabs\" class=\"wp-image-4648\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-1024x500.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-300x146.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-768x375.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-50x24.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-60x29.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS-100x49.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/tabs_and_pills_CSS.png 1063w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Pills<\/h1>\n\n\n\n<p>Just like&nbsp;Tabs, Pills allow you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Meaningfully separate content into different sections<\/li>\n\n\n\n<li>Show people what content is available to them<\/li>\n\n\n\n<li>Can be used to show hyperlinks to other pages or websites<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding &#8211; Pills<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click page where the Pill&nbsp;Navigation is&nbsp;required<\/li>\n\n\n\n<li>Click &#8216;New Navigation&#8217;<\/li>\n\n\n\n<li>Select Pills from the drop-down Menu<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-1024x575.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4649\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-1024x575.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-300x168.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-768x431.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-50x28.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-60x34.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills-100x56.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Click New Pane<\/li>\n\n\n\n<li>Select the content media required<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"591\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4650\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills.png 784w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills-300x226.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills-768x579.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills-50x38.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills-60x45.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-pills-100x75.png 100w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styling &#8211; Pills<\/h3>\n\n\n\n<p><strong>Design Tip:<\/strong> Maintaining consistency throughout the resource will enable the user focus on the material. A mishmash of colors, different size text and fonts can confuse the user.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-1024x500.png\" alt=\"A screenshot of tabs\" class=\"wp-image-4651\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-1024x500.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-300x146.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-768x375.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-50x24.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-60x29.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS-100x49.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/pills_CSS.png 1063w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Accordion<\/h1>\n\n\n\n<p>The Accordion is a great way to tidy a page up, preventing a heavy text-based resource from becoming cumbersome.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding &#8211; Accordion<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click page where the Accordion Navigation is&nbsp;required<\/li>\n\n\n\n<li>Click &#8216;New Navigation&#8217;<\/li>\n\n\n\n<li>Select Accordion from the dropdown Menu<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-1024x575.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4652\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-1024x575.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-300x168.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-768x431.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-50x28.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-60x34.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion-100x56.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Accordtion.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Click &#8216;New Pane&#8217;<\/li>\n\n\n\n<li>Select the content media required<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"591\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4653\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion.png 784w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion-300x226.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion-768x579.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion-50x38.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion-60x45.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-Accordion-100x75.png 100w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Collapse &#8211; Accordion<\/h3>\n\n\n\n<p>You will find that with accordion the first section automatically appears open, this can be changed in Xerte Bootstrap but not in the Toolkit.<\/p>\n\n\n\n<p><strong>Closing the first section<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the Accordion page.<\/li>\n\n\n\n<li>Within &#8216;Optional Properties&#8217; add &#8216;Collapse Accordion&#8217;.<\/li>\n\n\n\n<li>\u2018Collapse Accordion\u2019 action will show under the title, tick the check box.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-1024x306.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4654\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-1024x306.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-300x90.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-768x229.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-50x15.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-60x18.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion-100x30.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/accordion.png 1307w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styling &#8211; Accordion<\/h3>\n\n\n\n<p><strong>Design Tip:<\/strong> Maintaining consistency throughout the resource will enable the user focus on the teaching resource. A mishmash of colors, different size text and fonts can confuse the user.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Carousel<\/h1>\n\n\n\n<p>The Carousel is another great way to tidy-up a page. it allows users to click right and left arrows to view panes, and is best for images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding &#8211; Carousel<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click page where the Accordion Navigation is&nbsp;required<\/li>\n\n\n\n<li>Click &#8216;New Navigation&#8217;<\/li>\n\n\n\n<li>Select Carousel from the dropdown Menu<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-1024x575.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4655\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-1024x575.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-300x168.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-768x431.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-50x28.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-60x34.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3-100x56.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel3.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Click &#8216;New Pane&#8217;<\/li>\n\n\n\n<li>Select the content media required<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"591\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4656\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel.png 784w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel-300x226.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel-768x579.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel-50x38.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel-60x45.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/panel-carousel-100x75.png 100w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Auto-Play- Carousel<\/h3>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Auto- play Carousel are not really an effective teaching method. Carousels often have\u00a0terrible\u00a0usability.\u00a0They move automatically (often too quickly, choose a speed 5-7 seconds, more if text is been used). A key rule of user interface design is that\u00a0users need to be in control, static is better. Tip: Make sure you actually need one.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the Carousel page.<\/li>\n\n\n\n<li>Within &#8216;Optional Properties&#8217; add &#8216;Auto-Play&#8217;.<\/li>\n\n\n\n<li>&#8216;Auto-Play&#8217; action will show under the title.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-1024x322.png\" alt=\"A screenshot with the bulleted items above labelled.\" class=\"wp-image-4657\" srcset=\"https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-1024x322.png 1024w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-300x94.png 300w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-768x242.png 768w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-50x16.png 50w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-60x19.png 60w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay-100x31.png 100w, https:\/\/digi-ed.uk\/support\/wp-content\/uploads\/2023\/01\/Carousel_autoplay.png 1306w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styling &#8211; Accordion<\/h3>\n\n\n\n<p><strong>Design Tip1:<\/strong>&nbsp;It is suggested that you keep a&nbsp;Carousel to images only, as text can be cut off.<\/p>\n\n\n\n<p><strong>Design Tip2:<\/strong>&nbsp;Keep the images the same size<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User Experience &#8211; Accordion<\/h3>\n\n\n\n<p><strong>User Experience 1:<\/strong><\/p>\n\n\n\n<p>Having a&nbsp;Carousel as navigation and having the&nbsp;Auto-Play on is not effective for addressing the needs of people with disability issues.&nbsp;The user losses some&nbsp;control of their own speed of learning&nbsp;if you do not turn it off.<\/p>\n\n\n\n<p><strong>User Experience 2:<\/strong><\/p>\n\n\n\n<p>It is suggested that you keep a&nbsp;Carousel to images only, as text can be cut off and try keep the images the same size.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article explores the use of the following Navigation and Layout elements\/functions in Xerte.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[63],"ht-kb-tag":[352,351],"class_list":["post-4638","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-xerte","ht_kb_tag-layout","ht_kb_tag-navigation"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb\/4638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/comments?post=4638"}],"version-history":[{"count":2,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb\/4638\/revisions"}],"predecessor-version":[{"id":4658,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb\/4638\/revisions\/4658"}],"wp:attachment":[{"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/media?parent=4638"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb-category?post=4638"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/digi-ed.uk\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=4638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}