Elevate Your Online Presence with Digito: A Responsive Bootstrap 5 Website Template

Having a strong online presence is essential in the modern world, especially for people who want to highlight their achievements, skills, and talents. Whether you're a freelancer, a creative professional, or a job seeker, having a visually appealing and efficient website is essential to making a lasting impression. This is where Digito comes into play - an adaptable and responsive website Bootstrap 5 template designed to increase your SaaS landing pages, CV websites, and portfolio.

Digito is an HTML5 or Bootstrap 5 website template with many pre-made features to meet the diverse needs of users looking to create stunning portfolio websites, SAAS landing pages, CV websites, HTML5 websites, portfolio landing pages, portfolio website templates, personal portfolios, and multipurpose templates. It is based on the most recent version of the Bootstrap 5 CSS framework, which ensures compatibility across different devices and screen sizes, providing a seamless browsing experience for your visitors.

Digito's adaptability is one of its best qualities. With Digito, you may showcase your work, display your photography portfolio, or highlight your professional achievements, Digito offers a range of customization options to suit your requirements. With so many pre-made landing pages and homepages, you can quickly and easily create a distinctive and captivating online presence that showcases your personality, experience, and skills for personal portfolios, portfolio landing pages, saas landing pages, and CV landing pages.

Digito HTML template makes sure that visitors to your website are left with a lasting impression with its clean and modern design approach. Every element of Digito's design, from the vibrant graphics to the crisp font, is painstakingly created to captivate your audience and entice them to explore more.

As Bootstrap 5 continues to acquire popularity for its enhanced features, Digito stays ahead of the curve by seamlessly integrating with this latest version. This ensures not only a responsive layout but also access to a wide range of Bootstrap components and utilities, allowing you to customize your website with ease and precision.

In today's fast-paced digital world, users expect websites to load quickly and perform perfectly across all devices. Digito takes performance seriously, with optimized code and lightweight assets that ensure fast loading times and smooth navigation. Whether your visitors are accessing your website on a desktop, tablet, or smartphone, they'll enjoy a seamless browsing experience without any lag or delay.

Your website is more than a portfolio, it's a reflection of your brand identity. With Digito, you have the power to customize every aspect of your website to align with your brand aesthetics and identity. With Digito, you have complete control over how your brand will portray online, from selecting interactive elements and layout options to choosing colour palettes and font.

Creating a website can be daunting task, particularly for inexperienced web developers. For this reason, Digito comes with comprehensive documentation and dedicated support to guide you through the process. Whether you need assistance configuring your website, customizing templates, or troubleshooting issues, Our team is here to support you at every stage.

In conclusion, Digito is a responsive Bootstrap 5 website template. It's a powerful tool for someones looking to display their talents, skills, and achievements. Digito is an ideal choice for creating personal portfolios, portfolio websites, SaaS landing pages, and CV landing pages. Digito empowers you to create an attractive online presence that stands out from the crowd. With its versatility, sleek design, responsive behavior, and optimized performance, Digito is the ultimate choice for anyone serious about making an impact online. So why wait? Elevate your online presence with Digito Responsive Website Template today and unlock endless possibilities for success.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Digito is packed with pages that come complete with documented code to simplify the customization process.

DEPENDENCIES

• Gulp
• Bootstrap
• SaSS
• Node

• HTML5 & SCSS
• Bootstrap v5.3.3
• Gulp
• Font-awesome
• Unicons
• jQuery
• 4+ Homepage
• 18+ Bonus Page's
• Responsive Design
• Contact Us form integrated with PHP
• All form with validation
• Best Coding Standard followed
• Pixel Perfect Design
• Clean Code & Unique Design
• Easy to Customize
• Blog Details Page
• Project Portfolio Page

After unzip the downloaded pack, you'll get a SRC and DIST folder. DIST folder is compiled version of SRC. SRC is raw files using gulp you will generate the dist files. All the configuration of gulp will be in gulp file.

You can directly use the compiled DIST and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so. You need to edit in SRC files by the help of gulp it convert the SRC files into DIST files and You will able to see the changes.

You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).

After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.

Once the files are done uploading go to www.yourdomainname.com/index.html

After purchasing our template extract the zip file and you will see this structure.

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the all template's. Here is the general structure of all the pages.

                                    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Digital Agency | HTML Templates</title>
  ...
</head>

