Веб-сайт від Scratch - Grid Gallery

• Може 4, 2024

У цьому підручнику ми додамо галерею на наш веб-сайт Wix, яку ми створили з порожнього шаблону. Починаючи з нуля - це чудовий спосіб засвоїти ази.

На відміну від шаблонів Wix, які не взаємозамінні, ви можете будь-коли перемикати типи галереї для нового вигляду. Існує багато типів галерей - від кладки сітки до соти. Кожна галерея має свої особливості. Заглянемо в основну галерею Сітки (портрет).

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

Знімки екрана, використовувані з дозволу Wix.com, Inc.

Відео Інструкція: How To Make Website Using HTML CSS | Start To End | Step By Step Tutorial (Може 2024).