Collapsible module positions in a template have the advantage of making the remaining areas expand over module positions with no module published in them. This gives flexibilty in the layout, for example when you need to have a large area for an image gallery or code.
Top Menu & Top Search
Top Menu and Top Search are visible on widths of 800px and up. For lower widths the TopMenu transforms to a bottom menu where only the first level shows, with a JumpTo Menu button on top, while the TopSearch becomes an expanding Search button next to it on top .
Takes a logo from a Custom HTML module with an image. How you set the image alignment inside the module defines left, right or center position of the logo. Below 600px width the logo is not shown to save room and bandwidth.
Site Name & Site Slogan
Site Name is taken from the Joomla configuration. Site Slogan takes a Custom HTML module with a text of your choice to display (or not). On widths below 600px both get a slightly smaller font.
Breadcrumbs & TopBreadcrumbs
Display when you assign the breadcrumbs module to the breadcrumbs position or topbreadcrumbs position.
Sidebar modules are simply assigned to the left or right position. When no modules are assigned to the sidebar positions, then the main content stretches over the available area. For viewports below 900px the sidebars jump to below the main content, with a JumpTo Menu button on top. Below 800px width the sidebar shows below the main content with 2 columns for the sidebar modules, below 480px width the sidebar (below the main content) has 1 column for its modules.
Empty sidebars can be achieved by creating a Custom HTML module without any content and publishing it to a sidebar position. Be sure to set the module style for these to none under
Options > Advanced Options.
4 available module positions. Above modules are 2 rows of 2 (with rounded box) for viewports higher than 685px (Android landscape). Below they become 4 rows of 1 without the rounded box.
6 available module positions. Bottom modules are 3 rows of 2 for viewports from 685px to 1024px, and 2 rows of 3 for higher viewports (in rounded box). Below 685px they become 6 rows of 1 without the rounded box.
4 available module positions. Footer modules are 2 rows of 2 (with rounded box) for viewports higher than 685px (Android landscape). Below they become 4 rows of 1 without the rounded box. Footer modules have the "contentinfo" role assigned in HTML5, so they are meant to display site-related information (like contacts, author info, copyright info, links to search, etc.).
The credits at the bottom of the container are set inside the index.php (and styled through the stylesheet).
The "Back to Top" link at the bottom of the page is set inside the index.php (and styled through the stylesheet).