Customize Your Homepage V3

Customizing the homepage V3 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 data has already been included from the content folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the themes/aplio/layouts/home-3/list.html folder. And all data will be found at content/home-3/_index.md file

Hero Section

To customize the data in the Hero section, you can modify the following properties in the content/home-3/_index.md and customize the following data:

hero:
  - title: The future of business is being <br> shaped by aplio
    tagline: MONITOR YOUR MONEY
    details: Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin, though it looks like it

Banking Details

To configure the Banking Details section, you need to make changes in the themes/aplio/laoyouts/partials/home-3/bnakingDetails.hmtl file. Here are the instructions:

Images has been imported from the public folder. You can change them by changining the image path

<section class="relative">
  <div
    class="absolute left-1/2 -top-150 w-full h-[550px] -translate-x-1/2 bg-cover  bg-[url('../images/hero-gradient.png')] bg-no-repeat bg-center opacity-70 md:hidden -z-10"
  ></div>
  <div class="container relative ">
    <div class="absolute left-1/2 top-20 -translate-x-1/2 -translate-y-1/2 flex max-md:flex-col -z-10 max-md:hidden">
      <div
        class="max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/20 blur-[145px]"
      ></div>
      <div
        class="max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/25 -ml-[170px] max-md:ml-0 blur-[145px]"
      ></div>
      <div
        class="max-1xl:w-[335px] max-1xl:h-[335px]  1xl:w-[442px] 1xl:h-[442px]  rounded-full bg-primary-200/20 -ml-[170px] max-md:ml-0 blur-[145px]"
      ></div>
    </div>
    <div
      class="max-md:mb-20 md:mb-32 max-md:mt-20 md:mt-25 relative max-md:h-[220px] max-md:w-full md:max-w-[650px] lg:max-w-[750px] xl:max-w-[1020px] mx-auto"
      data-aos="fade-up"
      data-aos-offset="200"
      data-aos-duration="1000"
      data-aos-once="true"
    >
      <img
        src="{{"images/banking/banner.png" |  absURL }} "
        alt="about images"
        class="dark:hidden w-full max-md:h-full"
      />
      <img
        src="{{"images/banking/banner-dark.png" |  absURL }} "
        alt="about images"
        class="hidden md:dark:inline-block w-full max-md:h-full"
      />
      <div
        class="absolute left-1/2 -translate-x-1/2 mx-auto bottom-[18px] sm:bottom-6 lg:bottom-7 xl:bottom-[38px] w-150 md:w-[250px] lg:w-[250px] xl:w-[308px] "
      >
        <img
          src="{{"images/banking/banner-device.png" |  absURL }} "
          alt="about images"
          class=" dark:hidden w-full "
        />
        <img
          src="{{"images/banking/banner-device-dark.png" |  absURL }} "
          alt="about images"
          class="hidden dark:inline-block w-full"
        />
      </div>
      <div
        class="absolute  mx-auto -right-5 sm:-right-15 lg:-right-150 bottom-10 w-150 sm:w-[250px] lg:w-[300px] xl:w-[380px] aspect-auto"
        data-aos="fade-left"
        data-aos-offset="200"
        data-aos-duration="1000"
        data-aos-once="true"
      >
        <img
          src="{{"images/banking/banner-shape-1.png" |  absURL }} "
          alt="about images"
          class=" dark:hidden w-full"
        />
        <img
          src="{{"images/banking/banner-shape-1-dark.png" |  absURL }} "
          alt="about images"
          class="hidden dark:inline-block w-full"
        />
      </div>
      <div
        class="absolute  mx-auto -left-5 sm:-left-15 lg:-left-150 top-10 w-150 sm:w-[250px] lg:w-[300px] xl:w-[380px] aspect-auto"
        data-aos="fade-right"
        data-aos-offset="200"
        data-aos-duration="1000"
        data-aos-once="true"
      >
        <img
          src="{{"images/banking/banner-shape-2.png" |  absURL }} "
          alt="about images"
          class="dark:hidden w-full"
        />
        <img
          src="{{"images/banking/banner-shape-2-dark.png" |  absURL }} "
          alt="about images"
          class="hidden dark:inline-block w-full"
        />
      </div>
    </div>
  </div>
</section>

Banking Features

To configure the Payment Rating section, you need to make changes in the content/home-3/_index.md file. Here are the codes you need to change:

  FeaturesData:
  - iconLight: '/images/banking/agent.svg'
    iconDark: '/images/banking/agent-dark.svg'
    title: 'Agent Banking'
    desc: The prevailing view asumed lorem ipsum was born as nonsense text.
 
  - iconLight: '/images/banking/savings.svg'
    iconDark: '/images/banking/savings-dark.svg'
    title: 'Savings Account'
    desc: 'The prevailing view asumed lorem ipsum was born as nonsense text.'
 
  - iconLight: '/images/banking/interest.svg'
    iconDark: '/images/banking/interest-dark.svg'
    title: 'Low Interest'
    desc: 'The prevailing view asumed lorem ipsum was born as nonsense text.'

About Banking

To configure the Payment Rating section, you need to make changes in the content/home-3/_index.md file. Here are the codes you need to change:

   aboutOnlineBanking:
    - title: Incredibly easy and hassle-free online banking
      tagline: ABOUT ONLINE BANKING
      details: Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After magazine.
      listItem:
        - ncome and expenses tracker
        - Automated invoicing
        - rypto connection

Update the section as you need.

Images:
- Images: Images ahs been imported from the images folder. To change the Hero images, Got to the themes/aplio/layouts/partials/home-3/aboutOnlineBanking.html and replace the image files located in the specified paths.

To update the title of the Call to Action section in the data/newsletter.yaml file, Now modify the following data to updata NewsLetter section. Here are the codes:

  title: >
  Start your free trial now!
  tagline: Start 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.

Homepage 2 Homepage 4