loading Loading...
add chat to your website

How to Add a Page Footer

 

A Page Footer can be described as the bottom section on a web page. This section contains a variety of information regarding your business, such as relevant links, product listing, copyright information, social media links, etc.

 

For example, a footer on a web page looks like this:

 

 

Here's how you can add a Page Footer:

 

Step 1: On your ProProfs Knowledge Base dashboard, click Settings, and then Page Footer.

 

 

Step 2: To customize your Knowledge Base footer, copy the HTML code and the Style code under HTML Code and CSS Code, respectively. Once you've added the codes, click Save & Done.

 

 

Step 3: Back on the Home screen, click Preview to see how the footer appears.

 

 

The footer as shown in the preview:

 

 

Step 4: If you want, you can even enable and disable the Footer. To do that, click the settings icon on the page editor.

 

 

Step 5: Check or uncheck the Show Footer checkbox as per your preference.

 

 

Sample Code | HTML

 

<div class="row container-fluid proprofs-home">
    <div class="proprofs-footer">
        <div class="footer-cont">
            <div class="footer-section logo">
                <div class="fs">
                    <a href="https://www.proprofs.com/">
                        <img src="https://www.proprofs.com/api/includes/global/images/allproductlogo/KB.png?v=2" style="width: 130px;">
                    </a>
                </div>
            </div>
            <div class="footer-section contact">
                <div class="fs first">
                    <ul>
                        <li class="footer-head">Resources</li>
                        <li class="footer-text" style="margin-bottom: 7px !important;"><a href="https://www.proprofs.com/c/knowledge-management/how-to-create-a-knowledge-base/">How to Create a Knowledge Base</a></li>
                        <li class="footer-text" style="margin-bottom: 7px !important;"><a href="https://www.proprofs.com/c/knowledge-management/create-internal-knowledge-base/">How to Create an Internal Knowledge Base</a></li>
                        <li class="footer-text" style="margin-bottom: 7px !important;"><a href="https://www.proprofs.com/c/knowledge-management/build-perfect-wiki-for-business/">How to Build a Perfect Wiki for a Business</a></li>
                    </ul>
                </div>
                <div class="fs second">
                    <ul>
                        <li class="footer-head">Solutions</li>
                        <li class="footer-text"><a href="https://www.proprofs.com/knowledgebase/online-documentation/">Documentation Software</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/knowledgebase/user-manual-software/">User Manual Software</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/knowledgebase/self-service-help-center/">Help Center Software</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/knowledgebase/internal-knowledge-base/">Internal Knowledge Base</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-section address">
                <div class="fs third">
                    <ul>
                        <li class="footer-head">Products</li>
                        <li class="footer-text"><a href="https://www.proprofs.com/chat/">Chat</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/helpdesk/">Help Desk</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/survey/">Survey Maker</a></li>
                        <li class="footer-text"><a href="https://www.proprofs.com/project/">Project Management</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-section social-links">
                <div class="fs fourth">
                    <ul>
                        <li class="footer-head">SOCIAL LINKS</li>
                        <li class="footer-text">
                            <a href="https://www.linkedin.com/company/proprofs" target="_blank"><i class="fab fa-linkedin"></i></a>
                            <a href="https://twitter.com/proprofs" target="_blank"><i class="fab fa-twitter"></i></a>
                            <a href="https://www.facebook.com/proprofs" target="_blank"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.youtube.com/user/proprofs1" target="_blank"><i class="fab fa-youtube"></i></a
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="dwn-footer">
        <div class="dwn first">
            <span><a href="https://www.proprofs.com/policies/privacy/" style="color: #fff!important">Privacy Policy</a></span>
        </div>
        <div class="dwn second">
            &copy; Copyright © 2005 - 2020
        </div>
        <div class="dwn third">
            <span><a href="https://www.proprofs.com/" style="color: #fff!important">ProProfs.com</a></span>
        </div>
    </div>
</div>

 

Sample Code | CSS

 

.proprofs-home .proprofs-footer {
    position: relative;
    padding-top: 25px;
    min-height: 1px;
    float: left;
    width: 100%;
    background: #595c63;
    margin-top: 25px;
}

.proprofs-footer .footer-head {
    font-weight: 600 !important;
    margin-bottom: 15px;
    color: #fff;
}

.proprofs-footer .footer-head a {
    color: #fff;
    text-decoration: none;
}

.proprofs-footer .footer-text a {
    color: #fff;
    text-decoration: none;
}

.proprofs-footer .footer-text {
    font-size: 11px;
    color: #fff;
    margin-bottom: 15px;
}

.proprofs-footer ul {
    list-style: none !important;
}

.social-links li i {
    font-size: 19px;
    color: #595c63;
    background-color: #fff;
    padding: 8px;
    border-radius: 50%;
}

.social-links .fa-facebook-f {
    padding: 8px 10px !important;
}

.social-links li a {
    margin-right: 6px;
}

.proprofs-home .fs.first ul li i {
    padding-right: 17px;
    font-size: 14px;
}

.proprofs-home .fs.second ul li i {
    padding-right: 17px;
    font-size: 14px;
}

.proprofs-footer .footer-cont {
    width: 1170px;
    margin: 0 auto;
}

.proprofs-footer .footer-section {
    float: left;
}

.proprofs-footer .footer-section.logo {
    width: 16%;
}

.proprofs-footer .footer-section.contact {
    width: 35%;
}

.proprofs-footer .footer-section.address {
    width: 25%;
}

.proprofs-footer .footer-section.social-links {
    width: 20%;
}

.proprofs-footer .fs.first {
    width: 43%;
    float: left;
    margin-right: 20px;
}

.proprofs-footer .fs.second {
    width: 50%;
    float: left;
}

.dwn-footer {
    width: 100%;
    float: left;
    background: #595c63;
    height: 42px;
}

.dwn-footer .dwn {
    float: right;
    font-size: 12px;
    padding-right: 22px;
    padding-left: 22px;
}

.dwn-footer .dwn.second {
    border-left: 1px solid #fff;
    color: #fff;
    border-right: 1px solid #fff;
}

.dwn-footer .dwn.first {
    padding-right: 40px !important;
}