Среда, 19 декабря

распродажа инструмента оборудования скидки до 50%

Выбирая  Particles for Gantry 5 - ту или иную готовую частицу, обращаем внимание на структуру файлов и папок. Сложные частицы обязательно состоят из 3-4 блоков, стили (размеры и цвет букв, фон частицы) прописываются в папке scss , переходы (реакция на передвижение курсора, нажатие и т.п.) могут быть осуществлены с помощью javascipt в папках html.twig или  js, также могут быть ссылки на код css - все это требует внимательности при переносе частиц на Ваш проект.

CSS  JS   PARTICLES  SCSS

Рассмотрим наиболее популярные частицы Гентри5  - частицы-исходники с коммерческих сайтов от ROCKETTHEME. Почти все частицы требуют доработки.

Все частицы можно сгруппировать по группам:

  • первая группа - это различные меню, ведущие в свои тематические разделы  и повышающие удобство работы с сайтом

Таких частиц шесть плюс частица поиск:

 menu  accordion menu  mobile menu  horizontal menu  icon menu  simple menu  search

Частица search (поиск)  выглядит непрезентабельно, но работает отлично

Ниже представлено типовое sidemenu или просто menu (обязательное условие - нахождение меню в секции navigation или header - иначе будут сбои в работе при наведении, начиная со 2 уровня) 

Исходное типовое меню accordionmenu  от шаблона acronym требует доработки - размеры букв непропорционально велики (требуется коррекция в файле _accordionmenu.scss) 

Например, так выглядит другое simplemenu из шаблона acronym  

Simple Menu Acronym

New item
New item
New item

Самое простое horizontalmenu используется практически на всех шаблонах от rockettheme 

Наиболее привлекательно iconmenu от шаблона kraken , но оно имеет только один уровень

*** - Чтобы меню выглядело привлекательно, дополнительно необходимо использовать соответствующий CSS класс и размер

  • вторая большая группа - это кнопки, информирующие и приглашающие совершить переход или действие

 Это прежде всего

Block Content  Content List  Ethereal Block  Info List  Promo Content  Grid Content  Simple Content и  некоторые другие.

Так выглядит частица contentlist

info list antares

Ниже представлена частица infolist 

infolist demo

  • третья группа - это всевозможные слайдеры 

Среди них можно выделить

Carousel  Slidershow  Flex Slider  News Slider  News Ticker  Owl Cards  Owl Carousel  Owl Showcase  Panel Slider  и др.

Частица Flickity, найденная на просторах интернета - универсальный самоподстраивающийся по высоте слайдер jQuery

Частица Slideshow JL - 2018 от joomlead - позволяет выводит в режиме карусели всевозможные картинки с текстом в режиме оверлея плюс представляет различные типы анимации как самих картинок, так и оверлея 

Инструменты

  • Трубо
    расширитель

    дюймовый СТ-100А
    Цена - 7330 руб

    РАСПРОДАЖА

  • Трубо
    расширитель

    метрический СТ-100М
    Цена - 7330 руб

    РАСПРОДАЖА

Типовой flexslider от шаблона antares при правильной настройке и расположении позволяет использовать паралакс эффект в режимах slideshow, showcase или testimonial. К сожалению, без коррекции scss файла внешний вид далек от совершества. Некоторые слайдеры требуют, чтобы их поместили в определенную секцию (раздел) шаблона с дополнительным css классом - иначе работать не будут, например slideshow от supra

Flex Slider Particle - режимы: slideshow, showcase, testimonial

FlexSlider <span>Particle</span>
FlexSlider Particle
Slideshow <span>Layout!</span>
Slideshow Layout!

Типовой newsslider от шаблона photon интересен концепцией вывода изображений и кнопок, но требует  размещения в определенной секции шаблона - с темным фоном и белым текстом. Заголовок расположен внизу - это прямое влияние файла scss, в котором "прописана" ширина и отступ от верха ( width: 17rem; margin-top: 15rem )

New item
New item
New item
  • 1
  • 2
  • 3
  • New item
  • New item
  • New item
  • четвертая группа - это различные TAB-s, переход по вкладкам которых осуществляется вручную

Content Tabs  Header Tabs  Pricing Tabs

