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, you can preview the Footer.

 

 

Here's an example of how the Footer appears at the bottom of a webpage. Click Save & Done to save the changes.

 

 

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

 

 

Step 4: Enable or disable the Footer option 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;
}