Как сделать адаптивную галерею | Adobe Muse
Приветствую, уважаемые читатели и сайтостроители.
На связи Владимир Гынгазов!
Сегодня, я для Вас подготовил очередное видео. В котором делаю обзор отличного виджета для Adobe Muse. Меня очень часто просят порекомендовать реально полезный виджет, и вот случай представился. Перед тем, как рассказывать о чём-то, я всегда тестирую и «пробую на вкус».
И в этот раз могу сказать точно, что этот виджет мне пришелся по вкусу.
Автор этого виджета Александр Бузмаков. Перед тем, как идти по ссылке под видео, рекомендую сначала посмотреть это самое видео. Тем более, что оно не длинное.
Там же, Вас ждёт ещё интересная информация. Приятного просмотра.
Пример работы виджета:
А вот и обещанная информация и ссылка. Начнём с информации.
Всем моим читателям и зрителям на канале, Александр (автор виджета) предоставил скидку в размере 20% от стоимости не только этого замечательного виджета, но и всех виджетов, которые находятся у него на сайте.
Скидка действует весь июнь!
Чтобы получить скидку, скопируйте (Ctrl+c) и вставьте (Ctrl+v) промокод: RUSMUSE06 при оформлении заказа.
ПРИОБРЕСТИ ВИДЖЕТ С 20% СКИДКОЙЕщё один совет! Если Вам реально понравится этот виджет, то рекомендую оставлять отзывы на странице магазина и Вы дополнительно получите 15% скидку на будущие заказы.
ВАЖНО! отзыв должен быть объективным и честным. Иначе просто не засчитают скидку! Не пишите его до того, как не попробуете в деле.
Давайте будем честными!
На этом всё! Надеюсь эта статья и видео оказались для Вас полезными.
Не забывайте рекомендовать сайт друзьям, оставляйте свои комментарии и до встречи… завтра! Да, завтра и опубликую ещё один обзор на мега полезный виджет Adobe Muse.
P.S.Чтобы быть наиболее полезным, я решил провести опрос по идеям для будущих виджетов.
Просто, опишите свою идею на этой странице
Для различных виджетов доступны разные параметры, и одни более сложные, чем другие. Уделите время, чтобы ознакомится с параметрами меню и просмотреть доступные настройки. Ниже приведен краткий обзор.
Добавить изображения: нажмите на значок папки для поиска и выбора изображений для отображения.
Новое главное изображение: определяет способ отображения большой фотографии в целевом контейнере.
- Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
- Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.
Новая миниатюра: определяет способ отображения миниатюры фотографии в контейнере триггера.
- Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
- Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.
Переход: метод анимации, используемый при замене содержимого одного целевого контейнера другим целевым контейнером. Этот параметр также действует для сенсорных экранов и может применяться при создании сайтов для мобильных устройств. Посетители таких сайтов могут проводить пальцем по экрану своих устройств и наблюдать эффект перехода к другому элементу.
- Выцветание: уровень прозрачности нового контейнера увеличивается, а текущего контейнера уменьшается.
- По горизонтали: новый контейнер появляется сбоку, надвигаясь на текущий контейнер.
- По вертикали
Скорость перехода: продолжительность воспроизведения анимации в секундах.
Автоматическое воспроизведение: когда этот параметр включен, слайд-шоу воспроизводится автоматически, не требуя действий посетителя (т. е. нажатия каждого триггера для последовательного просмотра соответствующего целевого объекта). Задайте время отображения каждого изображения в секундах до перехода к следующему изображению.
Перемешать: когда этот параметр включен, изображения отображаются в случайном порядке, а не последовательно.
Лайтбокс: когда этот параметр включен, то при отображении целевого контейнера слайд-шоу остальная часть страницы затемняется. При закрытии окна лайтбокса страница снова отображается полностью.
Разрешить перелистывание: когда этот параметр включен и сайт содержит макет для планшетных ПК или телефонов для отображения веб-содержимого на мобильных устройствах, интерактивные элементы виджета будут поддерживать жесты для сенсорных экранов.
Раздел «Составные элементы»:
- Первый: когда этот параметр включен, отображается кнопка «Первый».
- Назад: когда этот параметр включен, отображается кнопка «Назад».
- Далее: когда этот параметр включен, отображается кнопка «Далее».
- Последний: когда этот параметр включен, отображается кнопка «Последний».
- Подписи: когда этот параметр включен, отображаются подписи фотогалереи.
- Счетчик: когда этот параметр включен, отображается счетчик фотогалереи.
- Кнопка «Закрыть»: когда этот параметр включен, отображается кнопка «Закрыть».
Миниатюры: когда этот параметр включен, отображаются триггер-кнопки миниатюр.
Раздел «Редактирование»:
- Показать элементы лайтбокса при редактировании: при включенном параметре «Лайтбокс» области целевых объектов отображаются по умолчанию, когда на странице выбран соответствующий триггер. Вы можете включить этот параметр при создании макета, чтобы видеть все целевые объекты. Этот параметр не влияет на отображение слайд-шоу при предварительном просмотре страницы или ее просмотре в браузере. Если параметр «Лайтбокс» не включен, этот параметр недоступен.
Обратите внимание, что параметр «Показать элементы лайтбокса при редактировании» включен, только если выбран виджет слайд-шоу «Лайтбокс».
- Редактировать вместе: этот параметр включен по умолчанию для упрощения и сокращения времени редактирования виджетов. Если каждый триггер не требуется оформлять по-разному, то не отключайте этот параметр, чтобы все изменения, внесенные в один элемент, автоматически применялись к другим элементам.
Ознакомившись с доступными настройками, нажмите вне области окна параметров, чтобы закрыть его.
Как сделать галерею фотографий на сайт в Adobe Muse
В этой статье будем разбирать реальный кейс: как добавить галерею фотографий на сайт kr.ck.ua, созданный в Adobe Muse.
Пошаговая инструкция из 3-х видеоуроков. А также ссылка на скачивание программы Adobe Muse в описании к Уроку 1.
Не обязательно нанимать фрилансеров с Воркзиллы, можно вносить изменения на сайт самостоятельно.
Начинаем работать с сайтом kr.ck.ua.
Урок 1. Скачать и установить Adobe Muse.
Скачать программу Adobe Muse можно тут: https://yadi.sk/d/WAMpCzw9bSh9d
Как установить, читай в документе readme (он будет в папке с программой).
Урок 2. Открыть проект сайта в программе Muse и отредактировать.
Вот тут скачай проект сайта kr.ck.ua: https://yadi.sk/d/TY34J_yLqkxtV
– открыть проект сайта в программе Muse
– добавить галерею (тут можно все фото одним махом загрузить)
– фото должны быть названием на англ. и отражающими смысл
– поменять текст под фото
– сохранить сайт
– экспортировать как HTML
– запаковать в архив ZIP
Урок 3. Загружаем измененный сайт на хостинг.
– заходим на хостинг Маклаут
– загружаем архив ZIP
– извлекаем
– все папки заменены
– проверяем как выглядит сайт
– распаковываем архив images, который лежит на хостинге и проверяем сайт.
Если остались вопросы, пишите мне. Объясню, что не понятно.
Путем настройки виджетов «Композиция» можно создавать подменю для навигации по сайту. Можно создать пункт меню, в котором будет отображаться подменю при наведении посетителем курсора на активную область. При отведении посетителем курсора с активной области это подменю будет скрываться. Можно также настроить виджет таким образом, чтобы подменю скрывалось, если посетитель решит не нажимать ни одну из ссылок этого подменю и просто отведет с него курсор. Такие интерактивные подменю крайне удобны при построении навигационной панели сайта с множеством различных подразделов.
Можно использовать меню «Показать целевой объект» и «Скрыть целевой объект», когда необходимо реплицировать общую работу меню веб-сайта. Посетитель может нажать любую из ссылок или отвести курсор за пределы окна, чтобы скрыть его. Когда этот параметр включен, не нужно нажимать кнопку «Закрыть», чтобы скрыть подменю.
Эта функция доступна при работе со следующими виджета раздела «Композиции»:
- Пустая
- Специальные новости
- Подсказка
Панель «Параметры» содержит два параметра для отображения целевого контейнера:
- При нажатии: целевые объекты отображаются при нажатии на них пользователем
- При наведении курсора: целевые объекты отображаются при наведении на них курсора пользователем
Вы также можете скрыть целевой контейнер в виджете «Композиция». Далее представлено четыре способа скрыть целевой контейнер:
- Нет
- Кнопка нажата
- После перемещения курсора за пределы области
- После перемещения курсора за пределы триггера и целевого объекта
Из следующего раздела вы узнаете, как использовать действие «При наведении курсора» для отображения целевого контейнера и действие при перемещении курсора за пределы контейнеров триггера и целевого объекта, чтобы скрыть целевой контейнер.
Выполните следующие действия, чтобы включить для виджета раздела «Композиции» параметр «Скрывать после отведения курсора» для создания строки меню, подменю которой отображаются и скрываются в зависимости от действий посетителя.
- Нажмите в любом месте рабочей среды, чтобы закрыть диалоговое окно Ссылки.
Затем добавим содержимое на страницу Section 03.
- Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, фиолетовый круг с номером 03, текстовый фрейм Section 03, форму контактной информации и кнопку «Отправить». Скопируйте выбранные элементы.
- Нажмите клавиши Command+J (Mac) или Control+J (Windows) и введите первые несколько букв названия раздела Section 03. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 03, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
- Вставьте элементы, скопированные в действии 1, на страницу Section 03 макета «Телефон». С помощью инструмента Выделение выровняйте их по центру страницы с помощью направляющих. При копировании виджета формы контактной информации в макет «Телефон» для него сохраняются стили, примененные в макете «Компьютер». Единственное, что нужно сделать для финального оформления формы для макета сайта для мобильных устройств, это изменить размеры формы и ее элементов в соответствии с размерами небольшого экрана устройства.
Страница Section 03 содержит виджет формы контактной информации, которая для обработки отправляемых с ее помощью данных использует серверные сценарии и базу данных Business Catalyst. При нажатии кнопки Опубликовать и отправке файлов сайта из программы Muse эта форма будет функционировать автоматически.
Примечание. Для размещения готового веб-сайта, созданного в Muse, можно воспользоваться услугами любого другого поставщика, однако следует помнить, если используются серверы, отличные от Business Catalyst, то для работы формы контактной информации потребуется использовать дополнительные фрагменты кода.
В этом примере проекта форма контактной информации не включает запрос CAPTCHA. Добавление запроса CAPTCHA можно указать в меню Параметры для виджета формы контактной информации. Этот запрос используется для защиты от программ-роботов. В разделе CAPTCHA отображается изображение с набором символов, которые пользователь должен ввести в соответствующую строку, чтобы отправить заполненную форму контактной информации. Несмотря на то что этот запрос позволяет защититься от программ-роботов, не следует забывать об удобстве работы с сайтом для пользователей мобильных устройств. Если форма контактной информации окажется слишком сложной для заполнения, посетители могут решить не отправлять свое сообщение.
На этом создание страницы Section 03 завершено. Для кнопки Отправить не требуется создавать ссылку, поскольку она уже задана в виджете формы контактной информации.
Последняя страница макета «Телефон», страница Section 04, содержит виджет Слайд-шоу. Виджеты в программе Muse совместимы со всеми современными браузерами для настольных ПК и мобильных устройств, поэтому нет необходимости вносить какие-либо изменения, чтобы слайд-шоу функционировало на сенсорном экране.
Выполните указанные ниже действия, чтобы скопировать содержимое страницы-черновика из макета для настольных ПК на страницу Section 04 в макете «Телефон».
- Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, красный круг с номером 04, виджет Слайд-шоу и текстовый фрейм Section 04. Можно воспользоваться инструментом Выделение, чтобы выделить сразу все элементы. Скопируйте выбранные элементы.
- Нажмите клавиши Command+J (Mac) или Control+J (Windows) и введите первые несколько букв названия раздела Section 04. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 04, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
- Вставьте элементы, скопированные в действии 1, на страницу Section 03 макета «Телефон». С помощью инструмента Выделение выровняйте их по центру страницы с помощью направляющих. При копировании виджета формы контактной информации в макет «Телефон» для него сохраняются стили, примененные в макете «Компьютер». Единственное, что нужно сделать для финального оформления формы для макета сайта для мобильных устройств, это изменить размеры формы и ее элементов в соответствии с размерами небольшого экрана устройства. При добавлении виджетов с интерактивными функциями (например, виджета Слайд-шоу) в макеты для мобильных устройств, созданных в Muse, можно заметить, что для них в меню Параметры имеется настройка Разрешить перелистывание. Этот параметр установлен по умолчанию, поэтому любые добавляемые в макет для мобильных устройств виджеты автоматически настроены на распознавание касаний и движений пальцами по сенсорному экрану. На странице Section 04 находится виджет Слайд-шоу, которое служит для отображения соответствующего изображения при нажатии его миниатюры. В слайд-шоу используется горизонтальный переход при смене изображений в галерее. В этом примере посетители должны взаимодействовать с виджетом, чтобы просмотреть фотографии, однако при желании виджет Слайд-шоу можно настроить на автоматическое циклическое воспроизведение изображений при загрузке страницы.
Примечание. При использовании в виджете переходов Выцветание, По горизонтали или По вертикали в коде автоматически включается функция распознавания движения перелистывания пальцем, чтобы посетители сайта могли перелистывать изображения слайд-шоу на своем сенсорном экране.
В следующем разделе Разработка дизайна макета сайта для мобильных устройств в Muse рассматривается процесс обновления ресурсов для всех мобильных платформ, а также процедура публикации сайта, созданного в Muse, с помощью каждого из макетов для мобильных устройств.
Виджет ромбовидной галереи для Adobe Muse – Muse Masters
Красивая галерея из ромбов для Adobe Muse. При наведении на фото, они раскрываются и увеличиваются. Очень оригинальная галерея, которая всегда привлекает посетителей сайта. Утановка виджета очень простая!
Перетащите виджет в рабочую область и:
1. Укажите размер изображений
2. Укажите радиус
3. Добавьте необходимые фото в виджет
Виджет включает в себя два модуля: «Галерея с разбиением на страницы» и «Слайдер-карусель».
Основные преимущества этого уникального виджета:
- Можно использовать как альбомы групп, так и личные альбомы.
- Супер быстрая загрузка даже большой галереи (более 100 фото). Не нагружает сайт.
- Можно использовать изображения высокого качества (шириной 2000-3000 px).
- Подгрузка описания (включая ссылки в описании) к картинкам из описания в ВК.
- Возможность применять, как на макете с фиксированной шириной, так и на гибком макете.
- Возможность управлять галереей на сайте любому пользователю, у котрого есть доступ к альбому.
- Возможность использования нескольких галерей на одной странице.
- Простые и гибкие настройки дизайна галерей.
- Адаптация размера и центрирование открытого изображени под размер браузера.
- Пагинация (автоматическое разбиение на страницы большой галереи).
- Отображение миниатюр в виде адаптивной карусели.
- Эффекты анимации при перелистывании страниц галереи и появлении лайтбокса.
- Возможность создать галерею на 100% ширину страницы (как с отступами, так и без).
Последнее обновление виджета от 06.06.2019, подробнее во вкладке «История обновлений».
ВАЖНО!: Все последующие обновления виджета, если таковые будут, получить можно будет за дополнительную плату. Обновления не частые, и могут понадобиться только в случае серьёзных изменений API ВКонтакте.
Как обновить версию виджета 19.05.2018 на версию 06.06.2019?
1.Скачать в списке ваших заказов вновь.
2.Установить в программу.
3.Полностью заменить и настроить, учитывая новые опции, на всех сайтах, где используется. Вы можете предварительно не удалять старую версию в макете, оставив рядом, чтобы подсматривать там настройки и настроить также уже на новой копии виджета.
(демо-сайт, пока не обновлён, поэтому не работает)
Смотреть демо-сайт
Когда вы размещаете изображение или используете другие методы для добавления графического объекта на страницу, вы используете инструмент «Выделение» и клавиши со стрелками для его изменения. По мере перемещения изображения оно перемещается относительно других элементов (изображений, текста и мультимедиа), которые также существуют на странице. У вас есть возможность перемещать и другие элементы, но вся страница ведет себя как брошюра или плакат. Элементы на странице существуют в одной плоскости. Если страница длинная (содержит много вертикального содержимого) и посетитель прокручивает страницу вниз, он больше не видит изображения в верхней части страницы.
Вероятно, вы видели закрепленные объекты при просмотре веб-сайтов; это «постоянные» элементы, которые всегда отображаются в одном месте. Похоже, они плавают над остальным содержимым страницы.
При использовании инструмента «Закрепить» вы по существу удаляете изображение из потока страницы. Вместо того, чтобы размещать его по отношению к другим элементам страницы, вы устанавливаете его в определенном месте по отношению к браузеру. Закрепленные изображения выглядят «липкими» — они всегда остаются в одном месте (например, в верхнем правом углу или зависают у нижнего края) независимо от других элементов прокрутки страницы.Если посетитель изменяет размер своего браузера, закрепленные изображения всегда остаются на закрепленном месте относительно окна браузера.
Можно придумать закрепление как способ «вырвать изображение» из дизайна страницы и вместо этого прикрепить его к браузеру, как закрепление заметки на пробковой доске. Закрепленный элемент будет перемещаться, чтобы сохранить свое закрепленное положение относительно браузера, если посетитель изменяет размеры окна браузера, но закрепленный элемент не будет перемещаться, если посетитель прокручивает содержимое страницы по горизонтали или вертикали.
Чтобы использовать инструмент «Булавка», выполните следующие действия:
- Пока страница A-Master открыта в режиме конструктора, выберите значок Facebook с помощью инструмента «Выделение».
- Щелкните верхнее правое положение контактов в интерфейсе контактов на панели управления. Этот параметр «прикрепляет» элемент к текущему местоположению его верхнего правого угла.
После перетаскивания виджета из библиотеки виджетов на страницу вы увидите значок с синей стрелкой в правом верхнем углу виджета, когда виджет выбран. Нажмите на эту синюю стрелку, чтобы открыть меню параметров.
Каждый виджет имеет различные доступные параметры, поэтому параметры, которые можно установить в интерфейсе меню «Параметры», различаются. Настройки управляют поведением виджета (например, выбирая, будет ли слайд-шоу воспроизводиться автоматически или посетители должны нажимать на миниатюры, чтобы увидеть каждое увеличенное изображение) и отображением виджета (например, указание типа перехода, который будет анимироваться при каждом новое изображение отображается).
При разработке веб-сайтов у вас будет возможность настроить эти параметры и поработать со своими клиентами, чтобы найти лучший выбор для конкретного проекта. Помните, что в любое время, даже если сайт был опубликован в сети, вы можете вернуться к файлу .muse, выбрать виджет, щелкнуть его значок с синей стрелкой, чтобы открыть меню «Параметры», и выполнить новые настройки для изменения виджета. Позже, после того как вы снова опубликуете сайт, внесенные вами изменения будут отражены на действующем веб-сайте.
С помощью виджетов «Меню» вы можете динамически отображать названия страниц сайта и автоматически создавать ссылки на эти страницы.Это упрощает добавление навигации по сайту на страницы, основанные на вашей карте сайта, в представлении «План», и вам не нужно беспокоиться о создании неработающих ссылок. Вы также можете отключить определенные страницы, чтобы они не отображались динамически в виджетах «Меню», щелкнув правой кнопкой мыши эскиз страницы в представлении «План» и отменив выбор параметра «Включить страницу в навигации». Эта опция включена по умолчанию (и отображает галочку, когда она включена).
Кроме того, вы также можете настроить виджеты «Меню» вручную, если вы предпочитаете сами называть кнопки и добавлять ссылки на определенные страницы, а не разрешать Adobe Muse создавать элементы меню.В меню «Параметры» в разделе «Тип меню» можно выбрать параметр «Вручную».
,Для разных виджетов доступны разные параметры, и некоторые из них более сложны, чем другие. Найдите минутку, чтобы просмотреть параметры меню, чтобы увидеть доступные настройки. Вот краткий обзор:
Добавить изображения: Щелкните значок папки, чтобы просмотреть и выбрать изображения, которые вы хотите отобразить.
Новый герой: Определяет способ отображения большего объема фотографий в целевом контейнере.
- Соотнесите содержимое пропорционально: Файл изображения остается в своем первоначальном размере, даже если этот размер не соответствует целевому контейнеру; часть контейнера может быть пустой, если изображение в нее не помещается.
- Заполнить рамку пропорционально: Размер файла фотоизображения изменяется, чтобы заполнить пропорции целевого контейнера; часть фотоизображения может быть обрезана.
Новая миниатюра: Определяет, каким образом содержимое миниатюрных фотографий отображается в контейнере триггера.
- Пропорционально подгонять содержимое : файл фотографии остается в своем первоначальном размере, даже если этот размер не соответствует целевому контейнеру; часть контейнера может быть пустой, если изображение в нее не помещается.
- Заполнить рамку пропорционально : размер файла фотоизображения изменяется, чтобы заполнить пропорции целевого контейнера; часть фотоизображения может быть обрезана.
Переход: Метод анимации, используемый, когда содержимое целевого контейнера находится в процессе замены другим целевым контейнером. Они также включены для сенсорных экранов, поэтому, если вы создаете сайты для мобильных устройств, посетители могут провести пальцем по экрану, чтобы увидеть воспроизведение перехода при появлении следующего элемента контента.
- Fade: Непрозрачность нового контейнера увеличивается с уменьшением существующего контейнера.
- Горизонтально: Новый контейнер выдвигается с горизонтальной стороны, стирая существующий контейнер.
- по вертикали: Новый контейнер сдвигается со стороны вертикально, стирая существующий контейнер.
Скорость перехода: Время в секундах, необходимое для воспроизведения анимации.
Автозапуск: Если этот параметр включен, этот параметр воспроизводит слайд-шоу автоматически, а не в интерактивном режиме (для этого необходимо, чтобы посетитель нажимал на каждый триггер, чтобы просмотреть соответствующую цель в последовательности).Установите количество секунд, которое вы хотите, чтобы каждое изображение отображалось перед переходом к следующему изображению.
Shuffle: Если этот параметр включен, изображения отображаются в случайном порядке, а не последовательно переключаются между миниатюрами.
Лайтбокс: Если эта опция включена, слайд-шоу затемняет остальную часть страницы наложением, когда отображается содержимое целевого контейнера. Когда окно лайтбокса закрыто, вся страница открывается снова.
Enable Swipe: Если этот параметр включен, и сайт включает макет планшета или телефона для отображения веб-контента на мобильном устройстве, интерактивные части виджета будут поддерживать жесты сенсорного экрана.
Раздел деталей:
- Первый: Когда эта опция включена, отображается Первая кнопка навигации.
- Пред .: Если эта опция включена, отображается Предыдущая кнопка навигации.
- Next: Если эта опция включена, отображается кнопка навигации Next.
- Последнее: Если эта опция включена, отображается кнопка Последняя навигация.
- Подписи: Если эта опция включена, отображаются подписи к фотогалерее.
- Счетчик : Если эта опция включена, отображается счетчик фотогалереи.
- Кнопка закрытия: Если эта опция включена, отображается кнопка закрытия.
Миниатюры: Если эта опция включена, отображаются кнопки запуска миниатюр.
Редактирование раздела:
- Показывать детали лайтбокса при редактировании: Если опция лайтбокса включена, каждая целевая область отображается по умолчанию, только когда на странице выбран соответствующий триггер. При разработке макета может оказаться полезным включить эту опцию, чтобы видеть цели во время работы. Этот параметр не влияет на отображение слайд-шоу при предварительном просмотре или просмотре страницы в браузере. Если опция лайтбокса не включена, эта опция отображается серым цветом.
Обратите внимание, что параметр «Показывать детали лайтбокса при редактировании» включается только при выборе виджета «Слайд-шоу лайтбоксов».
- Редактировать вместе: Этот параметр включен по умолчанию, чтобы ускорить редактирование виджетов. Если вам не нужно устанавливать внешний вид каждого триггера по-разному, оставьте эту опцию включенной, чтобы любое изменение, внесенное в один элемент, автоматически применялось к другим.
После просмотра доступных настроек щелкните область страницы за пределами меню «Параметры», чтобы закрыть ее.
,Вы можете настроить виджеты Composition для создания навигации по сайту с помощью подменю. Вы можете создать пункт меню, который отображает подменю, когда посетитель наводит курсор на активную область и скрывает то же подменю, а посетитель скатывает курсор с активной области, которая вызвала открытие подменю. Вы также можете настроить виджет таким образом, чтобы подменю было скрыто в случае, если посетитель решил не нажимать ни на одну из ссылок в подменю, а просто убрал курсор с самого подменю.Возможность создавать эти типы интерактивных подменю удобна, когда вы создаете панель навигации для сайта со многими различными подразделами.
Меню «Показать цель» и «Скрыть цель» полезны, если вы хотите повторить общее поведение меню для своего веб-сайта. Посетитель может по выбору щелкнуть ссылки или переместить курсор за пределы области окна, чтобы скрыть окно. Нет необходимости нажимать кнопку «Закрыть», чтобы скрыть подменю, когда эта опция включена.
Эта функция доступна при работе со следующими виджетами композиции:
- Бланк
- Избранные новости
- Tooltip
Панель параметров предлагает две настройки для отображения целевого контейнера:
- On Click: отображает цель, когда пользователь нажимает
- при наведении курсора: отображает цель, когда пользователь переворачивает триггер .
Вы также можете скрыть целевой контейнер в виджете «Композиция».Ниже приведены четыре варианта скрытия целевого контейнера:
- нет
- On Click
- при развертывании
- при развертывании триггера и цели
В следующем разделе вы увидите, как использовать поведение «При наведении» для отображения целевого контейнера и развертывания при включении как триггерного контейнера, так и целевого контейнера, чтобы скрыть целевой контейнер.
Следуйте приведенным ниже инструкциям, чтобы узнать, как включить параметры «Скрыть при развертывании» для виджетов «Композиция», чтобы создать строку меню, которая скрывает и показывает ссылки подменю на основе взаимодействия с посетителем:
,