Справочный центр - это веб-сайт, где клиенты могут найти ответы на свои вопросы и решения своих проблем. Созданный для решения многих распространенных вопросов, которые получает бренд, справочный центр должен упрощать клиентам поиск ответов, которые они ищут.
Хорошие справочные центры хорошо организованы и тщательно представлены, что позволяет клиентам легко ориентироваться на сайте и находить то, что они ищут.
Справочные центры всегда должны быть удобными для поиска, предоставляя клиентам доступную версию базы знаний бренда, созданную с учетом интересов пользователей. На сайте часто размещаются часто задаваемые вопросы, статьи и разнообразные инструкции, которые должны быть легко усваиваемыми.
В этом уроке мы создадим базовый центр помощи, который вы всегда сможете использовать в своем будущем проекте или встроить в свой сайт.
Как уже говорилось ранее, справочный центр - это место, где клиент может найти ответ на все интересующие его вопросы. Он может сделать это двумя возможными способами: через поиск или через заранее заданный вопрос.
Поэтому наш справочный центр будет состоять из двух частей.
Давайте создадим этот удивительный компонент
Наша основная структура выглядит следующим образом
<body> <!-- First Layer --> <div> <!-- Second Layer --> <div> <!-- Here Goes the content --> </div> </div> </body>
Давайте начнем с создания первой части справочного центра, это панель поиска и заголовок
<!-- Header --> <h2 class="text-3xl font-semibold text-center">Help Center</h2> <div class="w-[55%] flex items-center border rounded-full p-2 mt-6 mb-12 mx-auto"> <!-- Search Icon --> <div class="w-[10%] bg-red-600"></div> <input type="text" name="search" class="w-full h-4/5 border-0 focus:border-0 focus:outline-none focus:ring-0" placeholder="search"> </div>
Очень простой раздел, как и его стилизация. Для заголовка мы задали ему размер шрифта text-3xl, font-weight font-semibold и расположили его по центру с помощью text-center.
Переходя к строке поиска, мы используем поле ввода и div. Мы дали ему возможность добавить иконку. В данном случае мы не стали добавлять иконку.
Контейнеру, содержащему поле ввода и иконку, мы задали ширину w-[55%] родительского контейнера, сделали его flexbox с border-radius rounded-full.
Для поля ввода мы удалили все предопределенные стили, используя border-0 focus:border-0 focus:outline-none focus:ring-0
И это практически все для первой части.
Эти определенные разделы обычно представляют собой ссылки на уже отвеченные вопросы, сгруппированные по определенным категориям.
Вот как выглядит код
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5 bg-slate-200 [&>*]:h-24 [&>*]:px-3 [&>*]:bg-white [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:cursor-pointer [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80"> <div><h2>Biling and Membership</h2></div> <div><h2>Managing and Organizing</h2></div> <div><h2>Uploading</h2></div> <div><h2>Uploading</h2></div> <div><h2>Video Enterprise</h2></div> <div><h2>Creators</h2></div> <div><h2>Enterprise</h2></div> <div><h2>Features</h2></div> <div><h2>Sales</h2></div> <div><h2>Embeding and Sharing</h2></div> <div><h2>FAQs</h2></div> <div><h2>Developers</h2></div> </div>
Имея четкое представление о структуре нашего кода, мы придали общую стилистику различным категориям непосредственно из их родительского контейнера.
Чтобы придать общий стиль, мы использовали свойство [&>*] из TailwindCSS.
Свойство [&>*] просто означает "выбрать каждого ребенка отдельно", что позволяет нам применить одинаковые свойства стиля ко всем ближайшим детям.
Каждому из детей мы задали высоту h-24, padding-inline px-3. Также мы сделали каждый из них гибким контейнером и отцентрировали их содержимое с помощью flex items-center justify-center . Также были добавлены эффекты наведения, при наведении ребенок масштабируется и добавляется тень [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80
Для основного контейнера, содержащего эту различную категорию, мы сделали контейнер в виде сетки с 1 колонкой на мобильных экранах, 2 колонками на маленьких экранах и 3 колонками на средних экранах и выше grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5
И это практически все для этого учебника.
Мы только что создали компонент Справочного центра 🤩. И вы наверняка поняли, что это было очень просто, чем мы думали вначале 😏. Мы сделали все это без какого-либо напряжения и не оставляя наш HTML файл.
Вы можете посмотреть Live preview на Codepen или найти код на GitHub.
Не стесняйтесь поделиться со мной, если вам удалось завершить этот урок, я буду рад увидеть все дополнительные компоненты и стили, которые вы добавили в свою работу.
Если у вас есть какие-то опасения или предложения, не стесняйтесь их высказывать! 😊
До встречи! 👋
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.