Adding content

Example: Adding a parallax section to the frontpage

In Theme Lambda, you can use a section with a parallax effect. This includes a containers with a background images and some text above it. The parallax scrolling will cause the text with the content to scroll 'normal' while the background image remains fixed in its position. The demo site uses this effect at the 'Take a closer look at the included features' section (you can see the demo here).

• First step: Copying the HTML

  While this step was quite easy in the previous examples, the parallax section is composed of two elements: At first you have two define the static background, then you can add the content.

  The static background is a 'spotlight' which is described in more detail at "Styling your site" > "Theme Elements" (or just click here).

  The content uses a three column layout (for more infos regarding the grid system click here) and uses 'blocknumbers' (see here).

  But to make it easier for you, you can see the example below and with a click on the "Get full HTML" button you will get all HTML code lines. Copy them to the clipboard.

  Take a closer look at the included features:

  Responsive Design

  Adepting to all screens: Your users can access the online content of your Moodle site from mobile phones to desktop computers. Read More

  Frontpage Slideshow

  Create a slideshow that attracts visitors. Display images and informations for your Moodle site with customizable transition effects. Read More

  Unlimited Colors

  Theme options that make it easy for you to fully customize the style of your Moodle site: Set the color combination that suits you the best. Read More

  Get full HTML code

  
  <div class="spotlight spotlight-v3" style="min-height:190px;">
  <h2>Take a closer look at the included features:</h2>
  <div class="row-fluid">
    <div class="span4">
      <div class="blocknumber_box">
        <div class="blocknumber_icon"><i class="fa fa-tablet"></i></div>
        <div class="blocknumber_content">
          <h5>Responsive Design</h5>
          <p>Adepting to all screens: ...</p>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="blocknumber_box">
        <div class="blocknumber_icon"><i class="fa fa-picture-o"></i></div>
        <div class="blocknumber_content">
          <h5>Frontpage Slideshow</h5>
          <p>Create a slideshow that attracts visitors...</p>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="blocknumber_box">
        <div class="blocknumber_icon"><i class="fa fa-gift"></i></div>
        <div class="blocknumber_content">
          <h5>Unlimited Colors</h5>
          <p>Theme options that make it easy for you to...</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  

• Second step: Adding a label to the Frontpage

  Same procedure as in the first example: Go back to the Frontpage ("Home"), add a label and insert the HTML from step one (don't forgt to switch the edtor to HTML/code view).

  

  Close the HTML/code view. In the preview of the editor you should now see the parallax section.

• Third step: Editing

  You can edit the texts and links directly in the editor as described in the first example. To change the icons, you'll have to switch to the HTML/code view again. The icons are embedded via the Font Awesome icon font. Font Awesome is designed to be used with inline elements like

  <i class="..."></i>

  In the example, you will find in line 5 the following code:

  <div class="blocknumber_icon"><i class="fa fa-tablet"></i></div>

  This is the icon for the "tablet" shown in the first column. So to change the icon, you will have to change this icon type.

  Now go to the Font Awesome icons list: http://fortawesome.github.io/Font-Awesome/icons/.

  Here, you can choose your desired icon.

  Click on the desired icon and the code line for this icon will show up. In the Moodle editor, you can now replace line 5 (the code for the "tablet" icon) with the code for the new icon.

  For a more detailed example on how to add a Font Awesome icon please read the section "Styling your site" > "Using Font Awesome" in this documentation.

---