Створення веб-сайту за 3 простих кроки

Вступ

• Створення веб-сайту ніколи не було простішим. Ця стаття підходить для тих, хто тільки починає і хоче мати онлайн-присутність, але не має поглиблених знань в IT. Чи це блог, сторінка-презентація для ресторану чи новинний портал, у вас буде все необхідне для сучасного та оптимізованого веб-сайту на всіх пристроях.

Вимоги

• Пакет хостингу Hostico
• Активний домен

Встановлення веб-сайту

• Як обіцяно в заголовку статті, всього за 3 кроки ми переходимо від новопридбаної послуги до доступного веб-сайту, який може конкурувати з багатьма сайтами, створеними досвідченими розробниками.
• Для подальшої конфігурації, як в плані контенту, так і дизайну, ми звернемося до наступних абзаців.

Крок 1 - Доступ до SiteBuilder (SitePad)

• Нам потрібно буде отримати доступ до панелі керування хостингом, на якій ми будемо встановлювати необхідні файли нашого вебсайту. Це буде зроблено за допомогою електронного листа, отриманого разом з покупкою хостингових послуг (Дані адміністрації хостингу)

• Одна з чотирьох адрес панелі управління повинна бути відкрита в обраному браузері (рекомендується Chrome або Firefox), подібно до звичайного веб-сайту. Після відкриття з'явиться сторінка, яка дозволить ввести ім'я користувача та пароль. Ці дані будуть узяті з раніше згаданого електронного листа, після чого ми завершимо аутентифікацію за допомогою Увійти кнопки.

• Після підключення в cPanel, ми перейдемо в кінець сторінки та отримуємо доступ до іконки SitePad Website Builder у категорії Програмне забезпечення

Крок 2 - Вибір теми

•  Після доступу до SitePad з cPanel, ми будемо перенаправлені на сторінку, де буде можливість встановити веб-сайт. Тут ми перейдемо до тексту створити новий сайт, а на наступній сторінці ми натискаємо Почати

                                                                                                                                         

• "Важка" частина починається саме зараз! Нам буде представлений каталог, який містить понад 535 графічних тем з різних сфер діяльності. Щоб завершити вибір теми, нічого простішого, ми натиснемо зелену кнопку Вибрати

Крок 3 - Завершення установки

• Остання частина полягає у заповненні деталей щодо нашого веб-сайту, і вони такі:
  
  1. Адреса сайту - Тут ви зможете вибрати домен, на якому ми хочемо встановити веб-сайт, директорію, де буде встановлено, а також протоколи безпеки. Наша рекомендація полягає в тому, щоб кожен сайт був встановлений з варіантом HTTPS, а поле директорії залишити незаповненим (якщо не потрібно за замовчуванням іншу папку), таким чином, кожен сайт буде встановлено в стандартну папку.
  
  2. Електронна пошта адміністратора - Ця адреса електронної пошти буде використовуватися для аутентифікації в панелі SitePad. Ви можете використовувати як публічну адресу (gmail, yahoo), так і електронну пошту, що належить вашому веб-сайту.
  
  3. Назва сайту - Назва, яка відображається на головній сторінці сайту. Це не має значення, що ми введемо, оскільки це можна буде змінити пізніше.
  
  4. Опис - Загальний опис веб-сторінки. Як і у випадку з назвою, ми можемо вставити що завгодно, оскільки це можна буде змінити пізніше.
  
  5. Мова сайту - Мова, на якій буде відображатися наш веб-сайт після встановлення.

 

• З правого боку можна за бажанням заповнити контактні дані. Після того, як ми впевнимося, що всі дані введені правильно, ми натиснемо кнопку Продовжити встановлення

• Якщо всі кроки були успішно виконані, ми отримаємо повідомлення про підтвердження, що установка сайту завершена, і налаштування може початися, звернувшись до Натисніть тут, щоб увійти на сайт і почати редагувати

• На даний момент, якщо ми отримуємо доступ до домену, на який ми встановили сайт, в браузері, ми зустрінемо інтерфейс, який ми вибрали раніше.
  

Налаштування веб-сайту

• Якщо ми досягли цього етапу, це означає, що ми успішно встановили наш новий веб-сайт. Хоча ми можемо думати, що робота закінчена, тільки тепер починається етап оформлення та доопрацювання.
• У наступному ми розглянемо всі аспекти, які потрібно змінити, щоб отримати остаточний веб-сайт і ефективно почати залучати визначену цільову аудиторію.

Тексти

• Кожна попередньо визначена тема містить тексти lorem ipsum (стандартний текст, що використовується для симуляції текстових блоків та полегшення оцінки дизайну веб-сайту), їх потрібно замінити.
• Цю дію можна виконати простим подвійним клацанням на текстовому полі. Розмір, колір, шрифт та інші елементи дизайну можна змінити з правої частини сторінки в секції Редагувати заголовок
  

Зображення

• Немає нічого поганого в тому, якщо ми зберігаємо початкові зображення, оскільки вони не мають спеціальних авторських прав, однак, щоб наш сайт не був ідентичним з іншими 1.000 користувачами, рекомендується (якщо ми маємо якісні зображення) замінити їх.
• Щоб це зробити, наведіть курсор на зображення, яке ви хочете замінити, і натисніть на синій олівець

• Звідси, з правого боку, ми переконуємося, що знаходимося на Стиль фону. Якщо ми не обов'язково хочемо додати зображення, ми завжди можемо вибрати варіант з однотонним кольором або градієнтом, але рекомендується використовувати зображення замість кольорів.

