This code will be applied in Account settings > Learning Homepage > Banner HTML. Also, be sure to check the “HTML banner” checkbox.

If you are not familiar with HTML but would like to use the HTML banner, we recommend using a WYSIWYG tool. This type of tool allows you to design HTML code visually and grab the code. We recommend using http://bestonlinehtmleditor.com/, a free online tool that does just this. This tool allows you to edit one of the Sample codes below or create a new one from scratch.

Clickable Scrolling Banner

HTML Banner Code (note the example below uses the same image source (src=”IMAGE URL HERE”) for each slide, after copying / pasting you need to change the image URLs accordingly)

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img style="width: 100%;" src="https://i.imgur.com/ZtdhrUA.jpg" alt="...">
            </div>
            <div class="item">
                <img style="width: 100%;" src="https://i.imgur.com/ZtdhrUA.jpg" alt="...">
            </div>
            <div class="item">
                <img style="width: 100%;" src="https://i.imgur.com/ZtdhrUA.jpg" alt="...">
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><i
                class="fa fa-arrow-circle-left icon-prev"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><i
                class="fa fa-arrow-circle-right icon-next"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Scrolling Marquee Banner / Moving Text

<div align="center">
    <marquee behavior="alternate" bgcolor="#bb3434" direction="left" height:=""
             loop="7" scrollamount="1" scrolldelay="2" width="100%">
<span style="font-size: 20px;color:#FFFFFF">
Latest news! Latest news! Latest news! Latest news!</span></marquee>
</div>

Image with Text and Text Links

<div class="vc_row element-row row vc_custom_1478727859541">
    <div class="wpb_column vc_column_container vc_col-sm-12">
        <div class="wpb_wrapper">
            <div class="fw-section hb-fw-599b22a654ae9 without-border no-overlay light-style"
                 style="background-color:#000000;
background-image:url(https://www.litmos.com/wp-content/uploads/2017/04/learning-automation-lms-training.jpg);
background-size:cover;
padding-top:40px;
padding-bottom:100px;">
                <div class="row fw-content-wrap">
                    <div class="col-12 nbm">
                        <div id="learning-automated-div" style="text-align: center; font-size: 48px;
line-height: 52px; padding: 100px 5px 10px 5px;">
                            <span style="color:#FFFFFF;">WELCOME!</span></div>
                        <div style="text-align: center; font-size: 18px; line-height: 22px; padding: 0 5px 40px 5px;">
                            <span style="color:#FFFFFF;">Click below to navigate to:</span></div>
                        <div style="text-align: center;">
                            <table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
                                <tbody>
                                <tr>
                                    <td><a href="https://yourcompany.litmos.com/courses/library">
<span style="color:#FFFF00;">
<span style="font-size:28px;">Course Library</span></span></a></td>
                                    <td><a href="https://yourcompany.litmos.com/achievements">
<span style="color:#FFFF00;">
<span style="font-size:28px;">Achievements</span></span></a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="video-overlay no-overlay">$nbsp;</div>
            </div>
        </div>
    </div>
</div>

Static Banner with Link

<div class="banner" style="padding:15px; text-align:center;">
    <div class="banner-content">
        <h1>Hello</h1>
        <p>Admodum deserunt intellegam in duo, novum nonumy populo est at, qui an reque ignota constituto. Utinam
            aperiri equidem te vis. Cu ius velit populo impetus. Et qui ullum nusquam contentiones</p>
        <a href="https://facebook.com" class="btn btn-primary">CLICK</a>
    </div>
</div>