<body>

  <!-- Loader -->
  <div class="preloader">
    ...
  </div>

  <!-- Scroll to top -->
  <div class="scroll-top-btn" data-scroll-goto="1">
    <a href="#home" class="scroll-down">
      <span class="scroll-down-icon"></span>
    </a>
  </div>

  <!-- Main Wrapper 
        ============================================= -->
  <div class="page-wrapper">


    <!-- Header 
        ============================================= -->
    <header class="site-header sticky fixed-top">
      <div class="top-search">
        <div class="container">
          <div class="input-group">
            <span class="input-group-addon">
              <i class="uil uil-search fs-20"></i>
            </span>
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-addon close-search-btn pe-pointer"><i class="uil uil-times fs-20"></i></span>
          </div>
        </div>
      </div>
      <!--Navbar Start-->
      <nav class="navbar navbar-expand-lg navbar-custom @@class">
        <div class="container">
          <!-- Logo -->
          <a class="navbar-brand logo" href="index.html">
            <img src="assets/images/logo-white.png" alt="" class="logo-light" />
            <img src="assets/images/logo-sky.png" alt="" class="logo-dark" />
          </a><!-- End Logo -->
          <!-- Navigation -->
          <div class="collapse navbar-collapse justify-content-lg-end" id="navbarCollapse">
            <ul class="navbar-nav ms-auto navbar-center" id="mySidenav">
              <li class="nav-item">
                <a href="#" data-scroll-nav="1" class="nav-link active">Home</a>
              </li>
              <li class="nav-item">
                <a href="#" data-scroll-nav="2" class="nav-link">Services</a>
              </li>
              <li class="nav-item">
                <a href="#" data-scroll-nav="3" class="nav-link">About Us</a>
              </li>
              <li class="nav-item">
                <a href="#" data-scroll-nav="4" class="nav-link">Works</a>
              </li>
              <li class="nav-item">
                <a href="#" data-scroll-nav="5" class="nav-link">Blogs</a>
              </li>
              <li class="nav-item">
                <a href="#" data-scroll-nav="6" class="nav-link">Contact Us</a>
              </li>
            </ul>
          </div><!-- End Navigation -->
          <!-- Right Navigation -->
          <ul class="list-unstyled right-bar">
            <li>
              <button class="btn btn-link search-icon">
                <i class="uil uil-search fs-20"></i>
              </button>
            </li>
            <li>
              <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
                aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
              </button>
            </li>
          </ul> <!-- End Right Navigation -->
        </div>
      </nav>
      <!-- Navbar End -->
    </header>
    <!-- End Header -->

    <!-- Start Page Banner
        ============================================= -->
    <div class="page-content">
      <!-- Star Hero Banner
    ============================================= -->
      <section class="hero-banner bg-gred-secondary repeat-grid brd-bl-rad" data-scroll-index="1">
        <div class="container text-over-gred">
          ...
        </div>
      </section>
      <!-- End Hero Banner -->

      <!-- Start About Us
    ============================================= -->
      <section class="section-spacer" data-scroll-index="2">
        <div class="container">
          ...
        </div>
      </section>
      <!-- End About Us -->

      <!-- Start Our Process
    ============================================= -->
      <section class="section-spacer pt-0" data-scroll-index="2">
        <div class="container">
          ...
        </div>
      </section>
      <!-- End Our Process -->

      <!-- Start Main Services
    ============================================= -->
      <section class="section-spacer bg-light brd-tl-rad" data-scroll-index="3">
        <div class="container">
          <div class="section-header text-center wow fadeIn" data-wow-delay="400ms" data-wow-duration="600ms">
            <span class="sub-text">Our Services</span>
            <h2 class="mt-15">We Offer Awesome Services</h2>
          </div>
          ...
        </div>
      </section>
      <!-- End Main Services -->

      <!-- Start Works
    ============================================= -->
      <section class="section-spacer" data-scroll-index="4">
        <div class="container">
          <div class="section-header text-center wow fadeIn" data-wow-delay="400ms" data-wow-duration="600ms">
            <span class="sub-text">Our Best Works</span>
            <h2 class="mt-15">Our Recent Launched Projects <br class="d-none d-md-block" />Available into
              Market</h2>
          </div>
          ...
        </div>
      </section>
      <!-- End Works -->

      <!-- Start Testimonials
    ============================================= -->
      <section class="section-spacer bg-secondary-gred testimonials-section brd-tr-rad">
        <div class="container">
          <div class="section-header text-white text-center d-block d-lg-none wow fadeIn" data-wow-delay="400ms"
            data-wow-duration="600ms">
            <span class="sub-text text-white">Our Testimonials</span>
            <h2 class="mt-15 text-white">Customer Feeback</h2>
          </div>
          ...
        </div>
      </section>
      <!-- End Testimonials -->

      <!-- Start Team
    ============================================= -->
      <section class="pt-100 pb-70">
        <div class="container">
          <div class="section-header text-center wow fadeIn" data-wow-delay="400ms" data-wow-duration="600ms">
            <span class="sub-text">Our Team</span>
            <h2 class="mt-15">Meet Our Experts</h2>
          </div>
          ...
        </div>
      </section>
      <!-- End Team -->

      <!-- Start Blog
    ============================================= -->
      <section class="section-spacer bg-light brd-tl-rad" data-scroll-index="5">
        <div class="container">
          <div class="section-header text-center wow fadeIn" data-wow-delay="400ms" data-wow-duration="600ms">
            <span class="sub-text">Our Blog</span>
            <h2 class="mt-15">Latest Tips &Tricks</h2>
          </div>
          ...
        </div>
      </section>
      <!-- End Blog -->

      <!-- Start Contact Us
    ============================================= -->
      <section class="section-spacer" data-scroll-index="6">
        <div class="container">
          ...
        </div>
      </section>
      <!-- End Contact Us -->
    </div>

    <!-- Start Footer
        ============================================= -->
    <section class="footer">
      <div class="container text-over-gred">
        <div class="footer-content">
          ...
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          ...
        </div>
      </div>
    </section>
    <!-- End Footer -->
  </div>
  <!-- End Main Wrapper  -->

  <!-- javascript -->
  <script src="assets/js/plugins.min.js"></script>
  <!-- Main Js -->
  <script src="assets/js/app.min.js"></script>
