Перейти к содержанию

Рекомендуемые сообщения

Подскажите как лучше реализовать преимущества на главную страницу ? вид такой:

 

Screenshot_2.thumb.jpg.dd6686e1f753f7fecf6afec886deeaf5.jpg

 

Возможно ли это реализовать через дополнение: HTML Содержимое ?

 

И если да то как в редакторе обозначить div-ки ? чтоб потом можно было в стилях это все отредактировать ?

вот пример класса div...

 

			<div class="main-advantage-item first-advantage-item">
				<div class="main-advantage-item-text">Наши преимущества:</div>
			</div>

	<div class="col-sm-3 col-xs-12">
			<div class="main-advantage-item">
				<div class="main-advantage-item-icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
				<div class="main-advantage-item-text">Качество товара</div>
			</div>
	</div>

	<div class="col-sm-3 col-xs-12">
			<div class="main-advantage-item">
				<div class="main-advantage-item-icon"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></div>
				<div class="main-advantage-item-text">Вечная гарантия</div>
			</div>
	</div>

	<div class="col-sm-3 col-xs-12">
			<div class="main-advantage-item">
				<div class="main-advantage-item-icon"><i class="fa fa-tachometer" aria-hidden="true"></i></div>
				<div class="main-advantage-item-text">Быстрая доставка</div>
			</div>
	</div>

   

 

 

Или может лучше в фотошопе сделать картинки ? и в HTML Содержимое  - как-то в ряд вставить картинки??? как можно это сделать? подскажите пожалуйста...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Надо купить шаблон и там всё будет)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В модуле HTML содержимое есть кнопка "Исходный код", выглядит так      ->       </>

Жмете и вставляйте любой код, с div'ами и т.д.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, spartakx сказал:

Надо купить шаблон и там всё будет)

На кой черт ему шаблон, если работы тут на 10 минут?

Теперь на каждый "перекрас" кнопки посылают покупать шаблон :mellow:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, cloudrc сказал:

На кой черт ему шаблон, если работы тут на 10 минут?

Теперь на каждый "перекрас" кнопки посылают покупать шаблон :mellow:

:-D

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
23 минуты назад, cloudrc сказал:

В модуле HTML содержимое есть кнопка "Исходный код", выглядит так      ->       </>

Жмете и вставляйте любой код, с div'ами и т.д.

 

Спасибо, вроде как теорию понял :) сейчас буду практиковать)))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Разобрался получилось)))

Но не могу понять как сделать когда окно сужаешь в определенный этап оно пропало? то есть на мобильном устройстве чтоб его не было!!! 

Подскажите пожалуйста...

 

Вот что сейчас получается

EUmBgeqjRJSsDF2bmktBTw.png.44deb7c09a39bc37d2a284b159c7b330.png

 

Screenshot_1.jpg.e0fb55272162d1d9b7315adcd279e1c6.jpg

 

 

Подскажите код, который скроет на маленьком разрешение этот пункт...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 часа назад, Nannco сказал:

Разобрался получилось)))

Но не могу понять как сделать когда окно сужаешь в определенный этап оно пропало? то есть на мобильном устройстве чтоб его не было!!! 

Подскажите пожалуйста...

 

Вот что сейчас получается

EUmBgeqjRJSsDF2bmktBTw.png.44deb7c09a39bc37d2a284b159c7b330.png

 

Screenshot_1.jpg.e0fb55272162d1d9b7315adcd279e1c6.jpg

 

 

Подскажите код, который скроет на маленьком разрешение этот пункт...

Оберните весь этот код в div с классом "hidden-xs" 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 09.10.2017 в 13:51, Nannco сказал:

 

Спасибо, вроде как теорию понял :) сейчас буду практиковать)))

http://bootstrap-3.ru/css.php

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 часов назад, cloudrc сказал:

Оберните весь этот код в div с классом "hidden-xs"

