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


Изменения На Главной


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 14

#1 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 30 Март 2016 - 07:10

Здравствуйте! Помогите, пожалуйста настроить блоки на главной. Пыталась сделать крупные блоки (с анонсами например) и что то выходит не много не так как я планировала))Может я с классами что то перепутала. Вообщем если есть возможность помочь, помогите пожалуйста! На скрине, хочу получить примерно так...

Прикрепленные изображения

  • Безымянный.jpg


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 863 сообщений

Отправлено 30 Март 2016 - 07:38

Вам необходимо использовать следующую основную структуру:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
	блок 1
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
	блок 2
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
	блок 3
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
	блок 4
  </div>	
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  Располагаем информацию для правого вертикального блока
</div>


#3 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 30 Март 2016 - 08:01

 Vaccina (30 Март 2016 - 07:38) писал:

Вам необходимо использовать следующую основную структуру:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
блок 1
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
блок 2
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
блок 3
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
блок 4
</div>	
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
Располагаем информацию для правого вертикального блока
</div>


сделала как написано. Отрегулировать их как? расстояние между ними не одинаковое, Размер блоков, сделать квадратными, а высокий блок по высоте двух квадратных блоков..на скрине показано. И еще эти блоки не на одном уровне с остальным контентом..

Прикрепленные изображения

  • Безымянный.jpg


#4 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 30 Март 2016 - 09:53

 Ольга 94 (30 Март 2016 - 08:01) писал:

сделала как написано. Отрегулировать их как? расстояние между ними не одинаковое, Размер блоков, сделать квадратными, а высокий блок по высоте двух квадратных блоков..на скрине показано. И еще эти блоки не на одном уровне с остальным контентом..

Здравствуйте, попробуйте в main.css код:

.block51 {
 
  display: inline-block;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  margin: 30px;
  margin-left: 0px;
 
}

заменить на код:

.block51 {
 
  display: inline-block;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  margin-left: 0px;
 
}


далее код:

.hovereffect img {
  display:  inline-block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

замените на код:

.hovereffect img {
  display:  inline-block;
  position: relative;
  max-width: none;
  width: calc(100% - 5px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
	padding-left: 0;
}


и код:

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #000000;
  margin: 30px;
  margin-left: 0px;
 
}

замените на код:

.hovereffect {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	background: #000000;
	margin: 15px 30px;
	margin-left: 0px;
}
и код:

.block53 {
  display: inline-block;
  width: 380px;
  height: 680px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  margin: 30px;
  margin-left: 0px;
 
}

на код:

.block53 {
	display: inline-block;
	width: 380px;
	height: 680px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	margin: 15px 30px;
	margin-left: 0px;
}


#5 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 30 Март 2016 - 11:23

 Юля123 (30 Март 2016 - 09:53) писал:

Здравствуйте, попробуйте в main.css код:

.block51 {

display: inline-block;
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
margin: 30px;
margin-left: 0px;

}

заменить на код:

.block51 {

display: inline-block;
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
margin-left: 0px;

}


далее код:

.hovereffect img {
display: inline-block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

замените на код:

.hovereffect img {
display: inline-block;
position: relative;
max-width: none;
width: calc(100% - 5px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 0;
}


и код:

.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000000;
margin: 30px;
margin-left: 0px;

}

замените на код:

.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000000;
margin: 15px 30px;
margin-left: 0px;
}
и код:

.block53 {
display: inline-block;
width: 380px;
height: 680px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
margin: 30px;
margin-left: 0px;

}

на код:

.block53 {
display: inline-block;
width: 380px;
height: 680px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
margin: 15px 30px;
margin-left: 0px;
}



Юлия, здравствуйте, вообще все съехало сильно. И отступы теперь по бокам большие, как сделать одинаковыми с верхними)И еще подскажите как изменить фигуру на квадратную. Сейчас размер идет 100% и по высоте и по ширине, но если меняешь на цифры то ни чего не меняется. Мне нужно что бы квадраты были по 400 пх. И ширина прямоугольника тоже 400 и отступы которые сверху сейчас)Спасибо

Прикрепленные изображения

  • Безымянный.jpg


#6 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 30 Март 2016 - 13:20

 Ольга 94 (30 Март 2016 - 11:23) писал:

