Understanding the footer code in Newsfeed Ghost Theme

In the footer of Newsfeed Ghost Premium Theme  has 4 footer widgets ( Logo And Paragraph, Navigation, Social Media, Contact Info )

You will find all the code for that section in /_partials/footer-widgets

For the Logo & Paragraph Widget

/_partials/footer-widgets/widget-1.hbs

<div class="footer-widget pe-2">
   {{#if @site.logo}}
   <img class="footer-logo mb-3" src="{{@site.logo}}" alt="{{@site.title}}">
   {{else}}
   <img class="footer-logo mb-3" src="{{asset "images/header-brand.png"}}" alt="{{@site.title}}">
   {{/if}}
   <p>{{t "Newsfeed is well optimized template for any kinds of newspaper, blog, magazine etc website"}}</p>
</div>

You can change the text Paragraph from there.

For the Navigation Widget

/_partials/footer-widgets/widget-2.hbs

We used the following code for the navigation widget

<div class="footer-widget">
   <h4 class="mb-3">{{t "Navigation"}}</h4>
    {{navigation type="secondary"}}
</div>

You can change the widget title and add your own navigation menu list there. Currently navigation working from the ghost Secondary Navigation.

image 1

For the Social Media Widget

/_partials/footer-widgets/widget-3.hbs

<div class="footer-widget">
   <h4 class="mb-3">{{t "Social Media"}}</h4>
   <ul class="footer-nav list-inline">
      {{#if @site.facebook}}
      <li><a href="{{@site.facebook}}"><span class="icon"><i class="fab fa-facebook-f"></i></span>{{t "Facebook"}}</a></li>
      {{/if}}
      {{#if @site.twitter}}
      <li><a href="{{@site.twitter}}"><span class="icon"><i class="fab fa-twitter"></i></span>{{t "Twitter"}}</a></li>
      {{/if}}
      <li><a href="https://instagram.com"><span class="icon"><i class="fab fa-instagram"></i></span>{{t "Instagram"}}</a></li>
      <li><a href="https://linkedin.com"><span class="icon"><i class="fab fa-linkedin"></i></span>{{t "Linkedin"}}</a></li>
   </ul>
</div>

That is very easy to change the social links from there. We used font awesome for the icons. So you can get all the popular social media icons easily from there.

For example, if you want to use the interest icon just use the class fa-pinterest

image 2

For the Contact Info Widget

/_partials/footer-widgets/widget-4.hbs

<div class="footer-widget">
   <h4 class="mb-3">{{t "Contact Info"}}</h4>
   <ul class="footer-nav list-inline">
      <li><a href="#"><span class="icon"><i class="fas fa-map-pin"></i></span>New S. Sales Road, Toronto,
         CA</a>
      </li>
      <li><a href="#"><span class="icon"><i class="fas fa-envelope-open"></i></span>[email protected]</a>
      </li>
      <li><a href="#"><span class="icon"><i class="fas fa-phone"></i></span>+1 (123) 123 456</a></li>
      <li><a href="#"><span class="icon"><i class="fas fa-fax"></i></span>+1 (123) 123 456</a></li>
   </ul>
</div>

Update the address, email, phone number there. If you want clickable phone number then use the following code,

<li><a href="tel:+1123123456"><span class="icon"><i class="fas fa-phone"></i></span>+1 (123) 123 456</a></li>

href=tel: creates the call link. This tells the browser how to use the number.

Tagged: