Как редактировать виджеты в шаблоне AdobeMuse
Приветствую всех посетителей сайта! В прошлом материале мы начали редактирование шаблона Adobe Muse, успели рассмотреть как менять тексты, ссылки, изображение в хедере, слайдер с текстовым содержимым, контактную форму, а сегодня мы будем редактировать виджет галереи.
Виджеты Adobe Muse представляют собой готовые решения для вебмастера, с помощью которых можно сделать сайт интерактивным. При скачивании программы вы в своем арсенале будете иметь стандартную подборку виджетов. Но при желании ее можно расширить за счет виджетов, скачанных в Интернете.
Виджеты для Adobe Muse подобны плагинам к популярному Вордпрессу, легко устанавливаются и здорово упрощают процесс создания и управления сайтом. Как установить новые виджеты в программу плюс большой пак виджетов от профессинальных разработчиков будет выложен в следующей статье, а пока давайте посмотрим, как редактируется виджет галереи в исходном шаблоне.
Сразу скажу, сменить картинки в галерее не так просто, как изображение в хедере. Новичков вводит в ступор конструкция самого виджета, похожая на матрешку. Сами слайды галереи спрятаны внутри, сверху - триггер, под ним - кнопки состояния и все это упаковано в контейнер. Хотя теоретически все звучит запутанно, на практике все отнюдь не сложно, главное уяснить некоторые моменты...
Сделаю небольшое теоретическое отступление, которое поможет новичкам быстрее разобраться в устройстве лайтбокса. В Панели управления левая часть всегда отражает тип выбранного элемента (текст, текстовый фрейм, фрейм изображения, триггер, целевой объект, прямоугольник, композиция, контейнер и т.д.), поэтому ее называют Индикатором выбора.
Всегда смотрите на нее, прежде, чем приступать к редактированию чего-то. Если из элементов ничего не выбрано, там будет по умолчанию отображаться страница. На скриншоте ниже выбран для редактирования текстовый фрейм, то есть фон текста. Напротив типа выбранного элемента указывается его состояние.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla, Adobe Muse - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Затем при желании меняем иконку как обычное изображение, т.е. кликаем по ней и когда в Индикаторе выбора будет Фрейм изображения, щелкаем по ней ПКМ и применяем команду Вырезать. Затем вставляем свою иконку через Файл → Поместить.
После этого переключаемся в следующее состояние "Нажата кнопка мыши" и редактируем фон и иконку там. Точно так же поступаем и с последним состоянием "Активное", после чего проверяем результат в браузере. Все отлично работает, значит редактирование лайтбокса прошло успешно.
Как видите, отредактировать шаблонную галерею вовсе несложно, главное выбрать правильный тип элемента для редактирования, чтобы не нарушить работу виджета. Для этого стоит почаще посматривать на Индикатор выбора, где отображается тип выбранного элемента и его состояние.
В следующем материале рассмотрим установку виджетов и я поделюсь с вами огромным паком профессиональных виджетов для Adobe Muse. Так что не переключайтесь:))
P.S. Начала работу новая рассылка на Смартреспондере, к сожалению, не все контакты из прежнего сервиса удачно перенеслись, поэтому, кто хочет гарантированно получать все новые материалы сайта на свой е-мэйл плюс дополнительные плюшки исключительно для подписчиков, переподпишитесь - оставьте свои координаты в форме ниже.
Для тех, кто еще не оформлял подписок на Смарте, подсказываю, что после того, как вы нажмете кнопку Подписаться, вам в открывшемся окне нужно будет нажать "Прислать письмо", после чего зайти в свою почту, найти письмо от Sayt-s-nulya и щелкнуть по первой ссылке внутри письма. После этого подписка будет активирована и вы станете получать новости сайта на свой е-мэйл. В первом же письме - приятный бонус, не пропустите:))
Всем удачи и до новых встреч! С ув. Светлана (SvetLana_TSV)
Всем желаю успеха и до новых встреч! С ув. Светлана (SvetLana_TSV).
Вот так просто и быстро мы сменили первое изображение... Но это всего лишь превью и теперь нужно сменить полноразмерное изображение. Чтобы добраться до него, нам потребуется зайти в настройки виджета. Для этого кликаем два раза по первому превью, которое только что сменили и видим, что рядом с его правым верхним углом появилась синяя кнопочка. Щелкаем по ней и в открывшемся окне настроек ставим галочку напротив пункта "Показать элементы лайтбокса при редактировании".
Как только мы поставим галочку, сразу же появится полноразмерное изображение на рабочем поле. Оно размещено на фиолетовом фоне - это основной цвет палитры данного шаблона, поэтому почти все элементы дизайна выдержаны в этом цвете. Но это легко поправимо и в ходе редактирования мы можем сменить цвет фоновой подложки на любой другой.
По умолчанию оно Стандартное, но кликнув на кнопку раскрывающегося списка вы увидите еще три дополнительных состояния. Большинство элементов редактируется при Стандартном состоянии, но есть и такие, которые требуют выбора других состояний. В процессе редактирования лайтбокса мы столкнемся с одним из таких элементов.
И еще один момент, который стоит уяснить раз и навсегда. При наведении курсора на любой объект всегда появляется подсказка, какой элемент будет открыт для редактирования при клике. Например, в нашем шаблоне на главной странице есть небольшой лайтбокс из 4 фотографий. Если навести курсор на галерею, то появится подсказка "Композиция".
А уже писала в прошлой статье, что при клике на любой объект в шаблоне Adobe Muse появляется подсказка. Вот именно за ней и нужно внимательно следить, чтобы пробраться к нужному элементу. Для начала давайте откроем настройки виджета галереи, для этого кликнем по галерее и справа появится синяя кнопка для вызова окна настроек.
В окне настроек поставим галочку напротив пункта "Показать элементы лайтбокса при редактировании".
Если кликнуть по Композиции в любом месте, она выделится синей рамкой и станет доступной для редактирования. При этом в Индикаторе выбора появится тип элемента "Композиция".
Композиция в данном примере играет роль самой большой матрешки, в которую спрятаны еще несколько. Открываем ее одиночным кликом, появляется подсказка "Триггер" - это вторая матрешка, но нам она тоже не нужна, открываем ее тоже одиночным кликом по первому фото и подсказка меняется на "Кнопку состояния". Вот это то, что нам нужно...
Кликаем еще раз по первому фото, чтобы активировать Кнопку состояния, проверяем, чтобы в Индикаторе выбора была указана именно Кнопка состояния. Если так и есть, можно приступить к замене картинок галереи на свои. В Панели управления мы видим, что в Заливке отображается не цвет, а мизерная миниатюра первого фото, значит мы на верном пути.
Щелкаем по самому слову Заливка, чтобы раскрыть дополнительные параметры и в появившемся окошке напротив пункта Изображение выбираем значок папки.
При этом откроется окно Импорта, где мы на своем компьютере выбираем нужное изображение вместо исходной картинки. Щелкаем "Открыть" и картинка автоматически подгоняется по размерам и становится на место исходной, как там и была.
Полноразмерное изображение тоже похоже на матрешку. Если мы щелкнем по фото один раз, то откроем для редактирования самую большую матрешку под названием Контейнер. Именно здесь мы можем изменить цвет фона. Идем в Панели управления в Заливку и щелкнув по фиолетовому квадратику напротив выбираем в цветовой палитре новый цвет.
Если же требуется изменить не только цвет, но и, например, непрозрачность или сделать фон градиентным, то щелкаем по слову Заливка и в дополнительных параметрах меняем настройки на нужные.
Можно, конечно, совсем убрать фоновую подложку, но я не рекомендую, так как затемнение страницы, пусть даже фиолетовым цветом, позволяет сконцентрировать внимание на просмотре именно изображения, а не тех фрагментов содержимого страницы, которые из-за него выглядывают.
Правда, с цветом подложки лучше поэкспериментировать, возможно, стандартный для лайтбоксов черный цвет, будет смотреться привычнее, но это дело вкуса. Убрать фон можно зайдя в цветовую палитру и выбрав там первый образец белого цвета с красной диагональной линией.
Итак, цвет фона сменили, можно переходить непосредственно к самому изображению. Щелкаем по нему один раз, открывается для редактирования Целевой объект, его не трогаем, щелкаем еще раз, пока на Индикаторе выбора не появится надпись Прямоугольник. Щелкать нужно именно по фото, а не по фону.
Когда активирован Прямоугольник, то в Заливке мы меняем исходное фото точно таким же образом, как меняли превью. Повторим еще раз: щелкаем по слову Заливка и в окне параметров выбираем значок папки напротив пункта Изображение. Кликнув по нему, в окне Импорта выбираем нужную картинку и после нажатия на кнопку "Открыть" в том же окне, изображение автоматически заменяется и подгоняется по размеру.
Описание картинки, которое под фото, редактируется как и любой текст, двойным кликом по тексту открываете его для редактирования, удаляете исходный текст, вписываете свой. В случае, если описание вам не нужно, кликаете по тексту ПКМ и выбираете команду Вырезать - текст удаляется.
Теперь, чтобы заполнить пустующее место, где размещалось описание, кликаете по фото и когда в Индикаторе выбора появится Прямоугольник, изображение будет выделено синей рамочкой с маркерами. Останется лишь потянуть за нижний центральный маркер, чтобы увеличить именно внизу область видимости фото.
В случае, если вы планируете убрать описание, картинки заранее нужно подобрать по высоте больше, чем исходное изображение. Тогда они не будут растягиваться, а просто увеличится область просмотра, которая до этого была скрыта текстовым фреймом.
Теперь, чтобы закрыть отредактированное полноразмерное изображение, кликаем по синей кнопочке возле верхнего правого угла и в настройках убираем галочку напротив пункта "Показать элементы лайтбокса при редактировании". Мы снова вернулись к нашей галерее и теперь поочередно меняем превью и полноразмерные фото для оставшихся трех слайдов.
На практике это занимает не больше пяти минут, главное всегда следить за подсказками в Индикаторе выбора, чтобы ничего не нарушить в работе виджета. После замены каждого превью и соответствующего ему полноразмерного фото рекомендую просматривать результат в браузере. Если все работает и при наведении на превью открывается большое фото, можно продолжать редактирование остальных слайдов.
Когда все фото заменены, переходим на третью страницу шаблона, где размещена еще одна галерея. В этом лайтбоксе есть один эффект - при наведении курсора на фото появляется фиолетовая полоса с иконкой лупы посередине, нажав на которую открывается полноразмерное изображение.
Если вы хотите оставить данный эффект, то нужно знать как его отредактировать, ведь фиолетовый фон под иконкой навряд ли впишется в дизайн вашего будущего сайта.
Сразу скажу, что замена картинок в этой галерее ничем не отличается от предыдущей, все те же действия... А вот чтобы подкорректировать эффект при наведении, нужно поступить немного иначе.
Итак, кликаем по фиолетовой области на фото и когда появится в Индикаторе выбора Прямоугольник, а сама область будет выделена синей рамкой с маркерами, меняем состояние Прямоугольника со "Стандартного" сначала на "Курсор над кнопкой". Затем идем в Заливку и меняем цвет фона на нужный.
Не забудь заглянуть в свою почту и подтвердить подписку!