Кнопки

• Я вірю, ви вже зрозуміли ідею, будь-яке модифікацію дуже легко виконати, і оновлення кнопок не є винятком. Як і з зображеннями, кнопки модифікуються за допомогою синього олівця, що з'являється при наведенні миші на елемент, або шляхом клацання правою кнопкою миші та вибору опції Редагувати блок зображення

• Ще раз, меню, що відображається праворуч, допоможе нам зрозуміти аспекти, які можна реалізувати або видалити за вибором. Ми більше не будемо проходити через кожен елемент окремо, оскільки терміни є очевидними.

 

Сторінки

• Припустимо, ми хочемо додати додаткові сторінки на верхній частині сайту, які ведуть до різних розділів. Щоб додати сторінку, просто перейдіть до Сторінки та Створити нову

• З моменту початкової установки буде кілька сторінок з назвами, які, ймовірно, не будуть застосовні до нашого проекту і їх потрібно буде або змінити, або видалити. Ці дії можна виконати з налаштувань відповідної сторінки, які можна знайти вгорі поруч з логотипом SitePad.

                                                                                                                                                                                                                                   

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

 

Віджети

• Понад 40 віджетів можуть бути використані для налаштування сторінки на свій смак. Незалежно від того, чи говоримо ми про Google Maps, календар, таблиці чи інше, ми зможемо простим "перетягуванням" вставити будь-який елемент з величезною легкістю. Ці елементи можна знайти знову în правій частині сторінки під секцією Віджети

Гіперпосилання

• Існуватимуть ситуації, коли ми хочемо посилатися на іншу сторінку нашого веб-сайту, але не обов'язково через кнопку, а швидше через текст. Це досягається за допомогою гіперпосилань.
• Щоб додати гіперпосилання до нашого тексту, нам потрібно вибрати бажаний текст, а потім клацнути правою кнопкою миші на Редагувати стислий текст

• З уже знайомого меню ми виберемо іконку Посилання і вставимо посилання на сторінку, куди хочемо, щоб текст веде нас. Інші два поля, Заголовок і Ціль, також рекомендовано заповнити з причин SEO (додаткова інформація в наступному абзаці)

SEO

• Знайоме поняття, але це неправильно розуміється великою частиною власників вебсайтів. Коротко кажучи, це серія ідентифікаторів, які виділяють наш сайт серед інших сайтів в інтернеті та надають нам перевагу над конкуренцією. Чим краща оптимізація цих ідентифікаторів, тим вищою буде позиція в пошукових системах, а, отже, зросте кількість відвідувачів.
• Для нашого сайту SEO оптимізація може бути досягнута різними методами, але найпростіший спосіб - через кнопку, надану Site Builder

• Чим загальнішими є терміни, тим більша конкуренція, і шанси вашого сайту потрапити до топових пошуків лише за рахунок заповнення цих полів зменшаться.
• Якщо терміни є більш незвичними, позиціювання буде кращим, однак кількість тих, хто шукає ці слова, буде нижчою. Щодо SEO-оптимізації, необхідно знайти відповідний баланс.

• Якщо метатеги не будуть вставлені, вони автоматично будуть призначені, і шанси на те, що вони підійдуть для вашого сайту, будуть маленькими.
• Ви повинні враховувати, що SEO-оптимізація є різноманітним спектром, який може вимагати постійної роботи, і, більшістю часу, для досягнення значних результатів необхідне глибше розуміння концепції.

 

• Щоб переглянути зміни, внесені до цього часу, необхідно знову перейти до кнопки Оновлення, яка була раніше представлена, і натиснути Попередній перегляд. Наш сайт завантажиться з оновленнями, внесеними на останній сесії.

• Існує можливість, що ми могли помилитися в якийсь момент або просто нам не подобається обраний дизайн, що робимо, починаємо сайт з початку? Ні. Усі попередні версії можна переглянути в розділі History and Revision, тим самим у нас є впевненість, що завжди є можливість повернутися до "старішої" версії.
  

  

 

• Я почав статтю з того, що створення веб-сайту "ніколи не було легшим" і впевнений, що ви також вважаєте це, тепер, коли ваш веб-сайт успішно завершений.
  Є й інші аспекти, які потрібно реалізувати, перш ніж сайт буде "добре виконаним", але для початкової присутності це успішний старт.
  З часом ви звикнете до конструктора сайтів, і деякі аспекти будуть краще зрозумілі та простіше реалізовані.

Примітка

• Цей конструктор сайтів є програмою третьої сторони, що надається через постачальника, і він не розроблений безпосередньо командою Hostico.
• Встановлення сайту може бути реалізовано на доменах кількох, навіть якщо вони додані з одного і того ж хостингового пакету
• SSL сертифікати безпеки автоматично генеруються cPanel, коли сайт встановлюється на хостингу, і подальша ручна конфігурація не потрібна
• Застосунок SitePad в першу чергу призначений для людей, які шукають простий веб-сайт, що не обов'язково вимагає залучення розробника
• Site Builder не може бути використаний для веб-сайтів типу електронної комерції. Для цього ми рекомендуємо інші CMS платформи, такі як Prestashop, Magento, Wordpress + Woocommerce  які спеціально розроблені для цієї мети.
• Застосунок не постачається з попередньо визначеним інтерфейсом адміністрування бази даних. Усі записи робляться безпосередньо в PHPMyAdmin, і будь-який новий запис або запит повинен виконуватися безпосередньо з cPanel