Download button

[esginmurat]

Hello. I want to add download button like bootscore.me website. Again, I want mobile screens to be just like bootscore.me. Is it possible? Thank you from now. respects.

[crftwrk]

Hi Murat,

sure. You can simply inspect the site, grab the HTML and copy it to your site. So, here is the code for the bootscore.me download section. Use a Gutenberg Custom HTML block, insert following code there and choose Page Blank template:

<section id="download" class="py-5 bg-primary text-white">

  <div class="container">

    <h2 class="display-4">Download</h2>

    <h3 class="mb-4">Theme</h3>

    <div class="row">

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bootscore/releases/download/v5.3.0/bootscore-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bootScore</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bootscore-child/releases/download/v5.3.0/bootscore-child-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bootScore Child</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-loop-templates/releases/download/v5.3.2/bs-loop-templates-main-UnzipFirst.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Loop Templates</a>
      </div>

    </div>

    <h3 class="mb-4">Plugins</h3>

    <div class="row">

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-contact-form-7/releases/download/v5.1.1/bs-contact-form-7-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Contact Form 7</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-cookie-settings/releases/download/v5.3.0/bs-cookie-settings-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Cookie Settings</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="?add-to-cart=2606" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2606" data-product_sku="BS0013" aria-label="Add “bS Dark Mode” to your cart" rel="nofollow" product-title="bS Dark Mode"><div class="btn-loader"><span class="spinner-border spinner-border-sm"></span></div><i class="fa-solid fa-cart-shopping"></i> bS Dark Mode <span class="badge bg-danger">10 €</span></a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-grid/releases/download/v5.3.2/bs-grid-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Grid</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="?add-to-cart=2150" data-quantity="1" class="add_to_cart_button product_type_simple single_add_to_cart_button btn btn-outline-light d-block ajax_add_to_cart" data-product_id="2150" data-product_sku="BS0006" aria-label="Add “bS Isotope” to your cart" rel="nofollow" product-title="bS Isotope"><div class="btn-loader"><span class="spinner-border spinner-border-sm"></span></div><i class="fa-solid fa-cart-shopping"></i> bS Isotope <span class="badge bg-danger">19 €</span></a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-masonry/releases/download/v5.0.0.1/bs-masonry-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Masonry</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-preloader/releases/download/v5.1.0/bs-preloader-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Preloader</a>
      </div>

      <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <a href="https://github.com/bootscore/bs-swiper/releases/download/v5.2.1/bs-swiper-main.zip" data-fade="false" class="btn btn-outline-light d-block"><i class="fa-solid fa-download"></i> bS Swiper</a>
      </div>

    </div>

  </div>

</section>

[esginmurat]

Thanks for help. Thank you dear bastian.

But I couldn't tell before. I meant the download button in the menu. Like:

Thank you very much for your help, best regards.

[crftwrk]

The download button is a part of a widget which includes social icons and dark-mode as well. Use the Custom HTML widget and place it in Top Nav 2 widget area:

<div class="d-block d-lg-flex">

  <div class="d-flex align-items-center header-social border-top py-3 py-lg-0 me-lg-2">
    <a target="_blank" href="https://github.com/bootscore" class="nav-link "><i class="fa-brands fa-github"></i><span class="d-lg-none"> GitHub</span></a>
    <a target="_blank" href="https://twitter.com/_bootscore" class="nav-link "><i class="fa-brands fa-twitter"></i><span class="d-lg-none"> Twitter</span></a>
  </div>

  <div class="d-flex align-items-center header-dark-mode border-top py-3 py-lg-0">
    [bs-dark-mode-dropdown]
  </div>

  <div class="d-flex align-items-center header-download border-top pt-4 pt-lg-0 pb-3 pb-lg-0">
    <a href="https://bootscore.me/#download" class="btn btn-outline-primary"><i class="fas fa-download"></i><span class="d-lg-none"> Download</span></a>
  </div>

</div>

[esginmurat]

Thank you very much. Regards.