Добавяне, преместване на секции и влачене на размери

Модул 3: Текстове, снимки и секции · Време за четене: 10 минути

Цел на урока: След този урок ще можете да изграждате страница от секции. Ще можете да добавяте секция чрез панела за избор или чрез чата, да я премествате, копирате и премахвате и да влачите разстояния и размери. Ще можете също да избирате за всяка секция колони, ъгли, фон и видимост на мобилни устройства.

Основни понятия: секция, Секции, Добавяне на секция, форма, Секция отдолу, три дизайна, Създайте с AI, Редактиране на секцията, Разстояние, Разстояние между елементите, Колони, Ъгли, Скрий на мобилен, дръжка, Собствен HTML

Страницата е купчина от секции

Всяка страница на Вашия сайт се състои от секции: хоризонтални ивици, подредени една под друга. Най-горе обикновено има Начален блок (голямото начало със заглавие, текст и бутон). Под него идват например Карти с Вашите услуги, Отзиви и Работно време, а най-долу е Контакт. Конструкторът има 35 вида секции, всяка в една или повече форми: едно и също съдържание с различно оформление.

Който мисли по този начин, изгражда по-добра страница. Поставете най-важната информация най-горе, по една тема на секция, и завършете с това, което посетителят трябва да направи (да се обади, да изпрати имейл, да поиска оферта). При Schildersbedrijf Example началната страница изглежда така: Начален блок с "Поискайте оферта", Карти с три услуги, Снимка и текст за начина на работа, Отзиви, Въпроси и Контакт.

Добавяне на секция: три начина

1. Сами избирате в панела за избор (безплатно)

Отворете панела Секции в страничната лента или щракнете в прегледа върху Секция отдолу. Този бутон се намира в лентата с инструменти на избрана секция и върху линията с +, която се появява, когато минете с мишката между две секции. Под прегледа има и бутон Добавяне на секция.

Панелът за избор показва видовете по групи: Популярни, Начало и заглавна част, Текст и история, Услуги и продукти, Цени и промоции, Доверие и екип, Снимки и видео, Практическа информация, Контакт и призив за действие и Собствени и уиджети. Има и поле за търсене ("Търсете, например отзиви, цени или екип"). Всеки вид виждате като пример във Вашия собствен фирмен стил. Щракнете върху вид, за да видите формите, и изберете една с Добавяне. Ако не сте стигнали дотук от определена секция, конструкторът пита "Къде да бъде поставен(а) ...?": щракнете върху зелена линия в страницата или изберете Най-горе или Най-долу. Можете също да плъзнете елемент директно от панела в страницата си.

Това не струва нищо. Новата секция идва с примерни текстове, които след това променяте сами (урок 3.2) или оставяте AI да попълни (урок 3.1). Важно: докато на сайта Ви има такъв примерен текст, конструкторът не публикува сайта онлайн. Тогава ще видите съобщението "На сайта Ви все още има примерен текст. Първо го попълнете или премахнете секцията."

2. Питате в чата: три дизайна

Ако напишете в чата "Искам секция с начина ни на работа в четири стъпки", AI първо показва три подходящи дизайна от библиотеката със секции, във Вашия фирмен стил. Избирате с Този дизайн или щракате върху Оставете AI да избере. След това AI попълва секцията със съдържание като предложение. Тъй като се добавя секция, това струва 2 редакции.

Ако кажете, че нещо трябва да отиде в съществуваща секция ("сложете работното време в блока за контакт"), или споменете услуга като Spotify или Calendly с връзка, конструкторът пропуска трите дизайна: тогава е ясно какво искате.

3. Оставяте AI да създаде собствен елемент

Това, което търсите, го няма? Най-горе в панела за избор има Създайте своя секция с AI. Опишете какво трябва да могат да правят посетителите, например калкулатор на цени или кратък тест, и щракнете върху Създайте с AI. Това струва 2 редакции, защото се добавя нов елемент.

Преместване, копиране и премахване

Минете с мишката над секция. Появява се лента с инструменти с Промяна с AI, Нагоре, Надолу, Дублиране, Секция отдолу и Изтриване, както и дръжка, с която да плъзнете секцията ("Плъзнете тази секция на друго място"). При Изтриване конструкторът първо пита "Сигурни ли сте?". Можете да плъзгате, дублирате и премахвате и отделни елементи в даден ред, например една карта или един отзив.

Всички тези бутони са безплатни. Всяко действие създава нова версия ("Секцията е преместена (версия ...)"), така че погрешно изтрита секция връщате чрез Версии (урок 3.5). Премахването чрез задача в чата обаче струва редакция: затова използвайте бутона.

Влачене на размери

Минете с мишката в прегледа над секция, снимка или текст и ще се появят дръжки. Влаченето е безплатно и без AI:

• Долният ръб на секция: повече или по-малко разстояние над и под секцията.
• Начален блок: по-висок или по-нисък.
• Снимка: по-широка или по-тясна, по-висока или по-плоска (формата), по-заоблени или по-прави ъгли и фокусната точка (урок 3.3).
• Текстов блок: по-широк или по-тесен (десният ръб).
• Заглавие: по-голямо или по-малко и разстоянието под него.
• Ред от карти или колони: ширината на целия ред.

Щракнете два пъти върху дръжка и размерът по подразбиране се връща; при началния блок конструкторът тогава сам избира височината отново.

Защо влаченето е по-добро от молбата "направете го по-голямо": веднага виждате какво става, не струва нищо и AI не променя текста междувременно.

Редактиране на секцията: настройките на една секция

Щракнете върху секция и изберете Редактиране на секцията. Отваря се прозорец с:

Отдолу са същите бутони като в лентата с инструменти (Нагоре, Надолу, Дублиране, Секция отдолу, Изтриване), а под "Или попитайте AI за нещо друго:" има текстово поле за задача към AI, която засяга само тази секция.

Няколко съвета. Редувайте фоновете (светъл панел, без, нюанс), за да виждат посетителите къде свършва една тема. При ред от карти използвайте най-много три или четири колони; на телефон те така или иначе се подреждат една под друга. Бъдете пестеливи със Скрий на мобилен: никога не скривайте данните си за контакт или нещо, от което посетителят на мобилно устройство се нуждае. Ако искате да проверите как изглежда, изберете Мобилен в горната лента.

Собствен HTML

В групата Собствени и уиджети има и Собствен HTML: секция, в която сами поставяте HTML и, ако желаете, CSS. След поставянето я променяте с Редактиране на HTML върху секцията. Цветовете и шрифтовете следват Вашия фирмен стил чрез променливи като var(--acc), var(--tekst) и var(--kop-font). CSS важи само за тази секция.

Ограниченията са умишлени: скриптове, iframes и формуляри не работят тук. За плейър, календар, карта или формуляр от друга услуга използвайте Уиджет (урок 4.3). Собствен HTML е за тези, които познават HTML; за всички останали обикновените секции и AI са по-бързият път.

Капани

• Оставен примерен текст в секция от панела за избор: тогава не можете да публикувате онлайн.
• Твърде много секции. Дълга страница с десет секции не се чете. Премахнете това, което не добавя нищо. Една страница може да има най-много 40 секции, но толкова никога няма да Ви трябват.
• Настройване на разстояния чрез чата. Това струва редакции и е по-неточно от влаченето.
• Проверка само на компютъра. Колоните, разстоянията и скриването работят различно на телефон.
• Премахване чрез чата, докато бутонът Изтриване е безплатен.

В конструктора: ето как става

1. Щракнете в прегледа върху Секция отдолу или отворете Секции.
2. Изберете група, вид и форма и щракнете върху Добавяне.
3. Заменете примерните текстове сами или с помощта на AI.
4. Преместете с Нагоре, Надолу или с дръжката; дублирайте или изтрийте чрез лентата с инструменти.
5. Влачете долния ръб за разстояние; щракнете два пъти, за да се върнете към стойността по подразбиране.
6. Отворете Редактиране на секцията за фон, колони, ъгли, височина на началния блок и Скрий на мобилен.
7. Проверете в изглед Мобилен.

Обобщение

• Страницата е купчина от секции; 35 вида, всеки в една или повече форми.
• Добавянето чрез панела за избор е безплатно и дава примерен текст, който трябва да замените, преди да публикувате онлайн; чрез чата получавате три дизайна и това струва 2 редакции.
• Преместването, дублирането, премахването и влаченето на размери са безплатни; двойно щракване върху дръжка връща стойността по подразбиране.
• Редактиране на секцията управлява фон, разстояние, разстояние между елементите, колони, ъгли, височина на началния блок и Скрий на мобилен.
• Собствен HTML е възможен, но без скриптове, iframes и формуляри; за тях е уиджетът.

Тест

Задача

Задача D3.4: Една секция повече, една по-малко. Подобрете структурата на началната си страница с бутоните и дръжките, без излишни задачи към AI.

Контролен списък:

• [ ] записали сте секциите на началната си страница отгоре надолу;
• [ ] добавили сте една секция чрез панела за избор и сте заменили целия примерен текст;
• [ ] премахнали или обединили сте една секция, която не добавяше нищо, с Изтриване;
• [ ] преместили сте една секция с Нагоре, Надолу или с дръжката;
• [ ] изтеглили сте разстоянието на поне една секция и веднъж сте го върнали с двойно щракване;
• [ ] в Редактиране на секцията сте променили фона или колоните;
• [ ] прегледали сте страницата в изглед Мобилен.

Въпроси:

1. Как изглеждаше редът на секциите Ви преди и след промяната и защо избрахте този ред?
2. Коя секция премахнахте и какво сега не липсва на посетителя?
3. Колко редакции Ви струваше тази задача и коя стъпка би струвала редакции, ако я бяхте направили чрез чата?

След "готово" ще видите примерен отговор: от Начален блок, Цифри, Карти, Отзиви, Контакт към Начален блок, Карти, Снимка и текст (начин на работа), Отзиви, Въпроси, Контакт, така че услугите да са веднага под началото; секцията Цифри е премахната, защото цифрите бяха измислени; задачата струваше 0 редакции, докато премахването или нова секция чрез чата щяха да струват 1 или 2.

Прочетете още

• Безплатен курс Видимост онлайн 3.2: Заглавия и структура на страницата
• Безплатен курс Видимост онлайн 4.2: Първо мобилното и viewport
• Sitebuilder и AI Builder: кой да изберете и как да го отворите?