About Aplio

Welcome to Aplio, the ultimate financial website template for a sleek and effective online presence. Tailored for financial professionals, Aplio combines modern design with powerful functionality. Engage your audience with intuitive layouts, seamless navigation, and interactive financial tools. Aplio is a simple, minimal and responsive financial template. It is well organized, well-formatted and named accordingly so it’s easy to change any and all of the design. Aplio is built with tailwind css. You can customize it very easily to fit your needs. To see live demo click on this link Aplio (opens in a new tab)

File Structure

We will provide two files. One is the development and the other is production. The production folder provides all the ready files to publish. This folder need not any changed, the user just needs to upload this folder to run. Those who want to customize the theme can use the development folder. All the required files to customize the theme are in this folder.

File structure for production folder

Production
├─ CSS
│   |── theme.css
├─ Images
│   |── All Used Images
|── JS
|   |── script.js
├─ Vendor
│   |── All plugins
├─ 404.html
├─ about.html
├─ ai.html
├─ analytics.html
├─ banking.html
├─ blog-details.html
├─ blog-list.html
├─ blog.html
├─ career-single.html
├─ career.html
├─ categories.html
├─ chabot.html
├─ contact.html
├─ crypto.html
├─ faq.html
├─ forgetpassword.html
├─ hosting.html
├─ index.html
├─ integration.html
├─ login.html
├─ payment.html
├─ price.html
├─ privacy.html
├─ request-demo.html
├─ services-single.html
├─ services.html
├─ signup.html
├─ tags.html
├─ team-single.html
├─ team.html
├─ terms.html
├─ testimonial.html

Customizing Aplio production file is very straight-forward. It can be done by modifying the HTML, CSS, and JavaScript code within production folder files. To customize those files, first, open it using any code editor.Then, change the desird file accordingly.

File Structure for development File


Development
├─ src
| └── scss
│       |── ALL SASS file
| └── fonts
|       |── All required custom fonts
| └── images
|       |── All Used Images
| └── js
|       |── script.js
| └── vendor
|       |── All used plugins
| └── Partials
|       |── All used .htm files
| |── 404.html
| |── about.html
| |── ai.html
| |── analytics.html
| |── banking.html
| |── blog-details.html
| |── blog-list.html
| |── blog.html
| |── career-single.html
| |── career.html
| |── categories.html
| |── chatbot.html
| |── contact.html
| |── crypto.html
| |── faq.html
| |── forgetpassword.html
| |── hosting.html
| |── index.html
| |── integration.html
| |── login.html
| |── payment.html
| |── price.html
| |── privacy.html
| |── request-demo.html
| |── services-single.html
| |── services.html
| |── signup.html
| |── tags.html
| |── team-single.html
| |── team.html
| |── terms.html
| |── testimonial.html
├─ .gitignore
├─ .prettierignore
├─ gulpfile.js
├─ LICENSE
├─ README.md
├─ package.json
├─ tailwind.config.js

How to customize development File?

customize partials

All the page data are added through partials. these partails will be found at src/partials folder. The base partials are added in this folder.

In src/partials/header.htm file you can add site title, favicon, css and all the meta datas from here.
In src/partials/footer.htm file Here all the script tags are added.

On the other hand, In it there is another folder named components where alll the components are added. Got to any components such as src/partials/components/hero.htm file and customize them as per your need to customize the hero section for home page V1.

SASS Files

All the sass related files are added in the src/scss folder. Feel free to customize them from there.

Images

To change any images go to the src/images folder and change images.

Scripts

All the written javascripts are in the src/js/script.js file. feel free to customize it if you want.

Create a page

In the src folder create a .html file giving any name. Remember the tname of the file will be the route name also. Now import partial from the src/parrtials/ folder. You must have to import src/partials/header.htm and src/partials/footer.htm. Betwwen these two file you will have to add other partials. An example is given below: Suppose you have created a page naming blog.html now follow the below patterns to add the partials in it


@@include('header.htm')

@@include('components/top-nav.htm')

@@include('components/navbar-inner.htm',{
"nav": "blog"
})

@@include('components/page-hero.htm',{
"title": "Recent blogs created <br> by aplio",
"subtitle": "Blog Grid",
"paragraph": "",
})

@@include('components/blog-feature.htm')

@@include('components/blogGrid.htm')

@@include('components/ctaV3.htm')

@@include('components/footer.htm')

@include('footer.htm')

Here @@include('components/navbar-inner.htm') is the components name. "nav": "blog" is the parameter name that add a value on the blog link in the navabr.
To customize page hero section data. These are some parameters, you can change tp edit page hero data in the blog page.

"title": "Recent blogs created <br> by aplio",
"subtitle": "Blog Grid",
"paragraph": ""

Others files data can be changed from the corresponding .htm file. If you nead any help, feel free to contact us (opens in a new tab) for any querry.

Deploying Site Get Started