One Page Design Overview

Joomla

  1. Open the theme at the Home page.
  2. Add several Row with Columns controls using Insert >> Row with Columns. The number of Row with Columns controls should match the number of pages you would like to create. Configure Rows to have one column.
  3. At this step, add special controls to output Joomla content. For example, let's add the Joomla Position control to output one of the Joomla modules. Locate them in every Row.
  4. Add the Horizontal Menu control from Insert >> Navigation >> Horizontal Menu if it does not exist.
  5. Click 'Apply Theme to CMS' and open the theme in the Joomla Administration back-end.
  6. Switch to Extensions >> Module Manager and add Custom HTML modules to each position created in step 3. Fill modules with content to create site pages.
  7. Open Menus >> Menu Manager and create a new menu. Create menu links using the "External URL" Menu Item Types. Set up links with ahcnors, e.g. #projects
    JoomlaMenuItem.png

    Important note: Remember that the Home page link should be created in the same way. The menu should not include a page marked as "Default Page".
  8. Switch to Extensions >> Module Manager and create a new module of Menu type. Select the menu created in step 6 as the menu source, set Position to 'Hmenu' position. Make sure that only this menu is assigned to the 'Hmenu' position.
  9. Return to Themler, refresh content to see the changes.
  10. The next step is to add anchors into the page to make menu scrolling work. Add several HTML controls (Insert >> Other >> HTML), locating them above every Row. The number of HTML controls should match the number of site pages and menu links.
  11. In Source >> HTML field of HTML control, add custom DIVs like<div id="anchor_name"></div>
    The “anchor_name” should exactly match the anchor links created in the Joomla menu in step 7. e.g.
    JoomlaHTMLControl.png

    Then enable the following options in Themler.
  12. Open Theme Settings and enable the Bootstrap ScrollSpy Plugin.
  13. Open Horizontal Menu >> Navigation Bar tab and enable the Smooth Scrolling option.
  14. Enable Fix on Screen option for the container that includes the menu. For example, if the Horizontal menu is located inside a Row, enable this option for Row. If the Horizontal Menu is located outside any container, enable Fix on Screen for the menu. This will fix the menu to the top of the page while scrolling.
  15. Click 'Apply Theme to CMS' and test the results.

One Page Design Joomla Templates

[One Page Design Overview](page:4782) ## Joomla 1. Open the theme at the Home page. 2. Add several **Row with Columns** controls using Insert >> Row with Columns. The number of Row with Columns controls should match the number of pages you would like to create. Configure Rows to have one column. 3. At this step, add special controls to output Joomla content. For example, let's add the **Joomla Position** control to output one of the Joomla modules. Locate them in every Row. 4. Add the **Horizontal Menu** control from Insert >> Navigation >> Horizontal Menu if it does not exist. 5. Click 'Apply Theme to CMS' and open the theme in the Joomla Administration back-end. 6. Switch to **Extensions** >> **Module Manager** and add **Custom HTML** modules to each position created in step 3. Fill modules with content to create site pages. 7. Open **Menus** >> **Menu Manager** and create a new menu. Create menu links using the "External URL" Menu Item Types. Set up links with ahcnors, e.g. `#projects` !JoomlaMenuItem.png! **Important note**: Remember that the Home page link should be created in the same way. The menu should not include a page marked as "Default Page". 8. Switch to **Extensions** >> **Module Manager** and create a new module of **Menu** type. Select the menu created in step 6 as the menu source, set Position to 'Hmenu' position. Make sure that only this menu is assigned to the 'Hmenu' position. 9. Return to Themler, refresh content to see the changes. 10. The next step is to add anchors into the page to make menu scrolling work. Add several **HTML** controls (Insert >> Other >> HTML), locating them above every Row. The number of HTML controls should match the number of site pages and menu links. 11. In Source >> HTML field of HTML control, add custom DIVs like`<div id="anchor_name"></div>` The “anchor_name” should exactly match the anchor links created in the Joomla menu in step 7. e.g. !JoomlaHTMLControl.png! Then enable the following options in Themler. 12. Open **Theme Settings** and enable the **Bootstrap ScrollSpy** Plugin. 13. Open **Horizontal Menu** >> **Navigation Bar** tab and enable the **Smooth Scrolling** option. 14. Enable **Fix on Screen** option for the container that includes the menu. For example, if the Horizontal menu is located inside a Row, enable this option for Row. If the Horizontal Menu is located outside any container, enable **Fix on Screen** for the menu. This will fix the menu to the top of the page while scrolling. 15. Click 'Apply Theme to CMS' and test the results. ### One Page Design Joomla Templates - [BiziCo](http://templates.themler.com/Themes/Detail/1889546)