У вас есть программный продукт, и вы хотите создать для него веб-сайт. Принято считать, что нанять веб-разработчика. Однако, если вы хотите сэкономить деньги и лучше контролировать результат проекта, вы также можете создать свой собственный сайт.
Создание веб-сайта - непростая задача для SaaS, стартапа и предпринимателя. Однако существует множество инструментов, которые могут вам помочь. Одним из них является Bootstrap, который упрощает создание веб-сайта, который отлично смотрится на любом устройстве. В этом руководстве я покажу вам, как сделать простую и эффективную домашнюю страницу SaaS по вашему выбору с помощью Bootstrap 5.
Что такое SaaS?
SaaS, или программное обеспечение как услуга, может быть очень прибыльной моделью для высокотехнологичного бизнеса. Идея состоит в том, что вы можете предлагать свой продукт в виде ежемесячной подписки и получать постоянный доход. Хорошо продуманная целевая страница SaaS отлично превратит потенциальных пользователей в реальных платежеспособных клиентов. Но сначала нужно спроектировать саму посадочную страницу.
Что является самой важной частью SaaS?
Самая важная часть любого продукта SaaS - это ваша целевая / домашняя страница. Здесь вы производите впечатление на своих потенциальных клиентов. Если вы уже работаете с ограниченным бюджетом и не можете позволить себе услуги дизайнера, вы все равно можете создать красивую и эффективную домашнюю страницу, используя бесплатные настраиваемые шаблоны Bootstrap.
Что такое Bootstrap?
Bootstrap - одна из самых популярных платформ HTML, CSS и JavaScript для разработки адаптивных, ориентированных на мобильные устройства проектов в Интернете. Если быть точным, это бесплатный набор инструментов для создания веб-сайтов, ориентированных в первую очередь на мобильные устройства, которые адаптируются к экранам разных размеров. Его можно загрузить бесплатно и по лицензии MIT. Bootstrap разработан сообществом увлеченных разработчиков с целью решения типичных проблем, возникающих при веб-разработке.
Он используется различными профессионалами со всего мира и имеет несколько замечательных функций, что делает его идеальным инструментом для создания продукта SaaS.
Создайте файл HTML
home.html
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SaaS</title> </head><body></body></html>
Во-первых, вам понадобится текстовый редактор, такой как Sublime, для создания HTML-файла.
Sublime - это бесплатный текстовый редактор для языков программирования и разметки, таких как HTML.
Затем вам нужно добавить элементы DOCTYPE, html, head и body.
Если вы новичок в программировании, прочтите курс HTML и CSS, чтобы начать работу.
Добавьте Bootstrap 5.0.0 в свой HTML
home.html
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"><title>SaaS</title> </head> <body><!-- Optional JavaScript; choose one of the two! --><!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script><!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script> --> </body> </html>
Затем добавьте Bootstrap CDN, чтобы быстро приступить к работе. Он также доступен в виде загрузки.
SaaS-призыв к действию
Что такое призыв к действию?
Призыв к действию или CTA - это фраза, призванная побудить пользователя немедленно отреагировать, сообщая ему, какие действия и как следует предпринять.
С точки зрения маркетинга, первый призыв к действию размещается в верхней части страницы или, в данном случае, над прокруткой страницы, чтобы повысить видимость CTA и побудить мотивированных пользователей немедленно действовать в соответствии с предложением.
Каков пример призыва к действию?
Чаще всего призыв к действию просит пользователя «Зарегистрироваться», «Начать работу», «Подписаться», «Попробовать бесплатно» или «Узнать больше».
Выбор правильного CTA зависит от продаваемого продукта.
Что такое хороший призыв к действию SaaS?
Хороший призыв к действию отвечает на три вопроса:
1. Что такое продукт?
2. Зачем это им нужно?
3. Как они это получают?
Эти три части часто делятся на заголовок, подзаголовок и кнопку, которые работают в унисон, чтобы убедить пользователя действовать.
Ниже приведены два примера CTA с кодом HTML.
Bootstrap CTA и шаблон панели навигации №1
В браузере
HTML-код
<style> .banner { /* The image used */ background-image: /*linear gradient overlay*/ linear-gradient(to top right, rgba(13,110,253, 0.30) 10%, rgba(0,0,0, 0.20 ) 60%), url("mountains.jpg"); /* Create the parallax scrolling effect */ background-attachment: fixed; /* Prevent image from repeating */ background-repeat: no-repeat; /* Set height */ height: auto; /* Set background size */ background-size:cover; /* Set background position */ background-position:right center } </style><div class="banner"> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container-fluid"> <a class="navbar-brand" href="#">hikeGPS</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarScroll"> <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Resources </a> <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> <li><a class="dropdown-item" href="#">Guides</a></li> <li><a class="dropdown-item" href="#">Blog</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Share your experience</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> </div> </div> </nav><!--CTA--> <div class="container text-center text-white"> <br><br><br><br><br><br> <h1 class="display-4">Start Hiking Today.</h1> <h5>Use GPS to sure you know where you're going.</h5> <br> <a class="btn btn-primary btn-lg" href="#" role="button">Try for Free</a> <br><br><br><br><br><br> </div> </div>
Вот призыв к действию, наложенный на изображение, или баннер героя.
Текст расположен по центру по вертикали и горизонтали на изображении гор, что наглядно демонстрирует, что продукт имеет какое-то отношение к природе.
Когда пользователь затем читает CTA, он понимает:
1. Что такое продукт? - GPS-навигатор без Wi-Fi
2. Зачем это им нужно? - Они могут уверенно идти в поход, потому что знают, куда идут.
3. Как они это получают? Нажав кнопку, чтобы получить бесплатную пробную версию
Bootstrap CTA и шаблон панели навигации №2
В браузере
HTML-код
<style> .display-3{ font-weight:700; }.purple{ color:rgb(108,99,255); } .btn{ border-radius:30px } </style><!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Pets-R-us</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarScroll"> <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Resources </a> <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> <li><a class="dropdown-item" href="#">Insurances</a></li> <li><a class="dropdown-item" href="#">Blog</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Share your experience</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a> </li> </ul> <div class="d-flex"> <button class="btn btn-outline-light" type="submit">Start</button> </div> </div> </div> </nav><!--CTA--> <div class="container py-5 text-right text-dark"> <div class="row p-5"> <div class="col-lg-6 col-md-12 my-auto"> <h1 class="display-3">Manage your Clients with ease</h1> <h5 class="purple">Pet daycare management software for easy booking and client management.</h5> <br> <a class="btn btn-dark btn-lg" href="#" role="button">Get A Quote</a> </div> <div class="col-lg-6 col-md-12"> <img src="{% static 'Group 73.png' %}" class="img-fluid" alt="couple holding thier cat"> </div> </div> </div> </div>
Вот еще один пример призыва к действию, но с колонками, а не с баннером-героем. Изображение справа опускается ниже текста на небольших устройствах.
Этот призыв к действию представлен следующим образом:
1. Что такое продукт? - Программное обеспечение для ухода за собаками
2. Зачем это им нужно? - Упростить управление бронированием и клиентами
3. Как они это получают? - Нажав кнопку цитаты
Изображение было создано путем закругления углов квадратного изображения с последующей настройкой SVG Adobe XD для наложения поверх него.
Ценностные предложения SaaS
Что такое ценностное предложение?
Ценностное предложение - это еще один маркетинговый термин, используемый для описания ценности, которую компания обещает предоставить пользователю.
Ценностные предложения и призывы к действию тесно связаны. Часто призывы к действию включают ценностное предложение, потому что они описывают, почему пользователю нужна ваша услуга.
Что является примером ценностного предложения?
Ценностное предложение делает преимущества продукта очевидными для потенциального покупателя. Примеры ценностных предложений включают в себя то, что ваш сервис быстрее, проще в использовании и более полезен, чем продукт вашего конкурента.
Начните с сравнения вашего SaaS с ближайшим конкурентом, определив ценность вашего конкурента по сравнению с вашим собственным. Затем объедините эти идеи в простые для восприятия фразы и предложения.
Что такое хорошее ценностное предложение SaaS?
В выгодном предложении подробно рассказывается, почему ваш продукт представляет большую ценность для пользователя, чем аналогичные продукты, предлагаемые вашими конкурентами.
При написании ценностного предложения имейте в виду эти 3 вопроса:
1. Как доставляется ценность?
2. Как переживается ценность?
3. Как приобретается ценность?
Шаблон предложения начальной загрузки №1
В браузере
HTML-код
<style> /*background circle for icons*/ .numberCircle { border-radius: 50%; width: 60px; height: 60px; padding: 8px; background:rgb(13,110,253, 0.10); border: none; color: #007bff; text-align: center; font-size: 25px; }p{ line-height: 25px; }/*customize cards*/ .card{ border:none; }.card:hover { box-shadow: 0 40px 60px -20px rgb(27,24,15, 0.15); } </style><!--Value Proposition--> <div class="container p-5"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-3 pb-4"> <a href="/" style="text-decoration: none"> <div class="card h-100 text-dark"> <div class="card-body"> <div class="numberCircle my-3"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16"> <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/> <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> </svg> </div> <h5 class="card-title">Mobile App</h5> <p class="card-text">Download the mobile app for free on any app store.</p> </div> </div> </a> </div> <div class="col-sm-12 col-md-6 col-lg-3 pb-4"> <a href="/" style="text-decoration: none"> <div class="card h-100 text-dark"> <div class="card-body"> <div class="numberCircle my-3"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16"> <path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/> </svg> </div> <h5 class="card-title">No wifi-needed</h5> <p class="card-text">Wifi is not needed to use the app because we know its not always available.</p> </div> </div> </a> </div> <div class="col-sm-12 col-md-6 col-lg-3 pb-4"> <a href="/" style="text-decoration: none"> <div class="card h-100 text-dark"> <div class="card-body"> <div class="numberCircle my-3"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-compass" viewBox="0 0 16 16"> <path d="M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016zm6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/> <path d="m6.94 7.44 4.95-2.83-2.83 4.95-4.949 2.83 2.828-4.95z"/> </svg> </div> <h5 class="card-title">Accurate mapping</h5> <p class="card-text">Get the most up-to-date mapping and report any inconsistencies to help others.</p> </div> </div> </a> </div> <div class="col-sm-12 col-md-6 col-lg-3 pb-4"> <a href="/" style="text-decoration: none"> <div class="card h-100 text-dark"> <div class="card-body"> <div class="numberCircle my-3"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-stopwatch" viewBox="0 0 16 16"> <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/> <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z"/> </svg> </div> <h5 class="card-title">Hike estimates</h5> <p class="card-text">We track steps not location, so you can always get an estimate of the distance traveled.</p> </div> </div> </a> </div> </div> </div>
Помимо призывов к действию, это один из лучших способов представить карточки с особенностями вашего ценностного предложения. Используемые значки SVG можно бесплатно скачать на сайте icons.getbootstrap.com.
Шаблон предложения ценности Bootstrap № 2
В браузере
HTML-код
<!--Value Proposition-->
<div class="container-fluid py-5 bg-light">
<div class="container p-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img src="{% static 'Group 75.png' %}" class="img-fluid" style="height:380px" alt="couple with dog">
</div>
<div class="col-lg-6 col-md-12 my-auto">
<h2 class="font-weight-bold text-center">Organize, manage, and track in one app</h2>
<h5 class="text-muted text-center lead">No need for separate spreadsheets and calenders. Use the all-in-one Pets-R-us app.</h5>
<ul class="text-right">
<li>Clean interface</li>
<li>Upload contact information, behavioral, and grooming information</li>
<li>No client limit</li>
</ul>
</div>
</div>
</div>
</div>Еще один способ занести ваши ценностные предложения в список.
Отзывы о Bootstrap
Что такое характеристика?
Отзыв - это устное или письменное заявление, подтверждающее использование продукта. Отзывы дают клиенты, которые имеют личный опыт работы с продуктом и чувствуют себя комфортно, делясь этим опытом с другими.
Обратитесь к своим существующим клиентам по электронной почте с просьбой дать краткий отзыв о вашем веб-сайте. Сообщите им, что вы предоставите обратную ссылку на их сайт в знак благодарности за их время. Но не торопитесь с отзывом, если они чувствуют себя комфортно, они будут более чем готовы прислать свой отзыв.
Какой пример отзыва?
«С помощью этого продукта я увеличил свои продажи на 10%! Спасибо ИТ-команде за простоту работы и компетентность »- это пример отзыва, который подтверждает ценность продукта, а также дает положительные отзывы и благодарность сотрудникам.
Отзывы должны быть честными и достоверными. Они не обязательно должны быть хорошей копией.
Что такое хорошая характеристика SaaS?
Хороший отзыв должен помочь увеличить коэффициент конверсии с помощью эффекта подножки. Потенциальные клиенты чувствуют себя комфортно, подписываясь на продукт, основываясь на явном заявлении о том, что другие используют продукт эффективно.
Хороший отзыв должен подчеркнуть существующее доверие между текущим клиентом и продуктом в кратком заявлении, которое обращается к разуму и эмоциям.
Часть этого доверия включает готовность клиента, чтобы его имя, должность, компания / веб-сайт и даже изображение отображались рядом с их заявлением.
Помните эти 3 вопроса при выборе отзыва для своего сайта:
1. Предоставляет ли он качественные доказательства (эмоциональную привлекательность)?
2. Предоставляет ли он количественные доказательства (данные и статистика)?
3. Подчеркивает ли он конкретный вариант использования продукта?
Отзывы о Bootstrap SaaS №1
В браузере
HTML-код
<style> /*client images */ .client { height:100px; width:100px; border-radius: 50%; object-fit:cover; }/*stars color */ .bi-star, .bi-star-fill, .bi-star-half{ color:#ffc107; } </style><!--Testimonials--> <!--Testimonials--> <div class="my-5"> <div class="container p-5"> <h1>What do our clients say?</h1> <div class="row p-5"> <div class="col-lg-6 col-md-12"> <div class="row"> <div class="col-3 text-center my-auto"> <img src="john.jpg" class="img-fluid client"> </div> <div class="col-9"> <figure> <blockquote class="blockquote"> <p>It never freezes and always provides the most up-to-date routes. I've been able to avoid several dangerous routes because of it.</p> </blockquote> <figcaption class="blockquote-footer"> Jake P. <cite title="Source Title">hiked Great Smokey Mountains</cite> </figcaption> </figure> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/> </svg> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="row"> <div class="col-3 text-center my-auto"> <img src="sophie.jpg" class="img-fluid client"> </div> <div class="col-9"> <figure> <blockquote class="blockquote"> <p>Great product! Gives me piece of mind that I can hike without getting lost. I've been able to hike 5 new trails I was unsure of because of it.</p> </blockquote> <figcaption class="blockquote-footer"> Sophie G. <cite title="Source Title">hiked Zion National Park</cite> </figcaption> </figure> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/> </svg> </div> </div> </div> </div> </div> </div>
Отзывы вызывают наибольшее доверие, если вы можете указать имя, лицо и компанию, связанную с каждым из них.
Шаблон отзыва №2 для начальной загрузки
В браузере
HTML-код
<style> /*client images */ .client { height:60px; width:60px; border-radius: 50%; object-fit:cover; }/*quote svgs*/ .bi-chat-square-quote{ color:rgb(108,99,255, 0.3); }/*stars color */ .bi-star, .bi-star-fill, .bi-star-half{ color:#ffc107; } </style><!--Testimonials--> <div class="container p-5"> <div class="row p-5"> <div class="col-lg-6 col-md-12"> <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="my-3 bi bi-chat-square-quote" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/> <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/> </svg> <h3 class="pb-3">Saves so much time!</h3> <figure> <blockquote class="blockquote"> <p>Great product. Love the easy-to-use interface. Saves my employees at least 2 hours by not having to constantly check up with one another and reference a spreadsheet.</p> </blockquote> <div class="row"> <div class="col-lg-2 col-md-3 my-auto"> <img src='john.jpg' class="img-fluid client"> </div> <div class="col-lg-10 col-md-9 my-auto"> <b>John Smith</b> <br><small>Founder, Clean Paws</small><br> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/> </svg> </div> </div> </figure> </div> <div class="col-lg-6 col-md-12"> <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="my-3 bi bi-chat-square-quote" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/> <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/> </svg> <h3 class="pb-3">Would recommend</h3> <figure> <blockquote class="blockquote"> <p>I never need to worry about relaying special care instructions or freeing schedules. Everything is done instantly through the app.</p> </blockquote> <div class="row"> <div class="col-lg-2 col-md-3 my-auto"> <img src="karen.jpg" class="img-fluid client"> </div> <div class="col-lg-10 col-md-9 my-auto"> <b>Karen Adams</b> <br><small>Owner, Cat Cafe</small><br> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"> <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/> </svg> </div> </div> </figure> </div> </div> </div>
Хороший отзыв должен содержать имя и изображение клиента, а также название должности и компанию, если это возможно.
Приведенный выше пример можно легко адаптировать для отображения должности и компании клиентов.
Таблица цен на Bootstrap
Что такое таблица цен?
Таблица цен - это HTML-элемент, в котором перечислены функции, доступные в разных ценовых категориях. Это сделано для того, чтобы потенциальному клиенту было как можно проще сравнить планы и выбрать тот, который лучше всего соответствует их потребностям.
Какой пример таблицы цен?
В таблицах цен подробно указаны цены, функции и подписка на каждый план или подписку.
В столбцах таблицы указано количество планов, а в строках - элементы.
В среднем в таблице цен указано от 1 до 5 планов. Добавьте количество столбцов / планов, которые соответствуют вашей бизнес-модели SaaS.
Какова хорошая таблица цен на SaaS?
Хорошая таблица цен не ошеломляет потенциального клиента. Скорее, он сообщает о ключевых различиях между каждым планом, используя краткие описания или пункты списка.
Вы хотите, чтобы пользователь легко просматривал таблицу цен, выявлял различия и делал свой выбор без необходимости прокручивать вперед и назад варианты сравнения.
Сделайте ставку на цену и характеристики в центре внимания. Затем добавьте кнопку подписки с призывом к действию ниже.
Шаблон таблицы цен Bootstrap №1
В браузере
HTML-код
<!--Pricing Table-->
<div class="container-fluid">
<div class="container p-5">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card card1 h-100">
<div class="card-body">
<h5 class="card-title">Basic</h5>
<small class='text-muted'>Individual</small>
<br><br>
<span class="h1 font-weight-bold text-primary">$8</span>/month
<br><br>
<ul>
<li>2 trails a month</li>
<li>Free app</li>
</ul>
<div class="d-grid my-3">
<button class="btn btn-outline-primary btn-block">Select</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4">
<div class="card card2 h-100">
<div class="card-body">
<h5 class="card-title">Standard</h5>
<small class='text-muted'>Small Business</small>
<br><br>
<span class="h1 font-weight-bold text-primary">$20</span>/month
<br><br>
<ul>
<li>5 trails a month</li>
<li>Free app</li>
</ul>
<div class="d-grid my-3">
<button class="btn btn-outline-primary btn-block">Select</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4">
<div class="card card3 h-100">
<div class="card-body">
<h5 class="card-title">Premium</h5>
<small class='text-muted'>Large Company</small>
<br><br>
<span class="h1 font-weight-bold text-primary">$40</span>/month
<br><br>
<ul>
<li>Unlimited trails a month</li>
<li>Free app</li>
</ul>
<div class="d-grid my-3">
<button class="btn btn-outline-primary btn-block">Select</button>
</div>
</div>
</div>
</div>
</div>
</div>Иногда таблица цен представляет собой не столько таблицу, сколько коллекцию карточек. Это тот же CSS-код карточки, который использовался для примера ценностного предложения.
Шаблон таблицы цен №2 Bootstrap
В браузере
HTML-код
<style> .card { border:none; }.card:hover { box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important; }.card:hover .btn-outline-dark{ color:white; background:#212529; }.card:hover .bg-light{ color:white; background:#6C63FF !important; } </style><!--Pricing Table--> <!--Pricing Table--> <div class="container p-5"> <div class="row"> <div class="col-lg-4 col-md-12 mb-4"> <div class="card h-100 shadow-lg"> <div class="card-header text-center p-3 bg-light"> <h5 class="card-title">Basic</h5> <small>Individual</small> <br><br> <span class="h2">$100</span>/month <br><br> </div> <div class="card-body"> <ul class="list-group list-group-flush"> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> 1 employee account</li> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> Unlimited clients</li> </ul> <div class="card-body text-center"> <button class="btn btn-outline-dark" style="border-radius:30px">Select</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-12 mb-4"> <div class="card h-100 shadow"> <div class="card-header text-center p-3 bg-light"> <h5 class="card-title">Standard</h5> <small>Small Business</small> <br><br> <span class="h2">$200</span>/month <br><br> </div> <div class="card-body"> <ul class="list-group list-group-flush"> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> 15 employee accounts</li> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> Unlimited clients</li> </ul> <div class="card-body text-center"> <button class="btn btn-outline-dark" style="border-radius:30px">Select</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-12 mb-4"> <div class="card h-100 shadow"> <div class="card-header text-center p-3 bg-light"> <h5 class="card-title">Premium</h5> <small>Large Companies</small> <br><br> <span class="h2">$1000</span>/month <br><br> </div> <div class="card-body"> <ul class="list-group list-group-flush"> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> Unlimited employee accounts</li> <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/> </svg> Unlimited clients</li> </ul> <div class="card-body text-center"> <button class="btn btn-outline-dark" style="border-radius:30px">Select</button> </div> </div> </div> </div> </div> </div>
Еще один пример таблицы цен в карточках. Как видите, в нем четко указана цена и сравниваются три функции.
Для получения дополнительных примеров см. 11 примеров таблиц цен на Bootstrap.
Нижний колонтитул начальной загрузки
Что такое нижний колонтитул?
Нижний колонтитул - это последняя часть веб-сайта, которая находится в самом низу каждой страницы. Это элемент HTML, содержащий полезные ссылки и ресурсы для пользователей.
Он предоставляет ссылки на панели навигации, а также включает дополнительную контактную информацию, которую не нужно перемещать прямо при загрузке страницы.
Что такое нижний колонтитул?
Нижние колонтитулы содержат ссылки на файлы cookie и политику конфиденциальности в дополнение к положениям и условиям.
Они также содержат контактную информацию, такую как адрес электронной почты, номера телефонов и почтовые адреса. По сути, любой бит информации, к которой должен получить доступ клиент, должен находиться в нижнем колонтитуле.
Эти ссылки обычно представлены в столбцах для облегчения просмотра.
Нижний колонтитул также должен содержать информацию об авторских правах компании, если применимо.
Что такое хороший нижний колонтитул?
Хороший нижний колонтитул похож на указатель книги. Это список соответствующих ссылок, призванный помочь пользователям быстро найти необходимый ресурс.
Некоторым компаниям нравится размещать свой логотип и заявление о миссии в нижнем колонтитуле в качестве еще одного полезного ресурса в дополнение к своим социальным сетям.
Шаблон нижнего колонтитула Bootstrap №1
В браузере
HTML-код
<style> .footer-link{ color:white; text-decoration: none }.footer-link:hover { color:white; text-decoration: underline; } </style><div class="container-fluid banner mt-5 text-white text-center"> <div class="container p-5"> <div class="row"> <div class="col-lg-6 col-md-12"> <h5>Company</h5> <p><a href="/" class="footer-link">About</a></p> <p><a href="/" class="footer-link">Jobs</a></p> <p><a href="/" class="footer-link">Blog</a></p> <p><a href="/" class="footer-link">Case Studies</a></p> </div> <div class="col-lg-6 col-md-12"> <h5>Resources</h5> <p><a href="/" class="footer-link">Contact</a></p> <p><a href="/" class="footer-link">Support</a></p> <p><a href="/" class="footer-link">Privacy & terms</a></p> <p><a href="/" class="footer-link">Cookie Policy</a></p> <p><a href="/" class="footer-link">Sitemap</a></p> </div> </div><div class="container p-2"> <p>© 2021 SAAS. All Rights Reserved.</p> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> </svg></a> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16"> <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> </svg></a> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/> </svg> </a> </div> </div>
Вот то же изображение фонового баннера с призывом к действию, которое используется в нижнем колонтитуле. Ссылки на социальные сети представляют собой бесплатные значки Bootstrap.
Шаблон нижнего колонтитула Bootstrap № 2
В браузере
HTML-код
<style> .footer{ background: linear-gradient(to bottom left, #D2D0FF, #6C63FF); }.footer-link{ color:white; text-decoration: none }.footer-link:hover { color:white; text-decoration: underline; } </style><div class="container-fluid footer mt-5 text-white"> <div class="container p-5"> <div class="row"> <div class="col-lg-4 col-md-12"> <h6> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/> </svg> Pets-R-us</h6> <p>Let us handle the software so you can handle the pets.</p> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> </svg></a> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16"> <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> </svg></a> <a href="/" class="footer-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/> </svg> </a> </div> <div class="col-lg-4 col-md-12"> <h6>Company</h6> <p><a href="/" class="footer-link">About</a></p> <p><a href="/" class="footer-link">Jobs</a></p> <p><a href="/" class="footer-link">Blog</a></p> <p><a href="/" class="footer-link">Case Studies</a></p> </div> <div class="col-lg-4 col-md-12"> <h6>Resources</h6> <p><a href="/" class="footer-link">Contact</a></p> <p><a href="/" class="footer-link">Support</a></p> <p><a href="/" class="footer-link">Privacy & terms</a></p> <p><a href="/" class="footer-link">Cookie Policy</a></p> <p><a href="/" class="footer-link">Sitemap</a></p> </div> </div><div class="container p-2"> <p class="text-center">© 2021 SAAS. All Rights Reserved.</p> </div> </div>
Вот нижний колонтитул с тремя столбцами и линейным градиентным фоном.
Если вам нужны другие примеры нижних колонтитулов Bootstrap, посетите 18 примеров отзывчивых нижних колонтитулов Bootstrap.
Первоначально опубликуйте на https://www.ordinarycoders.com.
Больше контента на plainenglish.io
