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 they transform to a bottom menu where only the first level shows, with a JumpTo Menu button and a Search icon 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.
Display when you assign the breadcrumbs module to the breadcrumbs position.
Sidebar modules are simply assigned to "side". The left or right position of the sidebar is set in the template parameters. When no modules are assigned to the side position, then the main content stretches over the available area. The layouts with 1 sidebar have a 62%-38% Golden Ratio division. For viewports below 900px the sidebar jumps 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.
With a search module assigned to the search position the search form shows in the sidebar. When the sidebar jumps to below the main content on viewports below 800px, then the search form shows below that, with a JumpTo Search button on top.
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).