Как создать виджет для adobe muse
Из этой статьи вы узнаете, как добавлять виджеты «Композиция» в Adobe Muse. Настройка виджетов «Композиция» для создания интерактивных сайтов.
Виджеты «Композиция» в Adobe Muse позволяют добавлять сложные интерактивные функции на ваши веб-сайты. Виджеты «Композиция» практически незаменимы для отображения различного контента на любых сайтах: сайт художественных фотографий или сайт ресторана. Можно использовать эти виджеты для создания веб-сайтов с уникальными возможностями навигации и просмотра без написания кода.
Adobe Muse предлагает несколько типов виджетов «Композиция», которые позволяют добавлять и создавать разные виды контента для вашего веб-сайта. Например, пользователь, создающий сайт художественных фотографий, может выбрать виджет «Лайтбокс», чтобы добавить фотогалерею для своего веб-сайта. Этот виджет затемняет все области страницы, привлекая таким образом внимание посетителей сайта к активной области экрана.
Также можно создавать интересные веб-дизайны с помощью вложенных виджетов в виджет «Композиция». Например, при создании каталога можно использовать виджет «Пустая», чтобы добавлять меню «гамбургер» (значок с тремя горизонтальными линиями) и вкладывать виджет «Слайд-шоу» в целевую область виджета «Пустая». Такой дизайн обеспечивает уникальность вашим веб-сайтам и удобство для пользователей.
Узнайте обо всех типах виджетов «Композиция», доступных в Adobe Muse.
Виджет «Композиция» состоит из двух контейнеров: «Триггер» и «Целевая область». Область триггера — это область, где пользователь щелкает мышкой, а целевая область — это область, соответствующая отображаемой области. Для добавления сложных функций интерактивности свяжите область триггера и целевую область.
Adobe Muse предлагает следующие типы виджетов «Композиция»: В зависимости от требований к дизайну можно использовать один из этих виджетов или комбинацию виджетов, вкладывая один в другой.
Виджет с небольшими миниатюрами. По умолчанию этот виджет не содержит встроенных виджетов. Его можно вручную связать с целевым контейнером.
Виджет, функции которого схожи с виджетом «Раздвижная панель». Для этого виджета в области контейнера можно добавить текст и изображения.
Виджет, в котором содержимое целевой области становится активным при нажатии триггера. Остальная часть страницы затемняется при отображении целевого объекта.
Этот виджет содержит небольшие миниатюры, связанные с целевой областью презентации. По умолчанию в этом виджете слайды сменяются в горизонтальном порядке.
Этот виджет содержит текст подсказки. При наведении курсора на область триггера сразу же отображается подсказка.
Чтобы добавить и использовать виджет «Композиция» в Adobe Muse, выберите нужный виджет «Композиция» и перетащите его в режим «Дизайн». Поскольку эти виджеты являются адаптивными по умолчанию, они гибко настраиваются в соответствии с разными точками остановки. Чтобы изменить расположение или содержимое виджета «Композиция», можно отредактировать виджет, изменить его размер и прикрепить его отдельные элементы к определенной точке остановки.
Следуйте этим инструкциям, чтобы добавить виджет «Композиция» в макет.
Откройте Adobe Muse. На экране приветствия нажмите «Создать новый», чтобы создать сайт, или откройте уже существующий сайт Adobe Muse, в который вы ходите добавить виджет «Композиция».
В режиме «План» дважды нажмите и откройте страницу, на которую вы хотите поместить виджет.
Откройте библиотеку виджетов («Окно» > «Библиотека виджетов») и нажмите «Композиция», чтобы раскрыть меню с параметрами. Выберите один из виджетов «Композиция» в зависимости от вашего дизайна.
Например, выберите «Лайтбокс» в библиотеке виджетов.
Для удаления содержимого по умолчанию, которое подставилось в виджете, нажмите виджет правой кнопкой мыши и выберите «Удалить содержимое виджета».
По умолчанию виджет «Лайтбокс» имеет три небольших серых окна триггера над более крупным целевым контейнером светло-серого цвета.
Когда пользователь нажимает контейнер триггера, отображается целевой контейнер виджета «Лайтбокс». В качестве целевого объекта можно вставлять изображения, текст, видеоролики (в том числе видеоролики YouTube).
Выберите контейнер или триггер в виджете «Композиция». Чтобы выделить весь виджет, выберите его. В индикаторе выбора в левом верхнем углу приложения отобразится слово «Композиция».
Чтобы выбрать триггер, дважды нажмите и выберите небольшие прямоугольники в этом виджете. В индикаторе выбора будет отображаться слово «Триггер». Небольшие прямоугольники являются триггерами для этого виджета. Это кнопки, реагирующие на действия пользователя.
Нажмите один раз в любом месте страницы, чтобы поместить на нее изображение в полном размере.
Выбрав изображение, нажмите правой кнопкой мыши для выбора функции «Вырезать» в контекстном меню.
Чтобы вырезать изображение со страницы и скопировать в буфер обмена, можно также использовать комбинацию клавиш.
Нажмите правой кнопкой мыши внутри триггер-кнопки и выберите «Вставить». Можно также использовать комбинацию клавиш, чтобы вставить изображение в триггер. Обратите внимание, что контейнер триггера автоматически увеличивается до размера изображения.
Вставка содержимого в контейнер может вызвать трудности. Иногда контент размещается не в контейнере, а на странице.
Также можно открыть панель «Слои» (Окно > Слои), чтобы проверить, куда вставлено изображение. Панель «Слои» отображает иерархию элементов на странице.
Чтобы добавить дополнительные миниатюры, нажмите значок плюса (+) рядом с контейнерами триггера.
После размещения виджета в режиме «Дизайн» можно продолжить работу с ним и настроить его. Чтобы изменить параметры виджета «Композиция», выберите виджет и нажмите синюю стрелку в правом верхнем углу виджета.
На панели «Параметры» можно изменить следующие настройки:
Функция «Показать элементы лайтбокса при редактировании» отключается, если в раскрывающемся списке выбраны параметры «Рассредоточено» или «Каскадно».
Функция «Изначально скрыть все» отключается, если выбран параметр «Автолайтбокс».
Чтобы удалить ненужные триггеры, дважды нажмите и выберите соответствующие триггеры. Нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить выделенный триггер.
Нажмите главное изображение в контейнере триггера, чтобы вызвать эффект лайтбокса.
Нажмите клавишу Escape, чтобы закрыть окно лайтбокса, вернуться в режим «Дизайн» и продолжить редактировать страницу Adobe Muse.
После завершения настройки и размещения виджета «Композиция» в макете проверьте работу виджета в режиме «Предварительный просмотр».
Если вы используете виджет «Композиция» в адаптивном макете, ознакомьтесь со следующим разделом. Тестируйте и выполняйте предпросмотр ваших виджетов на всех точках остановки.
Виджеты «Композиция» по умолчанию адаптивны. Для добавления виджетов «Композиция» в адаптивные макеты и работы с ними выполните следующее:
- Если вы создаете адаптивный сайт в Adobe Muse последней версии, перейдите на панель «Библиотека виджетов» и перетащите виджет «Композиция» в режим «Дизайн».
- Если вы использовали Adobe Muse 2017.0.3 или более ранние версии, виджет «Композиция» не адаптивен. В таком случае откройте файл .muse в Adobe Muse последней версии. Выберите элементы в виджете, затем параметр «Изменить размер» в качестве параметров «Адаптивная ширина», «Адаптивная высота» и «Ширина» (любой подходящий).
Нельзя выбрать весь виджет и изменить настройки параметра «Изменить размер». Выберите элемент или несколько элементов виджета для преобразования в адаптивные элементы.
Настройте виджет с помощью инструкций, указанных в разделе Добавление и настройка виджетов «Композиция». После настройки и оформления виджета можно выполнить предпросмотр виджета в браузере или использовать указатель для изменения размера. Виджеты будут автоматически изменять размер в соответствии с размером экрана.
При добавлении виджета «Композиция» в адаптивный макет рекомендуется создавать макеты в наиболее крупных точках остановки. После окончательного размещения и настройки виджета в наиболее крупной точке остановки добавьте дополнительные точки остановки там, где необходимо.
Подробнее о создании веб-сайта для адаптивного макета см. в разделе Создание макетов объектов в адаптивном дизайне.
Один из наиболее уникальных аспектов виджета «Композиция» — это поддержка вложенных виджетов. Это значит, что вы можете добавлять такие виджеты, как «Формы», «Слайд-шоу», или элементы меню в виджет «Композиция».
Также можно добавить форму обратной связи как целевой объект. Когда пользователь нажмет кнопку Связаться, он будет перенаправлен на страницу формы обратной связи.
Существует большое количество сочетаний и возможностей благодаря вложению одного виджета в другой. Однако обратите внимание на следующие аспекты при создании вложенных виджетов в адаптивных макетах:
- Функция закрепления недоступна для адаптивных элементов, вложенных в неадаптивный контейнер.
- Объекты, помещенные в неадаптивный контейнер, не будут адаптивными.
Если вы вкладываете виджеты в виджеты «Композиция», рекомендуется не создавать более трех уровней вложения.
В следующем разделе рассказывается о том, как создавать подменю с помощью виджета «Композиция». Ознакомьтесь с образцом сценария для создания скрытых подменю для навигации по вашему сайту.
Путем настройки виджетов «Композиция» можно создавать подменю для навигации по сайту. Можно создать пункт меню, в котором будет отображаться подменю при наведении посетителем курсора на активную область. При отведении посетителем курсора с активной области это подменю будет скрываться. Можно также настроить виджет таким образом, чтобы подменю скрывалось, если посетитель решит не нажимать ни одну из ссылок этого подменю и просто отведет с него курсор. Такие интерактивные подменю крайне удобны при построении навигационной панели сайта с множеством различных подразделов.
Можно использовать меню «Показать целевой объект» и «Скрыть целевой объект», когда необходимо реплицировать общую работу меню веб-сайта. Посетитель может нажать любую из ссылок или отвести курсор за пределы окна, чтобы скрыть его. Когда этот параметр включен, не нужно нажимать кнопку «Закрыть», чтобы скрыть подменю.
Эта функция доступна при работе со следующими виджета раздела «Композиции»:
Панель «Параметры» содержит два параметра для отображения целевого контейнера:
- При нажатии: целевые объекты отображаются при нажатии на них пользователем
- При наведении курсора: целевые объекты отображаются при наведении на них курсора пользователем
Вы также можете скрыть целевой контейнер в виджете «Композиция». Далее представлено четыре способа скрыть целевой контейнер:
- Нет
- Кнопка нажата
- После перемещения курсора за пределы области
- После перемещения курсора за пределы триггера и целевого объекта
Из следующего раздела вы узнаете, как использовать действие «При наведении курсора» для отображения целевого контейнера и действие при перемещении курсора за пределы контейнеров триггера и целевого объекта, чтобы скрыть целевой контейнер.
Выполните следующие действия, чтобы включить для виджета раздела «Композиции» параметр «Скрывать после отведения курсора» для создания строки меню, подменю которой отображаются и скрываются в зависимости от действий посетителя.
В режиме «Дизайн» добавьте на страницу виджет «Композиция с лайтбоксом», перетащив его из библиотеки виджетов.
Узнайте, как добавлять и настраивать меню для сайта Adobe Muse. Узнайте, как создавать мобильные меню, состояния при наведении курсора и редактировать метки меню.
Навигация — один из важнейших аспектов, который необходимо учитывать при создании веб-сайта. При разработке веб-сайта особое значение имеют тип и размещение навигационных элементов. Меню и навигационные элементы сайта могут повысить удобство работы с сайтом или сделать его менее удобным.
Adobe Muse позволяет быстро создавать системы навигации сайта с помощью виджетов «Меню». Несмотря на то что пользователь может вручную создавать ссылки, связывающие страницы, виджеты «Меню» предоставляют гибкий и удобный механизм для добавления
навигационных элементов на сайт. Как и при работе с другими виджетами, достаточно просто перетащить виджет «Меню» на страницу, чтобы добавить нужные меню. При этом метки меню, совпадающие с названием страницы, заполняются автоматически. При изменении названия страницы в режиме просмотра «План» метки меню обновляются автоматически.
Можно добавлять вертикальные или горизонтальные меню. Кроме того, в Adobe Muse можно создавать сэндвич-меню и состояния при наведении курсора для пунктов меню. Ниже представлены подробные сведения об этих возможностях Adobe Muse.
В представлении Дизайн откройте страницу-шаблон для редактирования, а затем откройте библиотеку виджетов . Если она еще не открыта, выберите Окно > Библиотека виджетов .
На панели библиотеки виджетов нажмите раздел Меню , чтобы развернуть список виджетов этого типа. В зависимости от дизайна сайта и места размещения меню выберите один из следующих параметров.
- Горизонтальное — для добавления горизонтального меню.
- Вертикальное — для добавления вертикального меню.
С помощью инструмента Выделение перетащите виджет и разместите его в нужном месте на макете. Например, можно разместить виджет «Горизонтальное меню» в области верхнего колонтитула.
Обратите внимание, что в меню автоматически отображаются названия страниц, которые вы создали, в том же порядке, в котором они находятся на карте сайта. Метки меню являются динамическими; они автоматически связаны с соответствующими страницами. Это означает, что при переименовании или перемещении страниц в дальнейшем соответствующие меню обновляются автоматически. Ссылки будут по-прежнему действительными.
Нажмите палитру цветов на панели управления и выберите цвет для меню. Затем в поле Размер текста установите размер текста в меню.
Читайте также: