Среда, 17 июля

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

CSS  JS   PARTICLES  SCSS

<b>Timelines & Progress bars</b> Блоки для Gantry5
Timelines & Progress bars
<b>Forms & Features</b> Формы
Forms & Features
<b>Testomonials & Social</b> Отзывы клиентов
Testomonials & Social
<b>Images & Videos</b> Видео
Images & Videos

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

Управляйте просмотром в таблице, нажимая на заголовки (сортировка по наличию) или осуществите поиск в окне

particles_Gantry5 ethereal 16 шт. photon 16 шт. acronym 21 шт. antares 22 шт. galatea 12 шт. flux__rt 22 шт. isotope 17 шт. salient 14 шт. supra_rt 22 шт. kraken 17 шт. protean 19 шт. remnant 19 шт. xenon_rt 23 шт.
Accordion

 

 

 

 

 

 

 

 

 

Accordion Menu

 

 

 

 

 

 

 

 

 

 

 

 

Animated Block

 

 

 

 

 

 

 

 

 

 

 

Audio Player

 

 

 

 

 

 

 

 

 

 

 

 

Block Content
Branding
Chartist

 

 

 

 

 

 

 

 

 

 

 

 

Contact

 

 

 

 

 

 

Content List

 

 

 

 

 

 

Content Tabs

 

 

 

 

 

 

 

Copyright
Custom HTML
Date

 

 

 

 

 

 

 

 

Ethereal Block

 

 

 

 

 

 

 

 

 

 

 

 

Flex Slider

 

 

 

 

 

 

 

 

Flipping Cards

 

 

 

 

 

 

 

 

 

 

 

 

Flipping Content

 

 

 

 

 

 

 

 

 

 

 

Flipster Cover Flow

 

 

 

 

 

 

 

 

 

 

 

 

Grid Content

 

 

 

 

 

 

 

Grid Promo

 

 

 

 

 

 

 

 

 

 

 

Grid Statistic

 

 

 

 

 

 

 

 

 

 

Header Tabs

 

 

 

 

 

 

 

 

 

 

 

 

Headerlicious

 

 

 

 

 

 

 

 

 

 

 

 

Horizontal Menu

 

 

 

 

 

 

 

 

 

Icon Headline

 

 

 

 

 

 

 

 

 

 

 

 

Icon Menu

 

 

 

 

 

 

 

 

 

 

 

 

Image Block

 

 

 

 

 

 

 

 

 

 

 

 

Image Grid

 

Image Overlay

 

 

 

 

 

 

 

 

 

 

 

 

Info List

 

 

 

 

 

Menu
Mini  Sound Cloud Player

 

 

 

 

 

 

 

 

 

 

 

 

Mobile Menu
Mosaic Grid

 

 

 

 

 

 

 

 

 

 

 

News Slider

 

 

 

 

 

 

 

 

 

 

 

News Ticker

 

 

 

 

 

 

 

 

 

 

 

 

Newsletter

 

 

 

 

 

OffSidebarToggle

 

 

 

 

 

 

 

 

 

 

 

 

Overlay Toggle

 

 

 

 

 

 

 

 

 

 

Owl Card

 

 

 

 

 

 

 

 

 

 

 

 

Owl Carousel

 

 

 

 

 

 

 

 

 

 

 

Owl Showcase

 

 

 

 

 

 

 

 

 

 

 

Panel Slider

 

 

 

 

 

 

 

 

 

 

 

 

Particlesjs

 

 

 

 

 

 

 

 

 

 

 

 

Popup Grid

 

 

 

 

 

 

 

 

 

Popup Module

 

 

 

 

 

 

Pricing Table

 

 

 

 

 

 

Progress Bar

 

 

 

 

 

 

 

 

 

 

 

 

 

Promo Content

 

 

 

 

 

 

 

 

 

Promo Image

 

 

 

 

 

 

 

 

Simple Content

 

 

 

 

 

 

 

 

 

 

Simple Counter

 

 

 

 

 

Simple Menu

 

 

 

 

 

 

 

 

 

 

 

 

Swiper                        
Slideshow                        
Testimonial

 

 

 

 

 

 

 

 

 

Video

 

 

 

 

 

 

 

 

 

 

 

 

Video Grid

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 menu  accordion menu  mobile menu  horizontal menu  icon menu  simple menu

Это могут быть как горизонтальное, так и вертикальное меню. Наиболее привлекательно 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 - позволяет выводит в режиме карусели всевозможные картинки с текстом в режиме оверлея плюс представляет различные типы анимации как самих картинок, так и оверлея - представленная частица была создана на базе Overlay JL и  модифицирована : не работали background-color + fontsize

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

Более подробно о всех частицах с коммерческих шаблонов от Rockettheme расcказано и показано на тестовом сайте - смотрите и изучайте.

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

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

Content Tabs  Header Tabs  Pricing Tabs

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

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

Animated Text  Audio Player  Video Background  Video  Video Grid   Video Carousel    Progress Bar

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

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

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

После проверки всего шаблона 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)