Aplio
Hugo
Homepage

Customize Your Homepage

Customizing the homepage of Aplio is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the layout/partials folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the themes/aplio/layouts/index.html file. And data will be found at content/_index.md file.

Customize Sections

The majority of sections on the homepage are added through the themes/aplio/layouts/partials/home folder, and the data for these components is generated from the content/_index.md file.

In the partials/home or partials/global folder, you will find the individual components that make up the sections of the homepage. These items contain the HTML markup and logic for rendering the specific section. Examples of such items are Hero, Client, Services, Counter, Vision, Solution, Integartion, Faq, Testimonial, HomeBlog , and HomeCta.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the content/_index.md file:

  • change the name, tagline and description value form the content/_index.md and it will be updated automatically.
hero:
  - name: >
      Make your <span class="font-playfair italic inline-block px-5 border-2 rounded-[88px] pt-0.5 pb-2.5 leading-none border-paragraph bg-[#D9D9D900] dark:border-[#F0F3EA]"> Finance </span> more efficient.
    tagline: "50k+ Trusted Businesses"
    description: >
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin, though it looks like it
  • Images: Images ahs been imported from the images folder. To change the Hero images, Got to the themes/aplio/layouts/partials/home/hero.html and replace the image files located in the specified paths (/images/hero/hero-circle.png and /images/hero/hero-circle-dark.png).

Clients

To configure the Client section, you need to make changes in the data/clients.yaml file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the data/clients.yaml file:
    title: >
The world's best companies trust aplio.
subTitle: >
Trusted by thousands of companies across 50+ countries
    • Update the title and subTitle value to set the desired title and description for the section. You can remove this code if you don't want to include a title or description or btn. if you don't want to show it, pass the false value through props in the HTML file.

  2. Client Images

    • Open the data/clients.yaml file.
    • Find the clients array and modify it to include the client images you want to display.
    • Each object in the ClientData array represents a client images for light and Dark version. You can add or remove objects as needed.
    • Update the imageLight and `imageDark property of each object with the path to the corresponding client image file.
    • Example
      clients:
   - iconLight: "images/clients/group.svg"
     iconDark: "images/clients/group-dark.svg"
   - iconLight: "images/clients/infinity.svg"
     iconDark: "images/clients/infinity-dark.svg"
   - iconLight: "images/clients/artifact.svg"
     iconDark: "images/clients/artifact-dark.svg"
   - iconLight: "images/clients/caudile.svg"
     iconDark: "images/clients/caudile-dark.svg"
   - iconLight: "images/clients/axeptio.svg"
     iconDark: "images/clients/axeptio-dark.svg"
   - iconLight: "images/clients/mfinity.svg"
     iconDark: "images/clients/mfinity-dark.svg"
    • Replace /images/client/group.svg, /images/client/group-dark.svg, etc. with the paths to your client image files.

Services

To configure the service section, you need to make changes in the content/services/_index.md file. Now change the folowing codes and the file will be updated automatically.

   title : >
     The world&apos;s best companies <br /> trust aplio.
   pageTagline: "Our Services"
   details: >
       Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin, though it looks like it
  • Update the pageTagline, titleand details`calue to set the desired, tagline title and description for the section.

  1. service Cards:

    • Open the content/services/....md file.
    • Now change the data of each files and the file will be updated automatically.
    title : 'Finance Analysis'
    date : 2024-07-29T23:49:43+06:00
    logo: "images/services/finance.svg"
    logoDark: "images/services/finance-dark.svg"
    excerpt: "Until recently, the prevailing view asumed lorem ipsum was born as nonsense text."

Counter

To edit the counter options in the data/counter.yaml file. Now modify the file.

counter:
  - name: Project Completed
    value: 60
  - name: Team Members
    value: 30
  - name: Satisfied Clients
    value: 40

Vision

To configure the Work Process section, you need to make changes in the content/_index.md file. Here are the instructions:

  1. Section Title:

    • change the data in the vision object in the content/_index.md file:
vision:
  - name: >
      A strong vision is crucial for the analysis of wealth.
    tagline: Data Integrations
    details: >
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After magazine.
    features:
      - item: Guided Payment Procurement
      - item: Guided Payment Procurement
      - item: Guided Payment Procurement
  • Update the section as you need.
  1. Images: Images has been imported from the image folder. You can change them by changining the image path.

Solution

To configure the Work Process section, you need to make changes in the content/_index.md file. Here are the instructions:

  1. Section Title:

    • change the data in the solution object in the content/_index.md file:
solution:
  - name: >
      Ensure strong solutions are available at all times
    tagline: Strong Solutions
    details: >
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After magazine.
    features:
      - item: On Demand Support
      - item: Information Sharing
      - item: Cloud Technology
  • Update the section as you need.
  1. Images: Images has been imported from the image folder. You can change them by changining the image path.

Integration

To configure the Work Process section, you need to make changes in the content/_index.md file. Here are the instructions:

  1. Section Title:

    • change the data in the integration object in the content/_index.md file:
  integration:
  - name: >
      Make productivity easier with 50+ Integrations
    tagline: Top Integration
    details: >
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After magazine.
  • Update the section as you need.
  1. Images: Images has been imported from the image folder. You can change them by changining the image path

FAQ

To configure the Work Process section, you need to make changes in the content/faq/_index.md file

  1. Section Title:

    • Locate the following code in the content/faq/_index.md file:
  hero:
  - title : 'Frequently asked <br> question'
    tagline: FAQ’S
    details: Neque accumsan dolor nullam commodo. Odio massa nisi ullamcorper suspendisse amet amet. Aenean suspendisse eget est pulvinar. Fames eget eget nascetur ornare
  1. faqItems: all the faq data are in the faqItems array in content/faq/_index.md file. Update them to add Faq's
faqItems:
  - question:  What is a business agency?
    answer: Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin.
    type: General
  - question: What services does a business agency provide?
    answer: Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin.
    type: General
  - question: How often should I update my website?
    answer: Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin.
    type:  General

Note: Only general type faq will be shown in the home page

Testimonials

To configure the Work Process section, you need to make changes in the content/testimonial/_index.md file

  1. Section Title:

    • Locate the following code in the content/testimonial/_index.md file:
  hero:
  - title: "What our customer’s say about our company"
    tagline: ""
    details: "Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin, though it looks like it"
  1. testimonials: all the faq data are in the testimonials array in content/testimonials/_index.md file. Update them to add testimonial's
testimonials:
    - brandLogo: "images/testimonial/bodygroup.svg"
      brandLogoDark: "images/testimonial/bodygroup-dark.svg"
      quote: >
        Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin though it looks like it, and it actually says nothing
      rating: 4
      authorName: Robert Frost
      authorDesignation: Lead Designer
      authorImage: "images/testimonial/avatar1.png"

Home Blog

Data in this section is generated from blogs. Create blogs and the data will always be shown here. See more on this link (opens in a new tab).

Home CTA

To update the title of the Call to Action section in the content/_index.md file, Now modify the following data to updata CTA section. Here are the codes:

cta:
  - title: >
      Start Your Free <br /> Trial Today.
    details: >
      By creating a custom Web design for your business, we can bring your vision to life.
    features:
      - No Credit Card Required
      - Free For 30 Day Trial.
      - Money Back Guarente.

Save the changes to the content/_index.md file.

FooterHomepage 2