››

››How to Add a Page Footer

How to Add a Page Footer

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

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

Page Footer Preview

Benefits of Page Footer:

Improve user experience by adding related links and information in continuation with the current page
Add extra details you could not mention at the top

How to Add a Page Footer

Step 1: On your ProProfs Knowledge Base dashboard, click Settings > Select the site from the drop-down.

Go to Settings and choose your site from the dropdown

Step 2: Scroll down to Page Footer and click to open.

Navigate to Page Footer in Settings

Step 3: Choose the Footer Type from the left panel. First, we will pick Template. Click Add to select from our readymade designs.

Select Footer Type and click Add

Step 4: Select a design from the overlay and click Save.

Select your footer design

Step 5: You can customize the footer by modifying elements, such as background color, Copyright Notice, footer links, menu color & text, and social media links. A live preview will be available on the right part of the screen.

Once done, you can preview and/or save the changes.

Customize the footer, check the live preview, and Save changes

Using the Advanced Option

Please note it requires advanced HTML & CSS knowledge to modify the code.

Step 1: Choose the "Advanced" option as the Footer Type from the left panel.

Advanced Footer Type

Step 2: Add your HTML and Style code into the HTML and CSS code boxes. Once you’ve added the codes, you can preview the Footer.

Copy the HTML and CSS code

You can always modify the code as you like to tweak footer's look & feel.

Here’s a glimpse of the footer:

Advanced Footer Type Preview

Click Save & Done to finalize the footer.

How to Enable/Disable Footer on a Page

ProProfs Knowledge Base gives you page-level control to show/hide the footer with a click after adding it to the site settings.

To enable/disable the footer on a page:

Step 1: Go to a Page in the editor mode and click Edit Page.

Go to Edit Page

Step 2: Click the gear icon to access page settings.

Open Page Settings

Step 3: You can find "Footer" under the Basic tab in the Settings panel. Click to enable/disable as per your preference and Save.

Navigate to the Footer option to enable or disable

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">
© 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;
}

That is all about adding a page footer in ProProfs Knowledge Base.

Related Articles: