Як зробити сайт безкоштовно, якщо не вмієш програмувати
Ми зібрали сайт з портфоліо за 4 години і 0 рублів. Розповімо, як зробити так само.
Ліза Платонова
Автор Каталог статейа.
Навіщо мені сайт-візитка
У всіх крутих хлопців є свій сайт. Він як портфоліо: ти розповідаєш, що вмієш робити, показуєш приклади робіт і набиваешь собі ціну.
Сайт-візитка допомагає створити особистий бренд і грає роль безкоштовної реклами. Коли з’являється новий проект, про тебе згадують в першу чергу. Це мотивує розвиватися: хочеться робити роботу класно і додавати приклади на сайт.
До того ж, збираючи на одній сторінці проекти, в яких ти брав участь, бачиш результат — це не дає самооцінці впасти нижче плінтуса і допомагає впоратися з синдромом самозванця (коли здається, що нічого не вмієш і не знаєш).
Так я вирішила, що мені потрібен сайт, і зробила його в той же день.
Крок 1. Вибрати платформу
Я створювала сайт сама, без розробника і дизайнера. Для цього є чимало онлайн-платформ, які дають зібрати сторінку з готових шаблонів. Я використовувала конструктор «Тінькофф Бізнес». В ньому можна створювати сайти безкоштовно, навіть якщо ви не клієнт банку, і не потрібно купувати хостинг — він теж безкоштовний.
Крок 2. Вибрати шаблон сайту
У конструкторі є шаблони для різних бізнесів: кав’ярні дитячого центру оптової торгівлі, буріння свердловин, будівництва будинків. Відповідного мені шаблону для сайту-візитки не виявилося, тому я вибрала порожній і вирішила зібрати сторінку сама.
Крок 3. Придумати структуру
Коли створюєш сайт, хочеться відразу перейти до практичної частини: вибрати шаблони блоків, пробувати розставити їх в різній послідовності, експериментувати зі шрифтами і фонами. Я так і зробила, з-за чого витратила на годину більше. Це було не осмислене створення сайту, а тривала гра в конструктор. Потім зрозуміла свою помилку: немає сенсу додавати розрізнені елементи і переставляти їх з місця на місце. Потрібно спочатку зрозуміти, що буде на сайті.
Тому запам’ятайте: спочатку придумати структуру і заповнити сайт, потім працювати над оформленням.
Структура — це розділи сайту. Я хотіла показати, що вмію робити як автор, і навести приклади своїх робіт. Вийшли смислові блоки «Ігри», «Спецпроекти», «Тести» та «Статті». Ще мені потрібні обкладинка і розділ з контактами — разом шість змістовних блоків.
Розділи, які ви придумали, потім можна винести в шапку (верхню частину сайту). Це спростить навігацію: користувач зможе відразу перейти до потрібного блоку, а не скролл сторінку вниз.
Якщо не виходить придумати структуру, подивіться сайти-візитки людей вашої професії. Мені знадобилися сайт головного редактора Людмили Sary?evoj і портфоліо редактора Володимира Лебедя. На «Біржі Главреда» зібрані портфоліо авторів, копірайтерів, редакторів і коректорів — підглянути ідеї можна там.
Крок 4. Зробити обкладинку
Обкладинка — це перше, що бачить користувач, зайшовши на сайт. Вона формує враження про вас, тому постарайтеся зробити її класною.
Виберіть шаблон
У конструкторі сайтів «Тінькофф Бізнес» є сім шаблонів обкладинок. Якщо ви створюєте інтернет-магазин, підійде формат з фотографією на всю сторінку. Він дає розуміння, про що сайт: про шоколаді, сумки ручної роботи або весільних букетах.
Я створюю контент. Мені нема чого ставити на головну сторінку, крім себе, але на весь екран така фотографія не згодиться. Тому я вибрала шаблон з текстом зліва і фотографією праворуч:
Так виглядає шаблон без редагування
Налаштуйте шаблон під себе
У кожного блоку можна змінювати структуру, додаючи або видаляючи непотрібні елементи. Наприклад, мені не знадобилися надзаголовок, одна з кнопок та посилання на соцмережі, так що я їх прибрала.
Додайте фотографію
Селфи і знімки з відпустки не підійдуть, треба щось менш розслаблене. У мене не знайшлося підходящої фотографії, але був улюблений стікер з Telegram. Для початку я вирішила використати його, а потім заміню на своє фото. Якщо хочете, можна обійтися зовсім без нього: важливіше показати не який ви красивий, а що вмієте робити у своїй професії.
Напишіть про себе
Хто ви і чим займаєтеся? Повинно вийти ємко, інформативно і цікаво. Бажано бути щирим і показати, в чому ви сильні. У мене вийшло так:
Подивіться, що вийшло
Скористайтеся попереднім переглядом, перемикаючи іконки над панеллю редактора. Так ви побачите, як виглядатиме обкладинка на екрані десктопа, смартфона і планшета.
Крок 5. Додати смислові блоки
Коли обкладинка готова, переходите до смислових блоків. Ви придумали їх на другому кроці, а тепер потрібно перенести це на сторінку. Тут вам знадобляться шаблони конструктора. У «Тінькофф Бізнес» їх близько 150: «Про компанію», «Товари і послуги», «Етапи і кроки», «Фотографії», «Переваги» і інші.
Я вивчила всі варіанти і зупинилася на трьох блоках:
«Текст» — для опису проектів.
«Слайдер» — для візуального розповіді.
«Контакти» — щоб зі мною могли зв’язатися.
Налаштуйте кожен шаблон під себе, додавши або видаливши непотрібні елементи. Наприклад, у блоці «Слайдер» мені не потрібні були заголовок і опис — я їх відключила, залишивши лише картинку.
Скопіюйте повторювані елементи
Конструктор дозволяє копіювати блоки, які ви додали на сайт. Мені ця функція стала в пригоді: я застосувала її елементів «Текст» і «Слайдер» і розставила їх в потрібній послідовності.
Крок 6. Заповнити розділи
Напишіть текст для смислових блоків
У кожного розділу має бути заголовок, підзаголовок і опис. Не мудрувати і пишіть просто. Я так і вчинила: заголовок винесла назву проекту, в підзаголовок — короткий опис, а в основному тексті показала кількість переглядів і кліків.
Шаблон дозволяв додати надзаголовок, і в ньому я почала відповідати на питання «Що я вмію робити?» — так сайт став більш цілісним, а не просто комбінацією тексту і картинок
Текст можна підготувати заздалегідь, але я писала відразу на сайті — конструктор запам’ятовував зміни автоматично. Один раз я випадково оновила сторінку і була готова до того, що правки не збережуться. Але все було на своїх місцях, і мені не довелося заново редагувати блок.
Додайте фотографії
Мені потрібно було додати скріншоти своїх проектів. Я спробувала різні шаблони і вибрала слайдер: так я можу показати, як виглядав проект в десктопної і мобільного версій. Змінювати масштаб і повертати зображення можна прямо в конструкторі при завантаженні фотографій.
Крок 7. Настроїти переходи
Ви зробили обкладинку і заповнили розділи — сайт майже готовий. Тепер потрібно налаштувати навігацію, щоб відвідувач міг відразу перейти до потрібного блоку.
Виберіть один із шаблонів Меню сторінки». Я додала простий блок без логотипу, соцмереж та адреси.
Поміняйте текст і кількість кнопок. У мене вийшло п’ять: «Ігри», «Спецпроекти», «Тести», «Статті» і «Контакти».
Додайте посилання. Кнопки можуть вести на розділи сторінки (як у мене), на окремі сторінки сайту або направляти читача на інший сайт.
Конструктор дозволяє безкоштовно створювати будь-яку кількість сторінок і сайтів: ви можете зробити окремі сторінки для різних проектів, завести блог і все це винести в шапку.
Крок 8. Вибрати фони і шрифти
Коли все готово, переходьте до оформлення сайту. Простіше і швидше привести всі блоки до єдиного стилю відразу, ніж редагувати кожен окремо.
Виберіть фон для блоків
У конструкторі є бібліотека фонів: ілюстрації, градієнти, патерни і кольору. Можна завантажити і свій фон. Я вибрала темно-сірий для шапки сайту і кнопки на обкладинці — він поєднується зі стікером, який замінює мені фотографію. Інші блоки залишила білими.
Щоб вибрати шрифт, потрібно перейти редактора на головну сторінку конструктора і зайти в настройки.
У налаштуваннях є чотири шрифту на вибір. Спочатку здається, що це мало, але потім подумки дякуєш розробників: якби варіантів було більше, я б перебирала їх до вечора. А так спробувала всі чотири і зупинилася на першому.
Крок 9. Налаштувати сайт
Останні налаштування, і сайт можна опублікувати:
Придумайте адресу або підключіть свій домен.
Зв’яжіть сайт з аккаунтом «Яндекса», щоб дивитися статистику.
Додайте сайт «Яндекс.Вебмастер», щоб він швидше з’явився в пошуку.
Додайте чат на сайт — вам зможуть написати з будь-його сторінки.
Завантажте фавикон — значок сайту, який відображається у вкладці браузера.
Для фавикона можна використовувати будь-який значок, смайл або картинку. Главред «Т—Ж» Максим Ильяхов взагалі поставив свій портрет — чому ні? Я вибрала все той же улюблений стікер
Після цього знову зайдіть в редактор сторінки і натисніть на велику жовту кнопку «Опублікувати» в лівому верхньому кутку екрану. Готово! Тепер у вас є свій сайт-візитка.
Що в підсумку
Конструктор сайтів «Тінькофф Бізнес» простий і зрозумілий. Якщо у вас є текст і готові картинки, зібрати сторінку можна за 15 хвилин. Я провозилася з цим довше: експериментувала з фонами, не могла придумати чітку структуру і довго вибирала шаблони.
Спочатку мене бентежило, що в блоці не можна рухати елементи, змінювати розмір шрифту і зменшувати відстань між блоками. Але в цьому і плюс конструктора: рухати складові частини можна вічно, вивіряючи кожен міліметр. Готові шаблони позбавляють від мук вибору — хороша опція в наш час.
Створити свій сайт