Раздел «Как это работает» по шагам (HTML и CSS)
Пишите один этап на строку. На телефоне горизонтальный вариант сам становится вертикальным.
Как пользоватьсяТри шага, и клиент всё понимает
Доступно на: 
Раздел «Как это работает» по шагам (HTML и CSS): для чего нужен
Раздел из трёх-четырёх шагов за секунды объясняет, как заказать, оформить или записаться, и снимает сомнение, из-за которого посетитель уходит. Пишите один этап на строку и выберите расположение: горизонтальное с пунктирной линией между номерами, вертикальное с линией сбоку или карточки.
В коде используются упорядоченный список (ol) и счётчики CSS для номеров — это корректно читается программами чтения с экрана, на телефоне раздел становится вертикальным и может заканчиваться кнопкой-призывом, например ссылкой на мессенджер.
Как пользоваться
- Напишите этапы, по одному на строку.
- Выберите расположение, цвет и кнопку.
- Скопируйте код на сайт.
Когда использовать
- Как заказать услугу.
- Как оформить заказ.
- Как работает приложение или курс.
Частые вопросы
Сколько этапов использовать?
Идеально три-четыре: посетитель окидывает взглядом и понимает процесс. Если у вас больше шагов, объедините похожие; детали можно вынести на страницу с частыми вопросами.
Почему в коде используется упорядоченный список?
У этапов есть порядок, и упорядоченный список (ol) сообщает об этом программам чтения с экрана, которые озвучивают «список из 3 пунктов» и номер каждого. Крупные цифры рисует CSS с помощью счётчиков, поэтому номер не дублируется в тексте.
Можно ли добавить кнопку в конце?
Можно, и это рекомендуется: объяснив, как всё работает, предложите следующий шаг. Заполните текст и ссылку кнопки — она появится под этапами.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.