А вы знаете, что можете управлять адаптивностью ваших сайтов?
30 июня 2017
Автор: Коваленко Алексей
Адаптивностью в готовых решениях уже никого не удивишь. А вот возможность управлять адаптивностью без нужды программировать, может дать вам преимущество перед вашими конкурентами в борьбе за юзабилити.
Особое внимание обратите управлению адаптивностью на следующих участках BXReady: Интернет-магазин:
Итак. Несколько примеров применения:
У нас есть такой вариант раскрывающегося меню, как многоколоночное меню (левое или главное)
Так вот. Вы можете управлять количеством (а соответсвенно и размерами) колонок.
Вот самый простой пример, который вы можете попробовать даже на Демо-сайте
При переходе по указанной ссылке у вас включится следующий вариант настройки меню:На больших экранах по три колонки
![Фото 1: «menu_sc1.jpg»](https://site-cloud-files.bitrix.info/resize_cache/5651019/04dbd6b4c314fe48f655aad84339ad15/main/540/540a311ab5d55f1ecefc16f59b1abb68/menu_sc1.jpg)
А для средних экранов можно задать 2 колонки:
![Фото 2: «menu_sc2.jpg»](https://site-cloud-files.bitrix.info/resize_cache/5651015/04dbd6b4c314fe48f655aad84339ad15/main/1c4/1c48811541107ebba0b0979b6b07d6a5/menu_sc2.jpg)
Но основой любого магазина, конечно, является каталог:
В нашем решении вы можете сами задать состав (количество) товаров в строке , в зависимости от разрешения экрана.
Например, для больших экранов, установим показ 3 товаров в строке каталога:
Получаем список товаров следующего вида:
![Фото 3: «catalog_sc1.png»](https://site-cloud-files.bitrix.info/resize_cache/5651023/04dbd6b4c314fe48f655aad84339ad15/main/c73/c739266c400f739fb98f38dad05be7cb/catalog_sc1.png)
А вот так будет выглядеть список на средних экранах если мы будем выводить по два товара:
![Фото 4: «catalog_sc2.png»](https://site-cloud-files.bitrix.info/main/a21/a2139ab9370081fff0e34b1d438d4c84/catalog_sc2.png)
Вот например, мы поставили в Концентраторе на главной (подробнее про Концентратор) для больших экранов 6 товаров (мелковато и в реальности не требуется, но это хороший пример отсутствия ограничений)
![Фото 5: «catalog_sc3.png»](https://site-cloud-files.bitrix.info/main/0f9/0f9a2ba1bc134c3ae72a2359a51d8225/catalog_sc3.png)
Мы привели только пару примеров, однако настоятельно рекомендуем не упустить информацию о том Как легко тюнинговать адаптивность в списках товаров
И это еще не все
Возможность настройки адаптивности находится и на других немаловажных участках сайта
Например, вы можете самостоятельно решить как отображать статьи и на каких устройствах
![Фото 6: «other_sc1.png»](https://site-cloud-files.bitrix.info/resize_cache/5651007/04dbd6b4c314fe48f655aad84339ad15/main/344/344f548f882cde585e1291340d10b175/other_sc1.png)
![Фото 7: «other_sc2.png»](https://site-cloud-files.bitrix.info/main/c6c/c6ca643c79dae2872a414f5ff9a46ca1/other_sc2.png)
Не отстают от статей и другие разделы
Например, новости:
![Фото 8: «other_sc3.png»](https://site-cloud-files.bitrix.info/resize_cache/5651021/04dbd6b4c314fe48f655aad84339ad15/main/b7b/b7bd8f6c3ccac23a9c90a76297c9d658/other_sc3.png)
![Фото 9: «other_sc4.png»](https://site-cloud-files.bitrix.info/main/cef/cef505214ee84baa70d45b36d571c9ca/other_sc4.png)
Материалы по теме адаптивности, которые мы рекомендуем не пропускать:
1)Адаптивность на все 100 и отзывчивость на все 200 в BXReady: Интернет-магазин
2)А знаете ли вы что... BXReady обладает мощным потенциалом управления адаптивностью списков товаров.
3) BXReady: Интернет-магазин. Пособие для веб-мастеров и разработчиков. Адаптивность и списки.
Экспериментируйте, делайте Ваш сайт уникальным и приятным глазу
Ссылка на решение:
BXReady: Интернет-магазин
Особое внимание обратите управлению адаптивностью на следующих участках BXReady: Интернет-магазин:
- Многоуровневое многоколоночное меню(пример ниже)
- В каталоге и списках товаров в других блоках (пример ниже)
- В списках элементов инфоблоков общего назначения (новости,статьи и.др) (пример ниже)
Итак. Несколько примеров применения:
У нас есть такой вариант раскрывающегося меню, как многоколоночное меню (левое или главное)
Так вот. Вы можете управлять количеством (а соответсвенно и размерами) колонок.
Вот самый простой пример, который вы можете попробовать даже на Демо-сайте
При переходе по указанной ссылке у вас включится следующий вариант настройки меню:На больших экранах по три колонки
![Фото 1: «menu_sc1.jpg»](https://site-cloud-files.bitrix.info/resize_cache/5651019/04dbd6b4c314fe48f655aad84339ad15/main/540/540a311ab5d55f1ecefc16f59b1abb68/menu_sc1.jpg)
А для средних экранов можно задать 2 колонки:
![Фото 2: «menu_sc2.jpg»](https://site-cloud-files.bitrix.info/resize_cache/5651015/04dbd6b4c314fe48f655aad84339ad15/main/1c4/1c48811541107ebba0b0979b6b07d6a5/menu_sc2.jpg)
Но основой любого магазина, конечно, является каталог:
В нашем решении вы можете сами задать состав (количество) товаров в строке , в зависимости от разрешения экрана.
Например, для больших экранов, установим показ 3 товаров в строке каталога:
Получаем список товаров следующего вида:
![Фото 3: «catalog_sc1.png»](https://site-cloud-files.bitrix.info/resize_cache/5651023/04dbd6b4c314fe48f655aad84339ad15/main/c73/c739266c400f739fb98f38dad05be7cb/catalog_sc1.png)
А вот так будет выглядеть список на средних экранах если мы будем выводить по два товара:
![Фото 4: «catalog_sc2.png»](https://site-cloud-files.bitrix.info/main/a21/a2139ab9370081fff0e34b1d438d4c84/catalog_sc2.png)
Вот например, мы поставили в Концентраторе на главной (подробнее про Концентратор) для больших экранов 6 товаров (мелковато и в реальности не требуется, но это хороший пример отсутствия ограничений)
![Фото 5: «catalog_sc3.png»](https://site-cloud-files.bitrix.info/main/0f9/0f9a2ba1bc134c3ae72a2359a51d8225/catalog_sc3.png)
Мы привели только пару примеров, однако настоятельно рекомендуем не упустить информацию о том Как легко тюнинговать адаптивность в списках товаров
И это еще не все
Возможность настройки адаптивности находится и на других немаловажных участках сайта
Например, вы можете самостоятельно решить как отображать статьи и на каких устройствах
![Фото 6: «other_sc1.png»](https://site-cloud-files.bitrix.info/resize_cache/5651007/04dbd6b4c314fe48f655aad84339ad15/main/344/344f548f882cde585e1291340d10b175/other_sc1.png)
![Фото 7: «other_sc2.png»](https://site-cloud-files.bitrix.info/main/c6c/c6ca643c79dae2872a414f5ff9a46ca1/other_sc2.png)
Не отстают от статей и другие разделы
Например, новости:
![Фото 8: «other_sc3.png»](https://site-cloud-files.bitrix.info/resize_cache/5651021/04dbd6b4c314fe48f655aad84339ad15/main/b7b/b7bd8f6c3ccac23a9c90a76297c9d658/other_sc3.png)
![Фото 9: «other_sc4.png»](https://site-cloud-files.bitrix.info/main/cef/cef505214ee84baa70d45b36d571c9ca/other_sc4.png)
Важный момент, примеры использованы с установленного стандартного варианта решения и на их подготовку ушло не более 5 минут
Материалы по теме адаптивности, которые мы рекомендуем не пропускать:
1)Адаптивность на все 100 и отзывчивость на все 200 в BXReady: Интернет-магазин
2)А знаете ли вы что... BXReady обладает мощным потенциалом управления адаптивностью списков товаров.
3) BXReady: Интернет-магазин. Пособие для веб-мастеров и разработчиков. Адаптивность и списки.
Экспериментируйте, делайте Ваш сайт уникальным и приятным глазу
Ссылка на решение:
BXReady: Интернет-магазин