• 0k
  • 0
Веб-дизайн \ 18 Март 2014

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

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

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

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

Шаблон Close Up HTML

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

Для начала добавляем бокс

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

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

Выберите галерею Animated Grid

  • Растяните галерею, чтобы закрыть область бокса.
  • Чтобы изменить вид галереи, нажмите на нее и выберите Настройки.
  • Измените число колонок и рядов по желанию.
  • Назначьте ширину полей от 0 до 10, чтобы добавить пространства между изображениями.
  • В Переходах выберите По вертикали.

Выберите вертикальный переход

  • Измените длительность по вашему желанию (минимальное значение – 5).
  • Мы советуем использовать функции Показать кнопку Autoplay и Показать кнопки навигации.
  • Под надписью Нажав на изображение выберите желаемое действие (мы советуем опцию Войти в увеличенный режим).

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

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

 

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

Добавьте фотографии в галерею

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

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

Кликните, чтобы увидеть галерею в действии

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


Оставайтесь в курсе
новинок блога

Подпишитесь на блог и не пропустите ни одной статьи!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Давайте дружить \ 

Подпишитесь на нашу рассылку и получайте
новые статьи блога прямо себе на почту.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email