How to Update HTML Banner Block: Custom Code

Custom Code

After all images are added in the block, it is time to get into the code!

Code View
Updating Images
Updating Links

Code View

Use the < > HTML code view button on the HTML editor to view the code.

Place cursor after all the images, then copy and paste the following:

<div id="rotator" class="rotator rein-plugin">
    <div id="photo_1" class="photo">
        <img src="addBannerImage1URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_2" class="photo">
        <img src="addBannerImage2URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_3" class="photo">
        <img src="addBannerImage3URL" alt="" role="presentation" class="img-responsive">
    </div>
</div>

<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="AddCertificationsImageURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>

Updating Images

Use the following steps to update the custom code with the images and ensure that everything will display properly:

Highlight the desired Image URL from the top of the HTML area
Paste the Image URL into place in the provided custom code
Save changes to confirm that the images are displaying properly

Note: When all Image URLs are added in the custom code, delete the image codes from the top of the HTML area. This leaves only the custom code with the desired images in place.

<div id="rotator" class="rotator rein-plugin">
    <div id="photo_1" class="photo">
        <img src="AddBannerImage1URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_2" class="photo">
        <img src="AddBannerImage2URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_3" class="photo">
        <img src="AddBannerImage3URL" alt="" role="presentation" class="img-responsive">
    </div>
</div>

<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="AddCertificationsImageURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>

Updating Links

After adding all the images, adding links will seem simple!

Use the following steps to add links to the desired places:

Select the < > HTML button to return to the code view
Copy the desired page URL (Online Courses, Certifications, Webinars, etc.)
Paste the page URL in the appropriate place
Save changes to confirm that everything is displaying and working properly


<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="addCertificationsURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>