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

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

✪ DEMO⇊ СКАЧАТЬ
У меня тоже есть сайт, на котором много рецептов. Поэтому, чтобы не прописывать все в каждой новой статье, я и создала себе шаблон, который просто нужно заполнить.

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

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

<div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span><img src="image_link.jpg"></span> 
 
</div>  
<div class="kulinar_message"> 
 
ANY TEXT
 
</div> 
</div> 

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

CSS

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

/*--Kulinarnaya tablica--*/  

.kulinar {  
  width: 100%;  
  margin: 5px;  
  background: #fff;  
  border: 2px solid #d1d1d1;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  }  

.kulinar_message {  
  display: block;  
  height: 100%;
  min-height: 120px;  
  margin-top: 10px;  
  margin-left: 10px;  
  margin-right: 190px;  
  margin-bottom: 9px;  
   }  

.kulinar_img span  
{float: right;  
  display: block;  
  height: 120px;  
width: 160px;  
  background:#f4f4f4;  
  padding: 10px;  
  border-right: 1px solid #d1d1d1;  
  overflow: hidden;}  

.kulinar_img span img  
{width: 160px;}  

   

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}  

/*--END-Kulinarnaya tablica--*/ 

HTML для сайта uCoz

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

<!--STEP-1--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE1 $</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-2--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE2$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-3--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE3$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-4--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE4$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-5--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE5$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div>  

<!--STEP-6--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE6$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-7--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE7$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-8--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE8$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-9--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE9$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-10--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE10$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div>