Не все частицы корректно выводятся на странице, например в частице contenttabs (белые буквы на белом фоне не видать, но они там есть). Все табы имеют стандартные css классы, поэтому одновременное использование нескольких табов с разных шаблонах без коррекции файлов scss невозможно - стили накладываются друг на друга - выдаваю причудливые метаморфозы 

  • специфичная группа частиц, отвечающая за формат теста, звук и видео в удобном или специальном формате

Animated Text  Audio Player  Mini Sound Cloud Player  Video  Video Grid   Video Carousel  Progress Bar

Chatrtist Particle - класс size-50

Chatrtist Particle

После обновления uikit3  от Joomlead 2018 перестала работать particle progressbar от joomlead 2017 года с uikit2- после внесения изменений в код файла progressbar.html.twig - удаления принудительного подключения uikit.min.css (влияло на цвет ссылок на странице) и редактирования кода uk-scrollspy (удаление слова data- в словосочетании data-uk-scrollspy) все заработало  

текст 1 40%
текст 2 47%
текст 3 70%
текст 4 90%

В стандартной частице animatedtext  появляется текст, который можно растянуть по времени 

Материал дополняется, файл увеличивается, изображение растет

Частице-исходнику audioplayer от шаблона remnant нужна дополнительная настройка  - белые буквы на белом фоне, но главный минус подгружаются скрипты из "непроверенных источников" и браузер ругается  

Частица Videocarousel  преподнесла сюрпризы - с маленькой буквы отображался заголовок частицы, не правильно расположились видео - должны располагаться горизонтально

Снова ошибки разработчика. Частица требует 3-х файлов js - owlcarousel.js / owlcarousel.video.unit.js / videocarousel.unit.js

было:

надо:

  

Правильный код videocarousel (исправлены 3 ошибки), протестированный на шаблоне Helium действует, пока не наложатся новые стили от других owlcarousel.scss - необходимо следить за стилями dots

Частица Videogrid от шаблона Notio / Remnant выглядила с исходника немножко коряво - оказывается в файле videogrid.html.twig была допущена ошибка - строки 3 и 4 надо поменять местами

было:

надо:

Обязательная процедуры - почистить кэш  Clear Cache и провести рекомпиляцию стилей Recompile CSS

  

Video Grid Protean

частица требует заполнения всех полей
Video Title время
Video Title время
Video Title время
  • шестая группа частиц, отвечающая за вывод изображениий на сайте

Grid Promo Gallery   Image Block   Image Grid   Mosaic Grid   Popup Grid   Promo Image   Testimonial  Image Overlay

частица Image Block Ehtereal при первичном включении дает ошибку 500 (не работает 74 стр стиля) -

Image Block Ehtereal

image Headline
image Headline
image Headline

Частица Newsticker ставится на шаблон без проблем - состоит из 3-х папок particles, scss, js

News Ticker Particle

Newsflash
Все частицы из коммерческих шаблонов
Скачать можно бесплатно
Почти 100 частиц Gantry 5 - со служебными атомами

Частица Overlay от Joomlead - при наведении на картину появляется скрытая картинка 

Частица-исходник Imagegrid с шаблона Protean с изъяном - но после коррекции все работает

Image Grid Protean

Частица-исходник Image Promo Gallery - все те же проблемы: заголовок, неправильное отображение на странице сайта

Grid Promo Gallery Antares

TITLE Description
TITLE Description
TITLE Description

Частица Image Zoom от Joomlead позволяет "разглядеть" детали рисунка, двигая колесико мышки

Частица Image Compare от Joomlead позволяет увидеть "объект" до модернизации и после

После проверки всего шаблона antares от rockettheme выяснилось, что из 20 частиц, представленных на шаблоне, всего 3-4 будут работать правильно с использованием стилей scss и скриптов js - остальное сырой материал, который надо дорабатывать, настраивать, лечить. Займемся этим - см. статью Лечение частиц Gantry5 от Rockettheme (часть 1)

Материал дополняется ....

телефоны
+7 (902) 327-81-10 (Мегафон)
адрес
Чебоксары, Гражданская ул., д. 78, к. 149
часы работы
с 8:00 до 18:00 (сб, вс - с 9:00 до 15:00)