</body>

</html>
                                    
                                

CSS Files and Structure

These are the css files that are loaded into templates in head tag.

                                    
<!--=== Icon Fonts ===-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!--=== Vendors CSS===-->
<link rel="stylesheet" href="assets/dist/css/plugins.css">
<!--=== Digito css ===-->
<link rel="stylesheet" href="assets/dist/css/style.min.css">
<!--=== Digito Theme 2 css ===-->
<link rel="stylesheet" href="assets/dist/css/style-2.min.css">
                                    
                                

Javascript Files and Structure

These are the css files that are loaded into templates in the end of body tag.

                                    
<!--=== Vendors JS ===-->
<script src="assets/dist/js/plugins.js"></script>

<!--=== Page JS ===-->
<script src="assets/dist/js/custom.js"></script>
                                    
                                

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

                                    
@import url("https://fonts.googleapis.com/css2?family=Livvic:wght@300;500;600;700&family=Nunito:wght@300;400&display=swap");
<href="https://fonts.googleapis.com/css2?family=Livvic:wght@300;500;600;700&family=Nunito:wght@300;400&display=swap" rel="stylesheet"">
                                    
                                

Remember to change the font into style.scss If you are using SASS. Without using sass change in style.css

Uni Icon: <i class="uil uil-search"></i>

GULP is a task runner for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

How to use it:

Install all the dependencies that is required for the project like

1. npm install -gulp

2. Make gulpfile.js

3. Define task in gulpfile.js

We have already setup the gulp and defined the standard task. In case you want to add your extra task follow the below code.

											
gulp.task('sass', function () {
    return gulp.src('baseDir/assets/scss/**/*.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('baseDir/assets/css'))
    .pipe(browserSync.reload({
        stream: true
    }))
});
gulp.task('watch', gulp.series('sass', (done) => { //dependancies array
    browserSync.init({
        server: {
            baseDir: "Folder Directory"
        },
    })
    gulp.watch('baseDir/*.html', gulp.series(reloadBrowserSync));// reload browser if changes in js detected
    gulp.watch('baseDir/assets/scss/**/*.scss', gulp.series('sass')); // after detect changes run gulp series tasks.
    gulp.watch('baseDir/assets/**/*.js', gulp.series(reloadBrowserSync)); // reload browser if changes in js detected
    done();
}));
                                
                            

Text Color

Button Types

Background

If you encounter any problems or have questions once you purchased the theme feel free to contact me. You can also or generate ticket on Support. Reply times can be up to 12 / 24 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+00:00) time zone.