18 мар. 2014 г.2 мин.

«Сделай сам» с Wix: анимированная галерея изображений

Пару дней назад мы наткнулись на потрясающий сайт, созданный при помощи Wix для Лос-Анджелесского цирка-театра Le Tigre Tent. Нас особенно впечатлило использование анимированной галереи на главной странице — оригинальная демонстрация изображений оживляет весь сайт, привлекая внимание посетителей буквально с первой секунды.

Этот вид галереи известен далеко не всем пользователям Wix, но при этом его очень просто добавить. Мы хотим вам показать, как добавить анимированную галерею на сайт, совершив несколько простых манипуляций. Вы можете поместить галерею на каждой странице, но она произведет гораздо большее впечатление на ваших посетителей, если будет помещена на главную.

В качестве примера мы используем шаблон Close Up HTML, но вы можете сделать то же самое на основе любого шаблона Wix.

  • Выберите место, куда вы хотите поместить галерею и очистите его от лишних элементов.
     

  • Добавьте бокс, чтобы задать границы вашей галереи. Нажмите Добавить > Формы и линии > Бокс.

  • Растяните бокс так, чтобы он закрыл область, выделенную под галерею.Кликните на бокс, а затем на
     

  • Изменить стиль, чтобы редактировать его – поменять цвета, добавить тени и т.д.

  • Теперь добавьте саму галерею. Нажмите Добавить > Галерея и прокрутите вниз до опции Аnimated Grid.

  • Растяните галерею, чтобы закрыть область бокса.
     

  • Чтобы изменить вид галереи, нажмите на нее и выберите Настройки.
     

  • Измените число колонок и рядов по желанию.
     

  • Назначьте ширину полей от 0 до 10, чтобы добавить пространства между изображениями.
     

  • В Переходах выберите По вертикали.

  • Измените длительность по вашему желанию (минимальное значение – 5).
     

  • Мы советуем использовать функции Показать кнопку Autoplay и Показать кнопки навигации.
     

  • Под надписью Нажав на изображение выберите желаемое действие (мы советуем опцию Войти в увеличенный режим).

  • Нажмите на Изменить стиль, чтобы настроить дизайн галереи: фон, текст при наводе курсора и т.д.

  • Теперь вернитесь в галерею, кликните по ней и выберите Организовать фото.

  • Нажмите Добавить Фото и выберите фотографии из вашего архива, бесплатной коллекции фотографий Wix или с вашего компьютера.

  • Вы можете добавить название и описание к своим фотографиям; стрелки слева позволят изменить порядок фотографий в галерее. Сколько фотографий стоит добавить в галерею будет зависеть от количества колонок и строк. Если у вас галерея 3х3, вам нужно добавить как минимум 27 снимков, чтобы разнообразить ее.
     

  • Теперь, когда все фотографии готовы, нажмите Сохранить и Предпросмотр, чтобы убедиться, что все выглядит именно так, как вы хотите. Вы можете изменить скорость смены изображений, расширить границы и поменять порядок фотографий.

Вот, что мы получили в результате:

Вот и всё, вы успешно добавили анимированную галерею изображений на ваш сайт.

#анимированнаягалерея #галереяизображений #пошаговаяинструкция #сделайсам