Спасибо помогло :rolleyes:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От ghost298
      Меняем эффекты прокрутки стандартного слайдера в opencart 2.3
      1. Открываем /catalog/controller/module/slideshow.php
      2. Ищем:
      $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js'); Меняем на:
      $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.js'); 3. Ниже добавляем:
      $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css'); $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.css'); В итоге должно получиться:
      $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.js'); $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css'); $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.css'); 4. Идем в папку /catalog/view/javascript/jquery/owl-carousel где открываем файл owl.carousel.js
      5. Ищем:
      support3d = (asSupport !== null && asSupport.length === 1); Меняем на:
      support3d = (asSupport !== null && asSupport.length >= 1 && asSupport.length <= 2); 6. Открываем /catalog/view/theme/ваша-тема/template/extension/module/slideshow.tpl
      7. Ищем блок похожий на:
      <script type="text/javascript"><!-- $('#slideshow<?php echo $module; ?>').owlCarousel({ items: 1, autoplay:true, autoplaySpeed:1500, autoplayHoverPause:true, loop: true, singleItem: true, nav: true, navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], dots: true }); --></script> 8. Перед items: 1, вставляем:
      animateOut: 'rollOut', animateIn: 'rollIn', 9. Скачиваем animate.css:
      Ищи внизу под выбором стиля анимации Download Animate.css
      10. Вставляем через FTP animate.css сюда:
      /catalog/view/javascript/jquery/owl-carousel/
      11. Переходим в /catalog/view/theme/ваша-тема/template/extension/module/slideshow.tpl
      12. Ищем:
      animateOut: 'rollOut', animateIn: 'rollIn', Меняем rollOut и rollIn на любую другую заставку.
      Названия эффектов можно посмотреть здесь:
      https://daneden.github.io/animate.css/
      Там же можно посмотреть и как он выглядит и как называется.
       
      Версия в которой я настраивал: opencart 2.3.0.2.2
       
      Сначала настраивал по аналогии как здесь:
      https://asterial.ru/saytostroenie/effekty-slaydera-owl-carousel-v-opencart-i-ocstore-2102-chto-delat-esli-slayder-ne
       
      Но по ходу были небольшие доработки.
      Теперь давайте подробнее объясню, что к чему.
      В пункте 3 я добавил строчку $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.css'); потому что в файле …owl.transitions.css'); прописаны не все эффекты и добавление одной этой строчки не достаточно. Там прописано по моему 4 или 5 эффектов. При подключении библиотек … animate.css'); все эффекты работали как положено. Файл animate.css скачивал с сайта https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html, см. пункт 9. Там ниже под пунктом 1 ссылка на скачку.
      Далее расположение файла slideshow.tpl в opencart 2.3.0.2.2 лежит немного по другому пути. См. пункт 6.
      Строки animateOut и animateIn в файле slideshow.tpl как раз и отвечают за анимацию прокрутки.
      animateOut – означает каким эффектом будет убираться изображение.
      animateIn – каким эффектом будет появляться следующее за ним изображение и так по кругу.
      Кстати если не заморачиваться и в файле slideshow.tpl перед items: 1, вставить     animateOut: 'fadeOut', то у вас уже должна смениться анимация прокрутки так как этот эффект присутствует по умолчанию в библиотеке owl.transitions.css
      Надеюсь новичкам данный мануал будет кстати.
    • От Sergey22
      Здравствуйте,
      подскажите, как регулировать - не по одному, а разом проставить птички в меню - отображение товаров на главной странице? помню что в Админке - Каталог-Товары.. а дальше забыл. Спасибо!
    • От Kpoxa
      Здравствуйте уважаемые форумчане! У меня к вам есть один вопрос, как можно вывести всех производителей на главную страницу? К примеру есть производители: 
       
      A Apple C Canon H Hewlett-Packard HTC P Palm S Sony И также в текстовом виде, списком, вывести на главной странице магазина.
      Как такое реализовать?
    • От dvi3001
      Помогите разобраться!
      На главной странице не хотят работать родные модули Слайдшоу ни Баннер.
      На всех других страницах всё нормально работают.
      В чём проблема? Помогите найти и исправить!
       
      Для видимости я поставил на странице http://ooo-arle.ru/index.php?route=account/login Баннер в левой колонки и Слайдшоу в низу.
      На главной включен Баннер в левой колонке первым с верху но он там не появился.
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.