Юлия, здравствуйте, вообще все съехало сильно. И отступы теперь по бокам большие, как сделать одинаковыми с верхними)И еще подскажите как изменить фигуру на квадратную. Сейчас размер идет 100% и по высоте и по ширине, но если меняешь на цифры то ни чего не меняется. Мне нужно что бы квадраты были по 400 пх. И ширина прямоугольника тоже 400 и отступы которые сверху сейчас)Спасибо
Здравствуйте, что бы изменить размер квадратов найдите в шаблоне HTML
{% IF index_page %}
	{% IF index_page_goods_empty=0 || index_page_new_goods_empty=0 || index_page_favorites_goods_empty=0 %}
   
  
  <div class="container">
  
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

замените на
 {% IF index_page %}
	{% IF index_page_goods_empty=0 || index_page_new_goods_empty=0 || index_page_favorites_goods_empty=0 %}
	
   
  <div class="img_block container"> 
   
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

далее в конец main.css добавьте

.img_block .col-lg-6 {
	padding: 0px 2px;
}

где изменяете отступ 2px, изменяя расстояния между изображениями и тем самым изображения


далее найдите в файле main.css
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #000000;
  margin: 15px 30px;
  margin-bottom: 0px;
  
  
}

где изменяете значение 15px верхний отступ между изображениями, например замените на значение 3


Что бы не нарушать адаптивность сайта, создайте сами изображения квадратными.

#7 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 31 Март 2016 - 10:33

 Ирина345 (30 Март 2016 - 13:20) писал:

Здравствуйте, что бы изменить размер квадратов найдите в шаблоне HTML
{% IF index_page %}
{% IF index_page_goods_empty=0 || index_page_new_goods_empty=0 || index_page_favorites_goods_empty=0 %}


<div class="container">

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

замените на
{% IF index_page %}
{% IF index_page_goods_empty=0 || index_page_new_goods_empty=0 || index_page_favorites_goods_empty=0 %}


<div class="img_block container">

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

далее в конец main.css добавьте

.img_block .col-lg-6 {
padding: 0px 2px;
}

где изменяете отступ 2px, изменяя расстояния между изображениями и тем самым изображения


далее найдите в файле main.css
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000000;
margin: 15px 30px;
margin-bottom: 0px;


}

где изменяете значение 15px верхний отступ между изображениями, например замените на значение 3


Что бы не нарушать адаптивность сайта, создайте сами изображения квадратными.

Написала код заново, запуталась во всех значениях. И у меня получилось так(скрин) Не могу найти как расположить все обьекты так что бы они были по ширине аналогично основному контенту. На скрине видно, с правого боку много места остается, и еще мне нужно сдвинуть самый длинный блок что бы расстояние было одинаковым между блоками..Спасибо

Прикрепленные изображения

  • Безымянный.jpg


#8 RedHead

RedHead

    Активный участник

  • Модератоpы
  • 1 052 сообщений

Отправлено 31 Март 2016 - 11:02

 Ольга 94 (31 Март 2016 - 10:33) писал:

Написала код заново, запуталась во всех значениях. И у меня получилось так(скрин) Не могу найти как расположить все обьекты так что бы они были по ширине аналогично основному контенту. На скрине видно, с правого боку много места остается, и еще мне нужно сдвинуть самый длинный блок что бы расстояние было одинаковым между блоками..Спасибо

Здравствуйте. Перед внесением изменений на сайте, создайте бэкап шаблона. В конец шаблона main.css вставьте строки:

.img_block.container .col-lg-8.col-md-8.col-sm-8.col-xs-12 {
	padding-right: 0px !important;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
	padding-left: 0px !important;
}

Затем, найдите блок кода:

.block51 {
 
  display: inline-block;
  width: 360px;
  height: 360px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 15px 15px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
 
}

и замените на:

.block51 {
 
  display: inline-block;
  width: 360px;
  height: 360px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin-right: 22px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
  padding-top: 2px;
 
}

и сроки:

.block53 {
 
  display: inline-block;
  width: 360px;
  height: 720px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 15px 15px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
}

замените на:

.block53 {
 
  display: inline-block;
  width: 390px;
  height: 720px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 15px 15px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
}


#9 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 31 Март 2016 - 11:09

 RedHead (31 Март 2016 - 11:02) писал:

Здравствуйте. Перед внесением изменений на сайте, создайте бэкап шаблона. В конец шаблона main.css вставьте строки:

.img_block.container .col-lg-8.col-md-8.col-sm-8.col-xs-12 {
padding-right: 0px !important;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 0px !important;
}

