Банеры На Главной
#1
Отправлено 16 Июнь 2016 - 18:32
Здравствуйте
Необходимо добавить еще один банер на главной, чтобы их стало 5, и заменить картинки шаблонных банеров на те, которые стоят сейчас на странице.
Как это сделать правильно? Спасибо.
#2
Отправлено 16 Июнь 2016 - 18:37
Ast (16 Июнь 2016 - 18:32) писал:
Здравствуйте
Необходимо добавить еще один банер на главной, чтобы их стало 5, и заменить картинки шаблонных банеров на те, которые стоят сейчас на странице.
Как это сделать правильно? Спасибо.
Здравствуйте. Вам нужно в шаблоне HTML найти код:
<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=azure" /> </div> <!--<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div>-->
и заменить его на:
<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div>
Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg
Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.
#3
Отправлено 19 Июнь 2016 - 09:53
Здравствуйте. Вам нужно в шаблоне найти код HTML код:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
<!--<див>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
</div>с-->[/код]
и заменить его на:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
тег </div>[/код]
Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg
Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.
[/Цитата]
Это слайдер, а я говорю о банерах, которые в шаблоне под слайдером (сейчас на сайте закрыл показ). В оригинале их 4, а мне необходимо установить 5 штук. Если копипастить дополнительный блок, то не помещается по ширине. Не понятно где уменьшить ширину, чтобы всё умещалось.
#4
Отправлено 19 Июнь 2016 - 10:06
Ast (19 Июнь 2016 - 09:53) писал:
Здравствуйте. Вам нужно в шаблоне найти код HTML код:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
<!--<див>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
</div>с-->[/код]
и заменить его на:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
тег </div>[/код]
Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg
Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.
[/Цитата]
Это слайдер, а я говорю о банерах, которые в шаблоне под слайдером (сейчас на сайте закрыл показ). В оригинале их 4, а мне необходимо установить 5 штук. Если копипастить дополнительный блок, то не помещается по ширине. Не понятно где уменьшить ширину, чтобы всё умещалось.
Здравствуйте.
В шаблоне HTML в коде:
<!-- Баннеры --> <!--{% IF index_page %} <div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div> {% ENDIF %}--> <!-- /END Баннеры -->
баннеры располагаются в размерах процентного соотношения, где цифра в col-sm-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Разместить корректно 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (col-sm-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.
Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
<!-- Баннеры --> {% IF index_page %} <div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping sixparts"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back sixparts"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 sixparts"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment sixparts"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div> {% ENDIF %} <!-- /END Баннеры -->
#5
Отправлено 19 Июнь 2016 - 10:13
Здравствуйте.
В в шаблоне в HTML коде:
[Код]
<!-- Баннеры -->
<!--{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}-->
<!-- /Конец Баннеры -->
[/Код]
баннеры располагаются в размерах процентного соотношения, где цифра в коль-см-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Корректно Разместить 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (Кол-см-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.
Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
[Код]
<!-- Баннеры -->
{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок sixparts">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок манибэк sixparts">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 sixparts">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного оплаты sixparts">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}
<!-- /Конец Баннеры -->
[/Код]
[/Цитата]
А если делить на 6 частей? получится корректное отображение?
#6
Отправлено 19 Июнь 2016 - 10:17
Ast (19 Июнь 2016 - 10:13) писал:
Здравствуйте.
В в шаблоне в HTML коде:
[Код]
<!-- Баннеры -->
<!--{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}-->
<!-- /Конец Баннеры -->
[/Код]
баннеры располагаются в размерах процентного соотношения, где цифра в коль-см-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Корректно Разместить 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (Кол-см-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.
Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
[Код]
<!-- Баннеры -->
{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок sixparts">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок манибэк sixparts">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 sixparts">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного оплаты sixparts">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}
<!-- /Конец Баннеры -->
[/Код]
[/Цитата]
А если делить на 6 частей? получится корректное отображение?
Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде col-sm-3 col-sms-6 col-smb-12 заменить на col-sm-2 col-sms-6 col-smb-12
#7
Отправлено 19 Июнь 2016 - 10:25
Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде коль-см-3 Кол-смс-6 Кол-СМБ-12 заменить на коль-см-2 Кол-смс-6 Кол-СМБ-12
[/Цитата]
все поместилось хорошо, а где поменять картинки из шаблона на другие?
#8
Отправлено 19 Июнь 2016 - 10:44
Ast (19 Июнь 2016 - 10:25) писал:
Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде коль-см-3 Кол-смс-6 Кол-СМБ-12 заменить на коль-см-2 Кол-смс-6 Кол-СМБ-12
[/Цитата]
все поместилось хорошо, а где поменять картинки из шаблона на другие?
Найдите код:
<div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div>
Замените на:
<div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block new1 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block new2 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div>
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}
Замените на:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;} #topsl .block.new1 .block-title span:after {background:url("ссылка на иконку")center center;} #topsl .block.new2 .block-title span:after {background:url("ссылка на иконку")center center;}
Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .png), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.
#9
Отправлено 19 Июнь 2016 - 10:48
Найдите код:
[Код]
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
[/Код]
Замените на:
[Код]
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="заблокировать сайт new1 коль-см-2 колонка-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок новый2 коль-см-2 колонка-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
[/Код]
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> основные.в CSS, найдите код:
[Код]
#topsl .блок.обеспеченный-оплаты .блок-Заголовок промежуток:после {фон положение: -546px топ;}
[/Код]
Замените на:
[Код]
#topsl .блок.обеспеченный-оплаты .блок-Заголовок промежуток:после {фон положение: -546px топ;}
#topsl .блок.сайт new1 .блок-Заголовок цикла:после {справочная информация:URL-адрес("ссылка на иконку")центр;}
#topsl .блок.новый2 .блок-Заголовок цикла:после {справочная информация:URL-адрес("ссылка на иконку")центр;}
[/Код]
Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .ПНГ), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.
[/Цитата]
Спасибо большое!
#10
Отправлено 19 Июнь 2016 - 12:09
Firefly (19 Июнь 2016 - 10:44) писал:
<div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div>
Замените на:
<div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block new1 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> <div class="block new2 col-sm-2 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div>
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}
Замените на:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;} #topsl .block.new1 .block-title span:after {background:url("ссылка на иконку")center center;} #topsl .block.new2 .block-title span:after {background:url("ссылка на иконку")center center;}
Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .png), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.
Все получилось, но остался вопрос как заменить оригинальные 4 картинки из шаблона? Перерисовать ico-shoppolicy.png? Тогда может заодно добавить к нему дополнительные 2 картинки? Какая длина должна ico-shoppolicy.png быть в этом случае? Или сделать все картинки отдельными как с двумя добавленными? Что посоветуете?
#11
Отправлено 19 Июнь 2016 - 12:49
#12
Отправлено 19 Июнь 2016 - 13:09
Ast (19 Июнь 2016 - 12:49) писал:
#13
Отправлено 21 Июнь 2016 - 14:07
И еще вопрос как сделать чтобы иконки и текст были кликабельны. Текст понятно, добавить тэк ссылки, а как с иконками непонятно. Подскажите пожалуйста.
#14
Отправлено 22 Июнь 2016 - 04:25
#15
Отправлено 22 Июнь 2016 - 08:19
#16
Отправлено 22 Июнь 2016 - 10:36
Ast (22 Июнь 2016 - 08:19) писал:
Здравствуйте.
Внес Вам корректировки в код. Проверьте, пожалуйста.
#18
Отправлено 08 Сентябрь 2016 - 01:30
Появилась необходимость, добавить на сайт два кликабельных рекламных блока (см. вложение) Размеры - приблизительные, какие размеры порекомендуете, чтобы это смотрелось наиболее удачно, такие и сделаем ) Это будут 2 обычные картинки, при клике на которые должны открываться окна с информацией. Будет здорово, если ещё можно будет эти картинки как-то выделить - например мигающей рамкой или какой-либо анимацией. Помогите, пожалуйста, решить эту задачу.
Заранее спасибо.
#19
Отправлено 08 Сентябрь 2016 - 01:58
#20
Отправлено 08 Сентябрь 2016 - 02:04
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных