Выбирая и копируя Particles for Gantry 5 - ту или иную готовую частицу, обращаем внимание на структуру файлов и папок. Сложные частицы обязательно состоят из 3-4 блоков, стили (размеры и цвет букв, фон частицы) прописываются в папке scss , переходы (реакция на передвижение курсора, нажатие и т.п.) могут быть осуществлены с помощью javascipt в папках html.twig или js, также могут быть ссылки на код css - все это требует внимательности при переносе частиц на Ваш проект.
Рассмотрим наиболее популярные частицы Gantry5 - частицы-исходники с коммерческих сайтов от ROCKETTHEME. Оговорюсь, почти все частицы требуют доработки.
Управляйте просмотром в таблице, нажимая на заголовки (сортировка по наличию) или осуществите поиск в окне
Возможности администрирования бесплатных шаблонов | T3 | Helix3 | HelixU | As | Wrap7 | YooP | Gantry5 |
---|---|---|---|---|---|---|---|
Сохранение без перезагрузки | |||||||
Возможность кастомизации (создание уникального стиля) | |||||||
Предпросмотр изменений | |||||||
Сигналы о несохраненных изменениях | |||||||
Интерфейс настроек | |||||||
Закрепление меню (Sticky Header) | |||||||
Favicon | |||||||
Apple Touch Icon | |||||||
Ссылки на соцсети | |||||||
Предзагрузчик (Preloader) | |||||||
Наличие опции преоладера | |||||||
Предпросмотр предзагрузчика | |||||||
Кастомизация предзагрузчика | |||||||
Кнопка «Наверх» | |||||||
Наличие опции "кнопка вверх" | |||||||
Закреплённая кнопка | |||||||
Кастомизация кнопки | |||||||
Логотип и вариации |
Все частицы от Rockettheme можно сгруппировать по группам:
-
первая группа - это различные меню, ведущие в свои тематические разделы и повышающие удобство работы с сайтом
Таких частиц шесть плюс частица поиск:
menu accordion menu mobile menu horizontal menu icon menu simple menu
Это могут быть как горизонтальные, так и вертикальные меню.
*** - Чтобы меню выглядело привлекательно, дополнительно необходимо использовать соответствующий CSS класс и размер иконок
-
вторая большая группа - это кнопки, информирующие и приглашающие совершить переход или действие
Это прежде всего
Block Content Content List Ethereal Block Info List Promo Content Grid Content Simple Content
и некоторые другие.
Так выглядит частица contentlist
Ниже представлена частица infolist
-
третья группа - это всевозможные слайдеры
Среди них можно выделить
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
-
четвертая группа - это различные TAB-s, переход по вкладкам которых осуществляется вручную
Content Tabs VIDGETS Header Tabs Pricing Tabs
Не все скачанные частицы корректно выводятся на странице, например, в частице contenttabs (по умолчанию) белые буквы на белом фоне не видать. При этом почти все табы имеют стандартные css классы и поэтому одновременное использование нескольких табов с разных шаблонах без коррекции файлов scss невозможно - стили накладываются друг на друга - выдаваю причудливые метаморфозы
-
специфичная группа частиц, отвечающая за формат теста, звук и видео в удобном или специальном формате
Animated Text Audio Player VIDEO BACKGROUND Video Video Grid Video Carousel Progress Bar
Самописная частица на базе BG Slideshow от шаблона Supra Rockettheme выгодно отличается от всех слайдеров Gantry5 (см. ниже) и имеет эффектные переходы при наведении на тест и картинки (скрипт vegas)
-
шестая группа частиц, отвечающая за вывод изображениий на сайте
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)
Материал дополняется и корректируется ....