Преди изграждането на уебсайт изглеждаше като проект, за който трябва да наемете някого. Вече не е така.
Използвам Hostinger Website Builder, и в това ръководство ще ви проведа през целия процес стъпка по стъпка — от момента, в който влезете в системата, до момента, в който сайтът ви стане достъпен онлайн.
Нека да започнем.
Какво представлява Hostinger Website Builder?
Hostinger Website Builder е AI-задвижван конструктор на уебсайтове с плъзгане и пускане, вграден директно във вашия акаунт в Hostinger.
Не е необходимо да инсталирате нищо, не трябва да знаете кодиране и не се нуждаете от дизайнерски опит. Описвате какво искате, AI създава пълен уебсайт за вас и след това го персонализирате, за да съответства на вашата марка.
Това е един от най-бързите начини да преминете от нищо до напълно работещ, професионално изглеждащ уебсайт.
Стъпка 1: Влезте и отидете до конструктора
Когато влезете в акаунта си в Hostinger, попадате в hPanel. Това е основното табло за управление на Hostinger и тук управлявате всичко — вашите уебсайтове, домейни, имейли и фактуриране.
В лявото странично меню ще видите списък с навигационни опции. Кликнете върху Websites. Под него ще се появи малко падащо меню с две опции: Websites list и Migrations. Кликнете върху Websites list.
Сега сте на страницата Websites list, която показва всички уебсайтове, свързани с вашия акаунт.
В горния десен ъгъл на страницата ще видите лилавия бутон + Add website. Кликнете върху него.
Появява се малко падащо меню с четири опции:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- И персонализиран PHP/HTML уебсайт
Трябва да кликнете върху Hostinger Website Builder, който е описан като “AI-задвижван конструктор на уебсайтове с плъзгане и пускане”.
Стъпка 2: Опишете сайта си на AI
След като изберете Hostinger Website Builder, ще бъдете отведени до екран за настройка с заглавие “Нека AI създаде вашето онлайн присъствие.”
Тук казвате на AI какъв сайт искате да създадете.
Ще видите голямо текстово поле с водещ текст “Опишете своя уебсайт или бизнес.” Това е полето за вашата подсказка, а това, което напишете тук, определя всичко, което AI генерира за вас. Колкото повече подробности дадете, толкова по-добър ще е резултатът.
Под текстовото поле ще забележите ред бързи подсказки. Те включват опции като “Създайте бизнес уебсайт”, “Създайте онлайн магазин”, “Създайте портфолио”, “Стартирайте уебсайт за резервации”, “Започнете блог”, “Стартирайте сайт за ресторант” и “Създайте едностраничен сайт”.
Кликването върху някоя от тях попълва начална подсказка, която след това можете да редактирате и разширите.
В долната част на екрана ще видите два допълнителни линка: Готови шаблони и Уебсайт за линк в био.
Ако предпочитате да пропуснете AI и да разгледате съществуващи дизайни, кликнете върху Готови шаблони.
Ако имате нужда само от прост едностраничен сайт за профилите си в социалните мрежи, опцията Уебсайт за линк в био си заслужава вниманието.
За повечето хора, които създават истински уебсайт, обаче, полето за AI подсказка е правилното място за начало.
Как да напишете добра AI подсказка
Това е най-важната част от целия процес. Мислете за AI подсказката като бриф, който давате на дизайнер. Колкото по-ясно комуникирате визията си, толкова по-близък до желанията ви ще бъде резултатът.
Ето подсказката, която използвах за това ръководство. Създавах уебсайт за креативна агенция:
“Създайте модерен, професионален уебсайт за креативна агенция, предлагаща услуги по брандинг, графичен дизайн, уеб дизайн и дигитален маркетинг. Сайтът трябва да изглежда креативен, дръзък и надежден, като същевременно остане чист и лесен за навигация. Използвайте модерен макет със силна визуализация, добра разредка и стилна типография. Включете следните страници: Home, About, Services, Portfolio, Blog и Contact. На началната страница добавете hero секция с мощен заглавен текст, кратко описание, фокусирано върху стойността, и ясна бутон призив за действие, като ‘Start Your Project’ или ‘Get a Quote’. Напишете прост, убедителен текст, който обяснява какво правим, на кого помагаме и резултатите, които постигаме. Направете сайта мобилно-приятелски, бърз за зареждане и оптимизиран за базово SEO.”
Обърнете внимание колко е конкретна. Тя обхваща индустрията, тона, стила на оформление, необходимите страници, структурата на началната страница и целите на съдържанието. Такова ниво на детайлност дава на AI здрава основа за работа.
След като въведете описанието си, ще забележите, че в горния десен ъгъл на текстовото поле се появява бутон “Подобрете описанието”.
Препоръчвам да кликнете върху него преди да изпратите. AI ще разшири и усъвършенства вашата подсказка, често добавяйки неща, които вие не сте помислили да включите.
Когато сте готови, кликнете върху лилавия бутон със стрелка (иконата за изпращане) в долния десен ъгъл на текстовото поле, за да изпратите подсказката си и да започнете генерирането.
Стъпка 3: Изчакайте AI да създаде сайта ви
След като изпратите подсказката си, AI на Hostinger започва работа веднага. Ще видите анимация за зареждане на цял екран на тъмно лилав фон със съобщение “Търся подходящи изображения…” и индикатор за напредъка, показващ колко е изминал процесът.
Тази фаза обикновено отнема между 30 и 60 секунди. По време на това AI прави доста неща: генерира оформление на страниците, пише текста за вашия сайт, избира подходящи изображения от библиотека със стокови снимки, изгражда навигацията и структурирането на целия сайт според вашата подсказка.
Не затваряйте раздела, докато се зарежда. Просто изчакайте процесът да завърши.
Стъпка 4: Прегледайте това, което AI създаде
Когато AI завърши, ще видите визуализация на новия си уебсайт. Това е екранът с резултата и е наистина вълнуващо да видите какво е генерирано.
Лявата част на екрана показва визуализация в реално време на генерирания сайт. Дясната част показва панел, наречен “Обобщение на вашата идея”, който показва резюме на подсказката, която изпратихте, и бутон “Редактирайте идеята”, ако искате да се върнете и да генерирате отново с различна или обновена подсказка.
В моя случай AI кръсти сайта “BoldCraft Studio” и генерира начална страница със заглавие “Crafting Bold Brands That Shine”, подкрепящо описание и два бутона за призив към действие: “Start Now” и “Get Quote”.
Навигационната лента включваше всичките шест страници, които поисках: Home, About, Services, Portfolio, Blog и Contact.
В горния ляв ъгъл на екрана на визуализацията ще видите и два бутона: Предишни версии, който ви позволява да разгледате алтернативни дизайни, разгледани от AI, и Оценете сайта, който ви позволява да дадете обратна връзка за резултата.
В горния десен ъгъл на визуализацията ще видите икони за превключване между десктоп и мобилен изглед. Използвайте ги, за да проверите как изглежда сайтът ви на телефон, преди да продължите. Добра практика е да направите това рано.
Ако сте доволни от цялостната посока, кликнете върху лилавия бутон Продължете в десния панел. Това ще ви отведе до пълния редактор, където се извършва реалната персонализация.
Ако не сте доволни от резултата, кликнете върху Редактирайте идеята, коригирайте подсказката си и генерирайте отново. Можете да направите това колкото пъти е необходимо.
Стъпка 5: Запознайте се с редактора
Редакторът е мястото, в което ще прекарате по-голямата част от времето си. Когато влезете за първи път, отделете момент, за да разберете оформлението, преди да започнете да кликате насам-натам.
Редакторът има две основни зони:
- Голямата централна зона е платното на вашия уебсайт, където виждате и взаимодействате със сайта си в реално време.
- Тясната вертикална странична лента отляво е вашето контролно табло и съдържа всичко необходимо.
Ето за какво служи всеки елемент в страничната лента:
- Настройки ви дава достъп до основните настройки на сайта, свързания домейн и информация за плана ви.
- Елементи отваря панела с плъзгаеми елементи, където можете да добавяте нови блокове съдържание към всяка страница. Ще разгледам това по-подробно по-късно.
- Страници показва всичките ви страници на едно място. Можете да превключвате между страниците, да добавяте нови, да преименувате съществуващите, да променяте тяхната поръчка или да изтривате ненужните.
- Стилове контролира глобалния дизайн на сайта ви. Тук задавате шрифтове, цветова палитра и стилове на бутони. Всички промени, които направите тук, се прилагат за целия ви сайт, затова това е подходящото място за обхватни дизайнерски решения, а не промяна на нещата по отделни секции.
- AI инструменти ви дава достъп до писателския и съдържателен AI на Hostinger. Можете да го използвате за пренаписване на части от текст, генериране на нов текст и др.
- Блог е мястото, където създавате и управлявате публикации в блога, ако сайтът ви има блог.
- Магазин е мястото, където настройвате онлайн магазина си, ако продавате продукти. Забележете, че eCommerce функциите изискват по-висок план.
- SEO отваря вградения мениджър за SEO, където можете да задавате мета заглавия, описания и други детайли за оптимизация за търсачки за всяка страница.
- Още разширява се в допълнително меню с допълнителни инструменти, включително Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress и Help and Resources.
В горната част на редактора ще намерите и основната лента с инструменти. Отляво надясно тя съдържа: превключвател за преглед на десктоп и мобилен изглед, бутони за отменяне и повторение на действие, бутон Свържете домейн, бутон Преглед и зеления бутон Публикуване.
Стъпка 6: Редактирайте вашето съдържание
Сега идва частта, в която правите сайта свой. Кликнете навсякъде върху платното на сайта, за да започнете редакцията.
Когато задържите курсора върху някоя секция от страницата, в горния ляв ъгъл на тази секция ще се появи син етикет, показващ какъв тип елемент е това, например “Секция” или “Хедър”. В същото време над секцията се появява малка плаваща лента с опции за редакция.
Лентата с инструменти за секции ви предоставя следните контроли отляво надясно: Редактиране на секция отваря панела с настройки на секцията, където можете да променяте фоновото изображение или цвят, да коригирате отстоянията и да модифицирате опциите за оформление.
До него е бутонът Генериране на изображение, който отваря AI генератора на изображения.
След това има икона за дублиране, превключвател за скриване/показване, икона за изтриване, стрелки за преместване нагоре и надолу за пренареждане на секциите и меню с допълнителни опции (три точки).
За да редактирате някакъв текст на страницата, просто кликнете върху него и започнете да пишете. Текстовият елемент ще стане редактируем и ще видите появяващи се контроли за форматиране. Можете да променяте размера на шрифта, дебелината, подравняването и цвета директно от тези контроли.
За да смените изображение, кликнете върху него. Ще видите опции да го замените със снимка от вашите файлове, да разгледате стоковата библиотека на Hostinger или да генерирате ново с AI.
Започнете с редакцията на началната страница, след това използвайте панела Pages, за да преминавате към всяка допълнителна страница и да ги редактирате последователно.
Стъпка 7: Използвайте AI генератора на изображения
Една функция, на която си струва да обърнете внимание, е AI генераторът на изображения, защото е наистина полезен, ако нямате професионални снимки.
За да го достъпите, задръжте курсора върху някоя секция на страницата си и кликнете върху Генериране на изображение в плаващата лента с инструменти за секции. От дясната страна на екрана ще се плъзне панел.
Вътре в панела ще видите текстово поле “Описание на изображението”. Въведете описание на изображението, което искате да създадете.
Колкото по-конкретно и визуално е описанието ви, толкова по-добър ще е резултатът. Панелът показва ограничение от 3000 символа и индикатор за качество в реално време, който ви казва дали описанието е достатъчно силно.
Например, когато въведох “Съвременно работно пространство на креативна агенция, в което дизайнери си сътрудничат около лаптопи и големи екрани, показващи брандинг дизайни, макети на уебсайтове и дигитални произведения на изкуството. Светъл, чист и стилен офис”, панелът показа “Отлично описание!” с напълно запълнени ленти за качество.
Когато сте доволни от описанието си, кликнете върху бутона Създаване на изображения. AI ще генерира набор от изображения, от които можете да избирате.
Едно нещо, което трябва да знаете: AI генераторът на изображения изисква Business план или по-висок. Ако сте на Premium план, ще видите подкана за надграждане в долната част на панела.
Стъпка 8: Добавете нови елементи към всяка страница
Ако искате да добавите блок съдържание, който още не е на страницата ви, кликнете върху Елементи в лявата странична лента. Това отваря панела “Добавяне на елементи”.
Ще видите мрежа с всички налични елементи, включително Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed и Contact form. За да добавите някой от тях към страницата си, хванете го и го пуснете на платното там, където искате да се покаже.
След като е добавен, кликнете върху елемента, за да получите достъп до индивидуалните му настройки и опции за стил.
Този подход с плъзгане и пускане означава, че никога не сте заключени в макета, генериран от AI. Можете свободно да добавяте, премахвате и пренареждате елементи.
Стъпка 9: Управлявайте страниците си
Кликнете върху Страници в лявата странична лента, за да видите всички страници на едно място. Можете да кликнете върху името на всяка страница, за да преминете към нейното редактиране.
За да добавите нова страница, използвайте бутона плюс. За да пренаредите реда в навигацията, плъзнете страниците нагоре или надолу в списъка.
Ако има страници, генерирани от AI, които не ви трябват, можете да ги изтриете оттук. По същия начин, ако имате нужда от страница, която AI не е включил, като Testimonials или Pricing, можете да я добавите тук и след това да я изградите чрез панела Elements.
Стъпка 10: Настройте SEO
Преди да публикувате, трябва да настроите SEO. Това е стъпка, която много хора пропускат, и това е грешка.
Отделянето на 15 минути за правилно попълване на вашите SEO настройки може да има реално значение дали хората ще намерят сайта ви чрез Google.
Кликнете върху SEO в лявата странична лента, за да отворите панела за SEO, озаглавен “Нека ни открият в Google (SEO)”.
Панелът е разделен на две секции. Вляво ще видите списък с всички ваши страници. Вдясно ще видите Преглед на сайта, който показва името на вашия бизнес и езика на сайта. Кликнете върху Редактиране, за да ги актуализирате, ако не са правилни.
Под информацията за сайта ще видите секция, наречена “Някои страници изискват вашето внимание.”
Всяка страница, която се нуждае от работа, е маркирана с оранжева икона за предупреждение. Кликнете върху всяка страница в левия панел, за да отворите нейните индивидуални SEO настройки, където можете да напишете мета заглавие и мета описание за конкретната страница.
Прегледайте всяка страница от списъка. Добро мета заглавие е ясно, съдържа основната ви ключова дума и е под 60 знака. Добро мета описание обобщава съдържанието на страницата и е под 160 знака. Това са текстовите откъси, които се показват в резултатите от търсенето в Google, така че си струва да отделите няколко минути за всяка от тях.
Стъпка 11: Свържете своя домейн
Ако все още не сте свързали персонализиран домейн към сайта си, сега е моментът. Кликнете върху бутона Свържете домейн в горната лента с инструменти на редактора.
Имате две опции. Ако вече притежавате домейн, можете да го свържете, като актуализирате настройките на DNS, за да сочат към сървърите на Hostinger. Ако все още нямате домейн, можете да закупите такъв директно от Hostinger на същия екран.
Докато не свържете домейн, сайтът ви ще бъде достъпен чрез временен поддомейн на Hostinger, например yoursite.builder-preview.com. Това е приемливо за тестове, но ще ви трябва истински домейн, преди да започнете да споделятяте сайта публично.
Стъпка 12: Прегледайте сайта си и го публикувайте
Оставате на крачка от финала. Преди да натиснете публикуване, кликнете върху бутона Преглед в горната дясна лента с инструменти.
Това отваря преглед на цял екран, показващ точно как ще изглежда сайтът ви за посетителите. Превключвайте между десктоп и мобилен изглед чрез иконите в горната част на екрана и проверете дали всичко изглежда коректно и на двата.
Обърнете специално внимание как изглежда hero секцията на началната страница на мобилен, как навигацията се свива и дали някои изображения не са изрязани по начин, който не сте предвидили.
Когато сте доволни от всичко, върнете се в редактора и кликнете върху зеления бутон Публикуване в горния десен ъгъл. Вашият сайт вече е публикуван и достъпен онлайн.
Стъпка 13: Разгледайте интеграциите
След като сайтът ви е онлайн, струва си да разгледате наличните интеграции. Отидете на Още > Интеграции в лявата странична лента.
Панелът Интеграции ви позволява да свържете сайта си с външни инструменти и услуги. Текущите опции включват Shippo за генериране на товарителници и управление на изпълнението на поръчки, Printful за създаване и продажба на персонализирани продукти по поръчка, Hostinger Reach за имейл маркетинг и изпращане на бюлетини до абонатите ви, Google Ads за провеждане на платени рекламни кампании и Custom code, ако искате да добавите собствен HTML, CSS или JavaScript, за да разширите функционалността на сайта си.
За да активирате някоя интеграция, кликнете върху Започнете до нея, следвайте стъпките за свързване и след това актуализирайте сайта си, като го публикувате отново.
Съвети за максимално използване на Hostinger Website Builder
Бъдете щедри с AI подсказката си. Подсказка от две изречения ще ви даде генерален резултат. Подробна, специфична подсказка, която обхваща вашата индустрия, аудитория, дизайнерски предпочитания, структура на страниците и тон на гласа, ще ви даде нещо много по-близко до това, което всъщност искате. Отделете пет минути да напишете правилен бриф и това ще ви спести часове редактиране впоследствие.
Използвайте бутона Подобрете описанието всеки път. Лесно е да го пропуснете, но е наистина полезен. AI често улавя неща, които сте оставили неясни, и ги превръща в конкретни инструкции за дизайн и съдържание.
Редактирайте съдържанието си внимателно. AI генерира прилично временни текстове, но не познава вашия бизнес както вие. Прегледайте всяка страница и пренапишете текста, за да отразява вашите реални услуги, истинската ви стойност и вашия автентичен глас.
Проверете мобилния изглед преди публикация. Hostinger автоматично прави сайта ви адаптивен, но изображенията и разстоянията понякога се нуждаят от леки корекции на по-малки екрани. Винаги преглеждайте в мобилна версия преди публикуване.
Попълнете SEO за всяка страница. Не само за началната страница. Всяка страница на сайта ви заслужава подходящо мета заглавие и описание. Отнема няколко минути на страница и е едно от най-лесните неща, които можете да направите, за да подобрите видимостта си в резултатите от търсенето.
Използвайте Медийната библиотека, за да останете организирани. Под Още > Медийна библиотека можете да качвате и управлявате всички изображения на едно място. Това прави много по-лесно повторното използване на изображения на различни страници и поддържането на консистентност в сайта.
Връщайте се и подобрявайте с времето. Публикацията на сайта не е краят на процеса, а началото. Връщайте се редовно, за да актуализирате съдържанието си, да добавяте нови публикации в блога и да усъвършенствате страниците си, докато бизнесът ви се развива.
Hostinger Website Builder премахва почти всяка бариера, която някога е стояла между вас и професионалния уебсайт. AI върши тежката работа по дизайн и текст, редакторът прави персонализацията лесна, а вградените инструменти за SEO и интеграции означават, че имате всичко необходимо на едно място.
Следвайте стъпките в това ръководство и реалистично можете да имате работещ, изчистен уебсайт онлайн за по-малко от час.