Затем, найдите блок кода:

.block51 {

display: inline-block;
width: 360px;
height: 360px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 15px 15px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/

}

и замените на:

.block51 {

display: inline-block;
width: 360px;
height: 360px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin-right: 22px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/
padding-top: 2px;

}

и сроки:

.block53 {

display: inline-block;
width: 360px;
height: 720px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 15px 15px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/
}

замените на:

.block53 {

display: inline-block;
width: 390px;
height: 720px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 15px 15px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/
}



Сразу скажу что, первое изменение кода мне ни чего не изменило!
Второе изменение не вижу смысла от него. Он мне сверху прибавляет два пиксела, для чего вы мне его написали?? Расстояние между квадратными блоками везде одинаковое. И ни чего менять не нужно было.
А на счет третьего кода, мне нужно что бы они все были по ширине одинаковыми. А вы сделаете мне так что блок самый длинный будет еще и самый широкий.... Я просто пыталась сделать все обьекты по 400пх У меня они все не влезли в основной контент. Если делать чуть больше чем 360 но меньше чем 400 то меняется расположение этих блоков. В общем мне нужно что бы везде было одинаковое расстояние между блоками, чтобы ширина блоков была одинаковой, при этом чтобы все блоки вмещали в ширину основного контента. Чтобы все было ровненько. Спасибо

#10 RedHead

RedHead

    Активный участник

  • Модератоpы
  • 1 052 сообщений

Отправлено 31 Март 2016 - 11:39

 Ольга 94 (31 Март 2016 - 11:09) писал:

Сразу скажу что, первое изменение кода мне ни чего не изменило!
Второе изменение не вижу смысла от него. Он мне сверху прибавляет два пиксела, для чего вы мне его написали?? Расстояние между квадратными блоками везде одинаковое. И ни чего менять не нужно было.
А на счет третьего кода, мне нужно что бы они все были по ширине одинаковыми. А вы сделаете мне так что блок самый длинный будет еще и самый широкий.... Я просто пыталась сделать все обьекты по 400пх У меня они все не влезли в основной контент. Если делать чуть больше чем 360 но меньше чем 400 то меняется расположение этих блоков. В общем мне нужно что бы везде было одинаковое расстояние между блоками, чтобы ширина блоков была одинаковой, при этом чтобы все блоки вмещали в ширину основного контента. Чтобы все было ровненько. Спасибо


Проделайте, пожалуйста, изменения из инструкции до конца. Визуально - результат будет такой, как Вы желаете. Далее, можно рассуждать математически. Максимальная ширина блока с тремя колонками изображений равна 1200px. К сожалению, сделать 3 колонки изображений, каждое шириной по 400px плюс оставить отступы по бокам, невозможно. Также стоить заметить, что Ваш шаблон адаптивен, то есть подстраивается под различные разрешения экрана. То есть, уже при разрешении экрана 960px изображения по 400px не смогут поместиться в заданную ширину. Верстка Вашего шаблона состоит из колонок. Их по умолчанию12 штук. Вместе они составляют 100% ширины экрана. Каждая колонка имеет свой % от ширины экрана. Блоки из изображений на Вашем сайте построены так, что первые два блока - это 8 из 12 колонок, третье - 4. (4х3=12). Однако, между изображениями в широкой колонке есть отступы друг от друга, что неизбежно уменьшает их ширину относительно изображения в третьем блоке. Поэтому, большое изображение будет шире остальных.

#11 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 31 Март 2016 - 11:48

Хорошо, сделаю, можно тогда хотябы максимально их по ширине сделать одинаковыми, даже если не 400

#12 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 31 Март 2016 - 12:06

 Ольга 94 (31 Март 2016 - 11:48) писал:

Хорошо, сделаю, можно тогда хотябы максимально их по ширине сделать одинаковыми, даже если не 400

 RedHead (31 Март 2016 - 11:39) писал:

Проделайте, пожалуйста, изменения из инструкции до конца. Визуально - результат будет такой, как Вы желаете. Далее, можно рассуждать математически. Максимальная ширина блока с тремя колонками изображений равна 1200px. К сожалению, сделать 3 колонки изображений, каждое шириной по 400px плюс оставить отступы по бокам, невозможно. Также стоить заметить, что Ваш шаблон адаптивен, то есть подстраивается под различные разрешения экрана. То есть, уже при разрешении экрана 960px изображения по 400px не смогут поместиться в заданную ширину. Верстка Вашего шаблона состоит из колонок. Их по умолчанию12 штук. Вместе они составляют 100% ширины экрана. Каждая колонка имеет свой % от ширины экрана. Блоки из изображений на Вашем сайте построены так, что первые два блока - это 8 из 12 колонок, третье - 4. (4х3=12). Однако, между изображениями в широкой колонке есть отступы друг от друга, что неизбежно уменьшает их ширину относительно изображения в третьем блоке. Поэтому, большое изображение будет шире остальных.


Посмотрите пожалуйста,  я сделала конечно не так как вы сказали, скажите, сильно они отличаются друг от друга, и отступы тоже? Или не бросается в глаза что они разные?? Спасибо

#13 RedHead

RedHead

    Активный участник

  • Модератоpы
  • 1 052 сообщений

Отправлено 31 Март 2016 - 12:55

 Ольга 94 (31 Март 2016 - 12:06) писал:

Посмотрите пожалуйста,  я сделала конечно не так как вы сказали, скажите, сильно они отличаются друг от друга, и отступы тоже? Или не бросается в глаза что они разные?? Спасибо

Таблица выглядит хорошо, отступы ровные и визуально одинаковые. На наш взгляд, все красиво и аккуратно.

#14 Ольга 94

Ольга 94

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 31 Март 2016 - 15:08

 RedHead (31 Март 2016 - 12:55) писал:

Таблица выглядит хорошо, отступы ровные и визуально одинаковые. На наш взгляд, все красиво и аккуратно.

Хорошо, спасибо что посмотрели)А как из картинки сделать ссылку?

#15 RedHead

RedHead

    Активный участник

  • Модератоpы
  • 1 052 сообщений

Отправлено 31 Март 2016 - 15:27

 Ольга 94 (31 Март 2016 - 15:08) писал:

Хорошо, спасибо что посмотрели)А как из картинки сделать ссылку?

Вам необходимо поместить ссылки на изображения на главной? в шаблоне html найдите блок кода:

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
	 <div class="block51">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/No.jpg" alt="">
		 </div>
	 </div>
	 <div class="block51">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/us.jpg" alt="">
		 </div>
	 </div>


	
		 <div class="block51">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/be.jpg" alt="">
		 </div>
		 </div>

		 <div class="block51">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/be.jpg" alt="">
		 </div>
		 </div>
	
		 <div class="block52">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/be.jpg" alt="">
		 </div>
		 </div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

		 <div class="block53">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/be.jpg" alt="">
		 </div>
		 </div>

		 <div class="block54">
		 <div class="hovereffect">
			 <img class="img-responsive" src="http://*/design/be.jpg" alt="">
		 </div>
		 </div>
</div>

каждое изображение в этом коде необходимо обернуть в нужную ссылку. Примерно так:

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
	 <div class="block51">
		 <div class="hovereffect">
			 <a href="{CART_URL}"><img class="img-responsive" src="http://*/design/No.jpg" alt=""></a>
		 </div>
	 </div>
	 <div class="block51">
		 <div class="hovereffect">
			 <a href="#"><img class="img-responsive" src="http://*/design/us.jpg" alt=""></a>
		 </div>
	 </div>


	
		 <div class="block51">
		 <div class="hovereffect">
			 <a href="#"><img class="img-responsive" src="http://*/design/be.jpg" alt=""></a>
		 </div>
		 </div>

		 <div class="block51">
		 <div class="hovereffect">
			 <a href="#"> <img class="img-responsive" src="http://*/design/be.jpg" alt=""></a>
		 </div>
		 </div>
	
		 <div class="block52">
		 <div class="hovereffect">
			 <a href="#"><img class="img-responsive" src="http://*/design/be.jpg" alt=""></a>
		 </div>
		 </div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

		 <div class="block53">
		 <div class="hovereffect">
			 <a href="#"><img class="img-responsive" src="http://*/design/be.jpg" alt=""></a>
		 </div>
		 </div>

		 <div class="block54">
		 <div class="hovereffect">
			 <a href="#"><img class="img-responsive" src="http://*/design/be.jpg" alt=""></a>
		 </div>
		 </div>
</div>

Где # замените на нужную ссылку на страницу. Для первого изображения я поставила для примера ссылку на корзину.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных