Jump to content
Sign in to follow this  
Nannco

Преимущества на главной странице

Recommended Posts

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

 

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 Содержимое  - как-то в ряд вставить картинки??? как можно это сделать? подскажите пожалуйста...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
1 час назад, spartakx сказал:

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

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

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

Share this post


Link to post
Share on other sites
5 минут назад, cloudrc сказал:

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

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

:-D

Share this post


Link to post
Share on other sites
23 минуты назад, cloudrc сказал:

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

EUmBgeqjRJSsDF2bmktBTw.png.44deb7c09a39bc37d2a284b159c7b330.png

 

Screenshot_1.jpg.e0fb55272162d1d9b7315adcd279e1c6.jpg

 

 

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

Share this post


Link to post
Share on other sites
3 часа назад, Nannco сказал:

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

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

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

 

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

EUmBgeqjRJSsDF2bmktBTw.png.44deb7c09a39bc37d2a284b159c7b330.png

 

Screenshot_1.jpg.e0fb55272162d1d9b7315adcd279e1c6.jpg

 

 

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

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

Share this post


Link to post
Share on other sites
В 09.10.2017 в 13:51, Nannco сказал:

 

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

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

Share this post


Link to post
Share on other sites
9 часов назад, cloudrc сказал:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By jastinus382
      Сайт: https://3dpens.com.ua/
      Версия: ocStore 2.3
       
      Дело было так:
      Перенес сайт: все файлы, всю БД
      2 файла config.php переписал под аккаунт хостинга на который перенес.
      Настроил все модули: прописал ключи для модулей и сделал настройку.
      Обновил модификаторы, Очистил весь кеш: Изображения, система, логи, файлы,
      На главной не существующий товар, в разделе "ТОВАРЫ СО СКИДКОЙ".
       
      Проверил файлы они идентичны с сайта переноса.
      Проверил бд до переноса и после переноса отличий НОЛЬ
       
      Шерстил гугл, результатов НОЛЬ, решений НОЛЬ.
      Вопрос: кто сталкивался с данным багом
       
      Скриншот прилагаю
       

    • By 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
      Надеюсь новичкам данный мануал будет кстати.
    • By Sergey22
      Здравствуйте,
      подскажите, как регулировать - не по одному, а разом проставить птички в меню - отображение товаров на главной странице? помню что в Админке - Каталог-Товары.. а дальше забыл. Спасибо!
    • By Kpoxa
      Здравствуйте уважаемые форумчане! У меня к вам есть один вопрос, как можно вывести всех производителей на главную страницу? К примеру есть производители: 
       
      A Apple C Canon H Hewlett-Packard HTC P Palm S Sony И также в текстовом виде, списком, вывести на главной странице магазина.
      Как такое реализовать?
    • By dvi3001
      Помогите разобраться!
      На главной странице не хотят работать родные модули Слайдшоу ни Баннер.
      На всех других страницах всё нормально работают.
      В чём проблема? Помогите найти и исправить!
       
      Для видимости я поставил на странице http://ooo-arle.ru/index.php?route=account/login Баннер в левой колонки и Слайдшоу в низу.
      На главной включен Баннер в левой колонке первым с верху но он там не появился.
       
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.