fbpx
Перейти к содержимому

Пошаговая инструкция с картинками для сайта

В данной статье представляю вашему вниманию HTML и CSS для того, чтобы установить у вас на сайте появилась пошаговая инструкция с картинками. Чаще всего такие инструкции используется для описания кулинарных рецептов. Я назвала ее кулинарная таблица для сайта, или шаблон кулинарной инструкции для сайта.

✪ DEMO⇊ СКАЧАТЬ

У меня тоже есть сайт, на котором много рецептов. Поэтому, чтобы не прописывать все в каждой новой статье, я и создала себе шаблон, который просто нужно заполнить.

HTML — Инструкция с картинками

HTML одного шага достаточно прост. Вам нужно добавлять этот HTML столько раз — сколько «шагов» вам необходимо.
Вместо image_link.jpg — ccылка на изображение.
Вместо слова ТЕКСТ пишите любой текст — то есть информацию соответствующую определенному шагу.

Добавить такой код можно на любой сайт и даже адаптировать под какой-либо шаблон. У меня на сайте Worpress эти шаги реализованы с помощью плагина ACF и поля repeater.

CSS

Добавьте эти CSS стили к стилям вашего сайта.

Больше статей:   Как поставить Google карта на сайт

HTML для сайта uCoz

Ниже привожу вам пример HTML кода со своего сайта на uCoz. Тут за основу взято 10 картинок.
Всего в нем 10 шагов. Вы всегда можете удалить лишние или добавить еще следующие.
Изображения загружаете в пункте «Изображения». Каждому изображению автоматически присваивается порядковый номер.
Для других сайтов — вместо $IMAGE…$ вставляете ссылки на изображения.

Больше статей:   Как вставить картинку (изображение) на сайт

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *