Уебсайт на Wix от Scratch - Grid Gallery

• Април 29, 2024

В този урок ще добавим галерия към нашия уебсайт Wix, която сме създали от празен шаблон. Започвайки от нулата е чудесен начин да научите основите.

За разлика от шаблоните на Wix, които не са взаимозаменяеми, можете да превключвате типовете галерии за нов поглед по всяко време. Съществуват много видове галерии, от решетка за зидария до пчелна пита. Всяка галерия има свои особености. Нека разгледаме основната галерия на Grid (портрет).

1. Щракнете върху иконата Plus в лявото меню и изберете Галерия от списъка.
   
   
2. Задръжте курсора на мишката над всяка миниатюра на галерията, за да видите преглед и описание.
   
   
3. Сега плъзнете галерията на Grid към страницата.
   
   
4. Използвайте дръжките за промяна на размера, за да промените размера на решетката, както желаете. Преоразмерих решетката до ширината от 980 страници.
   
   В този момент галерията има някои изображения на заместители. Нека да ги запазим за сега и да работим върху персонализирането на настройките на галерията за нашите нужди.
   
   Настройки на галерията на мрежата
   
   Мащабиране на изображението - Имате възможност вашето изображение да бъде изрязано или мащабирано, за да се вмести в рамката. Настройката Autocrop автоматично изрязва изображенията, за да се поберат в рамката, а опцията Fit ще преоразмери изображението, за да се вмести в рамката.
   
   Когато кликнете - имате три опции за това какво се случва при щракване върху изображение на галерия. Една възможност да не се случи нищо. Второто е изображението да бъде отворено като изскачащо. Третото е да отворите връзка. През повечето време изскачащият прозорец е добър избор, тъй като изображението се показва в по-голям размер. Но ако искате да изпратите посетителя на друга страница, използвайте опцията A Link Opens.
   
   
5. Изберете Галерията и щракнете върху иконата Настройка в изскачащото меню.
   
   
6. В прозореца Настройки на мрежата намерете секцията Как се държат изображенията. Изберете Autocrop или Fit.
   
   
7. В секцията Когато кликнете, задайте една от трите опции.
   
   Галерия Дизайн
   
   Както бе споменато по-горе, можете да превключвате дизайна на галерията по всяко време. Но нека продължим, като персонализираме дизайна на мрежата си. За дизайна на решетката можем да персонализираме рамката, ъглите, сянката и текста.
   
   
8. Когато галерията все още е избрана, щракнете върху иконата за дизайн (четка за боя).
   
   
9. За настройките на Border можем да променим цвета, непрозрачността и ширината на рамката. Нека запазим настройката по подразбиране на ширината, зададена на 0 и следователно без граница.
   
   
10. Corner Radius - Щракнете върху иконата за Corner Radius и задайте радиуса на горния ляв ъгъл, колкото искате. Както иконата на връзката показва, че останалите три ъгъла ще се актуализират, за да съвпаднат.
    
    
11. Shadow - Изберете иконата Shadow. За да добавите падаща сянка, щракнете върху превключване на Активиране на сенките и задайте ъгъл, разстояние, размер, размазване и цвят / непрозрачност за сянката.
    
    
12. Текст - Щракнете върху иконата T, за да зададете опциите за настройките на заглавие, описание и други текстове. Нека променим текста от стандартната към нашата тема за параграф 1 текст. Повторете текста за описание.
    
    Настройки на оформлението
    
    За дизайна на галерията на Grid можем да контролираме броя на колоните и редовете за миниатюрите. Можем също да контролираме разстоянието между миниатюрите и как текстът се показва върху изображението.
    
    
13. Когато галерията все още е избрана, щракнете върху иконата Layout от изскачащото меню.
    
    
14. Използвайте плъзгача, за да зададете броя на колоните и редовете. Добавянето на повече колони и редове ще доведе до по-малки миниатюрни изображения в мрежата.
    
    
15. Можете да използвате плъзгача Spacing, за да увеличите количеството пиксели между миниатюрите. Добавянето на повече място ще намали размера на миниатюрите.
    
    
16. Под плъзгачите се намира секцията за подравняване на текста. Имате възможност текста да се показва наляво, надясно или в центъра.
    
    

Снимки на екрана, използвани с разрешение на Wix.com, Inc.

Инструкции Видео: Oxxy Website Builder - Official Demo Video (Април 2024).