Demo

demo - carousel (featured articles)

demo - parallax

hello scrolling kitten

demo - testimonials

Requirements

Joomla! 4.3 Joomla! 4.4 PHP 8.0 PHP 8.1 PHP 8.2

Joomla! 5.0 PHP 8.1 PHP 8.2

  • Bootstrap5.2+ template
  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the module
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse] and select your downloaded module
  4. click [Upload & Install], wait for the installation to finish

Configuration

  • in the back-end go to menu Content | System > Site Modules
  • click [New]
  • select [ochFoundation5]
  • configure the module just like you configure any Joomla module

Activate Joomla! One Click update and change-log integration

When you installed the extension, it will automatically integrate with the Joomla Updater for both updates and change-logs.

On first use, the Joomla updater will prompt you with 'A Download Key is missing!' message.

  1. On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
  2. On your site: go to menu System > Update Sites, locate the extension and paste the Download key in the'Download Key' field. Click [Save and Close], that's all it takes!

Demo Contact Form - Click Here

In the module:

  • Tab [Module]:
    • Select Layout: Contact
    • Select the Position for the module
  • Tab [Menu Assignment]:
    • configure the condition for displaying the module
  • Tab [Contact]:
    • Configure the generic Generic setting:
      • Display Order: 'Contact Form First' or 'Contact Information First'
    • Contact Information:
      • Display Contact Information: configure whether or not to display the information
      • Info Text: The text displayed in the Contact Information Column
      • Social Media: just add one or more profile links to your social media profiles, you can order them the way you like. Current support (icon and color) for:
        • about.me, blogger.com, facebook.com, flickr.com, github.com, independent.academia.edu, instagram.com, linkedin, mailto, mastodon, medium.com, pinterest.com, reddit.com, sype, slideshare.net, snapchat.com, soundcloud.com, stumbleupon.com, telephone number, tumblr.com, twitter.com, vimeo.com, vk.com, youtube.com
    • Contact Form:
      • Display Contact Form: configure whether or not to display the Contact Form column
      • Form Pretext: text like 'We will try to answer your email as soon as possible'
      • Send Copy To Submitter: best to NOT turn this on as it can (and thus will) be used to have your server mail other people by entering their email address in the contact form. This is a common way to (manually) send spam.
      • ย Require Privacy Consent : display a required checkbox with description on the contact form
      • : leave empty or configure one or more receiver that the visitor can select from
        • Select Label: the label used in the dropdown on the form, e.g. Pre-Sales, Customer Support, Website Administrator, etc.
        • Email To / Name To: the person who should receive the email
        • Email Subject prefix: a custom prefix added to the subject making it easy to find the mails
      • Security & Anti Spam:
        • Allow Links in Message: most spammers send messages with links in it, configure this to no and exchange links with your customer in follow up emails
        • Minimum Words: set the number of minimum words in the message
        • Minimum Time: set the minimum time between form display and clicking the submit button. A normal user needs time to fill in the form, a spam-bot doesn't and submits almost instantly
        • Session Check: check for a valid session (preventing timed out sessions)
        • Enable Captcha: extra spam protection, the form will display the captcha configured in the global configuration of your site
        • trigger onFirewallAdd: ochSimpleFirewall integration > add the IP of spam-bots directly on the blacklist preventing them from visiting your site and trying to generate a spam message again.

demo - parallax

hello scrolling kitten

In the module:

  • Tab [Module]:
    • Select Layout: Parallax
    • Select the Position for the module
  • Tab [Menu Assignment]:
    • configure the condition for displaying the module
  • Tab [Parallax]:
    • Image Source:
      • Fixed Image > you can configure an image to display in the module
      • Full Article Image > when the module is displayed on an Article Page, the image will be the Full Article Image for that article.
      • Article Custom Field > when the module is displayed on an Article Page, the image will be taken from the Configured Custom Article Field for that article
    • Fixed Image: the Fixed Image, will also be used as fallback image for articles that have no Full Article Image or Custom Article Field configured
    • Alt Text: the Alt text for the fixed image
    • Image Class: a custom css class that alows you to style the image with css
    • Parallax Height: Set Parallax height (e.g. 75vh or 500px). Leave empty to set height via CSS.
    • Parallax Type: The parallax effect > scroll, scale, opacity, scroll opacity, scale opacity
    • Parallax Speed: the speed (configured value is divided by 10)

demo - testimonials

In the module:

  • Tab [Module]:
    • Select Layout: Testimonial
    • Select the Position for the module
  • Tab [Menu Assignment]:
    • configure the condition for displaying the module
  • Tab [Testimonial]:
    • Configure the generic Testimonial setting:
      • Auto play: when displayed should it scroll though the slides automatically?
      • Controls: display next / previous controls on the slides
      • Indicators: should indicators be displayed on the slides giving feed back on which slide is showing
      • Cross fade: should the slides 'crossfade' or just slide from from left to right?
      • Touch Swiping: should touch swiping be activated on mobile devices
      • Dark Variant: use light text on the captions (for dark images)
      • Random Order: display the slides in random order
      • Testimonial Class: configure a custom class so you can style every aspect of the carousel via css
    • Testimonial Slides:
      • You can add as many slides as you want and you can reorder them with basic Joomla repeatable form functionality: just drag and drop them around
      • Testimonial Text: set the text for the testimonial
      • Testimonial Text Class: you can set any class you like, default is 'd-flex align-items-center justify-content-center'
      • Slide Interval: set the duration this specific slide should be visible. Every slide can have its own interval time!
      • Display Caption: select to configure the slide overlay
        • Caption Class: configure a css class for the caption so you can style it via css
        • Title: the slide title, leave empty when no title is needed
        • Text: the slide text, leave empty when no text is needed
        • Button text: the text on the button
        • Button Class: configure a css class for styling the button
        • Button link: configure the URL the button should link to, leave empty and the button will not be displayed

Agency Bundle - 12 months
Agency Bundle - 12 months
Supercharge your Joomla! toolbox with the Agency Bundle! Get all extensions plus 2 Hours of expert support โ€“ Subscribe today!
More Information
ochFoundation5 - Module - 12 months
ochFoundation5 - Module - 12 months
Easily add the most used Bootstrap5 site building blocks into your website, without coding!
More Information

Tips & Tricks

  • ย 

Technical support and feature requests via our forum (You need a valid subscription to be able to post)