Help with the footer in Canvas package theme

Hi friends,

Firstly, I appreciate your tremendous work to make themes perfect as I found and experienced

I have purchased the Canvas multi purpose theme and it is great. I almost have customized all the desired pages of concern out of it. the only issue I have right now is with footer. there are 5 shapes of footer included in the Canvas package, I finally choosed one of them and customized it to my needs, I just removed the un-necessary parts of it and included others. I didn’t modify the style sheet or anything else. I just edited the footer, and now it looks like the following when I put it in empty HTML page.
My question: with all the staff and various pages included in the theme package, I’m confused how to link this footer to all the pages I made without having to copy and paste manually all the code to all the pages. and also to make it easier for me in the future when I add or remove an item from the footer, then I can make it from the footer file without doing that with all pages which it will take a lot of time.
Please note that I’m familiar now with HTML and CSS and I use code editor along with Dreamweaver v2021 which works perfectly with your templates without issues.

I really appreciate your kind assistance in this regards

<!doctype html>

footer
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

<link rel="stylesheet" href="css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Footer
	============================================= -->
	<footer id="footer" class="dark" style="background: url('images/footer-bg.jpg') repeat; background-size: cover;">
		<div class="container">
			<!-- Footer Widgets
			============================================= -->
			<div class="footer-widgets-wrap">

				<div class="row col-mb-50">
					<div class="col-md-8">
						<div class="widget clearfix">

								<div class="row col-mb-30">
								<div class="col-6 col-lg-3 widget_links">
									<ul>
										<li><a href="#">Home</a></li>
										<li><a href="#">About</a></li>
										<li><a href="#">FAQs</a></li>
										<li><a href="#">Support</a></li>
										<li><a href="#">Contact</a></li>
									</ul>
								</div>

								<div class="col-6 col-lg-3 widget_links">
									<ul>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
									</ul>
								</div>

								<div class="col-6 col-lg-3 widget_links">
									<ul>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
									</ul>
								</div>

								<div class="col-6 col-lg-3 widget_links">
									<ul>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
										<li><a href="#">test</a></li>
									</ul>
								</div>
							</div>

						</div>
					</div>

				<div class="col-md-4">&nbsp;</div>
				</div>

			</div><!-- .footer-widgets-wrap end -->
		</div>

		<!-- Copyrights
		============================================= -->
		<div id="copyrights">
			<div class="container">

				<div class="row justify-content-between col-mb-30">
					<div class="col-12 col-lg-auto text-center text-lg-left">
						<div class="copyrights-menu copyright-links clearfix">
						</div>
						Copyrights &copy; 2006-2021 test<br>
                        test<br>
						Published by test
                        
					</div>

					<div class="col-12 col-lg-auto text-center text-lg-right">
						<p class="text-left">Connect withtest<br>
					    founder and publisher</p>
						
						<a href="https://www.linkedin.com/in/test" class="social-icon inline-block si-small si-borderless mb-0 si-twitter">
							<i class="icon-linkedin"></i>
							<i class="icon-linkedin"></i><br>
                       	</a>

						<a href="https://www.youtube.com/user/test" class="social-icon inline-block si-small si-borderless mb-0 si-gplus">
							<i class="icon-youtube"></i>
							<i class="icon-youtube"></i>
						</a>

						<a href="https://.blogspot.com/" class="social-icon inline-block si-small si-borderless mb-0 si-pinterest">
							<i class="icon-blogger"></i>
							<i class="icon-blogger"></i>
						</a>

						<a href="https://twitter.com/test" class="social-icon inline-block si-small si-borderless mb-0 si-vimeo">
							<i class="icon-twitter"></i>
							<i class="icon-twitter"></i>
						</a>

						<a href="mailto:e@test.com" class="social-icon inline-block si-small si-borderless mb-0 si-github">
							<i class="icon-mail"></i>
							<i class="icon-mail"></i>
						</a>

						</div>
				</div>

			</div>
		</div><!-- #copyrights end -->
	</footer><!-- #footer end -->

</div><!-- #wrapper end 'images/footer-bg.jpg'-->

<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>

<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>

<!-- Footer Scripts
============================================= -->
<script src="js/functions.js"></script>

Hi,

Contact with your purchase item author hope they will helped!

Thanks!