1. Home
  2. Docs
  3. Edmo – Moodle Theme Documentation
  4. Creating content
  5. Banner Area

Banner Area

The demo site of Theme Edmo contains a banner with course cards. The banner area has Title, Content, Button, and Course Cards.

Note: Add Course Cards Information manually.

First step: Copying the HTML and add into editor

<!-- Start Main Banner Area -->
<section class="main-banner">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12">
                <div class="main-banner-content">
                    <h1>The World’s Leading Distance Learning Provider</h1>
                    <p>Flexible easy to access learning opportunities can bring a significant change in how individuals prefer to learn! The Edmo can offer you to enjoy the beauty of eLearning!</p>
                    <a href="https://yoursite/mod/page/view.php?id=4" class="default-btn"><i class="flaticon-user"></i>Join For Free<span></span></a>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="main-banner-courses-list">
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div class="single-courses-box">
                                <div class="courses-image">
                                    <a href="https://yoursite/course/view.php?id=3" class="d-block image">
                                    <img src="https://yoursite/draftfile.php/5/user/draft/968142889/img4.jpg" alt="image">
                                    </a>
                                    <div class="price shadow">$39</div>
                                </div>
                                <div class="courses-content">
                                    <div class="course-author d-flex align-items-center">
                                        <img src="https://yoursite/draftfile.php/5/user/draft/968142889/user6.jpg" class="rounded-circle">
                                        <span>Alex Morgan</span>
                                    </div>
                                    <h3><a href="https://yoursite/course/view.php?id=3">Python for Finance: Investment Fundamentals &amp; Data Analytics</a></h3>
                                    <p>Lorem ipsum dolor sit amet, constetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                    <ul class="courses-box-footer d-flex justify-content-between align-items-center">
                                        <li>
                                            <i class="flaticon-agenda"></i> 15 Lessons
                                        </li>
                                        <li>
                                            <i class="flaticon-people"></i> 145 Students
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="single-courses-box">
                                <div class="courses-image">
                                    <a href="https://yoursite/course/view.php?id=3" class="d-block image">
                                    <img src="https://yoursite/draftfile.php/5/user/draft/968142889/img5.jpg" alt="image">
                                    </a>
                                    <div class="price shadow">$49</div>
                                </div>
                                <div class="courses-content">
                                    <div class="course-author d-flex align-items-center">
                                        <img src="https://yoursite/draftfile.php/5/user/draft/968142889/user5.jpg" alt="image" class="rounded-circle">
                                        <span>Sarah Taylor</span>
                                    </div>
                                    <h3><a href="https://yoursite/course/view.php?id=3">Machine Learning A-Z™: Hands-On Python &amp; R In Data Science</a></h3>
                                    <p>Lorem ipsum dolor sit amet, constetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                    <ul class="courses-box-footer d-flex justify-content-between align-items-center">
                                        <li>
                                            <i class="flaticon-agenda"></i> 20 Lessons
                                        </li>
                                        <li>
                                            <i class="flaticon-people"></i> 100 Students
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="banner-shape1" data-speed="0.06" data-revert="true"><img src="https://yoursite/draftfile.php/5/user/draft/968142889/banner-shape1.png" alt="image"></div>
                    <div class="banner-shape2" data-speed="0.06" data-revert="true"><img src="https://yoursite/draftfile.php/5/user/draft/968142889/Shape2.png" alt="image"></div>
                    <div class="banner-shape3" data-speed="0.06" data-revert="true"><img src="https://yoursite/draftfile.php/5/user/draft/968142889/banner-shape3.png" alt="image"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Main Banner Area -->

Update Image and link from code https://yoursite/

Note: Add your course title, image, link and others information into course cars.

Update Image Ex:

Update Link Ex:

Was this article helpful to you? Yes No

How can we help?