Skip to main content

Site Home Settings

With the following setting options you can create a hero section for your Moodle home page including a responsive slideshow with images and videos. The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops.

General Site Home Settings​

  1. Site Home Section Headings: At the general Moodle Site home settings administration page, you can access the Moodle core options to configure the front page. You can display any combination of the following: news items, a list of courses, a list of enrolled courses, a list of course categories, a list of categories and courses, a course search box or none. The order is determined by a combination box.

With this setting option, you can choose a style for the headings of the Moodle core site home items. Available options:

  • Default (left aligned)
  • Left aligned with divider
  • Centered
  • Centered with divider

  1. Clean Main Region Layout: The main region content is displayed within a content container. Check the box if you prefer a full and clean layout for the main content area on the Moodle front page.

  2. Hide page header for front page resources: You can mark the checkbox to remove the general page title for resources which are added to the site home page. Useful for custom page items if you would like to use your own headings within the content area.

  3. Blog style for site announcements: With this setting option you can enable a blog-style design for the Moodle core site announcements. Otherwise, the default Moodle layout for the site announcements will be used.

Site Home Hero Section - General Options​

  1. Number of Slides: Select the number of slides for the slideshow. You can create a dynamic slideshow of up to 16 slides for you to promote important elements of your site.

Please note: If you only select a single slide, a static image will be displayed and the following settings for Autoplay, Transition Effect and Slideshow Navigation Style will have no further effect. However, you can assign a caption to the image.

  1. Autoplay: Select if you want to make a slide automatically advance after a certain amount of time.

  2. Autoplay Interval: You can set the interval in milliseconds between switching slides.

  3. Transition Effect: You can set the animation option for the transition effect of the slides. Possible values are as follows:

    • slide: slides slide in side by side
    • fade: slides fade in
    • scale: slides are scaled up and fade out
    • pull: slides are pulled from the deck

  4. Ken Burns effect: Mark the checkbox to add a Ken Burns effect to the slide images. This may be useful depending on the aspect ratio of your images and the amount of text in the captions. Otherwise, the captions may not fit the adjusted image height for mobile devices.

  5. Slideshow Navigation Style: Here you can choose between different general designs for the slideshow navigation:

    • Animated arrows (default)
    • Chevron icons (light background, centered)
    • Chevron icons (dark background, centered)
    • Chevron icons (light background, bottom)
    • Chevron icons (dark background, bottom)
    • Bullet pagination

  6. Navigation Hover: If true the navigation buttons (prev, next) will be visible on hover state only, if false they will be always visible.

  7. Hide captions on mobile devices: Mark the checkbox to hide the slideshow captions on mobile devices. The Ken Burns Effect is an automatic animation that moves and scales photos over time.

Site Home Hero Section - Manage Slides​

  1. Image: You can upload the images for the slideshow via the Moodle filepicker.

The images within the slideshow are responsive. That means that they will automatically adjust to your screen resolution and the size of your browser window. If you use images with different aspect ratios, they will be scaled to the aspect ratio of the first image file to ensure that the slideshow always has a consistent height. If you are using video files only, then the video will use a 16:9 widescreen format by default. You can set a custom aspect ratio for the hero area in the "Advanced" settings for the hero section.

  1. Caption text for the slide: Add a content overlay for your slide. Font color, size and position are taken directly from the Moodle text editor.

  2. Slide Caption Position & Effect: Choose a position and an animation effect for the heading and caption of the slide. Possible values are as follows:

    • centered - element fades in
    • left - element slides in from the left
    • right - element slides in from the right

  3. Slide Background Color: Select a background color for the slide/caption. Available options:

    • Light
    • Dark
    • Theme Main Color
    • Light, Headings with Main Background Color
    • Dark, Headings with Main Background Color
    • None

You can define all font sizes and heading styles directly within the Moodle text editor. But for the setting options "Light/Dark, Headings with Main Background Color" you have to define a heading style and a paragraph section to get the correct result:

  1. Full Slide Background: Mark the checkbox if you would like to use the defined background color for the complete slide image. Otherwise the background will be used for the caption only.

Site Home Hero Section - Advanced Settings​

Image Ratio Override: The slideshow always takes up the full width of its parent container. The height adapts according to the defined ratio. The ratio is by default automatically detected from the uploaded image files. In case that you want to override the default value, you can enter a new ratio here, like 16:9. It's recommended to use the same ratio as the background images. For example, just use their width and height, like 1600:1200.