Page Template

Page Template / Inner Pages

In all inner pages where there are the sections like home page, then the customizing the widgets of that is same as we discussed above. But if there are pages like portfolio, services, blogs etc then it will be customize following way.

Following is the screenshot of portfolio V1 Page

Customization

Go to src >> app >> portfolio >> portfolioGridV1 and open portfolioGridV1.html file

You will saw the follwing code

<div class="portfolio-wrapper section-gap-grid">
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4" *ngfor="let portfolio of portfolioV1">
            <div class="overlay-wrap mb-3">
                <img [src]="portfolio?.image_path" width="500" height="500" class="img-fluid border-rad w-100" alt="gallery images">
                <a href="{{portfolio?.image_path}}" data-fancybox="images" class="card-img-overlay primary-tp-layer pos-center text-center">
                    <span class="center-holder">
                        </span></a><a class="ih-fade-down square-60 rounded-circle bg-white shadow-md">
                            <i class="fa fa-plus align-middle"></i>
                        </a>
                     
                 
            </div>
        </div>
    </div>
</div>
</div>

Change the html according to your need, and for actual data chnages go to src >> assets >> data >> and open portfoliov1.json file. You will saw the following code

{
  "data":[
     {
        "image_path":"./assets/img/blog-thumb-1.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-2.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-3.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-4.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-5.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-6.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-1.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-3.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     },
     {
        "image_path":"./assets/img/blog-thumb-2.jpg",
        "title":"Lorem Ipsum ",
        "heading":"Lorem Ipsum is simply dummy."
     }
  ]
}

edit above code and restart ng serve for reflecting the changes