Веб-сайт Wix с нуля - Grid Gallery

• May 19, 2024

В этом уроке мы добавим галерею на наш сайт Wix, которую мы создали из пустого шаблона. Начинать с нуля - отличный способ изучить основы.

В отличие от шаблонов Wix, которые не являются взаимозаменяемыми, вы можете в любое время переключать типы галерей для нового вида. Есть много типов галерей, от сетки масонства до Сота. Каждая галерея имеет свои особенности. Давайте посмотрим на основную сетку (портретная) галерея.

1. Нажмите значок «Плюс» в левом меню и выберите «Галерея» из списка.
   
   
2. Наведите курсор на каждую иконку галереи, чтобы увидеть предварительный просмотр и описание.
   
   
3. Теперь перетащите галерею Grid на страницу.
   
   
4. Используйте ручки изменения размера, чтобы изменить размер сетки, как вы хотите. Я изменил размер сетки до 980 ширины страницы.
   
   На данный момент в галерее есть несколько изображений-заполнителей. Давайте пока оставим их и поработаем над настройкой параметров галереи для наших нужд.
   
   Настройки Grid Gallery
   
   Масштабирование изображения - у вас есть возможность обрезать или масштабировать изображение, чтобы оно поместилось в рамке. Параметр «Автообрезка» автоматически обрезает изображения по размеру рамки, а параметр «По размеру» изменяет размер изображения по размеру рамки.
   
   При нажатии - у вас есть три варианта того, что происходит при нажатии на изображение галереи. Один из вариантов, чтобы ничего не произошло. Второе - открыть изображение как всплывающее окно. Третий - открыть ссылку. В большинстве случаев всплывающее окно является хорошим выбором, потому что изображение отображается в большем размере. Но если вы хотите отправить посетителя на другую страницу, используйте опцию A Link Opens.
   
   
5. Выберите галерею и нажмите значок настройки во всплывающем меню.
   
   
6. В окне «Параметры сетки» найдите раздел «Как ведут себя изображения». Выберите Autocrop или Fit.
   
   
7. В разделе «При нажатии» выберите один из трех параметров.
   
   Галерея Дизайн
   
   Как уже упоминалось выше, вы можете переключать галереи в любое время. Но давайте продолжим, настроив наш дизайн сетки. Для дизайна сетки мы можем настроить границы, углы, тени и текст.
   
   
8. Когда галерея еще выбрана, щелкните значок «Дизайн» (кисть).
   
   
9. Для настроек границы мы можем изменить цвет, прозрачность и ширину границы. Давайте сохраним значение по умолчанию для ширины, равное 0, и, следовательно, без границ.
   
   
10. Угловой радиус - Нажмите на иконку для Углового радиуса и установите верхний левый угловой радиус, как вам нравится. Поскольку значок ссылки указывает на то, что остальные три угла обновятся, чтобы соответствовать.
    
    
11. Shadow - выберите значок Shadow. Чтобы добавить тень, щелкните переключатель «Включить тень» и установите для нее угол, расстояние, размер, размытие и цвет / непрозрачность.
    
    
12. Текст - щелкните значок T, чтобы задать параметры для заголовка, описания и других параметров текста. Давайте изменим текст по умолчанию на нашу текстовую тему в пункте 1. Повторите для текста описания.
    
    Настройки макета
    
    Для дизайна галереи Grid мы можем контролировать количество столбцов и строк для миниатюр. Мы также можем контролировать расстояние между миниатюрами и способ отображения текста на изображении.
    
    
13. Когда галерея еще выбрана, щелкните значок «Макет» во всплывающем меню.
    
    
14. Используйте ползунок, чтобы установить количество столбцов и строк. Добавление большего количества столбцов и строк приведет к уменьшению уменьшенных изображений в сетке.
    
    
15. Вы можете использовать ползунок «Интервал», чтобы увеличить количество пикселей между миниатюрами. Добавление большего пространства уменьшит размер миниатюр.
    
    
16. Под ползунками находится раздел выравнивания текста. У вас есть возможность для отображения текста влево, вправо или по центру.
    
    

Скриншоты, используемые с разрешения Wix.com, Inc.

Видео инструкция: Wix.com | Collections (May 2024).